Design Tokens
CSS custom properties (variables) that power the armpitMFG theme. Use these tokens to maintain consistency across your application.
Colors
Brand Colors
Primary
--color-primaryPrimary Hover
--color-primary-hoverPrimary Subtle
--color-primary-subtleAccent
--color-accentSemantic Colors
Success
--color-successWarning
--color-warningDanger
--color-dangerInfo
--color-infoSurface Colors
Base
--surface-baseElevated
--surface-elevatedSunken
--surface-sunkenHover
--surface-hoverText Colors
Aa
Primary
--text-primaryAa
Secondary
--text-secondaryAa
Tertiary
--text-tertiaryAa
Inverse
--text-inverseSpacing
Consistent spacing scale based on 4px increments:
| Token | Value | Preview |
|---|---|---|
--space-1 | 4px | |
--space-2 | 8px | |
--space-3 | 12px | |
--space-4 | 16px | |
--space-5 | 20px | |
--space-6 | 24px | |
--space-8 | 32px | |
--space-10 | 40px | |
--space-12 | 48px |
Border Radius
Small
--radius-smMedium
--radius-mdLarge
--radius-lgExtra Large
--radius-xlFull
--radius-fullTypography
| Token | Example |
|---|---|
--font-sans | The quick brown fox |
--font-mono | const x = 42; |
Usage Example
.my-component {
background: var(--surface-elevated);
color: var(--text-primary);
padding: var(--space-4);
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
}
.my-component:hover {
background: var(--surface-hover);
border-color: var(--color-primary);
}