PREVIEW · NOT ADOPTED

Reconciled (Figma-aligned) components. This page rebuilds the /kadence-components catalog using the tokens in DESIGN-TOKENS-RECONCILED.md — so we can see what a stricter Figma match looks like. It is a sandbox: the live site and its pages are unchanged, and we have not decided to adopt any of this.

Design System · Sandbox

Reconciled Components

Colors and fonts are already exact to Figma and unchanged. What’s different on this page vs. the current build: the larger Figma type scale (H1 90 / H2 72), the Figma eyebrow (16px Demi all-caps), Klinic Slab for H4, flat 5px cards (no shadow), exact button padding, and ink #333133 body text.

Foundations

Color Tokens

✓ Unchanged — every brand color already maps to a Kadence palette slug at the exact Figma hex.

Navy · #153A51 · palette1
Blue · #2B76A0 · palette11
Medium Blue · #4099BC · palette12
Cool Blue · #54B8D6 · palette13
Light Blue · #AADDE2 · palette2
Green · #9AAF47 · palette10
Medium Green · #719337 · palette4
Dark Green · #617F28 · palette3
Steel · #BCC9CE · palette5
White · #FFFFFF · palette9
Ink · #333133 · add
Neutral 600 · #6E7191 · add

Foundations

Type Scale — Figma desktop values

Shown at the Figma sizes (responsive clamp anchored to the Figma max). The current build uses a smaller ramp — noted in grey.

H1 · Avenir Bold · 90/90current build: 60
A Modern American Mining Company
H2 · Avenir Bold · 72/80current build: 30
Built on a Dual Mandate
H3 · Avenir Bold · 44/50
The Critical Mineral for a Secure Future
H4 · Klinic Slab 400 · 44/50currently rendered in Avenir
Resource security and restoration
H5 · Avenir Bold · 36/44
National Security Depends on Antimony
H6 · Avenir Bold · 22/32
Sustainability Reporting
Body Large · Avenir Reg · 22/36
Antimony is a critical mineral used to fire ammunition, improve fire resistance, and support semiconductor production.
Body Default · Avenir Reg · 16/28
Responsible performance at Perpetua is built into how the project is designed, operated, and evaluated. We measure and report against clear environmental and operational standards.

Foundations

Eyebrow / Label

Current build

Project Overview

Avenir Bold · 13px · letter-spacing .18em

Reconciled (Figma)

Project Overview

Avenir Demi · 16px · all-caps · letter-spacing ~.02em

Components

Buttons — exact Figma tokens

Full pills, Avenir Demi label, trailing arrow. Padding to the exact S/M/L tokens; primary fill navy → hover blue.

Small buttonS · pad 12·16 · 12px Medium buttonM · pad 16·20 · 16px Large buttonL · pad 20·24 · 22px

Components

Content Card — current vs. Figma

Figma cards are 5px radius and flat (no shadow). Our current build uses 10px + a soft navy shadow.

Current build · 10px + shadow

Gold: The Economic Engine

Gold is the primary economic driver of the Stibnite Gold Project, funding antimony production and environmental restoration.

Reconciled · 5px flat (Figma)

Gold: The Economic Engine

Gold is the primary economic driver of the Stibnite Gold Project, funding antimony production and environmental restoration.

Components

Hero — Figma type scale

Stibnite Gold Project

Gold and Antimony at Work

At Stibnite, gold and antimony play different but complementary roles, working together within a single, integrated operation.

Watch the Story
Sandbox only · reconciled tokens per DESIGN-TOKENS-RECONCILED.md · not adopted site-wide · remove before launch.