Base

Foundation styles and variables.

There is a deep base of classless CSS defaults in Graffiti giving you good defaults without having to memorize a bunch of classes. There is also an extensive CSS variable base that is focused on providing a deep system for consistency but also easy customization and theming that works in light or dark mode out of the box.

Typography

Fluid typography defaults that scale predictably across viewport and container sizes.

When to use: Default text hierarchy, heading utilities, and responsive type sizing.

Classes: h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .fs-xs, .fs-base, .fs-s, .fs-m, .fs-l, .fs-xl, .fs-xxl, .fs-xxxl, .fc

Reference Notes

Graffiti type uses a fluid scale controlled by --fl and semantic heading classes.

Use native h1-h6 for document structure.
Use .h1-.h6 when non-heading elements need heading styling.
Use .fs-* classes for size-only adjustments without changing semantic elements.
Use .fc when typography should respond to container width.

Line-height tokens (--lh-xs through --lh-xl) are available for tighter or looser rhythm control.

CSS Variables

Core spacing, radius, border, padding, line-height, and shadow tokens.

When to use: Theme-safe design tokens for consistent spacing, shape, and elevation.

Classes: --vs-*, --pad-*, --br-*, --border-*, --shadow-*

Reference Notes

These tokens define the core spacing and surface system used by components and utilities.

Spacing: --vs-* for vertical rhythm and --pad-* for interior padding.
Shape: --br-* for corner radii and --border-* for border styles.
Type rhythm: --lh-* for line-height adjustments.
Elevation: --shadow-* and --box for layered depth.

Use tokens first, then compose utilities/components on top to keep custom themes consistent.

Colors

OKLCH palette scales, semantic color tokens, and adaptive foreground/background variables.

When to use: Defining theme color systems and contrast-safe UI surfaces.

Classes: --primary, --error, --warning, --success, --fg, --bg

Reference Notes

Graffiti ships an OKLCH palette with generated -1 through -9 scales and semantic aliases.

Semantic colors (--primary, --error, --warning, --success) support scale variants.
Adaptive tokens (--fg, --bg) flip automatically for light and dark themes.
Prefer semantic tokens in app UI; reserve raw palette tokens for illustration-heavy surfaces.

Dividers

Styled horizontal rules for subtle visual separation.

When to use: Separating sections within content flows and card stacks.

Classes: hr

Reference Notes

Native <hr> elements are themed by default.

Use them between related content groups, not as decorative borders.
Keep surrounding spacing consistent with stack/layout gap tokens.

Forms

Classless native input styling and validation states.

When to use: Building forms with minimal custom classes

Classes: input, textarea, select, .error, .success, .warning

Reference Notes

Native controls are styled out of the box, with support for consistent validation classes.

Prefer semantic form markup (label, fieldset, help text) before custom wrappers.
Use .error, .success, and .warning classes for status styling.
Keep spacing and grouping consistent with .row and .stack helpers.