Are Na
Split Studio
Loading
Hodinkee
Understated, warm paper textures; clean, confident sans serif; a palette of muted earth tones.
Click any value to copy. Roles are suggestions, not gospel.
- #89abd8oklch(73.3% 0.076 256)Dominant
- #735234oklch(46.7% 0.062 63)Surface
- #edcba4oklch(86.1% 0.064 71)Ink
- #918173oklch(61.4% 0.028 63)Accent
- #9ca4ccoklch(72.6% 0.059 276)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Portrait Inline | 51px | 400 | 1.5 | 0 | Aa Bb Cc |
| h3 | Portrait | 36px | 500 | 1.1 | 0 | Aa Bb Cc |
| body | Proxima Nova | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Ivar Text | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | Proxima Nova | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #89abd8;
--color-surface: #735234;
--color-ink: #edcba4;
--color-accent: #918173;
--color-detail: #9ca4cc;
}
/* CSS variables exposed by source */
:root {
--lume-card-border: rgba(216,218,218,1);
--tw-ring-offset-shadow: 0 0 transparent;
--lume-btn-disabled-border: rgba(0,0,0,0.2);
--tw-ring-shadow: 0 0 transparent;
--lume-input-disabled-bg: rgba(255,255,255,1);
--lume-ctrl-secondary-border: rgba(216,218,218,1);
--lume-chip-disabled-border: rgba(216,218,218,1);
--lume-link-focus-ring: rgba(0,0,0,0.2);
--lume-ctrl-primary-text: rgba(255,255,255,1);
--lume-prose-link-hover: rgba(12,12,12,1);
--lume-chip-border: rgba(216,218,218,1);
--lume-input-disabled-border: rgba(0,0,0,0.2);
--lume-blockquote-border: rgba(216,218,218,1);
--lume-input-border: rgba(216,218,218,1);
--lume-link-disabled-text: rgba(177,181,181,1);
--lume-select-bg: rgba(255,255,255,1);
--lume-select-text: rgba(26,27,27,1);
--lume-chip-selected-bg: rgba(41,42,42,1);
--lume-btn-primary-hover-bg: rgba(26,27,27,1);
--lume-input-readonly-bg: rgba(245,247,247,1);
--lume-input-readonly-text: rgba(118,122,122,1);
--tw-border-spacing-x: 0;
--lume-btn-tertiary-text: rgba(26,27,27,1);
--lume-btn-disabled-text: rgba(0,0,0,0.2);
--lume-btn-primary-active-bg: rgba(0,0,0,1);
--lume-btn-tertiary-active-bg: rgba(234,236,236,1);
--lume-input-focus-ring: rgba(0,0,0,0.2);
--lume-label-default-bg: rgba(216,218,218,1);
--tw-scale-y: 1;
--lume-chip-text: rgba(26,27,27,1);
--lume-btn-primary-bg: rgba(41,42,42,1);
--tw-ring-color: rgb(59 130 246/0.5);
--lume-radio-border: rgba(118,122,122,1);
--lume-btn-secondary-active-border: rgba(26,27,27,1);
--lume-check-hover: rgba(118,122,122,1);
--tw-translate-y: 0;
--lume-btn-secondary-text: rgba(26,27,27,1);
--tw-rotate: 0;
--lume-input-border-active: rgba(26,27,27,1);
--lume-card-border-hover: rgba(26,27,27,1);
--tw-ring-offset-color: #fff;
--lume-prose-link: rgba(26,27,27,1);
--lume-input-placeholder: rgba(118,122,122,1);
--lume-input-text: rgba(0,0,0,1);
--lume-label-darker-text: rgba(255,255,255,1);
--lume-editor-toolbar-bg: rgba(245,247,247,1);
--tw-skew-x: 0;
--lume-chip-hover-border: rgba(26,27,27,1);
--lume-ctrl-tertiary-active-bg: rgba(216,218,218,1);
--lume-input-border-hover: rgba(118,122,122,1);
--lume-ctrl-secondary-icon: rgba(26,27,27,1);
--lume-editor-border: rgba(216,218,218,1);
--lume-chip-selected-border: rgba(41,42,42,1);
--lume-ctrl-tertiary-hover-bg: rgba(245,247,247,1);
--tw-shadow: 0 0 transparent;
--tw-bg-opacity: 1;
--tw-translate-x: 0;
--lume-input-disabled-text: rgba(0,0,0,0.2);
--tw-ring-offset-width: 0px;
--lume-ctrl-primary-bg: rgba(41,42,42,1);
}Drop-in prompt
Build a landing page in the visual style of Hodinkee.
Reference design system (extracted from the live site):
- Palette: #89abd8, #735234, #edcba4, #918173, #9ca4cc
- Typefaces: Portrait Inline, Proxima Nova
- Macrostructure: Split Studio
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/hodinkee-com--watch101-cnc
