Styleguide

An internal design reference — every shared UI primitive and design token used across the site, gathered here for visual consistency checks.

Colors

Surfaces

--color-bg

--color-surface

--color-surface-alt

--color-border (fill)

--color-border (border)

Text

The quick brown fox

--color-text

The quick brown fox

--color-text-muted

Brand

--color-primary / --color-on-primary

--color-primary-hover

--color-accent

Status

--color-danger

--color-warning

--color-success

Focus ring

--color-focus-ring (fill)

--color-focus-ring (ring)

Inverse

--color-bg-inverse / --color-on-inverse

Typography

Scale

--text-xs

The quick brown fox jumps

--text-sm

The quick brown fox jumps

--text-base

The quick brown fox jumps

--text-lg

The quick brown fox jumps

--text-xl

The quick brown fox jumps

--text-2xl

The quick brown fox jumps

--text-3xl

The quick brown fox jumps

--text-4xl

The quick brown fox jumps

--text-5xl

The quick brown fox jumps

Weights

--font-weight-ultralight (200)

Precision, engineered.

--font-weight-light (300)

Precision, engineered.

--font-weight-medium (500)

Precision, engineered.

--font-weight-semibold (600)

Precision, engineered.

No real 700/bold face exists in the vendored font — the shared h1–h4 heading rule renders synthetic ("fake") bold instead.

Hero specimen

Precision, engineered.

--text-5xl / --font-weight-ultralight / --font-display

Spacing

--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-12 (3rem)

--space-16 (4rem)

Radius

--radius-sm

--radius-md

--radius-lg

--radius-full

Buttons

Variant × size

variant="primary" size="sm"

variant="primary" size="md"

variant="primary" size="lg"

variant="secondary" size="sm"

variant="secondary" size="md"

variant="secondary" size="lg"

variant="danger" size="sm"

variant="danger" size="md"

variant="danger" size="lg"

Disabled

variant="primary" disabled

variant="secondary" disabled

variant="danger" disabled

Full width & href

fullWidth

Link button href set (renders as <a>)

Fields

Input

kind="input"

Input with error

This field is required.

error

Input with hint

Helper text goes here.

hint

Input with labelExtra Optional

labelExtra

Disabled input

disabled

Textarea

kind="textarea"

Select

kind="select"

Custom control

Option A Option B

kind="custom"

Cards

padding

Card

padding="sm"

Card

padding="md"

Card

padding="lg"

gap

Card

gap="sm"

Card

gap="md"

Card

gap="none"

align

Card

align="stretch"

Card

align="start"

Card

align="center"

href & maxWidth

Interactive card

href set — hover for the border-highlight treatment (no shadow)

Capped width

maxWidth="320px"

Badges

Badge variant="neutral"

Badge variant="success"

Badge variant="warning"

Badge variant="accent"

Badge variant="solid-primary"

Badge variant="solid-accent"

admin capitalize

Link badge href set

Table

Name	Status	Date
RTD PT100 Sensor	Published	2026-06-02
K-Type Thermocouple	Published	2026-05-14
Ceramic Heating Element	Draft	2026-07-01
Pressure Switch PS-200	Published	2026-04-22

Dividers

The hairline-divider-over-cards convention has no shared component — it's a page-local CSS pattern (border-bottom: 1px solid var(--color-border)).

Hairline divider

Sensor accuracy

Operating temperature

Housing material

Lead length

Card list

Sensor accuracy

Operating temperature

Housing material

Lead length