Curated palette · Interface

Light UI theme Every role pair measured

A complete light theme for interfaces: paper and sheet surfaces, warm ink, borders, a focus ring, an accent and four status colors. It is the light theme this site ships, so it is in daily use and maintained, and every pairing it relies on is measured below.

Roles
23
Pairs measured
43
Weakest text pair
4.73:1
Weakest control pair
3.79:1
Pairs below their minimum
0
Role pairs Live preview

The tokens

The roles

Each role names the job a color does and the site token it comes from, so every value can be checked against the stylesheet this site serves.

Surfaces

  • Page --aa2-surface The page background: paper, not white.
  • Raised --aa2-card Cards, panels and menus, always with a hairline.
  • Well --aa2-subtle Code, rails and table heads.

Text

  • Headings --aa2-ink-strong Headings.
  • Primary text --aa2-ink Body text.
  • Secondary text --aa2-ink-2 Labels and secondary text.
  • Muted text --aa2-ink-3 Captions, at 12.5 px or larger.

Borders

  • Separator --aa2-line Dividers between sections. Decoration only.
  • Control boundary --aa2-line-control The edge of anything you can click or type in.

Focus and accent

  • Focus ring --aa2-gold-ink A 2 px outline, 3 px outside the control.
  • Accent fill --aa2-gold Rules and marks. On paper it decorates and never carries meaning alone.
  • Accent text --aa2-gold-ink Links on hover and accented words.
  • Strong accent --aa2-gold-ink-strong Text on a gold tint; the primary button on hover.

Primary action

  • Primary button --aa2-action Primary buttons, the skip link and selected segments.
  • Primary button label --aa2-surface The label on the primary button.

Status

  • Success --aa2-ok Success text, icons and fills.
  • Success background --aa2-ok-bg Behind a success message.
  • Warning --aa2-warn Warning text, icons and fills.
  • Warning background --aa2-warn-bg Behind a warning.
  • Error --aa2-bad Error text, icons and fills.
  • Error background --aa2-bad-bg Behind an error.
  • Information --aa2-info Information text, icons and fills.
  • Information background --aa2-info-bg Behind a note.

Two roles share one value, #765A0B: the focus ring and accent text. The site uses it that way too. The page is paper, not white: pure black on white measured 20.5:1, past readable and into glare, so the theme's darkest ink is a warm near-black. The accent values are the defaults: choosing another accent color in this site's settings changes the site, not the values published here.

Measured

Every pair it relies on

Text needs 4.5:1 for AA and 7:1 for AAA. Control boundaries, focus rings and meaningful graphics need 3:1 against what touches them (WCAG 1.4.11). A separator only decorates, so it has no minimum.

Pairs measured
43
With a minimum
37
Weakest text pair
4.73:1 Muted text, well
Weakest control pair
3.79:1 Control boundary, well
Below their minimum
0
Every role pair in the light theme, measured
PairSampleRatioNeedsVerdict
Text on surfaces
Headingson page
 #1C1A16 / #F5F0E6 15.29:1 4.5:1, 7:1 for AAA Passes AAA
Headingson raised
 #1C1A16 / #FCF9F2 16.52:1 4.5:1, 7:1 for AAA Passes AAA
Primary texton page
 #2F2B24 / #F5F0E6 12.39:1 4.5:1, 7:1 for AAA Passes AAA
Primary texton raised
 #2F2B24 / #FCF9F2 13.38:1 4.5:1, 7:1 for AAA Passes AAA
Primary texton well
 #2F2B24 / #ECE5D7 11.23:1 4.5:1, 7:1 for AAA Passes AAA
Secondary texton page
 #524C42 / #F5F0E6 7.48:1 4.5:1, 7:1 for AAA Passes AAA
Secondary texton raised
 #524C42 / #FCF9F2 8.08:1 4.5:1, 7:1 for AAA Passes AAA
Secondary texton well
 #524C42 / #ECE5D7 6.78:1 4.5:1, 7:1 for AAA Passes AA
Muted texton page
 #6A6357 / #F5F0E6 5.23:1 4.5:1, 7:1 for AAA Passes AA
Muted texton raised
 #6A6357 / #FCF9F2 5.64:1 4.5:1, 7:1 for AAA Passes AA
Muted texton well
 #6A6357 / #ECE5D7 4.73:1 4.5:1, 7:1 for AAA Passes AA
Accent texton page
 #765A0B / #F5F0E6 5.71:1 4.5:1, 7:1 for AAA Passes AA
