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
These tokens define the core spacing, surface, motion, and stacking system used by components and utilities.
--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.--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.Use tokens first, then compose utilities/components on top to keep custom themes consistent.
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 and semantic aliases.
--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.