UI Kit
Every component in Vantage, with the Blade you need to use it.
Colour
Every colour is a token in packages/tokens/tokens.json. Change it once and
the Laravel, React, static and WordPress builds all 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>, or change vantage.skin in config — 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 colour alone.
Forms
Enter a valid email address.
Choices
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
Loading skeleton
Overlays & empty states
Overlays
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 <x-icon name="i-search" />, and choose a tile
below to copy its markup.