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 Defaults

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-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