Curated palette · Interface

Dark UI theme Every role pair measured

A complete dark theme for interfaces: surfaces, text, borders, a focus ring, an accent and four status colors. It is the dark 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
5.98:1
Weakest control pair
4.08: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.
  • Raised --aa2-card Cards, panels and menus.
  • 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 Marks, rules and selected states.
  • 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.

Three roles share one value, #E2C766: the focus ring, accent text and warning. The site uses it that way too. 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
39
Weakest text pair
5.98:1 Muted text, well
Weakest control pair
4.08:1 Control boundary, well
Below their minimum
0
Every role pair in the dark theme, measured
PairSampleRatioNeedsVerdict
Text on surfaces
Headingson page
 #FFFFFF / #0F0E0C 19.29:1 4.5:1, 7:1 for AAA Passes AAA
Headingson raised
 #FFFFFF / #171613 18.09:1 4.5:1, 7:1 for AAA Passes AAA
Primary texton page
 #F2EFE9 / #0F0E0C 16.81:1 4.5:1, 7:1 for AAA Passes AAA
Primary texton raised
 #F2EFE9 / #171613 15.76:1 4.5:1, 7:1 for AAA Passes AAA
Primary texton well
 #F2EFE9 / #1C1A17 15.12:1 4.5:1, 7:1 for AAA Passes AAA
Secondary texton page
 #C3BDB3 / #0F0E0C 10.33:1 4.5:1, 7:1 for AAA Passes AAA
Secondary texton raised
 #C3BDB3 / #171613 9.69:1 4.5:1, 7:1 for AAA Passes AAA
Secondary texton well
 #C3BDB3 / #1C1A17 9.30:1 4.5:1, 7:1 for AAA Passes AAA
Muted texton page
 #9D978D / #0F0E0C 6.65:1 4.5:1, 7:1 for AAA Passes AA
Muted texton raised
 #9D978D / #171613 6.24:1 4.5:1, 7:1 for AAA Passes AA
Muted texton well
 #9D978D / #1C1A17 5.98:1 4.5:1, 7:1 for AAA Passes AA
Accent texton page
 #E2C766 / #0F0E0C 11.57:1 4.5:1, 7:1 for AAA Passes AAA
Accent texton raised
 #E2C766 / #171613 10.85:1 4.5:1, 7:1 for AAA Passes AAA
Controls and focus
Control boundaryon page
 #807A71 / #0F0E0C 4.53:1 3:1 Passes 3:1
Control boundaryon raised
 #807A71 / #171613 4.25:1 3:1 Passes 3:1
Control boundaryon well
 #807A71 / #1C1A17 4.08:1 3:1 Passes 3:1
Focus ringon page
 #E2C766 / #0F0E0C 11.57:1 3:1 Passes 3:1
Focus ringon raised
 #E2C766 / #171613 10.85:1 3:1 Passes 3:1
Focus ringon well
 #E2C766 / #1C1A17 10.41:1 3:1 Passes 3:1
Accent fillon page
 #D3AF37 / #0F0E0C 9.14:1 3:1 Passes 3:1
Accent fillon raised
 #D3AF37 / #171613 8.57:1 3:1 Passes 3:1
Primary action
Primary button labelon primary button
 #0F0E0C / #F2EFE9 16.81:1 4.5:1, 7:1 for AAA Passes AAA
Primary button labelon strong accent
 #0F0E0C / #F0DC9A 14.15:1 4.5:1, 7:1 for AAA Passes AAA
Focus ringon primary button
 #E2C766 / #F2EFE9 1.45:1 Not adjacent Kept apart by the offset
Status
Successon success background
 #4ADE80 / #12281C 8.95:1 4.5:1, 7:1 for AAA Passes AAA
Warningon warning background
 #E2C766 / #2A2312 9.34:1 4.5:1, 7:1 for AAA Passes AAA
Erroron error background
 #F87171 / #241A12 6.16:1 4.5:1, 7:1 for AAA Passes AA
Informationon information background
 #93C5FD / #16202E 9.09:1 4.5:1, 7:1 for AAA Passes AAA
Primary texton success background
 #F2EFE9 / #12281C 13.59:1 4.5:1, 7:1 for AAA Passes AAA
Primary texton warning background
 #F2EFE9 / #2A2312 13.57:1 4.5:1, 7:1 for AAA Passes AAA
Primary texton error background
 #F2EFE9 / #241A12 14.85:1 4.5:1, 7:1 for AAA Passes AAA
