Mode

Open Preset

Preset code

Style

Base

Accent

Charts

Radius

Body Font

Heading Font

Navigation

:root {
	--radius: 0.7rem;
	--background: oklch(0.988 0.003 95);
	--foreground: oklch(0.190 0.006 95);
	--card: oklch(0.998 0.002 95);
	--card-foreground: oklch(0.190 0.006 95);
	--popover: oklch(0.998 0.002 95);
	--popover-foreground: oklch(0.190 0.006 95);
	--primary: oklch(0.580 0.190 42);
	--primary-foreground: oklch(0.985 0.006 42);
	--secondary: oklch(0.955 0.006 95);
	--secondary-foreground: oklch(0.220 0.006 95);
	--muted: oklch(0.955 0.006 95);
	--muted-foreground: oklch(0.500 0.008 95);
	--accent: oklch(0.940 0.006 42);
	--accent-foreground: oklch(0.220 0.006 95);
	--destructive: oklch(0.577 0.245 27);
	--border: oklch(0.890 0.007 95);
	--input: oklch(0.890 0.007 95);
	--ring: oklch(0.640 0.190 42);
	--signal: oklch(0.620 0.190 42);
	--signal-foreground: oklch(0.985 0.006 42);
	--signal-soft: oklch(0.880 0.095 42);
	--sidebar: oklch(0.975 0.004 95);
	--sidebar-foreground: oklch(0.190 0.006 95);
	--sidebar-primary: oklch(0.580 0.190 42);
	--sidebar-primary-foreground: oklch(0.985 0.006 42);
	--sidebar-accent: oklch(0.940 0.006 42);
	--sidebar-accent-foreground: oklch(0.220 0.006 95);
	--sidebar-border: oklch(0.890 0.007 95);
	--sidebar-ring: oklch(0.640 0.190 42);
	--chart-1: oklch(0.640 0.190 42);
	--chart-2: oklch(0.625 0.190 107);
	--chart-3: oklch(0.670 0.190 162);
	--chart-4: oklch(0.715 0.190 222);
	--chart-5: oklch(0.760 0.190 287);
	--pp-theme-density: 1;
	--pp-theme-card-padding: 1rem;
	--pp-theme-section-gap: 1rem;
	--pp-theme-border-width: 1px;
	--pp-theme-shadow-alpha: 8%;
	--pp-theme-font: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
	--pp-theme-heading-font: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
}

.dark {
	--background: oklch(0.160 0.006 95);
	--foreground: oklch(0.960 0.004 95);
	--card: oklch(0.200 0.007 95);
	--card-foreground: oklch(0.960 0.004 95);
	--popover: oklch(0.200 0.007 95);
	--popover-foreground: oklch(0.960 0.004 95);
	--primary: oklch(0.720 0.190 42);
	--primary-foreground: oklch(0.170 0.032 42);
	--secondary: oklch(0.250 0.008 95);
	--secondary-foreground: oklch(0.960 0.004 95);
	--muted: oklch(0.250 0.008 95);
	--muted-foreground: oklch(0.700 0.009 95);
	--accent: oklch(0.280 0.009 42);
	--accent-foreground: oklch(0.960 0.004 95);
	--destructive: oklch(0.704 0.191 22);
	--border: oklch(1.000 0.000 0 / 10%);
	--input: oklch(1.000 0.000 0 / 15%);
	--ring: oklch(0.720 0.190 42);
	--signal: oklch(0.720 0.190 42);
	--signal-foreground: oklch(0.170 0.032 42);
	--signal-soft: oklch(0.340 0.095 42);
	--sidebar: oklch(0.205 0.006 95);
	--sidebar-foreground: oklch(0.985 0.000 0);
	--sidebar-primary: oklch(0.720 0.190 42);
	--sidebar-primary-foreground: oklch(0.170 0.032 42);
	--sidebar-accent: oklch(0.269 0.000 42);
	--sidebar-accent-foreground: oklch(0.985 0.000 0);
	--sidebar-border: oklch(1.000 0.000 0 / 10%);
	--sidebar-ring: oklch(0.720 0.190 42);
	--chart-1: oklch(0.640 0.190 42);
	--chart-2: oklch(0.625 0.190 107);
	--chart-3: oklch(0.670 0.190 162);
	--chart-4: oklch(0.715 0.190 222);
	--chart-5: oklch(0.760 0.190 287);
	--pp-theme-density: 1;
	--pp-theme-card-padding: 1rem;
	--pp-theme-section-gap: 1rem;
	--pp-theme-border-width: 1px;
	--pp-theme-shadow-alpha: 8%;
	--pp-theme-font: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
	--pp-theme-heading-font: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
}

Theme preview

Visual sample only. Sample controls are inactive.

Workspace

Launch Command

Product operating system

Launch the whole product surface from one clean base.

A landing page, workspace console, billing controls, and developer tools that share the same tokens.

Workspace health

Live

18 Seats

92k API calls

Auth

Profiles, sessions, OAuth, and onboarding.

Billing

Plans, entitlements, portal, and checkout.

Developer

API keys, scopes, revocation, and usage.

Customer Status MRR

Acme Labs Active $420

Pioneer AI Trial $99

Northwind Active $260