Phase 1 · foundation

The Crucible design system

The brand, rendered as tokens and components. Navy is the voice, teal is the spark, the gradient appears only where transformation is the message. Every value here is enforced in code.

Color · core palette

Both anchors are measured from the mark, not chosen from a chart. The proportion between them is a rule, not a suggestion — 60 / 30 / 10, teal at 10% a ceiling.

Crucible Navy

Navy 900 · the voice

#081833

Crucible Teal

Teal 500 · the spark

#12C1B6

Deep Petrol

Petrol 600 · the bridge

#105A6F

60% White & Mist

30% Navy

10% Teal

Neutrals & functional

Navy 700

hover, secondary dark

#0E2A4E

Teal 700

text-safe teal · links

#0C7A73

Teal 300

highlights on dark only

#16D2C7

Slate 700

secondary text

#3D4A5C

Slate 500

captions, metadata

#64748B

Slate 300

rules & borders

#C3CBD6

Mist 100

light fills, stripes

#EEF2F5

Ink on Dark

text on navy

#EBEDF2

Success 600

positive states

#157A5B

Warning 700

caution states

#8F5A0D

Error 600

error states

#B03A2E

Data & element colors

The CVD-validated data-visualization order — for data, never decoration. In the product, the six elements are six data series: each carries one identity color across bars, keylines, and narrative accents.

Chart Blue

data series 1 · element: Assay

#2E5FA3

Data Teal

data series 2 · element: Flux

#14B8AC

Violet

data series 3 · element: Alloy

#8A6FC8

Amber

data series 4 · element: Ignition · diverging pole vs teal

#B07A2A

TemperProcedural DisciplineThe standard itself — navy is the voice.

FluxSituational AdaptabilityMotion and energy — the spark in flow.

AlloyRelational DriveWarm and cool fused — the bond color.

AssayAnalytical OrientationData series 1 — the measurement color.

IgnitionOwnership InitiativeThe ember — heat that starts things.

GaugeRisk CalibrationThe bridge — calibration between two poles.

Color · verified contrast

WCAG 2.1 pairings the system will not break. Teal 500 on white fails — so it is never text on light, anywhere.

Navy 900 on White17.7AAA

Slate 700 on White9.0AAA

Teal 700 on White5.2AA

Ink on Navy 90015.0AAA

Teal 500 on Navy 9007.9AAA

Teal 300 on Navy 9009.3AAA

Teal 500 on White2.3Fail — never text

Typography

Poppins for precision, Lora for gravitas. Sentence case for headlines and UI; letterspaced caps only for labels; numerals for anything countable.

H1Poppins Bold · 34 / 40 · -1% trackingThe finding comes first

H2Poppins Bold · 26 / 32 · teal keyline aboveSection heading

H3Poppins Medium · 18 / 26Subsection heading

LabelPoppins SemiBold · 12 / 16 · caps +24%ADVISORY REPORT

BodyLora Regular · 16 / 26Numbers over adjectives, always.

Body UIPoppins Regular · 14 / 22The platform surfaces the pattern.

CaptionPoppins Regular · 12 / 18 · Slate 500Source: client transaction data, FY25

Components

The library

Buttons

Navy carries primary actions. Teal is never a button fill — only the link color and the focus ring.

Stat tiles & labels

Numbers over adjectives. Teal marks the finding — one figure only.

-4.2%

avg. margin, top-20 accounts

+$8.1M

recoverable, year one

Advisory report

The mark

Navy for documents, white on dark, gradient for hero moments only.

Gradient hairline

Transformation compressed to a line — covers and section dividers only, never behind body text.