Ledger
Financial, trustworthy, established · Aesthetary’s guidance, not research
Nothing hidden, numbers first.
#FBFAF7, canvas, 58%. #FFFFFF, surface, 18%. #14161A, text, 12%. #545A63, muted text, 4%. #7A1F2B, primary action and accent, 8%.
Suggested proportions
- 58% Canvas
- 18% Surface
- 12% Text
- 5% Primary action
- 4% Muted text
- 3% Accent
In use
New
Year-end accounts, fixed fee.
You see the figure before we start.
Get a quoteOur fees
Quarter to date
Income +£12,480 · Costs −£3,915
Company number
0918A
Company numbers have 8 digits.
Return filed on 3 April.
Using it well
21 color pairs are approved for use. 4 pairs are not for text. Each is listed under Contrast, by use.
Roles
14 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #FBFAF7 | Paper. | Aesthetary’s guidance |
| Surface | #FFFFFF | Tables and fields. | Aesthetary’s guidance |
| Text | #14161A | All reading text and headings. | Aesthetary’s guidance |
| Muted text | #545A63 | Secondary text and captions. | Aesthetary’s guidance |
| Primary action | #7A1F2B | 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 | #14161A | Secondary action: label and outline. | Aesthetary’s guidance |
| Border | #CFCAC0 | Hairlines and dividers. Decorative only; never a field’s only edge. | Aesthetary’s guidance |
| Input border | #858077 | The edge of an input, where it is the only boundary. | Aesthetary’s guidance |
| Accent | #7A1F2B | The oxblood again: the firm’s one color. | Aesthetary’s guidance |
| Focus | #1F4E8C | Focus ring, 2px, offset from the control. | Aesthetary’s guidance |
| Success | #1F6B3A | Positive figures; the sign is never shown by color alone. | Aesthetary’s guidance |
| Warning | #7A5A00 | Warnings, always with a word or icon. | Aesthetary’s guidance |
| Error | #A12A1F | Negative figures and errors; the sign is never shown by color alone. | Aesthetary’s guidance |
Contrast, by use
21 approved pairs, all passing · 4 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.35:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 18.11:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 6.66:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 6.95:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 10.20:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 17.35:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 18.11:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 9.77:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 10.20:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 7.96:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 8.31:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 3.76:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 3.92:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Success on Canvas | 6.24:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Success on Surface | 6.52:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Warning on Canvas | 6.12:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Warning on Surface | 6.38:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Canvas | 7.02:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 7.33:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 9.77:1 | 4.5:1 | TextAccent text | Passes |
| Accent on Surface | 10.20:1 | 4.5:1 | TextAccent text | Passes |
Not for text
- Border on Canvas 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.
- Border on Surface 1.63: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.
- Input border on Canvas 3.76:1. Not for text. Non-text only. An edge or ring, not a text color.
- Input border on Surface 3.92:1. Not for text. Non-text only. An edge or ring, not a text color.
What makes it characteristic
Paper and near-black do almost everything; one oxblood marks the action. Positive and negative figures have their own colors, but a sign or word always says which is which.
Avoids: Navy and gold.
Limits of this palette
- Chart colors are not authored yet: a dashboard needs data hues that pass 3:1 on the surface.
Related
Shares a principle with (Aesthetary’s guidance)Archival, Editorial Modernism
Related palettesBlack Blade, Red Line, Blue Number, Daylight Clinic, Workbench