AcheryWorkshop

Colour

Ink on paper in light, candlelight on lamp black in dark. Components use the semantic tokens, which change with the theme. The palette underneath stays the same in both, and isn't for direct use in components.

Values come from achery-ui/tokens. Usage notes come from the Achery design system, which these values mirror. Ratios are WCAG contrast: text needs 4.5:1, or 3:1 at 24px and up; lines and marks need 3:1.

Semantic tokens

In CSS, use the --achery-color-* custom properties; in vanilla-extract, vars.color.*; in React Native, lightTokens and darkTokens.

TokenLightDarkUsage
Grounds
bg--achery-color-bg#fbf8f015.86:1 fg on it AAA#14130f14.00:1 fg on it AAAPage background. Body text is fg on it.
bg2--achery-color-bg2#f0e9d613.89:1 fg on it AAA#1f1d1812.68:1 fg on it AAASecondary background (sidebars, table headers, code chips).
bgSunken--achery-color-bgSunken#e6dec512.52:1 fg on it AAA#0c0b0814.82:1 fg on it AAASunken wells and pre blocks.
surface--achery-color-surface#fdfaf316.15:1 fg on it AAA#26241e11.68:1 fg on it AAACard surface, just above bg.
surface2--achery-color-surface2#f0e9d613.89:1 fg on it AAA#2d2a2310.78:1 fg on it AAASecond card tier; dark hover fill.
Text
fg--achery-color-fg#1f1d1815.86:1 on bg AAA16.15:1 on surface AAA#e8dfc814.00:1 on bg AAA11.68:1 on surface AAABody text on bg, bg-2, bg-sunken, surface (12.5:1 or more in both themes).
fg2--achery-color-fg2#4a463c8.86:1 on bg AAA9.02:1 on surface AAA#b8ad948.35:1 on bg AAA6.97:1 on surface AASecondary text and labels on bg, bg-2, surface (6.4:1 or more in both themes).
fg3--achery-color-fg3#6e6a5e5.09:1 on bg AA5.18:1 on surface AA#8a85765.04:1 on bg AA4.20:1 on surface AA largeTertiary text (captions, mono metadata) on bg and surface: 5:1 there. Misses 4.5:1 on light bg-2 (4.5) and bg-sunken (4.0), and on dark surface (4.2) and surface-2 (3.9): kept as the source has it.
fgMute--achery-color-fgMute#8a85763.47:1 on bg AA large3.53:1 on surface AA large#6e6a5e3.43:1 on bg AA large2.87:1 on surface Below 3:1Muted text for 24px+ or decoration only: about 3.5:1 on bg/surface in both themes, under 4.5:1 for body text. Kept as the source has it.
Lines
border--achery-color-border#1f1d1815.86:1 on bg 3:1#e8dfc814.00:1 on bg 3:1The 1px hairline on every card, field and table: ink in light, cream in dark.
border2--achery-color-border2#6e6a5e5.09:1 on bg 3:1#8a85765.04:1 on bg 3:1Secondary border (ghost buttons).
borderMute--achery-color-borderMute#b8ad942.09:1 on bg Below 3:1#4a463c1.97:1 on bg Below 3:1Inner dividers and dashed row rules. About 2:1 on bg: decorative only, never the only edge of a control.
rule--achery-color-rule#14130f17.51:1 on bg 3:1#e8dfc814.00:1 on bg 3:1Section rules and double-rule dividers.
Accent
accent--achery-color-accent#c46a3a3.61:1 on bg AA large3.68:1 on surface AA large#e6895a7.16:1 on bg AAA5.97:1 on surface AATHE per-project override point. Links' underline, focus ring (2px, offset 2px), active tab, primary interaction. As text on bg it reaches only 3.6:1 in light: use for 24px+ text, rules and marks. Dark: terracotta-light, 7.2:1.
accentFg--achery-color-accentFg#fbf8f03.61:1 on accent AA large#14130f7.16:1 on accent AAAText on an accent fill. 3.6:1 on terracotta in light (meets 3:1 for bold labels 19px+ only; the source's buttons use 12px bold); 7.2:1 in dark.
accent2--achery-color-accent2#4a5a327.06:1 on bg 3:1#7186544.63:1 on bg 3:1Secondary accent slot.
accent3--achery-color-accent3#5e486d7.54:1 on bg 3:1#8c769e4.60:1 on bg 3:1Tertiary accent slot.
Status
success--achery-color-success#6ba03d2.94:1 on bg Below 3:12.99:1 on surface Below 3:1#6ba03d5.94:1 on bg AA4.96:1 on surface AASuccess state, always with a word or tick. As text: 2.9:1 on light bg (marks and 24px+ only), 6:1 on dark bg. Kept as the source has it.
warn--achery-color-warn#b8924a2.72:1 on bg Below 3:12.77:1 on surface Below 3:1#b8924a6.41:1 on bg AA5.35:1 on surface AAWarning state, always with a word. As text: 2.7:1 on light bg (rules, dots, fills with ink text), 6.4:1 on dark bg.
danger--achery-color-danger#912e297.53:1 on bg AAA7.66:1 on surface AAA#db786b6.11:1 on bg AA5.10:1 on surface AADanger / stopped state and error text, always with a word or icon. Light: rust, 7.5:1 on bg. Dark: rust-light, 6.1:1 on bg and 4.7:1 on surface-2.
info--achery-color-info#755e855.35:1 on bg AA5.45:1 on surface AA#755e853.27:1 on bg AA large2.73:1 on surface Below 3:1Informational state. 5.2:1 on light bg; 3.4:1 on dark bg (24px+ text and marks).
Selection
selectionBg--achery-color-selectionBg#b8924a5.81:1 selectionFg on it AA#7186544.63:1 selectionFg on it AAText selection background.
selectionFg--achery-color-selectionFg#1f1d185.81:1 on selectionBg AA#14130f4.63:1 on selectionBg AAText selection foreground on selection-bg.

