Color
Cream paper, warm ink and a lively orange. Feitio uses little color on purpose: refinement lies in how many colors stay out.
On this page
The roles
No component knows a color; it knows a role: surface, text, accent. Every theme fills the same roles, which is why switching themes, or day to night, breaks nothing.
Also: on-accent (text on the orange), line (hairlines), shadow (the paper shadow) and a surface for each status (ok-surface, warn-surface, error-surface).
Rules
One orange per screen
The accent goes on the main action and nothing else. Links and notes use the strong orange, darker, which reads as text.
Don’t
Title and button in orange: the eye does not know where to go.
Color never speaks alone
A status always comes with an icon and a word, for people who cannot tell colors apart and for black and white printing.
Do
Icon, word and color together.
Don’t
Two dots: for people who cannot tell the colors apart, they are the same.
Error is wine, never orange
The wine was pulled away from the orange so an error never looks like the main action.
No color written by hand
Always the role, var(--feitio-color-…). A hand-written color does not change at night or in a facade.
Day and night
Night is not the day inverted. Every role has its own value in the dark: the paper turns into warm charcoal, the cream becomes the ink, and the orange of links lights up to stay readable. The orange of the main action is the same in both modes, deep, with cream text. With no choice from the page, Feitio follows the system mode.
Cream, near-black ink, orange.
surface: oklch(96% 0.018 80)
Warm charcoal, cream as ink, the same orange.
surface: oklch(22% 0.016 55)
Facades
- Outside work (a shop page) gets a facade: a theme that only changes the colors, filling the same roles.
- Lettering, shape, space and motion stay Feitio’s.
- A facade is born day-only and gets a night version when the work asks for it.
- The contrast test applies to it too: a facade that fails does not get in.
Contrast
Every pair that carries text or meaning passes WCAG 2.2 AA, by day and at night: 4.5 for text, 3 for shapes. Feitio’s test checks every pair and fails the build if one drops.
| Pair | Use | Day | Night | Minimum |
|---|---|---|---|---|
text / surface | main text | 13,9 | 14,1 | 4,5 |
text-soft / surface | supporting text | 6,4 | 8,1 | 4,5 |
accent-strong / surface | links and notes | 5,8 | 8,0 | 4,5 |
on-accent / accent | main button text | 5,0 | 5,0 | 4,5 |
accent / surface | main button, focus | 4,8 | 3,2 | 3 |
warn / warn-surface | attention notice | 4,8 | 7,5 | 4,5 |
WCAG 2’s formula overrates dark text on saturated mid-tone colors: the old orange, with dark text, passed with 5.2 and still tired the eye. So the orange is deep and the text on it is cream; the perceptual measure (APCA) agrees, with Lc 79 against 40 before.