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.
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
Graffiti type uses a fluid scale controlled by --fl and semantic heading classes.
h1-h6 for document structure..h1-.h6 when non-heading elements need heading styling..fs-* classes for size-only adjustments without changing semantic elements.--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)..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.
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.
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, --safe-*
These tokens define the core spacing, surface, motion, and stacking system used by components and utilities.
Graffiti has four explicit token tiers:
| Tier | Override? | Scope |
|---|---|---|
| Primitive/reference | Yes | Raw values and scales such as --blue, --pad-*, and --ease-* |
| Global semantic | Yes | Shared roles such as --primary, --border-*, --shadow-*, and --d-* |
| Component contract | Yes, on the owning pattern | Stable or fallback-backed hooks such as --button-color, --gap, and --drawer-bg |
| Private calculated | No | Framework intermediates; new private names use --_component-* |
Use graffiti-lookup --token-name for one token's tier, inheritance, default stability, and theme-scope behavior. graffiti-lookup list --tokens lists public tokens only; private tokens are implementation details and are excluded from normal search and generation guidance.
--vs-* for vertical rhythm and --pad-* for interior padding (both scale xs through xxxl).--br-* for corner radii (xs through xxl) and --border-* for border styles (--border-05, --border-1…--border-5).--lh-* for line-height adjustments — see Typography for the full set.--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.--d-instant, --d-fast, --d-base, --d-slow, --d-emphatic — the semantic motion scale (see ADR-0008).--ease-smooth, --ease-bounce, --ease-emphasized, plus the physics-derived linear() catalog — springs --ease-spring-smooth (ζ = 1, drawers/panels), --ease-spring-snappy (toggles/tabs), --ease-spring-pop (popovers/dropdowns), --ease-spring-bouncy (badges/reactions), --ease-spring-elastic (drag-release snap-back); bounces --ease-bounce-soft, --ease-bounce-firm (landing metaphors); entrances --ease-enter-glide (sheets/route pushes), --ease-enter-soft (lists/cards); exits --ease-exit-swift (dismissals), --ease-exit-anticipate (send/launch); and --ease-pop for sub-300ms emphasis. Oscillation is baked into each curve, so tune feel by switching curves and scale only the duration — springs and bounces want 450–1000ms, well past --d-emphatic.--z-base, --z-raised, --z-overlay, --z-sticky, --z-modal, --z-toast — use these instead of raw integers.--focus-ring, --focus-ring-offset, --focus-ring-offset-inset for consistent keyboard focus styling.--fw-medium, --fw-semibold, --fw-bold for portable weight references.--safe-top, --safe-right, --safe-bottom, --safe-left expose the user agent's viewport insets and can be overridden on embedded shells.Use public tokens first, then compose utilities/components on top to keep custom themes consistent. A custom property appearing in the stylesheet is not automatically an override contract; Registry v2's public field is authoritative.
Native mark element themed with the highlighter color scale.
When to use: Calling out matched search terms or emphasized phrases within running text.
Classes: mark
Native <mark> elements are themed by default using the translucent highlighter scale.
<mark> for semantic highlighting (search-result matches, emphasized phrases), not as a general styling hook.color is inherited, so highlights stay legible in both light and dark themes.Mark / MarkText colors automatically.--highlighter scale rather than restyling mark directly.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
Graffiti ships an OKLCH palette with generated -1 through -9 scales. Palette anchors and their reference scales are primitive/reference tokens; purpose-bound aliases and scales are global semantic tokens.
--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.--fg, --bg) flip automatically for light and dark themes.Native figure and figcaption elements themed for captioned media and quotes.
When to use: Pairing an image, chart, code sample, or quotation with a caption that describes or attributes it.
Classes: figure, figcaption
Native <figure> and <figcaption> elements are themed by default, so captioned media reads consistently without extra classes.
<figure> and describe or attribute it with a single <figcaption>.--vs-* spacing scale; the caption renders one fluid step smaller (--fl: -1) in the muted --fg-5 color.<figure> in a .card, which provides its own figure treatment.Styled horizontal rules for subtle visual separation.
When to use: Separating sections within content flows and card stacks.
Classes: hr
Native <hr> elements are themed by default.
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
<span id="forms">
Native controls are styled out of the box, with support for consistent validation classes.
label, fieldset, help text) before custom wrappers..error, .success, and .warning on inputs for validation border colors. :user-invalid and [aria-invalid="true"] produce the same error styling automatically..stack for the form's outer vertical rhythm.<form> or <fieldset>, .row is the field-row primitive that groups label + control + caption with tight spacing..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.