Flat Signal
From Swiss Style · Colors chosen by Aesthetary, following the documented color rules
A light near-neutral ground, near-black type and one flat color that does one job at a time.
#F2F2EF, canvas, 60%. #FFFFFF, surface, 15%. #0E0F10, text, 12%. #66696C, muted text, 3%. #43464A, secondary action, 2%. #CFCFC9, border, 2%. #B02A10, primary action, 6%.
Suggested proportions
- 60% Canvas
- 15% Surface
- 12% Text
- 6% Primary action
- 3% Muted text
- 2% Secondary action
- 2% Border
In use
New
Proofs set in two days.
Send the copy, pick a face, approve the proof.
Book a proofSee faces
Proof request
One page, up to 600 words.
Deadline
12 May
Choose a date after today.
Using it well
17 color pairs are approved for use. 2 pairs are not for text. Each is listed under Contrast, by use.
Roles
12 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #F2F2EF | The page ground. Light and near-neutral. | From the Swiss Style page’s “background” color. Basis: Aesthetary’s interpretation. |
| Surface | #FFFFFF | Fields that must separate from the ground: inputs, a panel. | From the Swiss Style page’s “surface” color. Basis: Aesthetary’s interpretation. |
| Text | #0E0F10 | All reading text and headings. | From the Swiss Style page’s “text” color. Basis: Aesthetary’s interpretation. |
| Muted text | #66696C | Captions, labels and metadata. | From the Swiss Style page’s “text-muted” color. Basis: Aesthetary’s interpretation. |
| Secondary action | #43464A | Secondary text, and the label and outline of a secondary action. | From the Swiss Style page’s “text-secondary” color. Basis: Aesthetary’s interpretation. |
| Border | #CFCFC9 | Hairlines between grid fields. Never a control’s only boundary. | From the Swiss Style page’s “rule” color. Basis: Aesthetary’s interpretation. |
| Input border | #43464A | The edge of an input, where it is the only boundary. | From the Swiss Style page’s “text-secondary” color. Basis: Aesthetary’s interpretation. |
| Primary action | #B02A10 | The one flat color: the primary action. | From the Swiss Style page’s “accent” color. Basis: Aesthetary’s interpretation. |
| Text on primary | #FFFFFF | Label on the primary action. | Added by Aesthetary. The Swiss Style page names no color for text on the accent; white passes at 6.59:1. |
| Accent | #B02A10 | The same color marking the current item, when it is not marking the action. | From the Swiss Style page’s “accent” color. Basis: Aesthetary’s interpretation. |
| Focus | #0E0F10 | Focus ring, 2px, offset from the control. | Added by Aesthetary. The Swiss Style page defines no focus color. A ring in the text color keeps the accent to one job. |
| Error | #B02A10 | An error, in the accent: the sources give the accent one job at a time, so an error is never shown beside a colored action. | From the Swiss Style page’s “accent” color. Basis: Aesthetary’s interpretation. |
Contrast, by use
17 approved pairs, all passing · 2 not for text
WCAG 2 ratios, computed from the colors. Text needs 4.5:1; large text (24px, or 18.66px bold) and non-text (a focus ring, a field’s only edge, an icon) need 3:1. Only the pairs listed as approved are recommended.
Approved pairs
| Pair | Contrast | Needs | For | Result |
|---|---|---|---|---|
| Text on Canvas | 17.11:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 19.19:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 4.92:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 5.52:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 6.59:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 8.46:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 9.49:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 5.88:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 6.59:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 17.11:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 19.19:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 8.46:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 9.49:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Error on Canvas | 5.88:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 6.59:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 5.88:1 | 4.5:1 | TextAccent text | Passes |
| Accent on Surface | 6.59:1 | 4.5:1 | TextAccent text | Passes |
Not for text
- Border on Canvas 1.39:1. Not for text. Fill or decoration only. Under 3:1: a fill or decoration only. Never text, an icon or a field’s only edge.
- Border on Surface 1.56:1. Not for text. Fill or decoration only. Under 3:1: a fill or decoration only. Never text, an icon or a field’s only edge.
What makes it characteristic
The color count is the rule, not the hue. One flat color marks the primary action, the current item or an error, and only one of those at a time; the documented posters change the hue from one to the next.
Limits of this palette
- The three dated pairs in the sources (green and blue, red, magenta and turquoise) are words; the values offered for them are Aesthetary’s. This palette shows the red only.
- Error shares the accent by the Swiss Style page’s rule. A screen that shows an error must not also show a colored action; the error always carries a word.
What the sources say
2 color descriptions in their own words · 5 color rules, each marked documented or Aesthetary’s interpretation
Named in the sources
- “colour sparingly … strong contrasts of black against pure white”
- “complementary or contrasting colours, and the hue changed poster to poster”
Color rules for this Aesthetic
- Give the accent one job at a time (the primary action, the current item, an error) as a flat fill or rule. a documented rule
- Treat the accent value as replaceable: any hue that meets the contrast requirement works. a documented rule
- Text on the background measures 17.1:1; secondary text 8.5:1. a documented rule
- Red, black and white is one choice, not the palette. The sources’ palettes are words; the values offered for them are ours, darkened until white text passes 4.5:1 on them. Aesthetary’s interpretation
- Fill areas with flat color and leave the ground open: no gradients, tints or texture. Aesthetary’s interpretation
Related
AestheticSwiss Style
Related palettesSingle Action