Foundations
Color
Every colour is a role with a semantic token name. Pick the role, never the hex. Brand green is for action, links, selection and focus only.
Foundation 01
Color
Every colour is a role with a semantic token name. Pick the role, never the hex. Brand green is for action, links, selection and focus only.
Role
Token
Value
Use
Text
Default
color.text
#101112
Names, values, titles, active nav item
Subtle
color.text.subtle
#5E6066
Headers, labels, meta. 6.3:1 on white
Subtlest
color.text.subtlest
#6E7178
Placeholders, footers. 4.9:1 on white
Surface and fills
Surface
elevation.surface
#FFFFFF
Canvas, tables, menus
Sunken
elevation.surface.sunken
#FBFBFB
Sidebar, rails, form footers
Hover
color.background.neutral.hovered
#F5F6F7
Rows, nav, ghost buttons, group rows
Current item
color.background.neutral.pressed
#F0F0F1
Active nav, pressed. Text stays ink
Selected
color.background.selected
#E6F2EF
Checked row, chosen option. Text #004F46
Overlay
color.blanket
rgb(0 0 0 / .10)
Behind dialogs, with a 4px blur
Borders and focus
Hairline
color.border
#EEEFF1
Table grid, dividers. Decorative
Input edge
color.border.input
#8C8F97
Inputs, selects, textareas only. 3.2:1
Focus ring
color.border.focused
#004F46
2px solid ring with a 2px gap; inputs: edge turns 2px
Action and brand
Primary action
color.background.brand.bold
#004F46
One filled button per header. White text 9.5:1
Hover and press
color.background.brand.bold.hovered
#003E37
Darkens, never lightens
Link
color.link
#004F46
Always underlined
Brand mark
color.brand
#004F46
Logo tile, favicon. Same colour as action
Status · soft fill, dark text, same hue
Danger
color.text.danger · color.background.danger
Overdue
#B91C1C on #FCE9E9
Errors, delete, overdue. Hover fill #F8D7D7
Success
color.text.success · color.background.success
Placed
#2E6813 on #E8F5E0
Placed, done, paid
Warning
color.text.warning · color.background.warning
Needs review
#92400E on #FEF3C7
Needs review, draft
Information
color.text.information · color.background.information
CV sent
#1D5FB4 on #E0F0FF
CV sent, client meeting rounds
Discovery
color.text.discovery · color.background.discovery
Offer
#6B3FB0 on #F3ECFF
Offer, exclusive
Meeting
color.text.meeting · color.background.meeting
Client meeting
#056374 on #E0F1F5
Calendar type colour
Rules
1. Use the semantic token names. They alias the names in globals.css, so existing code keeps working.
2. Three text tiers only: text, subtle, subtlest. The active nav item uses color.text on the current-item fill.
3. color.border.input (#8C8F97) is for inputs, selects and textareas. Buttons and toolbars keep the light control ring.
4. Brand green #004F46 is for action, links, selection and focus. Links are always underlined, since green is only 2.0:1 against ink.
5. Status pills pair a soft fill with dark text of the same hue. Never use brand green for status. Stages take one hue per phase: Long list, Short list, Outreach and Interview grey (#5E6066 on #F0F0F1); CV sent and client rounds information; Offer discovery; Placed success. Board dots use the pill's text colour.