dashbook
Marketing / Foundations

Tokens.

Re-theme a whole marketing surface by editing ~20 role variables in one place. Components reference roles (`--m-surface`, `--m-accent`, `--m-positive`…), never raw hex. Pair every semantic element with a `data-tone` attribute so one element styles four ways with no extra classes.

Semantic roles

Components reference these roles, never raw hex. Each carries a light and a dark value; the dark column is what renders inside a [data-marketing-dark] subtree.

--m-surface

Primary marketing surface — warm paper in light, near-black in dark. The page canvas.

#FAF9F5 · #14181C

--m-surface-2

Raised/inset surface one step off the canvas — white in light, faint warm wash in dark.

#EBEDE4 · rgba(234, 230, 219, 0.04)

--m-card

Card surface — sits on the canvas with a 1px --m-border and a faint lift shadow.

#FFFFFF · rgba(234, 230, 219, 0.04)

--m-fg-strong

Primary text + display headings — ink in light, paper in dark.

#25261D · #FAF9F5

--m-fg-muted

Body copy and secondary labels.

#505148 · rgba(234, 230, 219, 0.66)

--m-fg-subtle

Tertiary text — captions, disclaimers, eyebrow detail.

#5D5F55 · rgba(234, 230, 219, 0.40)

--m-border

Hairline — the default 1px stroke on cards, chips, dividers.

rgba(37, 38, 29, 0.10) · rgba(234, 230, 219, 0.12)

--m-border-strong

Stronger hairline — hover borders, emphasized dividers.

rgba(37, 38, 29, 0.20) · rgba(234, 230, 219, 0.24)

--m-accent

The marketing accent — jade, lifting to #5BB8B0 in dark for legibility. data-tone="accent".

#2B605C · #5BB8B0

--m-accent-deep

Pressed/deep accent — deep jade, used for hover and accent text on light.

#123B39 · #2B605C

--m-accent-soft

Soft accent tint — chip fills, highlighted rows, accent-toned backgrounds.

rgba(43, 96, 92, 0.08) · rgba(91, 184, 176, 0.14)

--m-accent-border

Accent-toned 1px border for soft-filled accent elements.

rgba(43, 96, 92, 0.28) · rgba(91, 184, 176, 0.34)

--m-positive

Money/positive — jade. Savings, gains, "included". data-tone="positive". Never green.

#2B605C · #5BB8B0

--m-positive-soft

Soft positive fill — positive chips, highlighted savings cells.

rgba(43, 96, 92, 0.08) · rgba(91, 184, 176, 0.12)

--m-positive-border

Positive-toned border.

rgba(43, 96, 92, 0.28) · rgba(91, 184, 176, 0.32)

--m-warn

Caution — amber #B86400, lifting to #D99A3C in dark. Sparing. data-tone="warn". Sourced from /shipping --ship-warn (= product --warning).

#B86400 · #D99A3C

--m-warn-soft

Soft amber fill for caution chips.

rgba(184, 100, 0, 0.09) · rgba(217, 154, 60, 0.12)

--m-warn-border

Amber-toned border.

rgba(184, 100, 0, 0.28) · rgba(217, 154, 60, 0.36)

--m-negative

Negative/violations — monochrome ink (paper in dark). Overcharges, declines. data-tone="negative". Never red.

#25261D · #EBEDE4

--m-negative-soft

Soft ink fill for negative chips / flagged rows.

rgba(37, 38, 29, 0.06) · rgba(235, 237, 228, 0.08)

--m-negative-border

Ink-toned border for negative elements.

rgba(37, 38, 29, 0.20) · rgba(235, 237, 228, 0.20)

data-tone convention

Put `data-tone="accent|positive|warn|negative"` on a chip, cell, dot, or callout. The element's CSS reads tone-scoped roles (`--m-accent`, `--m-positive`…) so fill, text, and border all shift together — no per-tone class needed. Accent and positive both resolve to jade by design (money is positive, positive is on-brand).

  • Attribute — data-tone
  • Values — accentpositivewarnnegative
Dark variant

A marketing surface goes dark by setting `data-marketing-dark` on ANY subtree — independent of the product-wide `html.dark` theme. The `--m-*` roles re-resolve inside that subtree and every component that references them follows. Use it to drop an ink band between two light sections without touching component code.

  • Trigger — [data-marketing-dark]
  • accent jade #2B605C → lifted #5BB8B0
  • surface #FAF9F5 → #14181C; raised #FFFFFF → rgba(234,230,219,.04)
  • text ink #0F1412 → paper #FAF9F5
  • border rgba(37,38,29,.1) → rgba(234,230,219,.12)
  • negative ink #25261D → paper #EBEDE4 (stays monochrome)
Radius + layout scale
  • Radii — --radius-* : 2 / 4 / 8 / 12 / 20 / 28 / full
  • Button — Buttons are a 6px squircle: `border-radius: 6px; corner-shape: squircle`.
  • Content max — 1240px (--content-max)
  • Gutters — sm 24px · md 40px · lg 80px
Color rules
  • Money / positive = jade. Savings, gains, "included". Never green.
  • Negative / violations = monochrome ink. Overcharges, declines, flags. Never red.
  • Amber = caution only. Sparing — one cautionary element per surface at most.
  • Cobalt is a marketing-only data accent; jade is the shared brand accent with product.
  • Multi-color is permitted only inside decorative duotone icons — nowhere else.