Colours
primary
subtle bg + emphasis text
secondary
subtle bg + emphasis text
success
subtle bg + emphasis text
info
subtle bg + emphasis text
warning
subtle bg + emphasis text
danger
subtle bg + emphasis text
light
subtle bg + emphasis text
dark
subtle bg + emphasis text
body bg
the page
card bg
surfaces
tertiary bg
insets
sidebar
the chrome + its accent
topbar
the page's head
row actions
--genus-actions-contrast-*
Text
Body text — the ink every page reads in. Secondary text for hints. Tertiary. A link. INV-2026-0042 is a code.
text-primary
text-primary-emphasis
text-secondary
text-secondary-emphasis
text-success
text-success-emphasis
text-info
text-info-emphasis
text-warning
text-warning-emphasis
text-danger
text-danger-emphasis
Buttons
Solid
Outline
Soft
Soft outline
Sizes, contrast, row actions
Badges and alerts
primary
secondary
success
info
warning
danger
light
dark
primary subtle
secondary subtle
success subtle
info subtle
warning subtle
danger subtle
Primary. An alert says something about the page you are on.
Secondary. An alert says something about the page you are on.
Success. An alert says something about the page you are on.
Info. An alert says something about the page you are on.
Warning. An alert says something about the page you are on.
Danger. An alert says something about the page you are on.
Form states
A hint under the field.
Letters, digits and dashes only.