CieLA design system
Internal catalog of the tokens, primitives, and chrome this site is built from. Not linked from public navigation.
Foundations
Color pairings - rendered as used
Ink on cream
Body copy & headings
Muted on cream
Secondary copy
Ink on white
Panels & forms
Muted on white
Panel secondary copy
Ink on sky soft
Washed section bands
Sky deep on cream
Links, eyebrows, accents
Cream on ink
Footer & CTA bands
Soft on ink
Footer secondary copy
Champagne on ink
Accents on dark
Ink on champagne
Primary buttons
Error on white
Form validation
Color tokens
--color-bg-primary--color-bg-sky--color-bg-sky-soft--color-bg-white--color-bg-ink--color-champagne--color-champagne-deep--color-sky-deep--color-text-primary--color-text-muted--color-text-on-dark--color-text-soft-on-dark--color-border--color-border-strong--color-overlay
Typography
Hero H1 · Cormorant Garamond 500
Curate the celebration
Section H2 · Cormorant Garamond 500
Three pillars, one event
Body · Manrope 400
We handle the plan, the people, and the room so hosts can stay at their own party.
Nav / button · Manrope 600
Plan Your Event
Eyebrow · Manrope caps
What we do
Accent script · Great Vibes (eyebrows only, never paragraphs)
celebrate more, stress less
Spacing rhythm
- 8px
- 16px
- 24px
- 32px
- 48px
- 64px
- 96px
Radius
Elevation, motion & layering
- Shadows: none by default; a whisper shadow on hovered pillar cards only.
- Motion tokens: fast 160ms · base 260ms · slow 520ms with a soft ease-out. Ships three intentional motions - header settle, drawer, scroll fade-up - all disabled under prefers-reduced-motion.
- Z-index scale: header 40 · drawer 50 · skip link 60. No component-level values.
- Custom CSS lives in @layer base / @layer components so Tailwind responsive utilities always win the cascade.