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 consistnacy but also easy customization and theming that works in light or dark mode out of the box.

Typography

H1 - Large Heading

H2 - Med Heading

H3 - Small Heading

H4 - Xtra Small Heading

H5 - Base Heading

H6 - Small Text Heading

This is a paragraph of body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Variables & Tokens

Vertical Spacing

--vs-xs: 0.25rem

--vs-s: 0.5rem

--vs-base: 1rem

--vs-m: 1.5rem

--vs-l: 2rem

--vs-xl: 4rem

Border Radius

--br-xs: 2px

--br-s: 4px

--br-m: 8px

--br-l: 16px

--br-xl: 24px

--br-xxl: 32px

Border

--border-05

--border-1

--border-2

Padding

--pad-xs: 2px

--pad-s: 6px

--pad-m: 12px

--pad-l: 25px

Line Heights

Consistent line height tokens following the standard sizing scale

--lh-xs: 1
Extra tight single line height, useful for single-line text or very compact UI elements.

--lh-s: 1.2
Tight line height, useful for headings and display text where you want compact vertical spacing. The quick brown fox jumps over the lazy dog.

--lh: 1.5 (also --lh-m)
Default line height for body text. It provides comfortable reading with balanced spacing. The quick brown fox jumps over the lazy dog. The five boxing wizards jump quickly.

--lh-l: 1.8
Loose line height, creating extra vertical breathing room. Useful for larger body text or when you want more space between lines. The quick brown fox jumps over the lazy dog.

--lh-xl: 2
Very loose double line height for maximum readability or special typographic treatments. The quick brown fox jumps over the lazy dog.

Shadows

Modern layered shadows - subtle in light mode, deeper and more intense in dark mode

--shadow-1
Subtle

--shadow-2
Light lift

--shadow-3
Moderate

--shadow-4
Strong

--shadow-5
Dramatic

--shadow-6
Maximum

Colors

OKLCH color system with automatic 1-9 scales generated from base colors (scale 5) using relative color syntax

Yellow Scale

--yellow

--yellow-1

--yellow-2

--yellow-3

--yellow-4

--yellow-5

--yellow-6

--yellow-7

--yellow-8

--yellow-9

Amber Scale

--amber

--amber-1

--amber-2

--amber-3

--amber-4

--amber-5

--amber-6

--amber-7

--amber-8

--amber-9

Orange Scale

--orange

--orange-1

--orange-2

--orange-3

--orange-4

--orange-5

--orange-6

--orange-7

--orange-8

--orange-9

Red Scale

--red

--red-1

--red-2

--red-3

--red-4

--red-5

--red-6

--red-7

--red-8

--red-9

Pink Scale

--pink

--pink-1

--pink-2

--pink-3

--pink-4

--pink-5

--pink-6

--pink-7

--pink-8

--pink-9

Purple Scale

--purple

--purple-1

--purple-2

--purple-3

--purple-4

--purple-5

--purple-6

--purple-7

--purple-8

--purple-9

Purple-deep Scale

--purple-deep

--purple-deep-1

--purple-deep-2

--purple-deep-3

--purple-deep-4

--purple-deep-5

--purple-deep-6

--purple-deep-7

--purple-deep-8

--purple-deep-9

Indigo Scale

--indigo

--indigo-1

--indigo-2

--indigo-3

--indigo-4

--indigo-5

--indigo-6

--indigo-7

--indigo-8

--indigo-9

Blue Scale

--blue

--blue-1

--blue-2

--blue-3

--blue-4

--blue-5

--blue-6

--blue-7

--blue-8

--blue-9

Green Scale

--green

--green-1

--green-2

--green-3

--green-4

--green-5

--green-6

--green-7

--green-8

--green-9

Lime Scale

--lime

--lime-1

--lime-2

--lime-3

--lime-4

--lime-5

--lime-6

--lime-7

--lime-8

--lime-9

Highlighter Scale

--highlighter

--highlighter-1

--highlighter-2

--highlighter-3

--highlighter-4

--highlighter-5

--highlighter-6

--highlighter-7

--highlighter-8

--highlighter-9

Brown Scale

--brown

--brown-1

--brown-2

--brown-3

--brown-4

--brown-5

--brown-6

--brown-7

--brown-8

--brown-9

Teal Scale

--teal

--teal-1

--teal-2

--teal-3

--teal-4

--teal-5

--teal-6

--teal-7

--teal-8

--teal-9

Gray Scale

--gray-1

--gray-2

--gray-3

--gray-4

--gray-5

--gray-6

--gray-7

--gray-8

--gray-9

Slate Scale

--slate

--slate-1

--slate-2

--slate-3

--slate-4

--slate-5

--slate-6

--slate-7

--slate-8

--slate-9

White Scale (Static)

Does not change with light/dark mode. Use --fg/--bg for adaptive colors.

--white

--white-1

--white-2

--white-3

--white-4

--white-5

--white-6

--white-7

--white-8

--white-9

Black Scale (Static)

Does not change with light/dark mode. Use --fg/--bg for adaptive colors.

--black

--black-1

--black-2

--black-3

--black-4

--black-5

--black-6

--black-7

--black-8

--black-9

Theming Variables

--fg
Foreground color

--bg
Background color

Foreground Scale

Contrasting shades that automatically adapt to light/dark mode. Great for borders, subtle backgrounds, and text emphasis.

--fg

--fg-05

--fg-1

--fg-2

--fg-3

--fg-4

--fg-5

--fg-6

--fg-7

--fg-8

--fg-9

Background Scale

Contrasting tints that automatically adapt to light/dark mode. Useful for layered surfaces and subtle overlays.

--bg

--bg-05

--bg-1

--bg-2

--bg-3

--bg-4

--bg-5

--bg-6

--bg-7

--bg-8

--bg-9

Forms

Default styling for form inputs - no classes required. For form elements like toggles and input groups see Elements → Forms. For complete form patterns see UI Blocks → Forms.

Text Inputs

Native input, textarea, and select elements are styled automatically.

Text Input Email Input Password Input Number Input Textarea Select

Checkboxes & Radios

Native checkbox and radio inputs with automatic styling.

Remember me Subscribe to newsletter Disabled option Free plan Pro plan Enterprise plan Coming soon

Date & Time

Native date and time pickers with browser-provided UI.

Date Time Date & Time

Range

Native range slider input.

Volume

File

Native file upload input. For a styled dropzone, see Elements → File Dropzone.

Upload File Upload Multiple Files

Validation States

Add .error, .success, or .warning classes to inputs for validation feedback.

Email (error state) Please enter a valid email address Username (success state) Username is available! Password (warning state) Password is weak. Consider using a stronger password.