Ritual
Marquee Hero
Loading
Dirty Vine
Sun-drenched rustic feast, golden serif type floating over raw linen textures
Click any value to copy. Roles are suggestions, not gospel.
- #936f43oklch(56.8% 0.076 71)Dominant
- #d5bfa3oklch(81.6% 0.045 74)Surface
- #6d5d1coklch(48.1% 0.085 95)Ink
- #948b5eoklch(63.3% 0.063 98)Accent
- #d0bda0oklch(80.7% 0.045 78)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | swear-text | 24px | 500 | 1.14 | -0.48px | Aa Bb Cc |
| h2 | swear-display | 32px | 500 | 0.9 | -0.64px | Aa Bb Cc |
| h3 | swear-text | 24px | 600 | 0.95 | -0.48px | Aa Bb Cc |
| body | swear-text | 24px | 500 | 1.14 | -0.48px | Aa Bb Cc |
| button | swear-text | 24px | 500 | 1.14 | -0.48px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #936f43;
--color-surface: #d5bfa3;
--color-ink: #6d5d1c;
--color-accent: #948b5e;
--color-detail: #d0bda0;
}
/* CSS variables exposed by source */
:root {
--color-earth: #3a6443;
--border-radius: 20px;
--color-sand: #f4ebde;
--color-rose: #f8d1b2;
--font-mono: "DM Mono", monospace;
--color-accent: #29a45a;
--color-text: #3a6443;
--color-error: #9C2F27;
--color-background: #f9f5ee;
--color-cloud: #f9f5ee;
--font-serif: "swear-text", serif;
--color-sky: #c0e9ec;
--font-display: "swear-display", serif;
--color-sunshine: #f1e776;
--color-vine: #29a45a;
--color-tea: #a5e4be;
--body-size: 1.5rem;
--h3-size: 2rem;
--header-color: #f9f5ee;
--inner-height: 1.125rem;
--body-font: "swear-text", serif;
--small-size: 1rem;
--h1-size: 4rem;
--button-line: 1;
--z-menu: 98;
--z-cart: 102;
--button-font: "DM Mono", monospace;
--z-popup: 103;
--small-font: "swear-text", serif;
--body-weight: 500;
--announcement-bar: 0px;
--h1-font: "swear-display", serif;
--h3-font: "swear-display", serif;
--bar-color: currentColor;
--outer-padding: .375rem;
--h2-letter: -.02em;
--z-sticky: 97;
--outer-height: calc(1.125rem + calc(calc(.375rem * 2)));
--h1-letter: -.02em;
--h5-font: "DM Mono", monospace;
--h4-line: .95;
--button-letter: .02em;
--h3-weight: 500;
--h3-letter: -.02em;
--button-size: .87rem;
--bar-gap: calc(calc(1.125rem - calc(1px * 3)) / 2);
--h3-line: .9;
--body-line: 1.14;
--transition-ease: ease-in-out;
--outer-width: calc(1.75rem + calc(.375rem * 2));
--h2-line: .9;
--swiper-theme-color: #007aff;
--h5-letter: .02em;
--bar-radius: 0px;
--small-line: 1.1;
--bar-height: 1px;
--h4-font: "swear-text", serif;
--header-bar: 80px;
--h2-font: "swear-display", serif;
--h2-weight: 500;
}Drop-in prompt
Build a landing page in the visual style of Dirty Vine.
Reference design system (extracted from the live site):
- Palette: #936f43, #d5bfa3, #6d5d1c, #948b5e, #d0bda0
- Typefaces: swear-text, swear-display
- 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/dirtyvine-com
