AcheryWorkshop

Accents & dial

Each project picks one accent; everything else stays paper and ink. Set it with <AcheryProvider defaultAccent="…">, and the visitor's choice is remembered. The swatches in the header switch this whole site.

An accent fills with main in light and light in dark; deep is its pressed state. The text on each fill is fg and fgDark. Previews below follow the site's light/dark setting.

13 accents + 1 legacy alias

  • terracotta
    main
    #c46a3a
    light
    #e6895a
    deep
    #a05526
    3.61:1 text on light fill AA large7.16:1 text on dark fill AAA3.61:1 as text on light bg AA large7.16:1 as text on dark bg AAA
    Default accent (Workbench): links' underline, focus ring, primary interaction in light.
    A link
  • moss
    main
    #4a5a32
    light
    #718654
    deep
    #31411b
    7.06:1 text on light fill AAA4.63:1 text on dark fill AA7.06:1 as text on light bg AAA4.63:1 as text on dark bg AA
    Anchor green. accent-2 and olive resolve here; a per-project accent option (Atlas).
    A link
  • plum
    main
    #5e486d
    light
    #8c769e
    deep
    #453152
    7.54:1 text on light fill AAA4.60:1 text on dark fill AA7.54:1 as text on light bg AAA4.60:1 as text on dark bg AA
    Muted purple; accent-3; per-project accent (Almanac).
    A link
  • ochre
    main
    #b8924a
    light
    #d6b676
    deep
    #95712e
    5.81:1 text on light fill AA8.66:1 text on dark fill AAA2.72:1 as text on light bg Below 3:19.56:1 as text on dark bg AAA
    The warn status hue and light selection-bg; per-project accent (Ledger). Carries ink text.
    A link
  • rust
    main
    #912e29
    light
    #db786b
    deep
    #6d1c1a
    7.53:1 text on light fill AAA6.11:1 text on dark fill AA7.53:1 as text on light bg AAA6.11:1 as text on dark bg AA
    Brick 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.
    A link
  • copper
    main
    #b8742a
    light
    #d68f48
    deep
    #8a531a
    4.46:1 text on light fill AA large6.31:1 text on dark fill AA3.55:1 as text on light bg AA large6.97:1 as text on dark bg AA
    Warm orange-bronze. Material signature copper (with patina metal); inline code tint in the docs kit.
    A link
  • slate
    main
    #195a73
    light
    #5189a1
    deep
    #024156
    7.19:1 text on light fill AAA4.81:1 text on dark fill AA7.19:1 as text on light bg AAA4.81:1 as text on dark bg AA
    Dusty steel blue, per-project accent (Draper). Not a default: the system is never blue-first.
    A link
  • woad
    main
    #445282
    light
    #6f7eae
    deep
    #2e3a64
    7.13:1 text on light fill AAA4.66:1 text on dark fill AA7.13:1 as text on light bg AAA4.66:1 as text on dark bg AA
    Indigo (after the dye plant), per-project accent; fills the blue-violet gap between slate and plum. 7.1:1 on paper, carries paper text.
    A link
  • verdigris
    main
    #04665e
    light
    #3f9086
    deep
    #034a44
    6.45:1 text on light fill AA4.90:1 text on dark fill AA6.45:1 as text on light bg AA4.90:1 as text on dark bg AA
    Aged-copper teal, per-project accent (Apothecary).
    A link
  • mauve
    main
    #76425b
    light
    #a56c87
    deep
    #5a2b43
    7.32:1 text on light fill AAA4.50:1 text on dark fill AA7.32:1 as text on light bg AAA4.50:1 as text on dark bg AA
    Dusty rose, per-project accent (Bindery).
    A link
  • amber
    main
    #9a6839
    light
    #be8c61
    deep
    #76491d
    3.53:1 text on light fill AA large5.70:1 text on dark fill AA4.48:1 as text on light bg AA large6.29:1 as text on dark bg AA
    Warm amber-gold, per-project accent (Chandlery); carries ink text.
    A link
  • fern
    main
    #36643e
    light
    #618d67
    deep
    #1d4825
    6.48:1 text on light fill AA4.88:1 text on dark fill AA6.48:1 as text on light bg AA4.88:1 as text on dark bg AA
    Cool conservatory green, per-project accent (Glasshouse).
    A link
  • blush
    main
    #955c63
    light
    #bc848a
    deep
    #713f45
    4.96:1 text on light fill AA6.02:1 text on dark fill AA4.96:1 as text on light bg AA6.02:1 as text on dark bg AA
    Dusty warm rose, per-project accent (Millinery).
    A link
  • oliveLegacy alias of moss
    main
    #4a5a32
    light
    #718654
    deep
    #31411b
    7.06:1 text on light fill AAA4.63:1 text on dark fill AA7.06:1 as text on light bg AAA4.63:1 as text on dark bg AA
    Legacy alias of moss (the old yellow olive #6b6b3a is retired). Prefer moss in new work.
    A link

The dial

How loudly the accent runs: <AcheryProvider defaultDial="…">, or setDial from useTheme(). It only dresses the interaction layer. The paper, ink hairlines and square corners never change.

  • underline

    Accent on links, focus rings and the active-tab underline only. Ticks are ink.

    .signature-surface
  • chrome

    The default. The accent threads the wiring: ticks, a rule before each eyebrow, outline-button borders.

    .signature-surface
  • surface

    As chrome, and the one .signature-surface panel per view floods with the accent.

    .signature-surface

The dial puts the accent on marks, never text: eyebrow labels stay in fg2 with an accent rule beside them. As 11px text, the accent would miss 4.5:1 for terracotta, copper, ochre and amber on paper, and for most hues on dark cards. React Native components don't read the dial yet.