Nextjs
Long Document
Loading
LocalCan · Docs
Deep forest technical grid, crisp white sans-serif against matte midnight green
Click any value to copy. Roles are suggestions, not gospel.
- #5c8cfcoklch(66.1% 0.174 265)Dominant
- #a8c3fcoklch(81.7% 0.086 265)Surface
- #022882oklch(32.6% 0.156 263)Ink
- #5e9c5doklch(63.4% 0.112 144)Accent
- #b2d4b0oklch(83.5% 0.061 144)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | inter | 48px | 700 | 1.08 | 0 | Aa Bb Cc |
| body | inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | inter | 14px | 500 | 1.43 | -0.35px | Aa Bb Cc |
| button | inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #5c8cfc;
--color-surface: #a8c3fc;
--color-ink: #022882;
--color-accent: #5e9c5d;
--color-detail: #b2d4b0;
}
/* CSS variables exposed by source */
:root {
--text-2xl: 1.5rem;
--color-accent2-700: lab(46.9999% -37.9767 35.3346);
--text-7xl: 4.5rem;
--text-lg: 1.125rem;
--color-accent2-950: lab(15.9426% -17.1153 14.2034);
--color-neutral-600: lab(34.924% 0 0);
--color-accent-border: color-mix(in oklch, lab(71.8425% -54.8011 51.331) 25%, transparent);
--color-neutral-500: lab(48.496% 0 0);
--color-neutral-300: lab(84.92% 0 -.0000119209);
--text-5xl--line-height: 1;
--color-stone-400: lab(66.2166% 1.88044 3.20326);
--text-base--line-height: calc(1.5 / 1);
--color-neutral-200: lab(90.952% 0 -.0000119209);
--font-mono: "cascadiaMono", "cascadiaMono Fallback", ui-monospace, monospace;
--color-stone-950: lab(2.86037% .455312 .568903);
--text-lg--line-height: calc(1.75 / 1.125);
--color-red-400: lab(63.7053% 60.745 31.3109);
--color-white: #fff;
--color-accent2-500: lab(71.8425% -54.8011 51.331);
--color-accent: lab(46.9999% -37.9767 35.3346);
--color-frost: lab(98.26% 0 0);
--color-stone-900: lab(9.03835% 1.15298 1.92955);
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-weight-bold: 700;
--color-line: lab(84.92% 0 -.0000119209);
--color-accent2-50: lab(98.291% -5.5193 4.44235);
--color-line-light: lab(90.952% 0 -.0000119209);
--text-xs--line-height: calc(1 / .75);
--color-neutral-700: lab(27.036% 0 0);
--color-lime-200: lab(94.0718% -22.5338 42.5238);
--color-neutral-50: lab(98.26% 0 0);
--radius-2xl: 1rem;
--radius-md: .375rem;
--text-7xl--line-height: 1;
--radius-lg: .5rem;
--color-neutral-900: lab(7.78201% -.0000149012 0);
--text-xl: 1.25rem;
--color-brew-word3: #404040;
--color-accent-surface: lab(98.291% -5.5193 4.44235);
--color-neutral-100: lab(96.52% -.0000298023 .0000119209);
--color-green-600: lab(59.0978% -58.6621 41.2579);
--color-faint: lab(48.496% 0 0);
--color-violet-300: lab(76.7419% 18.3911 -37.0706);
--color-stone-100: lab(96.5286% -.0991821 .364268);
--radius-3xl: 1.5rem;
--color-stone-500: lab(48.1164% 2.35701 4.26852);
--text-2xl--line-height: calc(2 / 1.5);
--spacing: .25rem;
--color-warning: #9f4d00;
--color-star: #ffc90b;
--color-stone-600: lab(35.5168% 1.08604 4.07829);
--text-xl--line-height: calc(1.75 / 1.25);
--color-accent2-800: lab(37.4992% -30.09 26.3531);
--font-weight-semibold: 600;
--text-sm: .875rem;
--color-green-400: lab(78.503% -64.9265 39.7492);
--color-blue-500: lab(54.1736% 13.3369 -74.6839);
--color-muted: lab(34.924% 0 0);
--color-accent2-300: lab(89.7144% -33.9259 29.5351);
--color-surface: #fff;
}Drop-in prompt
Build a landing page in the visual style of LocalCan · Docs.
Reference design system (extracted from the live site):
- Palette: #5c8cfc, #a8c3fc, #022882, #5e9c5d, #b2d4b0
- Typefaces: inter
- Macrostructure: Long Document
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/localcan-com--docs
