Louispoulsen
Marquee Hero
Loading
Ritual
Warm, airy minimalism: soft yellow hues, clean sans-serif, generous white space breathes clarity.
Click any value to copy. Roles are suggestions, not gospel.
- #d45404oklch(60.6% 0.177 43)Dominant
- #faeda4oklch(94.0% 0.093 99)Surface
- #142c6coklch(31.8% 0.116 265)Ink
- #a7654coklch(57.4% 0.093 41)Accent
- #93a8c6oklch(72.6% 0.050 257)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | CircularXX | 66px | 450 | 1.1 | -1.32px | Aa Bb Cc |
| h2 | CircularXX | 48px | 450 | 1.2 | -0.48px | Aa Bb Cc |
| h3 | CircularXX | 32px | 450 | 1.25 | -0.32px | Aa Bb Cc |
| body | CircularXX | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | CircularXX | 12px | 450 | 1.5 | 0 | Aa Bb Cc |
| button | Arial | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #d45404;
--color-surface: #faeda4;
--color-ink: #142c6c;
--color-accent: #a7654c;
--color-detail: #93a8c6;
}
/* CSS variables exposed by source */
:root {
--color-brand-05: #FFF7CC;
--text-base--line-height: calc(1.5/1);
--color-gray-300: lab(85.1236% -.612289 -3.7138);
--color-white: #fff;
--color-gray-400: lab(65.9269% -.832677 -8.17474);
--color-primitive-cool-100: #c3cfd5;
--color-brand-11: #F5F7F8;
--color-accent-02: #717171;
--color-primitive-warm-100: #e4c25e;
--color-link-inverse: #fff;
--color-focus: #4B3DC4;
--color-grey-300: #b3b2b1;
--text-sm: .875rem;
--color-primitive-cool-40: #eaeef0;
--color-primitive-success: #4c840d;
--color-foreground: #142b6f;
--color-background-secondary: #fef6eb;
--color-primitive-warm-60: #f0dba8;
--color-primitive-indigo-blue-80: #43558c;
--color-grey-200: #fef6eb;
--color-foreground-secondary-inverse: #f6ede0;
--color-border-01-inverse: #717171;
--color-primitive-yellow-80: #ffde33;
--color-brand-06: #E4C25E;
--color-primitive-yellow-60: #ffe666;
--color-primitive-cool-20: #f5f7f8;
--color-primitive-warning: #db7f16;
--color-green: #005e16;
--color-accent-02-inverse: #ab4824;
--color-stone-100: lab(96.5286% -.0991821 .364268);
--color-brand-07: #F6EACB;
--color-success: #4C840D;
--color-gray-900: lab(8.11897% .811271 -12.254);
--color-grey-400: #717171;
--text-sm--line-height: calc(1.25/.875);
--text-xs: .75rem;
--font-weight-medium: 500;
--font-weight-normal: 400;
--color-primitive-indigo-blue-60: #62719f;
--color-primitive-indigo-blue-100: #142b6f;
--text-base: 1rem;
--color-primitive-warm-20: #fcf8ee;
--color-disabled-inverse: #717171;
--color-grey-100: #f6ede0;
--color-foreground-secondary: #717171;
--color-border-02: #717171;
--color-neutral-200: lab(90.952% 0 -.0000119209);
--color-border-01: #b3b2b1;
--font-family-primary: "CircularXX";
--color-accent-01-inverse: #ab4824;
--font-weight-bold: 700;
--color-primitive-danger: #c83d1e;
--text-xs--line-height: calc(1/.75);
--font-family-secondary: "Dutch801 Rm BT";
--color-primitive-yellow-20: #fff7cc;
--radius-2xl: 1rem;
--text-xl: 1.25rem;
--color-primitive-focus: #4b3dc4;
--color-background-secondary-inverse: #b3b2b1;
--color-brand-03: #FFD600;
}Drop-in prompt
Build a landing page in the visual style of Ritual.
Reference design system (extracted from the live site):
- Palette: #d45404, #faeda4, #142c6c, #a7654c, #93a8c6
- Typefaces: CircularXX, Arial
- 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/ritual-com
