Foundation
Logo and favicon, brand palette, typography scale, semantic color tokens, and shape primitives. All tokens are defined in packages/tailwindcss/theme.css.
01 · Brand
The wordmark and mark, their colorways, minimum sizes, and the favicon set — generated from the mark. Full written rules live in the Brand assets guide.
Dark logo · light backgrounds
Serene logo · dark backgrounds
Serene
Remedy
Infinite
Mark · 16px
Wordmark · 80px
CliniaLight browser
CliniaDark browser
Apple · 180
Maskable
One favicon on both light and dark chrome — the Infinite mark in a Remedy circle. Source: public/favicon.svg.
Full rules — sizing, contrast, co-branding, and the generated favicon set — in the Brand assets guide.
02 · Color
Twenty-four named swatches across four families. Vital (#ff5c00) is the flagship accent — pair it only with Infinite text for AA contrast.
Infinite
Beige / Tan
Purple
Peach / Orange (Vital)
03 · Typography
16 steps from Display XL to Eyebrow S. Display and Title steps use font-display (Gothia Serif); Body and Eyebrow use font-sans (CircularXX).
font-display
Gothia Serif
Headlines, display text
font-sans
CircularXX
UI, body text
font-mono
CircularXX Mono
Code, tokens
Display XL
6rem
Aa
Display L
5.5rem
Aa
Display M
4.5rem
Aa
Display S
3.5rem
Aa
Title XL
5rem
Aa
Title L
4rem
Aa
Title M
2.5rem
Type scale
Title S
2rem
Type scale
Title XS
1.5rem
Type scale
Body XL
2rem
The quick brown fox
Body L
1.5rem
The quick brown fox
Body M
1rem
The quick brown fox jumps over the lazy dog
Body S
0.875rem
The quick brown fox jumps over the lazy dog
Body XS
0.75rem
The quick brown fox jumps over the lazy dog
Eyebrow L
1rem
SECTION LABEL
Eyebrow S
0.625rem
SMALL LABEL
04 · Tokens
These tokens switch with the active theme (light / dark). They are the only colors you should reference in component code.
Background
--background
Primary
--primary
Secondary
--secondary
Accent
--accent
Muted
--muted
Card
--card
Destructive
--destructive
Success
--success
Warning
--warning
Destructive
--destructive
Success
--success
Warning
--warning
05 · Shape
All radius values derive from --radius, defined in the design token layer.
sm
md
lg
xl
2xl
3xl
4xl
full
shadow-sm
shadow-md
shadow-lg
06 · Band
The Infinity Band — 2D linework and 3D shape renders, extracted from the brand file.
For best render, display on a background of color scheme Infinite.
