CSS preview

Style guide

Previews of tokens, semantic colors, spacing rhythm, typography scale, cards, buttons, forms, and grid behavior.

Semantic colors

–color-bgPage background

–color-surfacePrimary surface

–color-surface-2Raised alt surface

–color-surface-3Muted surface

–color-primaryMain action color

–color-secondarySupport/action color

–color-accentAccent/info color

–color-infoInformational state

–color-successSuccess state

–color-dangerDanger state

–color-textPrimary text

–color-text-mutedMuted text

Color ramps

Orange

50100200300400500600700800900950

Blue

50100200300400500600700800900950

Cyan

50100200300400500600700800900950

Stone

50100200300400500600700800900950

Typography scale

–text-3xl · Display heading that scales with clamp()

–text-2xl · Large section heading

–text-xl · Subsection heading

–text-lg · Large body or small heading

–text-md · Slightly raised paragraph size

–text-base · Default body text size for the site

–text-sm · Button and support text

–text-xs · Fine print / metadata

Text colors

Primary text: This is your default readable body copy color.

Muted text: Use this for secondary information, labels, or metadata.

Soft text: Use this sparingly for less important supporting content.

Inverse text on a dark surface using --color-text-inverse.

Spacing rhythm

–space-1

0.25rem

–space-2

0.5rem

–space-3

0.75rem

–space-4

1rem

–space-5

1.25rem

–space-6

1.5rem

–space-8

2rem

–space-10

2.5rem

–space-12

3rem

–space-16

4rem

Buttons

Primary button Secondary button Ghost button

Cards and surfaces

Primary surface

Standard card

Use this as your base card treatment for promos, product support content, or editorial blocks.

Surface 2

Secondary surface

This gives you a slightly raised alternative when you need contrast without introducing noise.

Surface 3

Muted surface

Good for specs, support notes, or lighter utility content inside ecommerce layouts.

Forms

Text input

Email input

Select

Textarea

Containers

–container-xs

–container-sm

–container-md

–container-lg

Product grid behavior

Trail kitchen module

$1,295

Compact, modular, and designed to pack cleanly into a trailer or truck drawer system.

Add to cart

Storage panel kit

$349

Flexible mounting panel with a simple geometry that plays well with accessories and bags.

Add to cart

Accessory mount

$89

Small-format hardware mount meant to prove out spacing, typography, and card density.

Add to cart