UI Kit

Color

Every color is a token in packages/tokens/tokens.json. Change it once and both the HTML and WordPress builds follow.

Brand ramp

brand-50

brand-100

brand-300

brand-500

brand-700

brand-900

Neutral ramp

neutral-50

neutral-200

neutral-400

neutral-600

neutral-800

neutral-950

Semantic

success

warning

danger

info

Skins

Six presets ship with the template. Set data-spm-skin on <html> to switch — try one below and the whole page follows.

Typography

Inter, self-hosted as a variable font. Tabular numerals are on by default so figures align in tables.

Heading one

h1 / 1.875rem

Heading two

h2 / 1.5rem

Heading three

h3 / 1.25rem

Large body text

.text-lg / 1.0625rem

Default body text

body / 0.875rem

Small supporting text

.text-sm / 0.8125rem

Eyebrow label

.text-eyebrow

1,284.50 monospace

.font-mono

Buttons

Variants

Sizes

With icons

Badges

Each badge carries a status dot, so state never relies on color alone.

Draft Paid Pending Refunded Shipped Pro plan No dot

Forms

Text input

With leading icon

Select

Disabled

Textarea

Validation

Enter a valid email address.

Choices

Email me about new features

Monthly billing

Two-factor authentication

Alerts

Scheduled maintenance

Reporting will be unavailable on Sunday between 02:00 and 04:00 UTC.

Payout sent

$12,480.00 is on its way to your account ending 4419.

Low inventory

Three products are below their reorder threshold.

Payment failed

The card on file was declined. Update it to avoid interruption.

Avatars & progress

Sizes

Stack

Storage68%

Monthly quota34%

Loading skeleton

Overlays & empty states

No invoices yet

Invoices appear here once an order has been paid. Create one manually to get started.

Icons

Vantage ships an original stroke icon set as an inline SVG sprite — no icon font, no external request. Use <svg class="icon"><use href="#i-name"></use></svg>.