Porch Light
Warm, approachable, human · Aesthetary’s guidance, not research
Lit from inside: warm white, a brick-orange action and a lamp-yellow glow.
Light variant
#FBF7F0, canvas, 58%. #FFFFFF, surface, 18%. #2A211B, text, 12%. #66574B, muted text, 4%. #B4471C, primary action, 5%. #F2B84B, accent, 3%.
Suggested proportions
- 58% Canvas
- 18% Surface
- 12% Text
- 5% Primary action
- 4% Muted text
- 3% Accent
In use
New
Bread at seven, cake by ten.
Order a whole cake two days ahead.
Order a cakeToday’s bread
Fresh out
Rye and caraway, 11:20.
Collection day
Today
Cakes need two days’ notice.
Your cake is booked for Saturday.
Using it well
22 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. Lamp yellow is 1.68:1: a fill behind dark text, never text.
Roles
14 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #FBF7F0 | The page ground. | Aesthetary’s guidance |
| Surface | #FFFFFF | Cards, panels and fields. | Aesthetary’s guidance |
| Text | #2A211B | All reading text and headings. | Aesthetary’s guidance |
| Muted text | #66574B | Secondary text and captions. | Aesthetary’s guidance |
| Primary action | #B4471C | 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 | #2A211B | Secondary action: label and outline. | Aesthetary’s guidance |
| Border | #E2D8CA | Hairlines and dividers. Decorative only; never a field’s only edge. | Aesthetary’s guidance |
| Input border | #8C7D6E | The edge of an input, where it is the only boundary. | Aesthetary’s guidance |
| Accent | #F2B84B | Lamp yellow: a glow behind good news, with dark text over it. | Aesthetary’s guidance |
| Focus | #2A211B | 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 | #A3122A | Errors, in a crimson cooler than the brick action, always with a word or icon. | Aesthetary’s guidance |
Contrast, by use
22 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 | 14.77:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 15.77:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 6.49:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 6.93:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 5.44:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 14.77:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 15.77:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 5.10:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 5.44:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 14.77:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 15.77:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 3.73:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 3.98:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Success on Canvas | 5.01: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.55: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 | 7.34:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 7.84:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 1.68:1 | — | DecorativeAccent as a fill; meaning carried by a word too | Passes |
| Accent on Surface | 1.79:1 | — | DecorativeAccent as a fill; meaning carried by a word too | Passes |
| Text on Accent | 8.81:1 | 4.5:1 | TextText set on the accent fill | Passes |
Not for text
- Accent on Canvas 1.68:1. Not for text. Fill or decoration only. Lamp yellow is 1.68:1: a fill behind dark text, never text.
- Accent on Surface 1.79: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.32: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.41: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.73:1. Not for text. Non-text only. An edge or ring, not a text color.
- Input border on Surface 3.98:1. Not for text. Non-text only. An edge or ring, not a text color.
Dark variant
#1F1A16, canvas, 58%. #2A231E, surface, 18%. #F3ECE2, text, 12%. #BFB2A3, muted text, 4%. #F2B84B, primary action and accent, 8%.
Suggested proportions
- 58% Canvas
- 18% Surface
- 12% Text
- 5% Primary action
- 4% Muted text
- 3% Accent
In use
New
Bread at seven, cake by ten.
Order a whole cake two days ahead.
Order a cakeToday’s bread
Fresh out
Rye and caraway, 11:20.
Collection day
Today
Cakes need two days’ notice.
Your cake is booked for Saturday.
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 | #1F1A16 | The page ground. | Aesthetary’s guidance |
| Surface | #2A231E | Cards, panels and fields. | Aesthetary’s guidance |
| Text | #F3ECE2 | All reading text and headings. | Aesthetary’s guidance |
| Muted text | #BFB2A3 | Secondary text and captions. | Aesthetary’s guidance |
| Primary action | #F2B84B | The action, in lamp yellow, for evening. | Aesthetary’s guidance |
| Text on primary | #1F1A16 | Label on the primary action. | Aesthetary’s guidance |
| Secondary action | #F3ECE2 | Secondary action: label and outline. | Aesthetary’s guidance |
| Border | #3A312A | Hairlines and dividers. Decorative only; never a field’s only edge. | Aesthetary’s guidance |
| Input border | #7D7064 | The edge of an input, where it is the only boundary. | Aesthetary’s guidance |
| Accent | #F2B84B | Lamp yellow. | Aesthetary’s guidance |
| Focus | #F3ECE2 | Focus ring, 2px, offset from the control. | Aesthetary’s guidance |
| Success | #7CC79A | Confirmation, always with a word or icon. | Aesthetary’s guidance |
| Warning | #F2B84B | Warnings, in the lamp yellow, always with a word or icon. | Aesthetary’s guidance |
| Error | #FF8A8A | Errors, always with a word or icon. | 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 | 14.71:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 13.19:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 8.31:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 7.45:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 9.64:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 14.71:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 13.19:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 9.64:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 8.64:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 14.71:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 13.19:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 3.59:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 3.22:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Success on Canvas | 8.62:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Success on Surface | 7.73:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Warning on Canvas | 9.64:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Warning on Surface | 8.64:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Canvas | 7.60:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 6.82:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 9.64:1 | 4.5:1 | TextAccent text | Passes |
| Accent on Surface | 8.64:1 | 4.5:1 | TextAccent text | Passes |
Not for text
- Border on Canvas 1.36: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.22: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.59:1. Not for text. Non-text only. An edge or ring, not a text color.
- Input border on Surface 3.22:1. Not for text. Non-text only. An edge or ring, not a text color.
What makes it characteristic
Warmth from light, not from earth tones: a clean warm white, brown-black type, a brick orange that asks for one thing and a lamp yellow behind good news. The evening variant keeps the lamp.
Avoids: Terracotta and olive with a handwritten script.
Limits of this palette
- The action brick and the error crimson are related hues; the error always carries a word or icon.
Related
Shares a principle with (Aesthetary’s guidance)Storybook, Mid-Century Modern
Related palettesFlat Fields, Brown Key, Overprint, Loud Hailer