Primary texton information background
 #F2EFE9 / #16202E 14.29:1 4.5:1, 7:1 for AAA Passes AAA
Pageon success
 #0F0E0C / #4ADE80 11.07:1 4.5:1, 7:1 for AAA Passes AAA
Pageon warning
 #0F0E0C / #E2C766 11.57:1 4.5:1, 7:1 for AAA Passes AAA
Pageon error
 #0F0E0C / #F87171 6.97:1 4.5:1, 7:1 for AAA Passes AA
Pageon information
 #0F0E0C / #93C5FD 10.69:1 4.5:1, 7:1 for AAA Passes AAA
Successon raised
 #4ADE80 / #171613 10.38:1 4.5:1, 7:1 for AAA Passes AAA
Warningon raised
 #E2C766 / #171613 10.85:1 4.5:1, 7:1 for AAA Passes AAA
Erroron raised
 #F87171 / #171613 6.54:1 4.5:1, 7:1 for AAA Passes AA
Informationon raised
 #93C5FD / #171613 10.03:1 4.5:1, 7:1 for AAA Passes AAA
Decoration
Separatoron page
 #2C2A26 / #0F0E0C 1.34:1 None Decoration, no minimum
Separatoron raised
 #2C2A26 / #171613 1.26:1 None Decoration, no minimum
Separatoron well
 #2C2A26 / #1C1A17 1.21:1 None Decoration, no minimum

Live preview

The theme in use

Built only from the tokens above, and always dark, 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, #2C2A26, measures 1.34:1 on the page, so it must never be the only edge of a control. Inputs and secondary buttons use the control boundary, #807A71: 4.53:1 on the page and 4.08:1 in a well.
  • The focus ring stays off the button. It is 2 px of #E2C766, drawn 3 px outside the control. Against the surfaces around it, it measures at least 10.41:1. Against the light primary button it would be 1.45:1, so the gap of page color between the two is part of the design.
  • Warning shares the accent's color. #E2C766 is the warning, the accent text and the focus ring, so status must never rely on color alone: every alert and badge in the preview has an icon and a word.
  • Status text clears AA on its own background. The weakest is error text on the error background, 6.16:1; on a solid status fill, page-colored text reaches at least 6.97:1.

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 dark UI theme on 2026-10-04 */
:root {
  --ui-surface-page: #0F0E0C; /* Page (--aa2-surface) */
  --ui-surface-raised: #171613; /* Raised (--aa2-card) */
  --ui-surface-well: #1C1A17; /* Well (--aa2-subtle) */
  --ui-text-strong: #FFFFFF; /* Headings (--aa2-ink-strong) */
  --ui-text-primary: #F2EFE9; /* Primary text (--aa2-ink) */
  --ui-text-secondary: #C3BDB3; /* Secondary text (--aa2-ink-2) */
  --ui-text-muted: #9D978D; /* Muted text (--aa2-ink-3) */
  --ui-border-separator: #2C2A26; /* Separator (--aa2-line) */
  --ui-border-control: #807A71; /* Control boundary (--aa2-line-control) */
  --ui-focus-ring: #E2C766; /* Focus ring (--aa2-gold-ink) */
  --ui-accent-fill: #D3AF37; /* Accent fill (--aa2-gold) */
  --ui-accent-text: #E2C766; /* Accent text (--aa2-gold-ink) */
  --ui-accent-strong: #F0DC9A; /* Strong accent (--aa2-gold-ink-strong) */
  --ui-action-fill: #F2EFE9; /* Primary button (--aa2-action) */
  --ui-action-text: #0F0E0C; /* Primary button label (--aa2-surface) */
  --ui-status-ok-fg: #4ADE80; /* Success (--aa2-ok) */
  --ui-status-ok-bg: #12281C; /* Success background (--aa2-ok-bg) */
  --ui-status-warn-fg: #E2C766; /* Warning (--aa2-warn) */
  --ui-status-warn-bg: #2A2312; /* Warning background (--aa2-warn-bg) */
  --ui-status-bad-fg: #F87171; /* Error (--aa2-bad) */
  --ui-status-bad-bg: #241A12; /* Error background (--aa2-bad-bg) */
  --ui-status-info-fg: #93C5FD; /* Information (--aa2-info) */
  --ui-status-info-bg: #16202E; /* Information background (--aa2-info-bg) */
}

Tailwind config

