Style reference. Use the class names shown beneath each swatch or sample.
For text, swap the bg- prefix for text- (e.g. text-prim-500).
bg-prim-500bg-prim-400bg-prim-300bg-prim-200bg-prim-100bg-prim-50For text, swap the bg- prefix for text- (e.g. text-sec-d-500).
bg-sec-d-500bg-sec-d-400bg-sec-d-300bg-sec-d-200bg-sec-d-100For text, swap the bg- prefix for text- (e.g. text-sec-l-500).
bg-sec-l-500bg-sec-l-400bg-sec-l-300bg-sec-l-200For text, swap the bg- prefix for text- (e.g. text-acc-500).
bg-acc-500bg-acc-400bg-acc-300bg-acc-200For text, swap the bg- prefix for text- (e.g. text-comp-blue).
bg-comp-bluebg-comp-silverbg-comp-goldbg-comp-platinumbg-comp-copperCustom utility classes that apply a multi-stop gradient. Used as backgrounds on cards.
bg-silver-metalbg-gold-metalbg-platinum-metalbg-steel-metalbg-charcoal-metalbg-slate-metalbg-iron-metalbg-copper-metalTitle font
Source Sans 3
CSS variable: var(--font-title)
Used by text-h1 through text-h5.
Body font
Inter
CSS variable: var(--font-body)
Used by text-p1 through text-p6 and the default body.
The quick brown fox
text-h148px · Page hero titleThe quick brown fox
text-h232px · Section titleThe quick brown fox
text-h324px · Subsection titleThe quick brown fox
text-h418px · Card titleThe quick brown fox
text-h516px · Small labelThe quick brown fox
text-p148px · Display bodyThe quick brown fox
text-p241px · Lead paragraphThe quick brown fox
text-p332px · Large paragraphThe quick brown fox
text-p424px · Medium paragraphThe quick brown fox
text-p518px · Standard paragraphThe quick brown fox
text-p616px · Small paragraph / default