Style guide

Brand palette

Sampled from the logo. Leaf and Sky fail WCAG contrast on Ground and are decorative only — never text, never a button background, never a meaningful border.

• Ink

  --ink · #1E3535

  Body text, headings

• Primary

  --primary · #3A5F5E

  Buttons, links

• Brand teal

  --brand-teal · #4B7B7A

  Focus rings, accents

• Leafdecorative only

  --leaf · #86B37F

  Decorative only — illustration, dividers, chart fills

• Skydecorative only

  --sky · #76ADBE

  Decorative only — illustration, dividers, chart fills

• Ground

  --ground · #FFFCF8

  Page background

• Docket

  --docket · #FEF7DD

  Data blocks (the docket component)

Semantic tokens

UI roles built from the brand palette plus supporting neutrals (border, muted, chart fills). Components should reference these, not raw hex values.

• Card

  --card

• Secondary

  --secondary

• Muted

  --muted

• Accent

  --accent

  Hover/highlight surface — derived from Primary, not Leaf

• Destructive

  --destructive

• Border

  --border

• Chart 1

  --chart-1

• Chart 2

  --chart-2

• Chart 3

  --chart-3

• Chart 4

  --chart-4

• Chart 5

  --chart-5

Display — Barlow Condensed

Condensed and tight. Headings only.

• Licensed waste collection

  display-2xl

• Licensed waste collection

  display-xl

• Licensed waste collection

  display-lg

• Licensed waste collection

  display-md

• Licensed waste collection

  display-sm

Body — Public Sans

Comfortable line-height for long compliance copy.

• A waste transfer note must be kept for at least two years and produced on request during an audit.

  body-xl

• A waste transfer note must be kept for at least two years and produced on request during an audit.

  body-lg

• A waste transfer note must be kept for at least two years and produced on request during an audit.

  body

• A waste transfer note must be kept for at least two years and produced on request during an audit.

  body-sm

• A waste transfer note must be kept for at least two years and produced on request during an audit.

  body-xs

Mono — IBM Plex Mono

Data and docket blocks only. Signals that a number is a record, not marketing.

• 20 03 01 · Mixed waste · 1,100L · Weekly

  mono-lg

• 20 03 01 · Mixed waste · 1,100L · Weekly

  mono

• 20 03 01 · Mixed waste · 1,100L · Weekly

  mono-sm

Buttons

Docket

The signature component — a weighbridge-ticket-styled block for EWC codes, container options, frequency and lead time. The data below is a placeholder for layout and contrast review; it is not a verified list of what SATS accepts (see content/facts.md).