Media card
Image flush to the top, white body, no shadow, no radius.
Internal — design system
Styles catalog
The visual source of truth: every token, pairing, primitive, and piece of site chrome rendered live from the same code the site ships.
Foundations
Color tokens
--color-bg-primary
#f3eee7 — Page + header background
--color-bg-pale
#e6e2db — Alternate section wash
--color-bg-sand-light
#fdfaf6 — Soft inset sections
--color-bg-white
#ffffff — Cards, footer, overlays
--color-text-primary
#313131 — Body, headings, nav
--color-text-muted
#585858 — Footer, secondary copy
--color-text-subtle
#7c7c7c — Underlines (non-text)
--color-border
#dad9d6 — Dividers, card rules
--color-border-light
#e6e6e6 — Footer section rules
--color-border-active
#82847f — Nav hover underline
--color-border-button-light
#aaa6a3 — Light outline button
--color-button-dark-bg
#313131 — Primary filled button
--color-button-dark-hover
#625f5f — Primary button hover
--color-button-black-bg
#000000 — Secondary filled button
--color-button-black-hover
#404040 — Black button hover
--color-button-text-on-dark
#f3eee7 — Text on dark buttons
Token pairings in use
Primary text #313131 on #f3eee7 — the default page pairing.
Muted text #585858 on #f3eee7 for secondary copy.
Primary text on the pale wash #e6e2db used by alternate bands.
Primary text on the sand-light inset #fdfaf6.
Primary text on white cards and the footer surface.
Muted footer text #585858 on white.
Button text #f3eee7 on the charcoal fill #313131.
Button text on the hover fill #625f5f.
Type scale
Display hero — serif 5.14rem / 5.71rem
Gorgeous brows, alwaysH1 — serif 3.43rem / 3.86rem
Editorial headlineH2 — serif 2.4rem
Section headingH3 / card title — serif 1.4rem
Card titleBody — serif 1rem / 1.45
Body copy set in the display serif with 0.057rem tracking.Eyebrow — sans 0.722rem, 2px tracking, uppercase
Eyebrow labelNav / button — sans 0.929rem
Caps label — sans 0.85rem, 2.1px tracking
Property label
Spacing & layout
| Token | Value |
|---|---|
| --gutter-x | 1.75rem (24.5px) |
| --section-space | 4.64rem (~65px) |
| --section-space-sm | 2.14rem (~30px) |
| --section-space-lg | 8.93rem desktop / 6.07rem mobile |
| --header-height | 88px → 4rem (64px) scrolled |
| --container-max | 1440px (wide: 1600px) |
Radius & elevation
0 radius
Dropdown surface — the only elevated element in the system.
Border radius is 0 everywhere; content casts no shadows. Borders are 1px solid only.
Motion
| Interaction | Animation |
|---|---|
| Header shrink on scroll | min-height 0.35s ease-in-out |
| Nav overlay open | fade-in 0.6s |
| Mobile drawer | slide-in-left 400ms |
| Link underline | border-color 0.3s, 0.3s delay |
| Button hover | 0.4s color / background / border |
| Reduced motion | all transitions & transforms disabled |
Primitives
Buttons
Links & interactive text
- Navigation link — underline animates in
- Discover more — persistent thin underline
- Footer link — hover underline
Badges & labels
Eyebrow labelCaps labelTag chip
Cards
Ruled card
1px top rule in --color-border for text-only cards.
Form fields
Focus any control with the keyboard to see the 2px charcoal focus ring with 2px offset.
Brand
Logo lockup
No logo configured — the header falls back to the wordmark.
Face, Brow & Beauty BarThe Keystone lockup is constrained to the header row (max-height 2.5rem, width auto).
Mark
Favicon glyph — charcoal square, serif F-dot.
Social icon strip
Components
The live site chrome — the real header and footer components, rendered in a shared preview frame. Responsive utilities still respond to the browser viewport, so resize the window to see the hamburger swap.
Page surface
Content sits between the chrome on the warm sand ground.