Skip to content
Every item verified sealed before dispatch
Vetted Vault
Basket 0

Design system

Style guide

Every colour, typeface and component used across the site. Tokens are read live from the stylesheet, so this page is always accurate. Build with these rather than writing new markup, and the site stays consistent.

Tokens

Colour

Navy carries structure, gold is the accent and stays scarce, sand is the neutral ground. Status colours are always paired with a text label, never used alone to signal meaning.

--color-navy-950

#080e18

bg-navy-950 / text-navy-950

--color-navy-900

#0f1b2d

bg-navy-900 / text-navy-900

--color-navy-800

#1b2942

bg-navy-800 / text-navy-800

--color-navy-700

#2c3e5c

bg-navy-700 / text-navy-700

--color-navy-600

#3d5378

bg-navy-600 / text-navy-600

--color-gold-600

#9c7c15

bg-gold-600 / text-gold-600

--color-gold-500

#c9a227

bg-gold-500 / text-gold-500

--color-gold-400

#dfbe4f

bg-gold-400 / text-gold-400

--color-gold-100

#f7efd4

bg-gold-100 / text-gold-100

--color-sand-50

#f8f7f4

bg-sand-50 / text-sand-50

--color-sand-100

#f1f0ec

bg-sand-100 / text-sand-100

--color-sand-200

#e4e2db

bg-sand-200 / text-sand-200

--color-sand-300

#cbc8bf

bg-sand-300 / text-sand-300

--color-sand-500

#6b7280

bg-sand-500 / text-sand-500

--color-sand-700

#3f4450

bg-sand-700 / text-sand-700

--color-sand-900

#1c1c1c

bg-sand-900 / text-sand-900

--color-instock

#157f4b

bg-instock / text-instock

--color-instock-tint

#e7f4ed

bg-instock-tint / text-instock-tint

--color-lowstock

#b26a00

bg-lowstock / text-lowstock

--color-lowstock-tint

#fdf1e0

bg-lowstock-tint / text-lowstock-tint

--color-preorder

#5b3e8f

bg-preorder / text-preorder

--color-preorder-tint

#f0eaf9

bg-preorder-tint / text-preorder-tint

--color-outstock

#b3261e

bg-outstock / text-outstock

--color-outstock-tint

#fbeae9

bg-outstock-tint / text-outstock-tint

--color-sale

#b3261e

bg-sale / text-sale

Tokens

Typography

Sora for display and headings; Inter for body and interface. Both are variable fonts, self-hosted rather than loaded from Google, so no visitor IP addresses leave the site.

Display — Sora

Vetted Vault

font-display

Body — Inter

Every item verified sealed before dispatch. Graded singles carry a certificate number.

font-sans

Surging Sparks Booster Box

text-display

Display — hero headings only

Surging Sparks Booster Box

text-h1

H1 — page titles

Surging Sparks Booster Box

text-h2

H2 — section headings

Surging Sparks Booster Box

text-h3

H3 — card titles, prices

Surging Sparks Booster Box

text-body

Body — default copy

Surging Sparks Booster Box

text-small

Small — meta, captions

Surging Sparks Booster Box

text-label

Label — eyebrows, badges

Components

Buttons

One primary action per view. Gold is reserved for it; everything else is secondary or ghost.

Primary Secondary Ghost
Inverse Primary on dark

vv_component( 'button', [ 'label' => '…', 'href' => '…', 'variant' => 'primary' ] )

Components

Status badges

Derived automatically from stock and release date by the vetted-vault-core plugin. Each carries a text label so meaning never depends on colour alone.

In stock Only 2 left Pre-order Out of stock Sale Neutral

vv_component( 'badge', [ 'label' => '…', 'variant' => 'low' ] )

Components

Product card

Used by every listing on the site - shop, set pages, related products. Defined once, so listings can never drift apart.

vv_component( 'product-card', [ 'product' => $product ] )

Components

Empty state

No products match those filters

Try removing a filter, or browse everything in this set.

Clear filters