CUBE CSS Design System

Design Tokens

Design tokens are the visual design atoms of the design system. They define the colors, typography, spacing, and other design elements that create consistency across your project.

Colors

The color system provides a consistent palette for your design.

Light

var(--color-light)

Primary background color

Dark

var(--color-dark)

Primary text color

Primary

var(--color-primary)

Brand/accent color

Secondary

var(--color-secondary)

Secondary color

Typography

The typography system provides consistent text sizing, weights, and line heights.

Text Sizes

CUBE CSS totally rules

Font Weights

Regular weight (400)

Medium weight (500)

Bold weight (700)

Line Heights

Flat leading (1)

Fine leading (1.15)

Standard leading (1.5)

Loose leading (1.7)

Spacing Scale

The spacing system provides consistent spacing values that scale responsively.

Spacing Scale

--spacing-3xs

--spacing-2xs

--spacing-xs

--spacing-s

--spacing-m

--spacing-l

Larger Spacing

--spacing-xl

--spacing-2xl

--spacing-3xl

--spacing-4xl

Spacing Pairs

--spacing-3xs-2xs

--spacing-2xs-xs

--spacing-xs-s

--spacing-s-m

--spacing-s-l

--spacing-s-xl

--spacing-m-l

--spacing-l-xl

--spacing-xl-2xl

--spacing-2xl-3xl

--spacing-3xl-4xl