Palette

palette from achery-ui/tokens: the same in both themes.

ink

  • ink#1f1d18Near-black, warm. Text and 1px borders on paper in light; the fg/border source. Also the dark theme's bg-2.
  • inkDeep#14130fEven darker ink: the dark theme's page ground (bg) and accent-fg there; text on accent in dark.

paper

  • paper#fbf8f0Lightest near-white warm cream: the light page ground (bg) and accent-fg on terracotta.
  • paperWarm#f0e9d6Darker paper for secondary light surfaces (bg-2, surface-2), table headers, hover rows.
  • paperToasted#e6dec5Warmest light paper: press-stoppers, hero strips, sunken wells (bg-sunken).

cream

  • cream#e8dfc8Foreground on dark: text, borders and rules in the dark theme; secondary surface.
  • creamSoft#d8cdb0Muted cream: one-tone-warmer hover fill on cream surfaces.

moss

  • mossDeep#31411bDarkest moss green; deep fills and pressed states.
  • moss#4a5a32Anchor green. accent-2 and olive resolve here; a per-project accent option (Atlas).
  • mossMid#5f7043Mid moss for secondary green fills.
  • mossLight#718654Light moss: accent-2 and selection-bg in dark (4.6:1 on dark bg); dark-theme green fills. sage is the very-light tint step.

sage

  • sage#b6c898Very light green for tints and fills behind ink text.

terracotta

  • terracotta#c46a3aDefault accent (Workbench): links' underline, focus ring, primary interaction in light.
  • terracottaDeep#a05526Pressed / deep terracotta.
  • terracottaLight#e6895aThe dark theme's accent; carries ink-deep text (7.2:1).

plum

  • plum#5e486dMuted purple; accent-3; per-project accent (Almanac).
  • plumDeep#453152Deep plum for pressed states on a plum project.
  • plumMid#755e85The info status hue (5.4:1 on light bg).
  • plumLight#8c769eThe dark theme's accent-3 (4.6:1 on dark bg).

rust

  • rust#912e29Brick red: the danger status hue; per-project accent (Foundry). Sits at hue ~27° in OKLCH, well clear of terracotta (~47°). 7.5:1 on paper.
  • rustDeep#6d1c1aDeep rust for pressed states on a rust project.
  • rustLight#db786bLight rust: the dark theme's danger, and a rust project's dark-theme accent. Readable as error text on every dark ground (6.1 on bg, 5.5 on bg-2, 5.1 on surface, 4.7 on surface-2). Lifted further above rust than other families' light steps so it clears 4.5:1; carries ink-deep text (6.1:1).

