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, .fluid, .fluid-text-container, .fc, --fl, --ls-h1, --ls-h2, --ls-h3

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.
Set --fl directly on any text element (h1-h6, p, li, button, a, label, td, th, input, select, textarea, .fluid, .tag) to step it on the fluid scale (-1 through 6).
Add .fluid (or its alias .fluid-text-container / .fc) when typography should respond to container width via cqi instead of viewport units.

Line-height tokens: --lh-xs, --lh-s, --lh (the base, equal to 1.5), --lh-l, and --lh-xl. Note that the middle/base token is bare --lh — there is no --lh-m.

Heading Letter Spacing

h1/h2/h3 apply a subtle negative letter-spacing for tight display type. The values are exposed as tokens so serif or display-font themes can override them without fighting selector specificity:

Set these to 0 (or positive em values) for serif and slab faces that don't need tightening.

CSS Variables

Core spacing, radius, border, padding, line-height, shadow, motion, z-index, focus, and weight tokens.

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

Classes: --vs-*, --pad-*, --br-*, --border-*, --shadow-*, --d-*, --ease-*, --z-*, --fw-*, --focus-ring

Reference Notes

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

Spacing: --vs-* for vertical rhythm and --pad-* for interior padding (both scale xs through xxxl).
Shape: --br-* for corner radii (xs through xxl) and --border-* for border styles (--border-05, --border-1…--border-5).
Type rhythm: --lh-* for line-height adjustments — see Typography for the full set.
Elevation: --shadow-* (--shadow-1 through --shadow-6) for the depth ramp. --box is a separate inset highlight token (outer drop + two inset white highlights) used by .box.glow; it is not part of the elevation ramp.
Motion durations: --d-instant, --d-fast, --d-base, --d-slow, --d-emphatic — the semantic motion scale (see ADR-0008).
Motion easings: --ease-smooth, --ease-bounce, --ease-emphasized.
Stacking tiers: --z-base, --z-raised, --z-overlay, --z-sticky, --z-modal, --z-toast — use these instead of raw integers.
Focus ring: --focus-ring, --focus-ring-offset, --focus-ring-offset-inset for consistent keyboard focus styling.
Font weights: --fw-medium, --fw-semibold, --fw-bold for portable weight references.

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, --accent, --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.
--accent defaults to var(--primary) and is the interactive-accent knob — checkbox/radio accent-color and the dropzone hover/dragover state read from it. Override --accent independently when the accent UI shouldn't follow the brand primary.
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, .row, .form-actions, .form-option-row, .search, .dropzone

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 on inputs for validation border colors. :user-invalid and [aria-invalid="true"] produce the same error styling automatically.
Use .stack for the form's outer vertical rhythm.
Inside a <form> or <fieldset>, .row is the field-row primitive that groups label + control + caption with tight spacing.
Reach for .form-option-row for inline checkbox/radio rows, .form-actions for end-aligned submit/cancel bars, .search for inputs that need a magnifier icon, and .dropzone for drag-and-drop file uploads. Each has its own topic with full details.