Accent texton raised
 #765A0B / #FCF9F2 6.16:1 4.5:1, 7:1 for AAA Passes AA
Controls and focus
Control boundaryon page
 #7A7263 / #F5F0E6 4.18:1 3:1 Passes 3:1
Control boundaryon raised
 #7A7263 / #FCF9F2 4.52:1 3:1 Passes 3:1
Control boundaryon well
 #7A7263 / #ECE5D7 3.79:1 3:1 Passes 3:1
Focus ringon page
 #765A0B / #F5F0E6 5.71:1 3:1 Passes 3:1
Focus ringon raised
 #765A0B / #FCF9F2 6.16:1 3:1 Passes 3:1
Focus ringon well
 #765A0B / #ECE5D7 5.17:1 3:1 Passes 3:1
Primary action
Primary button labelon primary button
 #F5F0E6 / #1D2A3E 12.72:1 4.5:1, 7:1 for AAA Passes AAA
Primary button labelon strong accent
 #F5F0E6 / #5E4708 7.76:1 4.5:1, 7:1 for AAA Passes AAA
Focus ringon primary button
 #765A0B / #1D2A3E 2.22:1 Not adjacent Kept apart by the offset
Status
Successon success background
 #136B39 / #E8F5EE 5.87:1 4.5:1, 7:1 for AAA Passes AA
Warningon warning background
 #92400E / #FEF3C7 6.36:1 4.5:1, 7:1 for AAA Passes AA
Erroron error background
 #B91C1C / #FEE2E2 5.29:1 4.5:1, 7:1 for AAA Passes AA
Informationon information background
 #1E40AF / #EFF6FF 8.01:1 4.5:1, 7:1 for AAA Passes AAA
Primary texton success background
 #2F2B24 / #E8F5EE 12.55:1 4.5:1, 7:1 for AAA Passes AAA
Primary texton warning background
 #2F2B24 / #FEF3C7 12.64:1 4.5:1, 7:1 for AAA Passes AAA
Primary texton error background
 #2F2B24 / #FEE2E2 11.52:1 4.5:1, 7:1 for AAA Passes AAA
Primary texton information background
 #2F2B24 / #EFF6FF 12.93:1 4.5:1, 7:1 for AAA Passes AAA
Pageon success
 #F5F0E6 / #136B39 5.79:1 4.5:1, 7:1 for AAA Passes AA
Pageon warning
 #F5F0E6 / #92400E 6.24:1 4.5:1, 7:1 for AAA Passes AA
Pageon error
 #F5F0E6 / #B91C1C 5.69:1 4.5:1, 7:1 for AAA Passes AA
Pageon information
 #F5F0E6 / #1E40AF 7.67:1 4.5:1, 7:1 for AAA Passes AAA
Successon raised
 #136B39 / #FCF9F2 6.26:1 4.5:1, 7:1 for AAA Passes AA
Warningon raised
 #92400E / #FCF9F2 6.74:1 4.5:1, 7:1 for AAA Passes AA
Erroron raised
 #B91C1C / #FCF9F2 6.15:1 4.5:1, 7:1 for AAA Passes AA
Informationon raised
 #1E40AF / #FCF9F2 8.29:1 4.5:1, 7:1 for AAA Passes AAA
Decoration
Separatoron page
 #DAD1BF / #F5F0E6 1.33:1 None Decoration, no minimum
Separatoron raised
 #DAD1BF / #FCF9F2 1.44:1 None Decoration, no minimum
Separatoron well
 #DAD1BF / #ECE5D7 1.20:1 None Decoration, no minimum
Accent fillon page
 #D3AF37 / #F5F0E6 1.85:1 None Decoration, no minimum
Accent fillon raised
 #D3AF37 / #FCF9F2 2.00:1 None Decoration, no minimum

Live preview

The theme in use

Built only from the tokens above, and always light, whatever theme you are reading in. Tab through it to see the focus ring, or switch every ring on at once.

The form check and the focus-ring switch need JavaScript; everything else here works without it.

Updated today

Weekly report

Sign-ups rose by a fifth this week, led by search and email.

Compared with the previous seven days.

How these colors measure

Send the report

We send the weekly report to this address.

Success Payment received. A receipt is on its way.

Warning Your trial ends in three days.

Error The upload failed. Check the file and try again.

Note A new version of the report is ready.