// Generated by Auric Artisan dark UI theme on 2026-10-04
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        "ui": {
          "surface": {
            "page": "#0F0E0C",
            "raised": "#171613",
            "well": "#1C1A17"
          },
          "text": {
            "strong": "#FFFFFF",
            "primary": "#F2EFE9",
            "secondary": "#C3BDB3",
            "muted": "#9D978D"
          },
          "border": {
            "separator": "#2C2A26",
            "control": "#807A71"
          },
          "focus": {
            "ring": "#E2C766"
          },
          "accent": {
            "fill": "#D3AF37",
            "text": "#E2C766",
            "strong": "#F0DC9A"
          },
          "action": {
            "fill": "#F2EFE9",
            "text": "#0F0E0C"
          },
          "status": {
            "ok": {
              "fg": "#4ADE80",
              "bg": "#12281C"
            },
            "warn": {
              "fg": "#E2C766",
              "bg": "#2A2312"
            },
            "bad": {
              "fg": "#F87171",
              "bg": "#241A12"
            },
            "info": {
              "fg": "#93C5FD",
              "bg": "#16202E"
            }
          }
        }
      }
    },
  },
};

Design tokens (W3C DTCG)

{
  "$schema": "https://schemas.tokens.studio/latest/tokens-schema.json",
  "$description": "Generated by Auric Artisan dark UI theme on 2026-10-04",
  "ui": {
    "surface": {
      "page": {
        "$value": "#0F0E0C",
        "$type": "color",
        "$description": "Page (--aa2-surface)"
      },
      "raised": {
        "$value": "#171613",
        "$type": "color",
        "$description": "Raised (--aa2-card)"
      },
      "well": {
        "$value": "#1C1A17",
        "$type": "color",
        "$description": "Well (--aa2-subtle)"
      }
    },
    "text": {
      "strong": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Headings (--aa2-ink-strong)"
      },
      "primary": {
        "$value": "#F2EFE9",
        "$type": "color",
        "$description": "Primary text (--aa2-ink)"
      },
      "secondary": {
        "$value": "#C3BDB3",
        "$type": "color",
        "$description": "Secondary text (--aa2-ink-2)"
      },
      "muted": {
        "$value": "#9D978D",
        "$type": "color",
        "$description": "Muted text (--aa2-ink-3)"
      }
    },
    "border": {
      "separator": {
        "$value": "#2C2A26",
        "$type": "color",
        "$description": "Separator (--aa2-line)"
      },
      "control": {
        "$value": "#807A71",
        "$type": "color",
        "$description": "Control boundary (--aa2-line-control)"
      }
    },
    "focus": {
      "ring": {
        "$value": "#E2C766",
        "$type": "color",
        "$description": "Focus ring (--aa2-gold-ink)"
      }
    },
    "accent": {
      "fill": {
        "$value": "#D3AF37",
        "$type": "color",
        "$description": "Accent fill (--aa2-gold)"
      },
      "text": {
        "$value": "#E2C766",
        "$type": "color",
        "$description": "Accent text (--aa2-gold-ink)"
      },
      "strong": {
        "$value": "#F0DC9A",
        "$type": "color",
        "$description": "Strong accent (--aa2-gold-ink-strong)"
      }
    },
    "action": {
      "fill": {
        "$value": "#F2EFE9",
        "$type": "color",
        "$description": "Primary button (--aa2-action)"
      },
      "text": {
        "$value": "#0F0E0C",
        "$type": "color",
        "$description": "Primary button label (--aa2-surface)"
      }
    },
    "status": {
      "ok": {
        "fg": {
          "$value": "#4ADE80",
          "$type": "color",
          "$description": "Success (--aa2-ok)"
        },
        "bg": {
          "$value": "#12281C",
          "$type": "color",
          "$description": "Success background (--aa2-ok-bg)"
        }
      },
      "warn": {
        "fg": {
          "$value": "#E2C766",
          "$type": "color",
          "$description": "Warning (--aa2-warn)"
        },
        "bg": {
          "$value": "#2A2312",
          "$type": "color",
          "$description": "Warning background (--aa2-warn-bg)"
        }
      },
      "bad": {
        "fg": {
          "$value": "#F87171",
          "$type": "color",
          "$description": "Error (--aa2-bad)"
        },
        "bg": {
          "$value": "#241A12",
          "$type": "color",
          "$description": "Error background (--aa2-bad-bg)"
        }
      },
      "info": {
        "fg": {
          "$value": "#93C5FD",
          "$type": "color",
          "$description": "Information (--aa2-info)"
        },
        "bg": {
          "$value": "#16202E",
          "$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 4 October 2026.

Related