Capacities
Ecosystem Index
Soft, muted pastels float across a clean, open expanse, type whispers with quiet precision.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | UntitledSerifFont | 66px | 400 | 1 | -1.98px | Aa Bb Cc |
| h2 | UntitledSerifFont | 54px | 400 | 1.1 | -1.08px | Aa Bb Cc |
| h3 | UntitledSerifFont | 46px | 400 | 1.22 | -1.38px | Aa Bb Cc |
| body | UntitledSansFont | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | UntitledSansFont | 16px | 500 | 1.5 | 0.16px | Aa Bb Cc |
| button | UntitledSansFont | 16px | 400 | 1.4 | -0.32px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e9bd15;
--color-surface: #79620a;
--color-ink: #f5e090;
--color-accent: #89b371;
--color-detail: #acc3ba;
}
/* CSS variables exposed by source */
:root {
--border: #03030217;
--color-black-900: #030302;
--color-black-500: #03030280;
--color-orange-4: #b25620;
--text-2xl: 1.5rem;
--color-green-4: #3f8850;
--color-zinc-200: oklch(92% .004 286.32);
--color-amber-400: oklch(82.8% .189 84.429);
--text-base: 1rem;
--color-purple-500: oklch(62.7% .265 303.9);
--color-sky-500: oklch(68.5% .169 237.323);
--color-yellow-600: oklch(68.1% .162 75.834);
--text-7xl: 4.5rem;
--text-lg: 1.125rem;
--color-neutral-600: oklch(43.9% 0 0);
--primary-foreground: #030302;
--color-neutral-500: oklch(55.6% 0 0);
--color-blue-700: oklch(48.8% .243 264.376);
--text-5xl--line-height: 1;
--text-base--line-height: calc(1.5 / 1);
--radius-4xl: 2rem;
--color-neutral-200: oklch(92.2% 0 0);
--color-blue-300: oklch(80.9% .105 251.813);
--color-gray-300: oklch(87.2% .01 258.338);
--accent-foreground: #030302;
--font-untitled-sans: "UntitledSansFont","UntitledSansFont Fallback";
--color-purple-900: oklch(38.1% .176 304.987);
--color-red-4: #bb433a;
--color-amber-300: oklch(87.9% .169 91.605);
--color-gray-500: oklch(55.1% .027 264.364);
--color-blue-4: #427e8a;
--color-green-500: oklch(72.3% .219 149.579);
--color-gray-50: oklch(98.5% .002 247.839);
--text-lg--line-height: calc(1.75 / 1.125);
--color-white: #fff;
--color-red-400: oklch(70.4% .191 22.216);
--color-gray-400: oklch(70.7% .022 261.325);
--color-blue-400: oklch(70.7% .165 254.624);
--font-sans: "UntitledSansFont","UntitledSansFont Fallback","apple-system","InterFont","InterFont Fallback","BlinkMacSystemFont","Helvetica Neue","Helvetica","Arial","sans-serif";
--color-yellow-300: oklch(90.5% .182 98.111);
--radius: .625rem;
--font-weight-bold: 700;
--color-gray-100: oklch(96.7% .003 264.542);
--color-red-500: oklch(63.7% .237 25.331);
--color-zinc-300: oklch(87.1% .006 286.286);
--text-6xl: 3.75rem;
--color-purple-4: #4b68c3;
--font-weight-light: 300;
--text-xs--line-height: calc(1 / .75);
--color-neutral-700: oklch(37.1% 0 0);
--font-inter: "InterFont","InterFont Fallback";
--color-amber-800: oklch(47.3% .137 46.201);
--color-black-50: #0303020a;
--radius-2xl: 1rem;
--color-blue-800: oklch(42.4% .199 265.638);
--text-7xl--line-height: 1;
--text-xl: 1.25rem;
--color-neutral-900: oklch(20.5% 0 0);
--color-black-200: #0303021f;
--color-yellow-100: oklch(97.3% .071 103.193);
}Drop-in prompt
Build a landing page in the visual style of Craft Do.
Reference design system (extracted from the live site):
- Palette: #e9bd15, #79620a, #f5e090, #89b371, #acc3ba
- Typefaces: UntitledSerifFont, UntitledSansFont
- Macrostructure: Ecosystem Index
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/craft-do--app-templates-time-log