Colors

Primary

--haus-color-primary

Secondary

--haus-color-secondary

Body

--haus-color-body

Accent

--haus-color-accent

Disabled

--haus-color-disabled

Success

--haus-color-success

Error

--haus-color-error

Warning

--haus-color-warning

Typography

Heading Styles

XXL (H1)

Uses XXL.typography settings

XL (H2)

Uses XL.typography settings

LG (H3)

Uses LG.typography settings

MD (H4)

Uses MD.typography settings

SM (H5)

Uses SM.typography settings

XS (H6)

Uses XS.typography settings

Body Text

This is a paragraph using Body.typography settings. It demonstrates how body text and paragraphs will appear with the configured typography settings. The font family, size, weight, and line height are all controlled by the Body typography configuration.

This is another paragraph to show how multiple paragraphs look with proper spacing. Notice how the line height and font size work together to create readable, comfortable text blocks that are easy to scan and read.

Uses Body.typography settings

Spacing Scale

--haus-spacing-xs

--haus-spacing-sm

--haus-spacing-md

--haus-spacing-lg

--haus-spacing-xl

Buttons

Primary Button

Secondary Button

Link Button

Outline Button

Ghost Button

Destructive Button

Note: Hover over buttons to see hover state. Click to see active state. All buttons include focus-visible states for keyboard navigation.