Color Palette
Dark
#0E2617
Hero, footer, dark sections, buttons. Default body text on light.
Paper
#FFF9F0
Main background, card borders, input outlines. Text on dark.
Sage
#EBF2DC
Accent surface, hover states, pro section, finder panel.
Gold
#896130
Hover accent, labels. All lines on dark backgrounds.
Muted
#7A8A7E
Secondary text, captions, meta labels.
Divider
#831E10
Structural dividers, lines on light bg, ghost links, bullet dots, tags, blockquote, step numbers.
#831E10 — where it is used (light backgrounds only)
Ghost links
Learn more
Request early access
Tags
EU Compliant
Science Led
Botanical
Blockquote
"Balance before intensity.
Continuity before correction."
Heading underline
Formulated with restraint.
Bullet dots
Microalgae-derived astaxanthin
Japanese botanical extracts
#896130 Gold — lines on dark backgrounds (rule)
All lines on dark green — always gold #896130
#896130 — section label line (e.g. "Iconics", "Early Access")
#896130 — scroll / scan line animation
#FFF9F0 at 10% — pillar grid structural borders
#FFF9F0 at 7% — footer bottom border
Typography on dark background
Antioxidant skin renewal
A quieter
approach to
aging.
Microalgae-derived astaxanthin.
Japanese botanicals. German formulation.
VAIRYA supports skin continuity through microalgae-derived astaxanthin and a curated selection of Japanese botanical extracts, formulated in Germany.
Explore the serum
Request access
Learn more
Text opacity scale
Primary#FFF9F0 · 100%
Secondary#FFF9F0 · 55%
Tertiary#FFF9F0 · 30%
Gold labelSection label
Serif H2One formula.
Italic em"Balance before intensity."
Dividers on light background
#831E10 — primary structural divider (2px)
rgba(14,38,23, 12%) — card borders, input outlines (1px)
Typography
Serif — Playfair Display
A quieter approach.
300 Light · 400 Regular · 500 Medium · 700 Bold · Italic variants · Google Fonts · Free
UI & Body — Plus Jakarta Sans
Antioxidant
Skin Renewal
300 Light · 400 Regular · 500 Medium · 700 Bold · Italic · Google Fonts · Free
300 Light
Microalgae-derived astaxanthin, designed for daily continuity.
400 Regular
Microalgae-derived astaxanthin, designed for daily continuity.
500 Medium
Microalgae-derived astaxanthin, designed for daily continuity.
700 Bold
Microalgae-derived astaxanthin, designed for daily continuity.
Italic
"Balance before intensity. Continuity before correction."
Display 1
Playfair · 72px · 300
Luminescence
Display 2
Playfair · 52px · 300
A quieter approach to aging.
Display 3
Playfair · 36px · 300
Formulated with restraint.
Display 4
Playfair · 24px · 400
Japanese origin. German formulation.
Body Lead
Jakarta · 16px · 400
LH: 1.8
Microalgae-derived astaxanthin, balanced with botanical extracts, designed for daily continuity.
Body
Jakarta · 13px · 400
LH: 1.9
VAIRYA works with a select group of skin professionals. If you represent a premium practice or distribution channel, we would like to hear from you.
Label
Jakarta · 10px · 500
LS: 20–22% · Uppercase
Antioxidant skin renewal · The VAIRYA Formula
Button
Jakarta · 10px · 500
LS: 20% · Uppercase
Explore the serum
Caption
Playfair · 13px · Italic
"Balance before intensity. Continuity before correction."
UI Components
Buttons — light background
Dark primary
Sage accent
Outline
Ghost link
Gold
Buttons — dark background
Explore the serum
Request access
Learn more
Tags
EU Compliant
Science Led
Botanical
Premium
Section label
The VAIRYA Formula
Nav CTA
Early Access
Exceptions
These are deliberate one-off color decisions that break the general rule. Each is documented here so it is never confused with an error.
Scroll line
Uses #896130 Gold instead of #831E10 — on dark background, gold reads warmer and more refined than the divider red.
Finder underline
I am looking for support with
visible aging
Uses #831E10 Divider — on a light background, the interactive underline uses the divider color as an exception to the gold label convention, signalling clickability.
Lines on dark
Uses #896130 Gold — all section label lines on dark green backgrounds use gold, never the divider red which disappears against dark.