Recent deploys
ServiceStatusDuration
WebsiteLive0:42
CheckoutSlow3:10
PaymentsFailed1:05
Help centerQueued0:00

A sample interface: the form only checks the address format and sends nothing.

How it holds

The rules behind the pairs

Four decisions keep every pair in use above its minimum.

  • Separators decorate; controls get their own edge. The separator, #DAD1BF, measures 1.33:1 on the page, so it must never be the only edge of a control. Inputs and secondary buttons use the control boundary, #7A7263: 4.18:1 on the page and 3.79:1 in a well.
  • Gold draws; gold ink writes. The brand gold, #D3AF37, measures 1.85:1 on the page and 2.00:1 on a card, so it draws rules and marks and never shows a state on its own. Words, links and the focus ring use the gold ink, #765A0B: 5.71:1 on the page.
  • The focus ring stays off the button. It is 2 px of #765A0B, drawn 3 px outside the control. Against the surfaces around it, it measures at least 5.17:1. Against the navy primary button it would be 2.22:1, so the gap of page color between the two is part of the design.
  • Status text clears AA on its own background. The weakest is error text on the error background, 5.29:1; on a solid status fill, page-colored text reaches at least 5.69:1. Every alert and badge in the preview also has an icon and a word, so status never relies on color alone.

Code

Export the theme

All 23 roles as tokens, from ui-surface-page to ui-status-info-bg.

Each CSS line and DTCG token names the site token it comes from.

CSS custom properties

/* Generated by Auric Artisan light UI theme on 2026-10-11 */
:root {
  --ui-surface-page: #F5F0E6; /* Page (--aa2-surface) */
  --ui-surface-raised: #FCF9F2; /* Raised (--aa2-card) */
  --ui-surface-well: #ECE5D7; /* Well (--aa2-subtle) */
  --ui-text-strong: #1C1A16; /* Headings (--aa2-ink-strong) */
  --ui-text-primary: #2F2B24; /* Primary text (--aa2-ink) */
  --ui-text-secondary: #524C42; /* Secondary text (--aa2-ink-2) */
  --ui-text-muted: #6A6357; /* Muted text (--aa2-ink-3) */
  --ui-border-separator: #DAD1BF; /* Separator (--aa2-line) */
  --ui-border-control: #7A7263; /* Control boundary (--aa2-line-control) */
  --ui-focus-ring: #765A0B; /* Focus ring (--aa2-gold-ink) */
  --ui-accent-fill: #D3AF37; /* Accent fill (--aa2-gold) */
  --ui-accent-text: #765A0B; /* Accent text (--aa2-gold-ink) */
  --ui-accent-strong: #5E4708; /* Strong accent (--aa2-gold-ink-strong) */
  --ui-action-fill: #1D2A3E; /* Primary button (--aa2-action) */
  --ui-action-text: #F5F0E6; /* Primary button label (--aa2-surface) */
  --ui-status-ok-fg: #136B39; /* Success (--aa2-ok) */
  --ui-status-ok-bg: #E8F5EE; /* Success background (--aa2-ok-bg) */
  --ui-status-warn-fg: #92400E; /* Warning (--aa2-warn) */
  --ui-status-warn-bg: #FEF3C7; /* Warning background (--aa2-warn-bg) */
  --ui-status-bad-fg: #B91C1C; /* Error (--aa2-bad) */
  --ui-status-bad-bg: #FEE2E2; /* Error background (--aa2-bad-bg) */
  --ui-status-info-fg: #1E40AF; /* Information (--aa2-info) */
  --ui-status-info-bg: #EFF6FF; /* Information background (--aa2-info-bg) */
}

Tailwind config

// Generated by Auric Artisan light UI theme on 2026-10-11
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        "ui": {
          "surface": {
            "page": "#F5F0E6",
            "raised": "#FCF9F2",
            "well": "#ECE5D7"
          },
          "text": {
            "strong": "#1C1A16",
            "primary": "#2F2B24",
            "secondary": "#524C42",
            "muted": "#6A6357"
          },
          "border": {
            "separator": "#DAD1BF",
            "control": "#7A7263"
          },
          "focus": {
            "ring": "#765A0B"
          },
          "accent": {
            "fill": "#D3AF37",
            "text": "#765A0B",
            "strong": "#5E4708"
          },
          "action": {
            "fill": "#1D2A3E",
            "text": "#F5F0E6"
          },
          "status": {
            "ok": {
              "fg": "#136B39",
              "bg": "#E8F5EE"
            },
            "warn": {
              "fg": "#92400E",
              "bg": "#FEF3C7"
            },
            "bad": {
              "fg": "#B91C1C",
              "bg": "#FEE2E2"
            },
            "info": {
              "fg": "#1E40AF",
              "bg": "#EFF6FF"
            }
          }
        }
      }
    },
  },
};

