Foundations
Foundations
The tokens every component is made from. Change the scheme, density or accent at the top and everything below follows.
Colour
Surfaces and text
--kit-bg#f5f6f8--kit-surface#ffffff--kit-surface-2#f0f2f5--kit-surface-3#e8ebef--kit-line#e2e5ea--kit-line-strong#cdd2d9--kit-fg#0d1014--kit-fg-2#48505b--kit-fg-3#69717d
Accent
--kit-accent#0f766e--kit-accent-hover#0b5f58--kit-accent-soft#e2f3f0--kit-accent-fg#ffffff
Meaning
--kit-good#157a3c--kit-good-soft#e3f4e8--kit-warn#8f4f06--kit-warn-soft#fcf0dc--kit-bad#b42318--kit-bad-soft#fbe6e4--kit-bad-fg#ffffff--kit-info#1d55c4--kit-info-soft#e4ecfb
Data series
--kit-series-1#0f766e--kit-series-2#4f46e5--kit-series-3#d97706--kit-series-4#db2777--kit-series-5#0284c7--kit-series-6#65a30d
Type
- Bricolage GrotesqueDisplay: headings, used with restraintAnalytics for small teams
- Instrument SansInterface: everything people read and pressSave changes, invite Sam, export the report
- Geist MonoFigures, code and labels£128,400 · 48,210 · 3.4%
--kit-text-xsThe quick brown fox0.75rem--kit-text-smThe quick brown fox0.8125rem--kit-text-mdThe quick brown fox0.90625rem--kit-text-lgThe quick brown fox1rem--kit-text-xlThe quick brown fox1.25rem--kit-text-2xlThe quick brown fox1.625rem--kit-text-3xlThe quick brown fox2.25rem--kit-text-4xlThe quick brown fox3rem
Space and size
Compact density shrinks controls and spacing; try it at the top of the page.
Shape and depth
--kit-radius-16px--kit-radius-210px--kit-radius-314px--kit-radius-pill999px--kit-shadow-1--kit-shadow-2--kit-shadow-3