Brown Key
From Storybook · Colors chosen by Aesthetary, following the documented color rules
A dark-brown key line and soft warm tints on a warm paper leaf, with as few colors as needed.
#F6ECDC, canvas, 55%. #EDD6A8, surface, 15%. #5C4434, second surface, 5%. #443228, text, 12%. #6B5138, muted text, 4%. #8C4A26, primary action and accent, 9%.
Suggested proportions
- 55% Canvas
- 15% Surface
- 12% Text
- 5% Second surface
- 5% Primary action
- 4% Muted text
- 4% Accent
In use
New
Story hour, Saturdays at ten.
For ages three to seven, with a grown-up.
Book a placeThis week’s book
Reserve a book
We hold it for a week.
Child’s age
4
Story hour is full this week.
Using it well
18 color pairs are approved for use. 4 pairs are not for text. Each is listed under Contrast, by use.
Roles
13 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #F6ECDC | The page ground. | From the Storybook page’s “leaf” color. Basis: Aesthetary’s interpretation. |
| Surface | #EDD6A8 | The ground inside the initial; fields and panels. | From the Storybook page’s “wash” color. Basis: Aesthetary’s interpretation. |
| Second surface | #5C4434 | A darker leaf for one moment, with cream text. | From the Storybook page’s “dusk” color. Basis: Aesthetary’s interpretation. |
| Text | #443228 | Passages and the initial. | Named in the sources: “a dark-brown key” From the Storybook page’s “ink” color. Basis: Aesthetary’s interpretation. |
| Muted text | #6B5138 | Folios, captions, secondary text. | From the Storybook page’s “ink-2” color. Basis: Aesthetary’s interpretation. |
| Primary action | #8C4A26 | Headings, links, the turn; the action. | From the Storybook page’s “sienna” color. Basis: Aesthetary’s interpretation. |
| Text on primary | #FBF4E7 | Label on sienna and on the dusk leaf. | Added by Aesthetary. The Storybook page names this cream for text on the dusk leaf; it also carries the action label. |
| Secondary action | #443228 | Secondary action: an ink outline. | From the Storybook page’s “ink” color; Aesthetary gives it this role. Basis: Aesthetary’s interpretation. |
| Accent | #8C4A26 | The same sienna: the turn of the page. | From the Storybook page’s “sienna” color. Basis: Aesthetary’s interpretation. |
| Border | #D8C3A0 | Hairlines. Decorative only. | Added by Aesthetary. The Storybook page names no rule. |
| Input border | #7E6A52 | The edge of an input. | Added by Aesthetary. A field’s only edge needs 3:1 on the leaf and the wash. |
| Focus | #443228 | Focus ring. | Added by Aesthetary. The Storybook page defines no focus color; the ink makes the ring. |
| Error | #8E2A1A | Errors, always with a word. | Added by Aesthetary. The Storybook page defines no status color; a red deep enough to read on the wash. |
Contrast, by use
18 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 | 10.36:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 8.53:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 6.28:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 5.17:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 6.15:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 10.36:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 8.53:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 5.75:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 4.73:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 10.36:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 8.53:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 4.41:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 3.63:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Error on Canvas | 7.19:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 5.92:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 5.75:1 | 4.5:1 | TextAccent text | Passes |
| Accent on Surface | 4.73:1 | 4.5:1 | TextAccent text | Passes |
| Text on primary on Second surface | 8.23:1 | 4.5:1 | TextCream text on the dusk leaf | Passes |
Not for text
- Border on Canvas 1.47: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.21: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 4.41:1. Not for text. Non-text only. An edge or ring, not a text color.
- Input border on Surface 3.63:1. Not for text. Non-text only. An edge or ring, not a text color.
What makes it characteristic
One dark brown does the drawing and the type; a few warm tints sit inside it. The documented printer worked from a dark-brown key with as few colors as necessary, on yellow paper.
Limits of this palette
- “The sources do not set a period palette as a norm.” The printer’s set (dark-brown key, flesh, red, blue, yellow, gray) is one printer’s, not the palette of the language.
- The yellow paper in the sources is offered by the Storybook page as an alternate ground (#EFD9A0); this palette keeps the leaf.
What the sources say
2 color descriptions in their own words · 3 color rules, each marked documented or Aesthetary’s interpretation
Named in the sources
- “a dark-brown key … with as few colours as necessary”
- “printed on yellow paper”
Color rules for this Aesthetic
- Keep the palette warm and soft. a documented rule
- Use these six values: the room's own leaf, inks, sienna, wash and dusk. Aesthetary’s interpretation
- The sources do not set a period palette as a norm. not documented
Related
AestheticStorybook
Related palettesUnbleached, Black Blade, Red Line, Blue Number, Wood and White, Stacked Film