interface palette
Cream Editorial colour palette
Book-warm reading: a soft cream field, near-black ink, generous leading, oldstyle numerals and a restrained rust accent - the aesthetic that privileges the paragraph.
Primary and alternate
- Primary 1
- Primary 2
- Alternate 1
- Alternate 2
- Alternate 3
Named colours
- Primary
- Secondary
- Accent
- Call to action
- Background
- Surface
- Border
- Muted text
- Text
Base, worked out from the palette
- Base 1 (derived)
- Base 2 (derived)
- Base 3 (derived)
- Base 4 (derived)
- Base 5 (derived)
- Base 6 (derived)
Type, spacing and motion
This palette has its own type, spacing and motion; the contrast table is worked out from its colours.
| Token | Value |
|---|---|
| Heading type | Literata |
| Body type | Source Sans 3 |
| Mono type | Source Code Pro |
| Type scale | 1.25 ratio: 16px, 20px, 25px, 31px, 39px |
| Weights | heading 500 / 600 · body 400 / 400i / 600 |
| Spacing base | 8px |
| Spacing steps | 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px |
| Corner radius | 4px |
| Elevation | None; an occasional 1px rule above footnotes. |
| Motion | When | Duration | Easing |
|---|---|---|---|
| Skeleton pulse | loading | 1600ms | cubic-bezier(.37,0,.63,1) |
| Modal scale-in | dialog | 180ms | cubic-bezier(0,0,.2,1) |
| Rise-and-fade entrance | mount | 200ms | cubic-bezier(.16,1,.3,1) |
Contrast notes
- Text sits on #FBF8F3 or #292018, which are 15.1:1 apart.
- Safe for body text: Primary 1, Primary 2, Alternate 1, Alternate 2, Primary, Secondary, Accent, Call to action, Background, Surface, Border, Muted text and Text.
- Large text and icons only: Alternate 3.
- Ink #292018 on cream #FBF8F3 is 15.1:1 (AAA); muted #5D5347 is 7.1:1 - captions stay ≥ 18px or bold.
- Subscribe CTA #7C2D12 holds white at 9.4:1; link blue appears only inside sample essays at 6.3:1.
- Links are underlined, never hue-only; measure held to 60-70ch; body ≥ 19px at ≥ 1.65 leading.
- Offer a reader font-size control; columns reflow at 200% zoom without horizontal scroll.
| Colour | Hex | On #FBF8F3 | On #292018 | Safe for |
|---|---|---|---|---|
| Primary 1 | #9A3412 | 6.90:1 | 2.19:1 | Body text (AA) on #FBF8F3 |
| Primary 2 | #FBF8F3 | 1.00:1 | 15.09:1 | Any text (AAA) on #292018 |
| Alternate 1 | #F4EFE5 | 1.08:1 | 13.94:1 | Any text (AAA) on #292018 |
| Alternate 2 | #292018 | 15.09:1 | 1.00:1 | Any text (AAA) on #FBF8F3 |
| Alternate 3 | #C2703D | 3.49:1 | 4.32:1 | Large text and icons only on #292018 |
| Primary | #9A3412 | 6.90:1 | 2.19:1 | Body text (AA) on #FBF8F3 |
| Secondary | #292524 | 14.32:1 | 1.05:1 | Any text (AAA) on #FBF8F3 |
| Accent | #1D4ED8 | 6.33:1 | 2.38:1 | Body text (AA) on #FBF8F3 |
| Call to action | #7C2D12 | 8.85:1 | 1.71:1 | Any text (AAA) on #FBF8F3 |
| Background | #FBF8F3 | 1.00:1 | 15.09:1 | Any text (AAA) on #292018 |
| Surface | #F4EFE5 | 1.08:1 | 13.94:1 | Any text (AAA) on #292018 |
| Border | #E7DFD0 | 1.25:1 | 12.07:1 | Any text (AAA) on #292018 |
| Muted text | #5D5347 | 7.10:1 | 2.13:1 | Any text (AAA) on #FBF8F3 |
| Text | #292018 | 15.09:1 | 1.00:1 | Any text (AAA) on #FBF8F3 |
Cream Editorial as code
:root {
--cream-editorial-primary-1: #9A3412;
--cream-editorial-primary-2: #FBF8F3;
--cream-editorial-alternate-1: #F4EFE5;
--cream-editorial-alternate-2: #292018;
--cream-editorial-alternate-3: #C2703D;
--cream-editorial-primary: #9A3412;
--cream-editorial-secondary: #292524;
--cream-editorial-accent: #1D4ED8;
--cream-editorial-call-to-action: #7C2D12;
--cream-editorial-background: #FBF8F3;
--cream-editorial-surface: #F4EFE5;
--cream-editorial-border: #E7DFD0;
--cream-editorial-muted-text: #5D5347;
--cream-editorial-text: #292018;
}{
"cream-editorial": {
"primary-1": {
"$type": "color",
"$value": "#9A3412"
},
"primary-2": {
"$type": "color",
"$value": "#FBF8F3"
},
"alternate-1": {
"$type": "color",
"$value": "#F4EFE5"
},
"alternate-2": {
"$type": "color",
"$value": "#292018"
},
"alternate-3": {
"$type": "color",
"$value": "#C2703D"
}
}
}Using it on a report? Paste the first primary into Primary colour and an alternate into Accent colour in your account's Branding.
Put your colours on every report.
Run the free website health check on any site, then send your clients the Website Health Report in your own colours each month.