ochre

  • ochre#b8924aThe warn status hue and light selection-bg; per-project accent (Ledger). Carries ink text.
  • ochreDeep#95712eDeep ochre for pressed states and ochre as text on light paper (4.2:1: 24px+ or bold 19px+).
  • ochreLight#d6b676Light ochre: an ochre project's dark-theme accent; carries ink text.

slate

  • slate#195a73Dusty steel blue, per-project accent (Draper). Not a default: the system is never blue-first.
  • slateDeep#024156Deep slate for pressed states on a slate project.
  • slateLight#5189a1Light slate: a slate project's dark-theme accent; carries ink text.

woad

  • woad#445282Indigo (after the dye plant), per-project accent; fills the blue-violet gap between slate and plum. 7.1:1 on paper, carries paper text.
  • woadDeep#2e3a64Deep woad for pressed states.
  • woadLight#6f7eaeLight woad: a woad project's dark-theme accent (4.7:1 on dark bg); carries ink-deep text.

verdigris

  • verdigris#04665eAged-copper teal, per-project accent (Apothecary).
  • verdigrisDeep#034a44Deep verdigris for pressed states.
  • verdigrisLight#3f9086Light verdigris: dark-theme accent; carries ink text.

mauve

  • mauve#76425bDusty rose, per-project accent (Bindery).
  • mauveDeep#5a2b43Deep mauve for pressed states.
  • mauveLight#a56c87Light mauve: dark-theme accent; carries ink text.

amber

  • amber#9a6839Warm amber-gold, per-project accent (Chandlery); carries ink text.
  • amberDeep#76491dDeep amber for pressed states.
  • amberLight#be8c61Light amber: dark-theme accent; carries ink text.

fern

  • fern#36643eCool conservatory green, per-project accent (Glasshouse).
  • fernDeep#1d4825Deep fern for pressed states.
  • fernLight#618d67Light fern: dark-theme accent; carries ink text.

olive

  • olive#4a5a32Legacy alias of moss (the old yellow olive #6b6b3a is retired). Prefer moss in new work.
  • oliveDeep#31411bLegacy alias of moss-deep, completing the olive set.
  • oliveMid#5f7043Legacy alias of moss-mid.
  • oliveLight#718654Legacy alias of moss-light.

blush

  • blush#955c63Dusty warm rose, per-project accent (Millinery).
  • blushDeep#713f45Deep blush for pressed states.
  • blushLight#bc848aLight blush: dark-theme accent; carries ink text.

leather

  • leather#6b3a26Deep cordovan. Material signature leather (with gold metal); only inside contained objects (modals, a featured card, receipts).
  • leatherDeep#4a2418Deep leather, the darkest bookbinding brown (the value the source's materials card showed): material shadows and spines.
  • leatherMid#8a4e34Mid leather for material gradients and panels.
  • leatherLight#a86a48Light leather highlight.

copper

  • copper#b8742aWarm orange-bronze. Material signature copper (with patina metal); inline code tint in the docs kit.
  • copperDeep#8a531aDeep copper for inset frames and rivets.
  • copperLight#d68f48Light copper highlight.
  • copperPatina#5a7a6aAged copper green: the copper signature's metal.

silver

  • silver#a8a098Warm pewter (not cool). Ghost and tertiary material buttons.
  • silverDeep#6e6a62Gunmetal: the wood signature's deep metal.
  • silverLight#c8c0b6Polished silver: the wood signature's metal.

wood

  • wood#7a5a3aWalnut. Material signature wood (with silver metal).
  • woodLight#a88660Oak / pine.
  • woodDeep#4a3422Ebony / dark walnut.

gold

  • gold#dbb73fBright gilt, the leather signature's metal: a hint, never a shout. Kept well clear of ochre (brighter and yellower). Ink text on it 8.7:1.
  • goldDeep#9c7b22Deep gold: material eyebrows and values on light material bodies (3.8:1 on surface: bold labels and figures only).
  • goldLight#f1d680Pale gilt: metal text on dark material bodies (6.5:1 on leather).

success

  • success#6ba03dSuccess state, always with a word or tick. As text: 2.9:1 on light bg (marks and 24px+ only), 6:1 on dark bg. Kept as the source has it.