Design system · Color

Five tokens. One voice.

G3 AI's palette is intentionally small and drawn from G3 AI brand — Wisdom (purple), Wealth (blue), Health (green) resting on ink and bone. Every surface, headline, and signal resolves to one of these tokens, in both light and dark themes.

Bone

Token: --paper
Utility: bg-paper
Value: #FAFAFA (light) / #1B1C1F (dark)

Primary surface

Use it for

Page background, cards, and large canvases
Foreground text on ink surfaces (text-paper)

Avoid

Hardcoding #fff or #000 — always resolve through the token
Body copy color — reserve for surfaces and inverted text

Ink

Token: --ink
Utility: bg-ink / text-ink
Value: #161719

Primary ink

Use it for

All body copy, headlines, and iconography by default
Primary buttons and dense data surfaces

Avoid

Pure black — G3 ink carries a subtle cool undertone that unifies the palette
Large decorative fills that flatten the composition

Wisdom Purple

Token: --ember
Utility: text-ember / bg-ember
Value: #8E00FF

Signal accent — Wisdom

Use it for

Italic display emphasis in headlines, the numeral in G3
Focus rings, selection, single hero CTA hover, editorial rules

Avoid

Body copy or long paragraphs — purple on bone is decorative, not readable at length
More than one prominent purple element per viewport

Wealth Blue

Token: --tide
Utility: text-tide / bg-tide
Value: #0049FF

Secondary accent — Wealth

Use it for

Economic capital context, financial charts and KPIs
Links inside dense data surfaces, secondary CTAs

Avoid

Pairing at equal weight with purple — purple leads, blue supports
Using as a page background — accents don't own surfaces

Health Green

Token: --sage
Utility: text-sage / bg-sage
Value: #00D085

Calm accent — Health

Use it for

People / wellbeing contexts, restorative surfaces
Success states, quiet secondary badges, positive deltas

Avoid

Competing with purple in the same composition — green rests, purple signals
Pairing on bone at small sizes without darkening — check contrast

Default surface

Bone + Charcoal is the base pairing. Use for 90% of composition.

Inverted surface

Charcoal + Bone for footers, CTAs, and quiet dark sections.

+ violet for emphasis

Restorative

Mint + Charcoal for wellbeing contexts and success states.

Rules of thumb

01One violet moment per viewport. Signal, don't decorate.
02Never introduce a fifth color. Extend with opacity, not hue.
03Mint rests, violet signals. They don't compete in the same block.
04Use text-ink / bg-paper. Never hardcode #fff or #000.