Plaid
Split Studio
Loading
Polar — A billing platform for the intelligence era | Polar
Deep indigo expanse, clean sans-serif geometry, open, airy technical precision.
Click any value to copy. Roles are suggestions, not gospel.
- #5170adoklch(54.9% 0.102 263)Dominant
- #f4fcfcoklch(98.5% 0.008 197)Surface
- #151d2doklch(23.1% 0.033 264)Ink
- #747484oklch(56.5% 0.024 286)Accent
- #acacbcoklch(74.9% 0.023 286)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | PP Neue Montreal | 96px | 400 | 1 | 0 | Aa Bb Cc |
| h2 | PP Neue Montreal | 48px | 500 | 1.25 | 0 | Aa Bb Cc |
| h3 | PP Neue Montreal | 30px | 500 | 1.38 | 0 | Aa Bb Cc |
| body | PP Neue Montreal | 16px | 450 | 1.5 | 0.24px | Aa Bb Cc |
| caption | PP Neue Montreal | 14px | 550 | 1.43 | 0.14px | Aa Bb Cc |
| button | PP Neue Montreal | 16px | 450 | 1.5 | 0.24px | Aa Bb Cc |
:root {
--color-dominant: #5170ad;
--color-surface: #f4fcfc;
--color-ink: #151d2d;
--color-accent: #747484;
--color-detail: #acacbc;
}
/* CSS variables exposed by source */
:root {
--border: #202022;
--color-zinc-100: lab(96.1634% .0993311 -.364041);
--color-violet-600: lab(41.088% 68.9966 -91.995);
--color-red-900: lab(28.5139% 44.5539 29.0463);
--primary-foreground: #d7d8da;
--color-blue-700: lab(36.9089% 35.0961 -85.6872);
--color-polar-300: #9a9ba2;
--radius-4xl: 2rem;
--text-base--line-height: calc(1.5 / 1);
--color-blue-300: lab(77.5052% -6.4629 -36.42);
--color-card-foreground: #d7d8da;
--color-gray-300: lab(85.1236% -.612259 -3.7138);
--color-yellow-400: lab(83.2664% 8.65132 106.895);
--font-mono: "GeistMono", monospace;
--color-gray-500: lab(47.7841% -.393182 -10.0268);
--color-primary-foreground: #d7d8da;
--color-sidebar: #090909;
--color-green-500: lab(66.9756% -58.27 19.5419);
--color-sidebar-border: #202022;
--color-white: #fff;
--color-polar-900: #101011;
--color-accent: lab(44.0605% 29.0279 -86.0352);
--color-popover: #101011;
--radius-sm: calc(.6rem - 4px);
--color-gray-400: lab(65.9269% -.832707 -8.17473);
--color-yellow-300: lab(89.7033% -.480294 84.4917);
--font-weight-bold: 700;
--color-blue-400: lab(65.0361% -1.42065 -56.9802);
--color-gray-100: lab(96.1596% -.0823438 -1.13575);
--color-input: #202022;
--color-purple-600: lab(43.0295% 75.21 -86.5669);
--text-xs--line-height: calc(1 / .75);
--color-violet-500: lab(49.9355% 55.1776 -81.8963);
--color-green-900: lab(28.8637% -26.9249 5.45986);
--radius-2xl: 1rem;
--radius-md: calc(.6rem - 2px);
--radius-lg: .6rem;
--text-xl: 1.25rem;
--color-neutral-100: lab(96.52% -.0000298023 .0000119209);
--color-blue-100: lab(92.0301% -2.24757 -11.6453);
--color-green-600: lab(55.0481% -49.9246 15.93);
--text-xxs: .65rem;
--color-green-950: lab(15.0582% -17.9507 2.38369);
--color-yellow-950: lab(16.8146% 15.7422 23.1133);
--color-violet-950: lab(14.0706% 33.3353 -46.7553);
--accent: lab(44.0605% 29.0279 -86.0352);
--color-brand-foreground: #bdbdbd;
--color-zinc-900: lab(8.30603% .618205 -2.16572);
--color-red-300: lab(76.5514% 36.422 15.5335);
--color-emerald-900: lab(28.8637% -26.9249 5.45986);
--text-2xl--line-height: calc(2 / 1.5);
--secondary-foreground: #d7d8da;
--spacing: .25rem;
--background: #171719;
--color-secondary: #101011;
--text-xl--line-height: calc(1.75 / 1.25);
--text-sm: .875rem;
--color-green-400: lab(75.0771% -60.7313 19.4147);
--color-emerald-500: lab(66.9756% -58.27 19.5419);
--color-yellow-50: lab(98.6846% -1.79055 9.7766);
}Drop-in prompt
Build a landing page in the visual style of Polar — A billing platform for the intelligence era | Polar.
Reference design system (extracted from the live site):
- Palette: #5170ad, #f4fcfc, #151d2d, #747484, #acacbc
- Typefaces: PP Neue Montreal
- Macrostructure: Split Studio
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/polar-sh
