Development & Design Library

Design Library

Live token reference, typography, spacing, buttons, sections, cards, footer, and overlay. All values resolve from the active token system.

1. Token Reference

Computed values injected by JS snippet. Swatches resolve oklch relative color syntax and var() chains.

Surface Scale

–color-surface-050
–color-surface-100
–color-surface-200
–color-surface-300
–color-surface-400
–color-surface-500
–color-surface-600
–color-surface-700
–color-surface-800
–color-surface-900
–color-surface-950

Primary — Fixed Scale

–color-primary-ultra-light
–color-primary-light
–color-primary-semi-light
–color-primary
–color-primary-semi-dark
–color-primary-dark
–color-primary-ultra-dark

Primary — Relative Nudge

–color-primary-lighter-2x
–color-primary-lighter
–color-primary-darker
–color-primary-darker-2x

Secondary — Fixed Scale

–color-secondary-ultra-light
–color-secondary-light
–color-secondary-semi-light
–color-secondary
–color-secondary-semi-dark
–color-secondary-dark
–color-secondary-ultra-dark

Secondary — Relative Nudge

–color-secondary-lighter-2x
–color-secondary-lighter
–color-secondary-darker
–color-secondary-darker-2x

Semantic — Interactive

–color-action
–color-action-hover
–color-action-focus
–color-action-text
–color-action-secondary
–color-action-secondary-hover
–color-action-secondary-focus

Semantic — Text

–color-text
–color-text-muted
–color-text-inverse
–color-heading

Semantic — Backgrounds

–color-bg-body
–color-bg-surface
–color-bg-elevated

Semantic — Borders

–color-border
–color-border-focus

2. Typography

H1 Heading

–font-size-2xl

H2 Heading

–font-size-xl

H3 Heading

–font-size-l

H4 Heading

–font-size-m
H5 Heading
–font-size-s
H6 Heading
–font-size-xs

Body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fluid scale 16px to 20px.

–font-size-m

Small text. Used for captions, meta, secondary information.

–font-size-s + –color-text-muted

Extra small. Labels, timestamps, fine print.

–font-size-xs + –color-text-muted

3. Spacing

Squares are sized using the token itself. Semantic tokens reference scale primitives.

Scale Primitives

–space-2xs
–space-xs
–space-s
–space-m
–space-l
–space-xl
–space-2xl
–space-3xl

Semantic Spacing

–spacing-section-inline
–spacing-section-block
–spacing-section-block-s
–spacing-section-block-l
–spacing-grid-gap
–spacing-content-gap
–spacing-card
–spacing-component

4. Buttons

Default size

Primary Secondary Outline Primary Outline Secondary

Large size

Primary Large Secondary Large Outline Primary Large Outline Secondary Large

On dark background

Primary Outline Primary Secondary Outline Secondary

5. Sections

Different backgrounds show padding clearly. Inner container constrains content width.

.gbp-section (default) — padding-block: –spacing-section-block | Shows tagline, headline, and text sub-classes

Section Tagline

Section Headline

Section intro text using .gbp-section__text. Slightly larger than body, max 65ch.

.gbp-section + .gbp-section–s (compact) — padding-block: –spacing-section-block-s

.gbp-section + .gbp-section–l (generous) — padding-block: –spacing-section-block-l | Action color background

6. Cards

Surface Card

Category · June 2026

.gbp-card on –color-bg-surface. Padding from –spacing-card.

Elevated Card

Category · June 2026

.gbp-card on –color-bg-elevated.

Border Card

Category · June 2026

.gbp-card + .gbp-card–border adds –color-border + border-radius.

7. Footer

8. Overlay Panel

Static preview of the overlay surface and close button. In production shown/hidden via GB overlay functionality.

Panel Title

Overlay panel body. Background uses –color-bg-body. Header uses –color-bg-surface. Close button uses –color-action on hover.

Confirm