K02
COLOR & TOKENS
Material or signal. Nothing else.
Materials come from the shop floor: RAL whites, greys and anthracite, copper for craft. Signals follow machine indicator lights. Blue is the operator's color, so in TAKT blue always means "your move".
Materials
Traffic White
≈ RAL 9016
#F1F1EC
--canvas
#F1F1EC
--canvas
Canvas. The hall floor of every page.
Machine Grey
≈ RAL 7035
#CDD1CC
--panel
#CDD1CC
--panel
Panels, housings, hover states.
Anthracite
≈ RAL 7016
#373D42
--ink-2
#373D42
--ink-2
Secondary type, frames, photo ground.
Jet Black
≈ RAL 9005
#0B0C0D
--ink
#0B0C0D
--ink
Type, station labels, rail.
Copper
Cu, brushed
#B87333
--accent
#B87333
--accent
Craft moments only: carrier, editorial marks.
Signals
Signals never appear alone. Each has a fixed shape and a word, so status reads without color vision.
Fault
--sig-red · #C8102E
Emergency or fault. Stop. Errors, out of service.
Warning
--sig-yellow · #E8AE00
Abnormal condition. Lead time, low stock, attention needed.
Running
--sig-green · #1E8A3C
Normal. In stock, online, success.
Info
--sig-white · #FFFFFF
Neutral information, planned, not yet started.
Your move
--action · #0F4C9A
Action required by the operator. Every CTA and interactive state.
✓ DO
Request a quote
Blue only where the user acts.
✕ DON'T
Our history
Blue headlines read as buttons.
Token architecture
Components read only semantic tokens. Themes remap semantic tokens to primitives. A brand theme overrides about 8 semantic tokens and nothing else.
1 · Primitives
--p-blue-5005: #0F4C9A--p-white-9016: #F1F1EC
--p-black-9005: #0B0C0D
--p-copper: #B87333
--ch-m: 12px
--t-600: 600ms
2 · Semantic
--action → --p-blue-5005--canvas → --p-white-9016
--ink → --p-black-9005
--accent → --p-copper
--chamfer-m → polygon(…)
--takt → --t-600
3 · Component
button.primary.bg → --actionbutton.primary.fg → --action-ink
card.nameplate.bg → --surface
card.clip → --chamfer-m
carrier.index → --takt
rail.carrier → --accent
Themes
Built to run.
Request a quote
Talk to an engineer
PX-080-10-S-K
PX 080 · i=10
Every shift.
Request a quote
Talk to an engineer
PX-080-10-S-K
PX 080 · i=10
See it run live.
Request a quote
Talk to an engineer
PX-080-10-S-K
PX 080 · i=10
Contrast
Every text/background pair in both themes. Body text targets AAA (7:1). Muted grey is for captions and meta only.
| Theme | Pair | Sample | Ratio | Level | Use |
|---|---|---|---|---|---|
| Day | #0B0C0D / #F1F1EC | Aa 120 Nm | Headlines, body | ||
| Day | #373D42 / #F1F1EC | Aa 120 Nm | Secondary text | ||
| Day | #555C61 / #F1F1EC | Aa 120 Nm | Captions, meta | ||
| Day | #0F4C9A / #F1F1EC | Aa 120 Nm | Links | ||
| Day | #FFFFFF / #0F4C9A | Aa 120 Nm | Primary button | ||
| Day | #8A5320 / #F1F1EC | Aa 120 Nm | Copper labels | ||
| Day | #0B0C0D / #CDD1CC | Aa 120 Nm | Text on panel | ||
| Night | #ECEDE8 / #0E1012 | Aa 120 Nm | Headlines, body | ||
| Night | #BCC1BD / #0E1012 | Aa 120 Nm | Secondary text | ||
| Night | #969DA1 / #0E1012 | Aa 120 Nm | Captions, meta | ||
| Night | #5B9BFF / #0E1012 | Aa 120 Nm | Links | ||
| Night | #0B0C0D / #5B9BFF | Aa 120 Nm | Primary button | ||
| Night | #D39A63 / #0E1012 | Aa 120 Nm | Copper labels |
Data-viz palette
Categorical order derived from Okabe–Ito, tuned for both themes. Machine states always use signal colors plus pattern, never the categorical set.
CATEGORICAL · --dv-1 … --dv-8
dv-1
dv-2
dv-3
dv-4
dv-5
dv-6
dv-7
dv-8
SEQUENTIAL · BLUE
DIVERGING · BLUE ↔ ORANGE, NEUTRAL MACHINE GREY