Foundation and controls
Useful, quiet, clear.
Paper and ink keep the reading surface calm. Cobalt marks actions. Gain and loss colors are always paired with a sign or a label.
Color
Semantic roles
These are the light-theme values from the 1.4 reference. The full system also demonstrates dark-mode behavior.
#F7F5EF
#181A20
#2452FF
#F3E5AB
Type
One job per family.
Bricolage Grotesque · display
People make markets.
Instrument Sans · reading and controls
A market price can rise or fall. Read how it is calculated before deciding.
IBM Plex Mono · values
$42.80 +2.4%
Explanation stays near the value
Illustrative mark price · 24h change. This is neither a cash balance nor the person’s income.
Controls
Native inputs, clear labels.
Controls keep a visible label, a 44 px target and keyboard focus. The full reference includes advanced combobox and responsive table specimens.
Actions
Find a market
Selection
Disclosure
What is a mark price?
The mark price is a reference value used by a market. It is not a cash balance.
Documentation
The working rules.
The source design-system page has the full component gallery, states, responsive lab and accessibility notes.