Complete Colour Palette.
Use one black throughout: #0A0A0B.
| Token | Value | Role |
|---|---|---|
black | #0A0A0B | Text on light surfaces, dark backgrounds and black artwork |
white | #FFFFFF | White text and artwork |
paper | #F7F7F8 | Light background |
surface | #111113 | Raised dark surface |
purple | #7C3AED | Identity, ordered numbering and editorial emphasis |
purple-soft | #9A66F1 | Intermediate gradient colour |
purple-text-dark | #9A66F1 | Small identity text and sequence numbers on dark surfaces |
emerald | #34D399 | Available actions |
emerald-dark | #08664E | Readable editorial labels on light backgrounds |
gold | #F2C94C | Active, live and pending states |
divider | #A6A6AB | Section-divider background |
numeral | #C1C1C5 | Large section numerals on divider grey |
rule-light | #DEDEE2 | Rules on light surfaces |
rule-dark | #29292E | Rules on dark surfaces |
copy-light | #57575F | Secondary copy on light |
copy-dark | #AAAAB1 | Secondary copy on dark |
quiet-light | #6F6F77 | Quiet metadata on light |
quiet-dark | #8A8A92 | Quiet metadata on dark |
paused / paused-light | #6F6F77 | Paused state on paper/light surfaces |
paused-dark | #8A8A92 | Paused state on black/dark surfaces |
Active/live/pending use gold and an explicit text label. Paused uses grey. Action buttons use emerald; traq Collection uses purple. Completed descriptive labels may remain neutral. Do not add coloured dots to sources, decorative lists or process steps. Editorial labels use emerald on dark surfaces and dark emerald on light surfaces; this is a label role, not an operational status. Gold text is not used on light backgrounds. Grey-divider headings and metadata use black for contrast.
See design values for all implementation values and CSS variables for web use. The type/spacing/radius/grid values formalize the handoff rules requested for implementation; they do not imply an existing component library.
Text Contrast
Small text must meet 4.5:1 against its actual background. Use quiet-light #6F6F77 on paper, quiet-dark #8A8A92 on black or surface, and the matching paused-light/paused-dark token. Small purple text uses #7C3AED on paper and #9A66F1 on black or surface. Logo artwork remains #7C3AED. Use black text #0A0A0B on emerald buttons #34D399.
| Pair | Contrast ratio |
|---|---|
| Quiet-light / paper | 4.65:1 |
| Quiet-dark or paused-dark / black | 5.78:1 |
| Quiet-dark or paused-dark / surface | 5.51:1 |
| Purple-text-dark / black | 5.23:1 |
| Purple-text-dark / surface | 4.98:1 |
| Black text / emerald button | 10.29:1 |
Gold is for active/live/pending states. Editorial labels use emerald on dark surfaces, dark emerald on paper, or black on divider grey. Open specifications use neutral copy colours.