Eli Berchan

Internal

Design system catalog

The live tokens, primitives, brand assets, and site chrome this website is built from. Internal reference, not linked from public navigation.

Color tokens

  • Ink

    --eb-ink · #231F1A

  • Ink soft

    --eb-ink-soft · #5C544A

  • Paper

    --eb-paper · #F8F5EF

  • Surface

    --eb-surface · #EFE9DE

  • Surface deep

    --eb-surface-deep · #E5DCCB

  • Hairline

    --eb-hairline · #D8CFBF

  • Hairline strong

    --eb-hairline-strong · #A89B83

  • Ivory

    --eb-ivory · #F6F1E6

  • Ivory soft

    --eb-ivory-soft · #CFC7B4

  • Bronze

    --eb-bronze · #8A6B41

  • Bronze text

    --eb-bronze-text · #7C5F38

  • Bronze soft

    --eb-bronze-soft · #C8B18A

Token pairings

Every foreground/background pairing the site uses, rendered as real text, links, and buttons on their actual backgrounds.

On paper

Ink heading on paper

Ink-soft body text on the paper background.

Bronze text link

PrimaryOutline

On surface

Ink heading on surface

Ink-soft body text on the raised surface.

Bronze text link

PrimaryOutline

On ink

Ivory heading on ink

Ivory-soft body text on the ink surface.

Inverse text link

InverseInverse nav link

Typography

Display serif: Cormorant Garamond (--font-display). Body sans: Montserrat (--font-sans).

  • Display · --text-display

    Extraordinary, one-of-a-kind celebrations

  • Heading 1 · --text-h1

    Extraordinary, one-of-a-kind celebrations

  • Heading 2 · --text-h2

    Extraordinary, one-of-a-kind celebrations

  • Heading 3 · --text-h3

    Extraordinary, one-of-a-kind celebrations

  • Heading 4 · --text-h4

    Extraordinary, one-of-a-kind celebrations

  • Lede · --text-lede

    Extraordinary, one-of-a-kind celebrations

  • Body · --text-body

    Extraordinary, one-of-a-kind celebrations

  • Small · --text-small

    Extraordinary, one-of-a-kind celebrations

Spacing

Layout spacing uses the Tailwind scale; the page container is --eb-container (76rem) with fluid inline padding.

  • 1 · 0.25rem
  • 2 · 0.5rem
  • 4 · 1rem
  • 6 · 1.5rem
  • 10 · 2.5rem
  • 16 · 4rem

Radius & elevation

--eb-radius-control
--eb-radius-card
--shadow-soft

Motion

TokenValueUse
--motion-fast160msHover & focus transitions
--motion-base260msPanel & reveal transitions
--motion-easecubic-bezier(0.22, 1, 0.36, 1)Shared easing curve

All motion collapses under prefers-reduced-motion.

Layering

TokenValueUse
--z-header40Sticky site header
--z-overlay50Overlays and dialogs
--z-skip60Skip-to-content link