Ritual
Marquee Hero




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 | Newsreader | 45px | 400 | 1 | -2.04px | Aa Bb Cc |
| h2 | Manrope | 16px | 800 | 1.2 | 0 | Aa Bb Cc |
| h3 | Newsreader | 29px | 400 | 1 | -1.29px | Aa Bb Cc |
| body | Newsreader | 20px | 400 | 1.5 | -0.88px | Aa Bb Cc |
| button | Newsreader | 24px | 400 | 1.5 | -0.88px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #dd893c;
--color-surface: #e1ac5c;
--color-ink: #8c2814;
--color-accent: #64ac94;
--color-detail: #cdc4b5;
}
/* CSS variables exposed by source */
:root {
--primary--accent-dark: #c59057;
--primary--background: #efe7d6;
--primary--border: black;
--primary--accent: #175136;
--primary--text: black;
--_layout---spacing--margin-xl: 4.5rem;
--_size---0-75rem<deleted|variable-51df6ead-a71c-263d-332f-348c569f6d5f>: .75rem;
--_layout---spacing--margin-xs: .5rem;
--_typography---h5--font: Manrope, sans-serif;
--_typography---type-paragraph-lg--font-size-md<deleted|variable-cdbe9950-9272-2284-ccf6-60cab96acd5f>: 1.25rem;
--_typography---eyebrow--bottom-margin: 1rem;
--_color---primary--green: #175136;
--_components---button--line-height: 1em;
--_typography---fonts--primary-font: Newsreader, sans-serif;
--_typography---paragraph-lg--font-size-min-rem: 1.5;
--_components---input-label--font-size: 1rem;
--_typography---paragraph-sm--font-weight: 400;
--_typography---eyebrow--font-size-min-rem: 1;
--_components---input-label--font-weight: 800;
--_components---container--max-width: calc(200 * 1rem);
--_components---button--horizontal-padding: 0em;
--_typography---paragraph-lg--bottom-margin: 1em;
--_typography---h3--font-size-max-rem: 1;
--_layout---grid--gap-main: 40px;
--_layout---grid--gap-md: 24px;
--_typography---h4--font-size-min-rem: 1.3;
--_components---input--letter-spacing: -.02rem;
--_typography---paragraph-md--font-size-min-rem: 1.125;
--_typography---h2--letter-spacing: -.1rem;
--_components---input--font: Newsreader, sans-serif;
--_typography---fonts--accent-font: Affigere, Arial, sans-serif;
--_components---section--padding-min-rem: 1.5;
--_components---input--font-size: 1rem;
--_layout---fluid--max: 200;
--_typography---h4--font-size-max-rem: 1.5;
--_typography---paragraph-body--bottom-margin: 1em;
--_typography---h5--line-height: 1.4;
--_typography---h5--font-weight: 500;
--_typography---paragraph-md--line-height: 1.5;
--_layout---fluid--min: 20;
--_typography---paragraph-md--font: Newsreader, sans-serif;
--_typography---h1--font-size: clamp(3.5 * 1rem, ((3.5 - ((6.25 - 3.5) / (200 - 20) * 20)) * 1rem + ((6.25 - 3.5) / (200 - 20)) * 100vw), 6.25 * 1rem);
--_components---button--font-weight: 700;
--_layout---spacing--margin-md: 2rem;
--_typography---paragraph-body--font-size-max-rem: 1.375;
--_layout---spacing--margin-xxl: 6rem;
--swiper-theme-color: #007aff;
--_typography---h6--letter-spacing: 0em;
--_typography---paragraph-body--font-weight: 400;
--_typography---h6--font-size-max-rem: 1;
--_typography---h2--bottom-margin: 0em;
--_typography---h2--font: Manrope, sans-serif;
--_components---input-label--font: Manrope, sans-serif;
--_components---input--border-radius: 0rem;
--_typography---h6--font-size: clamp(.9 * 1rem, ((.9 - ((1 - .9) / (200 - 20) * 20)) * 1rem + ((1 - .9) / (200 - 20)) * 100vw), 1 * 1rem);
--_typography---paragraph-lg--font: Newsreader, sans-serif;
--_typography---paragraph-body--letter-spacing: -.045em;
--_components---section--padding: clamp(1.5 * 1rem, ((1.5 - ((3 - 1.5) / (200 - 20) * 20)) * 1rem + ((3 - 1.5) / (200 - 20)) * 100vw), 3 * 1rem);
--_typography---paragraph-lg--font-weight: 400;
--_responsive---padding--card<deleted|variable-5fcf010a-6fe9-5ba2-24fb-53a12ac0d5b0>: 1.5rem;
}Drop-in prompt
Build a landing page in the visual style of General Dental.
Reference design system (extracted from the live site):
- Palette: #dd893c, #e1ac5c, #8c2814, #64ac94, #cdc4b5
- Typefaces: Newsreader, Manrope
- 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/generaldental-ca