Field Day
Playful, youthful, energetic · Aesthetary’s guidance, not research
Bright and quick, with grown-up type: ultramarine, bubblegum and tangerine on white.
#FBFAF5, canvas, 50%. #FFFFFF, surface, 15%. #111111, text, 12%. #4E4E4E, muted text, 3%. #2B3BE0, primary action, 8%. #FF5FA2, accent, 6%. #FFB000, fill 1, 6%.
Suggested proportions
- 50% Canvas
- 15% Surface
- 12% Text
- 8% Primary action
- 6% Accent
- 6% Fill 1
- 3% Muted text
In use
New
Learn to swim by summer.
Small groups, ages five to eleven.
Book a trialTimetable
#FFB000, fill 1.
Your turn: Stage 3
Saturdays, 10:15, Pool B.
Swimmer’s age
13
Our classes are for ages 5 to 11.
Trial booked for Saturday.
Using it well
23 color pairs are approved for use. 6 pairs are not for text; the ones that matter most for this palette:
- Accent on Canvas Not for text. Pink is 2.71:1 on the ground: a fill behind black text, never text.
- Fill 1 on Canvas Not for text. Tangerine is 1.75:1: shapes only.
Roles
15 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #FBFAF5 | The page ground. | Aesthetary’s guidance |
| Surface | #FFFFFF | Cards, panels and fields. | Aesthetary’s guidance |
| Text | #111111 | All reading text and headings. | Aesthetary’s guidance |
| Muted text | #4E4E4E | Secondary text and captions. | Aesthetary’s guidance |
| Primary action | #2B3BE0 | The primary action, and links where it passes as text. | Aesthetary’s guidance |
| Text on primary | #FFFFFF | Label on the primary action. | Aesthetary’s guidance |
| Secondary action | #111111 | Secondary action: label and outline. | Aesthetary’s guidance |
| Border | #DDDAD0 | Hairlines and dividers. Decorative only; never a field’s only edge. | Aesthetary’s guidance |
| Input border | #6F6F6F | The edge of an input, where it is the only boundary. | Aesthetary’s guidance |
| Accent | #FF5FA2 | Bubblegum: “your turn” or “new”, behind black text. | Aesthetary’s guidance |
| Focus | #2B3BE0 | Focus ring, 2px, offset from the control. | Aesthetary’s guidance |
| Success | #1E7A46 | Confirmation, always with a word or icon. | Aesthetary’s guidance |
| Warning | #8A5A00 | Warnings, always with a word or icon. | Aesthetary’s guidance |
| Error | #B3261E | Errors, always with a word or icon. | Aesthetary’s guidance |
| Fill 1 | #FFB000 | Tangerine: shapes and decoration only. | Aesthetary’s guidance |
Contrast, by use
23 approved pairs, all passing · 6 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 | 18.07:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 18.88:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 7.96:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 8.32:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 7.49:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 18.07:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 18.88:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 7.16:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 7.49:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 7.16:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 7.49:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 4.81:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 5.02:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Success on Canvas | 5.12:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Success on Surface | 5.35:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Warning on Canvas | 5.67:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Warning on Surface | 5.93:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Canvas | 6.25:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 6.54:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 2.71:1 | — | DecorativeAccent as a fill; meaning carried by a word too | Passes |
| Accent on Surface | 2.83:1 | — | DecorativeAccent as a fill; meaning carried by a word too | Passes |
| Text on Accent | 6.66:1 | 4.5:1 | TextText set on the accent fill | Passes |
| Text on Fill 1 | 10.31:1 | 4.5:1 | TextText set on this fill | Passes |
Not for text
- Accent on Canvas 2.71:1. Not for text. Fill or decoration only. Pink is 2.71:1 on the ground: a fill behind black text, never text.
- Fill 1 on Canvas 1.75:1. Not for text. Fill or decoration only. Tangerine is 1.75:1: shapes only.
- Accent on Surface 2.83: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 Canvas 1.34: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.40: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.
- Fill 1 on Surface 1.83: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
Energy from two loud fills and a strong blue, held together by black type and plenty of white. Pink means “your turn” or “new”; tangerine is shape and decoration only.
Avoids: Primary-color rainbow, bubble type and confetti.
Related
Shares a principle with (Aesthetary’s guidance)Neo-Brutalism, Memphis
Related palettesOutline and Fill, Laminate Clash, Cold Press, Highlighter