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.

Font Size Utilities

Apply fluid sizing to any element with .fs-* classes

.fs-xxxl - Triple Extra Large

.fs-xxl - Double Extra Large

.fs-xl - Extra Large

.fs-l - Large

.fs-m - Medium

.fs-s - Small

.fs-base - Base Size

.fs-xs - Extra Small

Heading Classes

Apply heading styles to non-heading elements with .h1 through .h6

This is a p with .h1 class

This is a p with .h2 class

This is a p with .h3 class

This is a p with .h4 class

This is a p with .h5 class

This is a p with .h6 class

.layout-card

Auto-fill responsive card grid

Card 1

Card 2

Card 3

Card 4

.layout-sidebar

Sidebar + main content (250px default)

.layout-sidebar.narrow

.layout-sidebar.wide

.layout-sidebar.invert

.layout-split

50/50 two column layout

Left Column

Right Column

.layout-split.no-stack

Stays side-by-side on mobile

Left

Right

.layout-three-col

Three equal columns

Column 1

Column 2

Column 3

.layout-readable

Max-width for optimal readability (default: start-aligned)

Learning to drop in on a skateboard is an exciting and challenging milestone for any skateboarder. Before attempting to drop in, ensure that you have a solid foundation of basic skateboarding skills.

.layout-readable.center

Centered readable content with max-width constraint.

.layout-readable.end

End-aligned readable content with max-width constraint.

.layout-readable with .full-bleed child

Regular readable content...

Full bleed element breaks out of container!

.layout-holy-grail

Sidebar

Content

Other sidebar

.stack

Vertical flexbox stack with gap

Item 1

Item 2

Item 3

.grid

Minimal grid utility (like .flex)

200px

Flexible

200px

.layout-cluster

Horizontal wrapping list with gap (perfect for tags, pills, breadcrumbs)

Tag 1 Tag 2 Tag 3 Tag 4 Tag 5 Tag 6

.layout-carousel

Horizontal scroll with CSS scroll-snap (no JavaScript required)

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

.layout-reel

Vertical scroll with CSS scroll-snap (customizable height with --reel-height)

Panel 1

Panel 2

Panel 3

Panel 4

Misc Classes

Boxes

.box-1
Subtle

.box-2
Semi Gloss

You can make a custom box with CSS variables box-shadow: var(--box), var(--shadow-5);

.button

Button styling for links and non-button elements

Link as Button

.flex

Display flex with 20px gap

Flex Item 1

Flex Item 2

Flex Item 3

.split

Flex with space-between and top alignment (used in header)

Left Side

Right Side

.readable

Max-width 900px container

This content is constrained to 900px max-width for optimal readability. Unlike .layout-readable, this doesn't include padding.

.no-list

Remove list styling (margin, padding, list-style)

Regular List

Item 1
Item 2
Item 3

With .no-list

Item 1
Item 2
Item 3

.circle

Circular element (default --size: 40px)

.row

Add vertical margin (--vs-m)

No .row class

With .row class - has margin-block

No .row class

.visually-hidden

Hide element visually but keep accessible to screen readers

There is hidden text after this colon: This text is hidden visually but available to screen readers!

You can't see it, but it's there for accessibility.

.fc (Fluid Container)

Makes typography responsive to container width instead of viewport

Regular (viewport-based)

This heading scales with viewport

Text scales with viewport width

With .fc (container-based)

This heading scales with container

Text scales with this box's width

Aspect Ratio Utilities

Maintain specific aspect ratios for containers (useful for images, videos, cards)

.aspect-square
1:1

.aspect-video
16:9

.aspect-4-3
4:3

.aspect-21-9
21:9

Custom: Use aspect-ratio: 2 / 1; or aspect-ratio: var(--aspect-ratio);

Forms

Form Validation States

Built-in styles for error, success, and warning states

CSS Variables Reference

A big part of Graffiti is the flexible CSS variable system that can be used in your CSS to create consistent and adaptable designs.

Vertical Spacing

--vs-s: 0.5rem

--vs-base: 1rem

--vs-m: 1.5rem

--vs-l: 2rem

--vs-xl: 2rem

Border Radius

--br-xs: 2px

--br-s: 4px

--br-m: 8px

--br-l: 16px

Padding

--pad-xs: 2px

--pad-s: 6px

--pad-m: 12px

--pad-l: 25px

Line Heights

Consistent line height tokens for better typography control

--lh-tight: 1.2
This is 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-normal: 1.5
This is normal line height, the default 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-loose: 1.8
This is 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.

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 (5)

--yellow-1

--yellow-2

--yellow-3

--yellow-4

--yellow-5

--yellow-6

--yellow-7

--yellow-8

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

Green Scale

--green

--green-1

--green-2

--green-3

--green-4

--green-5

--green-6

--green-7

--green-8

--green-9

Teal Scale

--teal

--teal-1

--teal-2

--teal-3

--teal-4

--teal-5

--teal-6

--teal-7

--teal-8

--teal-9

Blue Scale

--blue

--blue-1

--blue-2

--blue-3

--blue-4

--blue-5

--blue-6

--blue-7

--blue-8

--blue-9

Gray Scale

--gray-1

--gray-2

--gray-3

--gray-4

--gray-5

--gray-6

--gray-7

--gray-8

--gray-9

Theming Variables

--fg
Foreground color

--bg
Background color

--tint-or-shade
5% foreground mix

--tint-or-shade-harder
10% foreground mix

Install

Typography