Functional Classes
Utility classes for typography, spacing, shadows, and text alignment. Use for fast, token-backed styling without custom CSS.
Typography
Classes map to --catnip-font-* presets from the design tokens type scale (Figma). Use font: var(--catnip-font-…) or the utilities below.
| Group | Classes |
|---|---|
| Display | .catnip-font-display-l, .catnip-font-display-m |
| Heading | .catnip-font-heading-xl … .catnip-font-heading-xs |
| Text | .catnip-font-text-l, .catnip-font-text-m, .catnip-font-text-s |
| Button | .catnip-font-button-l, .catnip-font-button-m, .catnip-font-button-s |
| Badge | .catnip-font-badge-l, .catnip-font-badge-m, .catnip-font-badge-s |
| Paragraph | .catnip-font-paragraph-l, .catnip-font-paragraph-m, .catnip-font-paragraph-s |
| Table header | .catnip-font-table-header-l, .catnip-font-table-header-m |
| Code | .catnip-font-code-l, .catnip-font-code-m |
| Other | .catnip-font-initials, .catnip-font-count |
For emphasis on body text, set font-weight after the utility (tokens ship one weight per preset; legacy Prime-style classes in the compatibility layer still map old names to these variables).
Text Alignment
.catnip-text-left,.catnip-text-center,.catnip-text-right
Spacing
Scale: 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl
| Pattern | Example | Description |
|---|---|---|
catnip-m-{size} | .catnip-m-m | Margin all sides |
catnip-p-{size} | .catnip-p-s | Padding all sides |
catnip-m-{dir}-{size} | .catnip-m-t-m, .catnip-m-b-s | Directional margin (t, b, l, r) |
catnip-p-{dir}-{size} | .catnip-p-x-l | Directional padding |
catnip-m-{axis}-{size} | .catnip-m-y-s, .catnip-m-x-m | Axis shorthand (x, y) |
Shadows
Classes map to --catnip-shadow-elevation-* and --catnip-shadow-focus-* from design tokens (see Shadow tokens).
| Class | Token | Use |
|---|---|---|
.catnip-shadow--small-element | elevation-1 | Subtle elevation |
.catnip-shadow--card | elevation-1 | Cards, panels |
.catnip-shadow--popup-modal | elevation-3 | Dropdowns, popovers, surface modals |
.catnip-shadow--drawer | elevation-4 | Side panels (backdrop) |
.catnip-shadow--element-hover | elevation-2 | Hover lift |
.catnip-shadow--input-focus | focus-default | Focus ring |
.catnip-shadow--input-error | focus-danger | Invalid focus ring |