Alma
Marquee Hero
Loading
Baba
Saturated crimson warmth, bold rounded white type, floating soft grey bubbles
Click any value to copy. Roles are suggestions, not gospel.
- #d52c26oklch(56.8% 0.205 28)Dominant
- #e49494oklch(74.7% 0.097 20)Surface
- #a6360coklch(49.3% 0.155 38)Ink
- #6c8494oklch(60.0% 0.037 237)Accent
- #bcccd4oklch(83.5% 0.021 229)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Söhne | 68px | 600 | 1 | -2.04px | Aa Bb Cc |
| h2 | Söhne | 56px | 600 | 1.05 | -1.68px | Aa Bb Cc |
| h3 | Atkinson Hyperlegible Next | 15px | 500 | 1.2 | -0.3px | Aa Bb Cc |
| body | -apple-system | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Atkinson Hyperlegible Next | 14px | 600 | 1.43 | 0 | Aa Bb Cc |
| button | Atkinson Hyperlegible Next | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #d52c26;
--color-surface: #e49494;
--color-ink: #a6360c;
--color-accent: #6c8494;
--color-detail: #bcccd4;
}
/* CSS variables exposed by source */
:root {
--border: #e7e7e3;
--text-2xl: 1.5rem;
--color-landing-cream: #faf9f1;
--text-lg: 1.125rem;
--font-section-base: "Söhne", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
--primary-foreground: #fafafa;
--text-5xl--line-height: 1;
--text-base--line-height: 1.5;
--accent-foreground: #193486;
--color-landing-ink: #2a1d18;
--font-serif-base: "Faire Octave", Georgia, "Times New Roman", serif;
--text-lg--line-height: calc(1.75 / 1.125);
--color-white: #fff;
--color-landing-red: #fa2424;
--color-popover: #fffefa;
--radius-landing-pill: 9999px;
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--radius: .625rem;
--radius-landing-card: 1.5rem;
--text-6xl: 3.75rem;
--text-xs--line-height: calc(1 / .75);
--color-landing-ink-soft: #3e312c;
--color-landing-white: #fff;
--radius-2xl: 1rem;
--color-landing-sky-900: #386196;
--text-xl: 1.25rem;
--font-brand-base: "GT Eesti Display", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
--font-heading: "Faire Octave", Georgia, "Times New Roman", serif;
--font-landing-sans: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--accent: #e2eaff;
--color-landing-maroon-900: #3d0017;
--color-landing-navy: #193486;
--color-landing-sky-800: #4976a4;
--radius-3xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--secondary-foreground: #1e1f1e;
--spacing: .25rem;
--color-landing-red-deep: #bc2823;
--background: #faf9f1;
--color-landing-sky-700: #6c9fcb;
--color-landing-cream-warm: #f8f3ec;
--text-xl--line-height: calc(1.75 / 1.25);
--font-weight-semibold: 600;
--text-sm: .875rem;
--radius-landing-card-lg: 2rem;
--color-popover-foreground: #1e1f1e;
--font-sans-base: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--radius-landing-card-sm: 1rem;
--color-landing-sky-300: #a9ccff;
--text-4xl: 2.25rem;
--color-landing-red-cta: #ea1111;
--text-sm--line-height: calc(1.25 / .875);
--color-border: #e7e7e3;
--color-landing-blush: #f8e2db;
--text-3xl--line-height: 1.2;
--text-5xl: 3rem;
--color-landing-maroon-950: #25040e;
--color-black: #000;
--text-xs: .75rem;
--text-3xl: 1.875rem;
}Drop-in prompt
Build a landing page in the visual style of Baba.
Reference design system (extracted from the live site):
- Palette: #d52c26, #e49494, #a6360c, #6c8494, #bcccd4
- Typefaces: Söhne, -apple-system, Atkinson Hyperlegible Next
- Macrostructure: Marquee Hero
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/callbaba-com
