# Color

Cream paper, warm ink and a lively orange. Feitio uses little color on purpose: refinement lies in how many colors stay out.

## 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.

**surface**the page background

**surface-raised**blocks on the page

**surface-top**lifted paper

**text**main text

**text-soft**supporting text

**accent**the main action, focus

**accent-strong**links and notes

**ok**it worked: moss

**warn**attention: mustard

**error**it failed: wine

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.

Do

Save changes[See the history.](#um-laranja)

One orange on the action; the link in the strong orange, which does not compete.

Don’t

**Settings**Save

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

OnlineOffline

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.

**By day**

Cream, near-black ink, orange.

Save

`surface: oklch(96% 0.018 80)`

**At night**

Warm charcoal, cream as ink, the same orange.

Save

`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.