Design truth

Styleguide

Color, spacing, breakpoint and container truth stay visible through one shared showroom surface instead of drifting into local views.

Open catalog Open components Open styleguide Back to library

UI catalog

Selective live preview of the shared UI through one navigation, one filter surface, and one real library directory in the main workspace.

Showroom task

Choose whether you need the library catalog, individual building blocks, or token truth.

Catalog Components Styleguide

Design truth

One governed index keeps tokens, spacing, rhythm, breakpoints, and containers inside the same responsive shell.

Palette

Semantic color roles, contrast surfaces, and state colors come from the same token truth.

Primary

--color-primary

Primary Hover

--color-primary-hover

Surface

--color-surface

Surface Muted

--color-surface-muted

Surface Inverse

--color-surface-inverse

Content

--color-content

Content Inverse

--color-content-inverse

Stroke

--color-stroke

Success

--color-success

Warning

--color-warning

Danger

--color-danger

Focus

--color-focus

Spacing

The base scale governs insets, gaps, and shell padding without local exceptions.

2XS

--space-2xs

var(--space-2xs)

XS

--space-xs

var(--space-xs)

SM

--space-sm

var(--space-sm)

MD

--space-md

var(--space-md)

LG

--space-lg

var(--space-lg)

XL

--space-xl

var(--space-xl)

2XL

--space-2xl

var(--space-2xl)

3XL

--space-3xl

var(--space-3xl)

Shell X

--space-shell-x

var(--space-shell-x)

Rhythm

Hero start, section flow, and larger page blocks follow one vertical cadence.

Section flow

--ui-section-space-y

var(--ui-section-space-y)

Default spacing for regular content sections.

Hero start

--ui-section-space-y-hero-start

var(--ui-section-space-y-hero-start)

Compact top inset directly beneath the header.

Hero end

--ui-section-space-y-hero-end

var(--ui-section-space-y-hero-end)

Spacing from the hero into the following section.

Page blocks

--ui-page-shell-gap-blocks

var(--ui-page-shell-gap-blocks)

Vertical rhythm between larger page blocks.

Breakpoints

Breakpoints define when filters, navigation, and preview shift into real split layouts.

SM

--breakpoint-sm

var(--breakpoint-sm)

Compact mobile width

MD

--breakpoint-md

var(--breakpoint-md)

Tablet and small layout splits

LG

--breakpoint-lg

var(--breakpoint-lg)

Desktop navigation and two-column shells

XL

--breakpoint-xl

var(--breakpoint-xl)

Wide catalog and workspace flows

2XL

--breakpoint-2xl

var(--breakpoint-2xl)

Maximum width for large page layouts

Containers

Containers cap shell, content, and large workspace widths with the same responsive rules.

5XL Shell

--container-5xl

var(--container-5xl)

6XL Layout

--container-6xl

var(--container-6xl)

7XL Content

--container-7xl

var(--container-7xl)

Layout Max

--layout-max-width

var(--layout-max-width)

Layout Wide

--layout-max-width-wide

var(--layout-max-width-wide)

Preview presets

Preview presets mirror the same mobile, tablet, and desktop widths used by the catalog workspace.

Mobile preview

--breakpoint-sm

var(--breakpoint-sm)

Preview for narrow widths and single-column flow.

Tablet preview

--breakpoint-lg

var(--breakpoint-lg)

Preview for splits and compact sidebars.

Desktop preview

--container-7xl

var(--container-7xl)

Preview for full catalog content width.

Filter state and count truth

One library total, one filter pool, one active family result count.

The showroom keeps global library count separate from the current filter pool and the active family result set.

Library total 77
Filter pool 77
Active family 77

Current state

Family: All Surface: All surfaces Status: All statuses

Stateful navigation

Show all matching families Reset showroom filters