Skip to content
v2.1

Colour

Seven colours. One clear system.

Section titled “Seven colours. One clear system.”

Exact sRGB values: three core colours, three accents and a warm canvas. These come straight from tokens/tokens.json.

Deep Ink#142C2ARGB 20, 44, 42Text · structure · depth
Maker Teal#006E63RGB 0, 110, 99Primary brand · actions
Workshop Orange#FF7447RGB 255, 116, 71Energy · emphasis
Citron#DFFF8FRGB 223, 255, 143Fresh fields · short tags
Sky Blue#B5CDFFRGB 181, 205, 255Supporting information
Warm Yellow#FFD447RGB 255, 212, 71Small highlights · ink text
Warm Cream#FFF4E8RGB 255, 244, 232Canvas · breathing room

Neutral first, accent second

Section titled “Neutral first, accent second”

Most of any layout is Warm Cream and Deep Ink. Teal carries actions, orange is the one moment of energy, and the pastels stay small.

  • Maker Teal is the primary brand colour and the action colour.
  • Workshop Orange is energy and emphasis: attention counters, low-stock tags, one bold moment per layout.
  • Citron can fill whole sections. Warm Yellow is a small accent with Deep Ink text.

Readable by design

Section titled “Readable by design”

Use only tested text pairings, and add a word or an icon to every status.

5.68:1Cream on teal
13.60:1Ink on cream
5.51:1Ink on orange
10.37:1Ink on yellow
13.23:1Ink on citron
9.23:1Ink on sky
  • Normal text needs ≥ 4.5:1; large text needs ≥ 3:1. Large means 24 px regular or 18.7 px bold.
  • Avoid orange text on cream. It only reaches 2.47:1.
  • Ratios follow WCAG 2.2 Contrast (Minimum) and Use of Color.

Light and dark, side by side

Section titled “Light and dark, side by side”

Dark is one solid black neutral family (#000000 page, #0B0B0B, #141414 and #1C1C1C layers) with no green tint; teal, Citron and orange are accents only. Light is Warm Cream with white cards. Switch the live preview to see the same UI in each theme, then read every token below.

Following your system: light.

Issue the laser cutter

Scan the box, add the issue photo, hand it over.

Status

ReturnedIssuedDue soonLost

Chart series

Loading

Light: Warm Cream

Surfaces and text

  • bg#FFF4E8
  • surface#F6ECE0
  • panel#FFFFFF
  • hover#EFE6DB
  • line#D5D0C6
  • outline#828A83
  • ink#142C2A
  • muted#5B6863
  • focus#006E63

Accent

  • accent#006E63
  • accent-hover#02675D
  • accent-active#046158
  • on-accent#FFF4E8
  • accent-soft#E0EEEC
  • accent-ink#006E63

Brand

  • brand#006E63
  • brand-hover#02675D
  • brand-active#046158
  • on-brand#FFF4E8
  • brand-soft#E0EEEC
  • brand-ink#006E63
  • brand-boundary#006E63

Emphasis

  • emphasis#FF7447
  • emphasis-hover#FF8157
  • emphasis-active#FF8E67
  • on-emphasis#142C2A
  • emphasis-soft#FFEEE9

Success

  • success#DFFF8F
  • success-hover#CBEA85
  • success-active#B6D57B
  • on-success#142C2A
  • success-soft#FBFFF2
  • success-ink#536D49

Warn

  • warn#FFD447
  • warn-hover#E8C344
  • warn-active#D0B241
  • on-warn#142C2A
  • warn-soft#FFFAE9
  • warn-ink#696834

Info

  • info#B5CDFF
  • info-hover#A5BDEA
  • info-active#95ADD4
  • on-info#142C2A
  • info-soft#F6F9FF
  • info-ink#51697B

Danger

  • danger#B91C1C
  • danger-hover#991B1B
  • danger-active#851E1D
  • on-danger#FFF4E8
  • danger-line#FCA5A5

Sidebar

  • sidebar#DFFF8F
  • sidebar-hover#F2FFD2
  • sidebar-active#006E63

Scrim

  • scrim#142C2A

Chart series

  • chart-1#006E63
  • chart-2#FF7447
  • chart-3#DFFF8F
  • chart-4#B5CDFF
  • chart-5#FFD447
  • chart-edge#142C2A

Box-open loader

  • loader-under#354845
  • loader-spark#142C2A
  • loader-seam#142C2A

Dark: solid black

Surfaces and text

  • bg#000000
  • surface#0B0B0B
  • panel#141414
  • hover#1C1C1C
  • line#2C2C2C
  • outline#787878
  • ink#FFF4E8
  • muted#ACACAC
  • focus#DFFF8F

Accent

  • accent#006E63
  • accent-hover#02675D
  • accent-active#046158
  • on-accent#FFF4E8
  • accent-soft#121D1C
  • accent-ink#80B1A6

Brand

  • brand#006E63
  • brand-hover#02675D
  • brand-active#046158
  • on-brand#FFF4E8
  • brand-soft#121D1C
  • brand-ink#80B1A6
  • brand-boundary#80B1A6

Emphasis

  • emphasis#FF7447
  • emphasis-hover#FF8157
  • emphasis-active#FF8E67
  • on-emphasis#142C2A
  • emphasis-soft#221A17

Success

  • success#DFFF8F
  • success-hover#CBEA85
  • success-active#B6D57B
  • on-success#142C2A
  • success-soft#20221B
  • success-ink#E9FCAA

Warn

  • warn#FFD447
  • warn-hover#E8C344
  • warn-active#D0B241
  • on-warn#142C2A
  • warn-soft#222017
  • warn-ink#FFDE77

Info

  • info#B5CDFF
  • info-hover#A5BDEA
  • info-active#95ADD4
  • on-info#142C2A
  • info-soft#1E1F22
  • info-ink#CBD9F8

Danger

  • danger#FCA5A5
  • danger-hover#FDB9B6
  • danger-active#FDC9C3
  • on-danger#142C2A
  • danger-line#7C6261

Sidebar

  • sidebar#0B0B0B
  • sidebar-hover#1C1C1C
  • sidebar-active#006E63

Scrim

  • scrim#000000

Chart series

  • chart-1#006E63
  • chart-2#FF7447
  • chart-3#DFFF8F
  • chart-4#B5CDFF
  • chart-5#FFD447
  • chart-edge#FFF4E8

Box-open loader

  • loader-under#66625D
  • loader-spark#FFF4E8
  • loader-seam#000000

The full light and dark palettes the app uses, with every ratio computed, are in the token reference and the UI brand spec.

Paired modes and tenant boundaries

Section titled “Paired modes and tenant boundaries”

See token architecture for exact light/dark pairs, the seven-member public tenant brand family and fixed exclusions, and the full contrast matrix for validation.