Design tokens (W3C DTCG)

{
  "$schema": "https://schemas.tokens.studio/latest/tokens-schema.json",
  "$description": "Generated by Auric Artisan light UI theme on 2026-10-11",
  "ui": {
    "surface": {
      "page": {
        "$value": "#F5F0E6",
        "$type": "color",
        "$description": "Page (--aa2-surface)"
      },
      "raised": {
        "$value": "#FCF9F2",
        "$type": "color",
        "$description": "Raised (--aa2-card)"
      },
      "well": {
        "$value": "#ECE5D7",
        "$type": "color",
        "$description": "Well (--aa2-subtle)"
      }
    },
    "text": {
      "strong": {
        "$value": "#1C1A16",
        "$type": "color",
        "$description": "Headings (--aa2-ink-strong)"
      },
      "primary": {
        "$value": "#2F2B24",
        "$type": "color",
        "$description": "Primary text (--aa2-ink)"
      },
      "secondary": {
        "$value": "#524C42",
        "$type": "color",
        "$description": "Secondary text (--aa2-ink-2)"
      },
      "muted": {
        "$value": "#6A6357",
        "$type": "color",
        "$description": "Muted text (--aa2-ink-3)"
      }
    },
    "border": {
      "separator": {
        "$value": "#DAD1BF",
        "$type": "color",
        "$description": "Separator (--aa2-line)"
      },
      "control": {
        "$value": "#7A7263",
        "$type": "color",
        "$description": "Control boundary (--aa2-line-control)"
      }
    },
    "focus": {
      "ring": {
        "$value": "#765A0B",
        "$type": "color",
        "$description": "Focus ring (--aa2-gold-ink)"
      }
    },
    "accent": {
      "fill": {
        "$value": "#D3AF37",
        "$type": "color",
        "$description": "Accent fill (--aa2-gold)"
      },
      "text": {
        "$value": "#765A0B",
        "$type": "color",
        "$description": "Accent text (--aa2-gold-ink)"
      },
      "strong": {
        "$value": "#5E4708",
        "$type": "color",
        "$description": "Strong accent (--aa2-gold-ink-strong)"
      }
    },
    "action": {
      "fill": {
        "$value": "#1D2A3E",
        "$type": "color",
        "$description": "Primary button (--aa2-action)"
      },
      "text": {
        "$value": "#F5F0E6",
        "$type": "color",
        "$description": "Primary button label (--aa2-surface)"
      }
    },
    "status": {
      "ok": {
        "fg": {
          "$value": "#136B39",
          "$type": "color",
          "$description": "Success (--aa2-ok)"
        },
        "bg": {
          "$value": "#E8F5EE",
          "$type": "color",
          "$description": "Success background (--aa2-ok-bg)"
        }
      },
      "warn": {
        "fg": {
          "$value": "#92400E",
          "$type": "color",
          "$description": "Warning (--aa2-warn)"
        },
        "bg": {
          "$value": "#FEF3C7",
          "$type": "color",
          "$description": "Warning background (--aa2-warn-bg)"
        }
      },
      "bad": {
        "fg": {
          "$value": "#B91C1C",
          "$type": "color",
          "$description": "Error (--aa2-bad)"
        },
        "bg": {
          "$value": "#FEE2E2",
          "$type": "color",
          "$description": "Error background (--aa2-bad-bg)"
        }
      },
      "info": {
        "fg": {
          "$value": "#1E40AF",
          "$type": "color",
          "$description": "Information (--aa2-info)"
        },
        "bg": {
          "$value": "#EFF6FF",
          "$type": "color",
          "$description": "Information background (--aa2-info-bg)"
        }
      }
    }
  }
}

Plain text to paste; nothing is downloaded. Free to use in any project.

Sources

Sources and method

Where the values and the thresholds come from.

Ratios are the WCAG 2 contrast ratio, floored to two decimals, from this site's color engine. A Node test reads the values from the stylesheet and fails if this page drifts from it. Checked with axe and the keyboard in Chromium; not yet tested with a screen reader. Last reviewed on 11 October 2026.

Related