Brand colors

The tokens below are the values as defined in src/styles/global.css. This is the authoritative version. If the codebase and this document ever diverge, the codebase wins.

Color palette

The palette is warm and restrained. Ivory backgrounds, near-black text, amber accent. No cold greys, no neon, no gradients.

Neutrals

Name	Hex	Usage
Background · `--color-rl-bg`	`#fffef2`	Page body background. Warm ivory.
Dark · `--color-rl-dark`	`#191918`	Headings, primary text, dark overlays.
Cream · `--color-rl-cream`	`#f3f2e7`	Card backgrounds, sidebar, input fields.
Border · `--color-rl-border`	`#e3e2d8`	Card borders, dividers, table rules.
Border light · `--color-rl-border-light`	`#d1d0c666`	Subtle borders with transparency.
Muted · `--color-rl-muted`	`#bab9b0`	Label text, mono tags, FAQ icons.

Accent

Name		Hex	Usage
Accent · `--color-rl-accent`		`#fcaa2d`	Primary CTA buttons, section dots, badges, list markers.
Accent dark · `--color-rl-accent-dark`		`#a36404`	Text links on light backgrounds.

Text opacity levels

Text hierarchy comes from opacity variants of --color-rl-dark, not separate colors.

Name	Hex	Usage
100%	`#191918`	Headings, primary text.
60% · `--color-rl-dark-60`	`#19191899`	Body paragraphs, descriptions.
40%	`#19191866`	Section labels, trusted-by logos, nav links.
30% · `--color-rl-dark-30`	`#1919184d`	Muted text, placeholders, sidebar metadata.
10% · `--color-rl-dark-10`	`#1919181a`	Subtle borders, ghost button borders.

Color logic

Two neutrals and one accent. Ivory and near-black carry the page. Amber carries attention.

The ivory background (#fffef2) keeps the page from feeling cold or sterile. The cream (#f3f2e7) is slightly darker, used for cards and input fields so content separates from the page without needing a hard shadow. The near-black text (#191918) reads warm rather than clinical because it is not pure black.

Amber (#fcaa2d) is the single accent. It appears on CTA buttons, section dots, list markers and badges. It never appears as text on a light background because it fails contrast. For accent-colored text on ivory or cream, use the dark amber (#a36404).

The palette is intentionally flat. No gradients, no glows, no shadows beyond one subtle depth cue on the browser mockup.

Where colors are used

Page background: #fffef2 (rl-bg) for the full page
Card and input backgrounds: #f3f2e7 (rl-cream)
Primary CTA buttons: #fcaa2d background, #191918 text, pill radius
Ghost buttons: transparent background, #1919181a border, #191918 text
Text links on light backgrounds: #a36404 (rl-accent-dark)
Section dots, bullet markers, badges: #fcaa2d
Dividers and card borders: #e3e2d8 (rl-border)
Dark CTA sections: #191918 background at 70% over a painting, white text
Body text: #19191899 (rl-dark-60)
Labels and mono tags: #bab9b0 (rl-muted)

Accessibility (WCAG)

Combination	Result
`#191918` on `#fffef2`	Excellent contrast. Primary text on page background.
`#191918` on `#f3f2e7`	Excellent contrast. Text on cards.
`#191918` on `#fcaa2d`	Good contrast. Button text on accent background.
`#a36404` as text on `#fffef2`	Passes AA. Use for text links on light backgrounds.
`#fcaa2d` as text on `#fffef2`	Fails AA. Never use the accent as text color on light backgrounds. Use `#a36404` instead.
White on `#191918` (or painting + 70% overlay)	Excellent contrast for dark CTA sections.

Rules:

#fcaa2d is a background color and a marker color. Not a text color on light backgrounds.
For text that needs the amber feel but must be legible, use #a36404.
For text hierarchy on light backgrounds, layer opacity of #191918. Do not pick a lighter grey.

Typography

One font family does nearly everything. A mono is added only for labels and code.

Parabole (display and body)

Parabole is used for headings, body text, navigation, buttons and UI. Three weights cover the full interface.

Variable	Font	Weight	Usage
`--font-display`	Parabole Regular	400	Body text, headings, nav, buttons. Default for almost everything.
`--font-display-medium`	Parabole Medium	500	Card titles, section labels, FAQ questions, comparison headers, prices.
`--font-display-bold`	Parabole Bold	700	Trusted-by names, user names in chat. Used sparingly.
—	Parabole Display	400	Accent variant. Used only for emphasis words in headings via the `font-accent` class.

The accent variant is a calligraphic display cut of Parabole. It appears exclusively on short emphasis words at the end of a heading:

<h2>European AI built for <em class="font-accent not-italic">trust</em></h2>

Always paired with not-italic to prevent browser italic rendering. Never used for buttons, nav, body text or standalone text.

Decima Mono (labels and code)

Variable	Font	Weight	Usage
`--font-mono`	Decima Mono	400	Category labels, URL bars, code, inline technical tags.

Decima Mono is reserved for UI metadata. Typically rendered at 11px, uppercase, with tracking 0.06em, in rl-muted (#bab9b0).

Practical rules

Do not introduce new fonts. Parabole and Decima Mono cover every case. Inter, Manrope, Libre Baskerville and similar are not part of this brand.
Do not use Parabole Bold for body text or paragraphs. It is reserved for names and rare emphasis.
Do not use the accent variant (font-accent) outside headings.
Do not add new colors without updating global.css and this document.
Use #fcaa2d as a background or marker. Never as text on a light background.
For text hierarchy, use opacity variants of rl-dark. Do not pick a separate grey.
Text links on ivory or cream backgrounds use #a36404, not #fcaa2d.
Keep the design flat. No gradients, no glows, no shadows beyond the browser mockup.