Internal

Design system catalog

The visual source of truth for the Exsula Foods site — tokens, primitives, brand marks, and chrome, rendered from the real design system.

Foundations

Color tokens

Stone
--color-bg-primary · #f3f5f2
Page + header ground
Sage
--color-bg-sage · #e6ece7
Alternate section wash
Paper
--color-bg-white · #ffffff
Forms, elevated panels
Ink
--color-bg-ink · #141916
Inverse bands, dark CTA, footer
Text primary
--color-text-primary · #141916
Body + headings on light
Text muted
--color-text-muted · #5c6560
Secondary copy
Text on dark
--color-text-on-dark · #f3f5f2
Text on ink / celadon
Celadon
--color-brand-celadon · #1e4a3c
Primary brand — buttons, links
Celadon hover
--color-brand-celadon-hover · #16382e
Primary hover
Mineral
--color-brand-mineral · #3f7a6c
Eyebrows, focus flourishes
Brass
--color-brand-brass · #9a7b4f
Rare heritage rules — never fills

Contrast pairings — rendered

Every foreground/background pairing the site uses, rendered as real text, links, and buttons. Mineral small text sits only on stone or paper; on sage, eyebrows switch to celadon. Brass never carries text.

Mineral eyebrow on stone

Primary text on stone

Muted secondary copy on stone.

Celadon inline link

Celadon eyebrow on sage

Primary text on sage

Muted secondary copy on sage.

Celadon inline link

Mineral eyebrow on paper

Primary text on paper

Muted secondary copy on paper.

Celadon inline link

On-dark eyebrow on ink

On-dark text on ink

On-dark muted copy on ink.

Quiet footer link

Type scale

Formulas your practice can stand behind.

Stewardship, bioavailability, education

Cell-ready mineral delivery

Lead paragraph — Manrope at 18px with relaxed leading for supporting copy under headlines.

Body paragraph — Manrope at 16px, line-height 1.6, near-ink on cool stone grounds.

Eyebrow specimen — uppercase, tracked

Role	Font	Size	Weight	Token
Hero H1	Source Serif 4	48-64px / 36 mobile	600	--text-hero
Page H1	Source Serif 4	32-52px	600	--text-h1
Section H2	Source Serif 4	28-38px	600	--text-h2
Card / H3	Source Serif 4	22-26px	600	--text-h3
Lead	Manrope	18px	400	--text-lead
Body	Manrope	16px	400	--text-body
Nav	Manrope	15px	500	--text-nav
Button / CTA	Manrope	13-14px	600	--text-cta
Eyebrow	Manrope	11-12px	600 caps	--text-eyebrow

Spacing, radius, motion, layering

Token	Value	Use
--radius-sm	4px	Small chips, tight inputs
--radius-md	6px	Buttons, inputs
--radius-lg	8px	Panels, preview frames
--duration-quick	0.3s	Hover, header settle, drawer
--duration-reveal	0.6s	Section fade-up
--ease-standard	cubic-bezier(0.33, 0, 0.2, 1)	All transitions
--z-drawer / --z-header / --z-skip	40 / 50 / 60	The only z-index scale
--container-max	80rem	Content container
Section padding	clamp(4rem, 9vw, 6.5rem)	.section vertical rhythm