Style guide
Colors
- Page
--color-bg - Panel
--color-bg-subtle - Hover surface
--color-surface - Border
--color-border - Text
--color-text - Muted text
--color-text-muted - Link
--color-link - Accent
--color-accent - Accent (filled)
--color-accent-solid - Focus
--color-focus
Heat steps (charts)
012345
Each step names its text color (--heat-ink-*), so labels read in both themes.
Type
- Good writers
--step--2 - Good writers
--step--1 - Good writers
--step-0 - Good writers
--step-1 - Good writers
--step-2 - Good writers
--step-3 - Good writers
--step-4
Satoshi 400500600Geist Mono
Icons
Phosphor Icons, regular weight. Icons inherit the text color and scale with the label.
Space
--space-3xs--space-2xs--space-xs--space-s--space-m--space-l--space-xl--space-2xl
Corners
--radius-s--radius--radius-l--radius-xl--radius-pillElevation
--shadow-raisedRaised: sticky bars, cards--shadow-floatFloat: hover cards, tooltips, toasts--shadow-dialogDialog: ⌘K, shortcutsChips
thinking 115agency 72
Buttons
Labels and marks
TopicRecent★Hover for a tooltipesc
Copied