Style Guide

Design system and primitives

Every page on this site composes from one set of tokens and primitives. Change a token here and the whole build follows.

Foundations · Color

Contrast overrides brand. The lime accent (#eef36a) and aqua (#80ced7) never carry text on white; they appear as fills behind dark ink only. The palette has no dark navy — the deepest surface is the vivid brand blue. All pairings are verified by the build’s contrast gate.

Surfaces

#ffffff

#eef6fd

surface

#d9eafa

surface-2

#f6efdf

sand

#0748b5

ocean

#0a57cf

ocean-2

Text

#0a1b2e

ink

#1b2c3d

body

#475a6b

muted

Action

#0748b5

primary

#063c97

primary-hover

#04285f

primary-active

Accent & water (dark ink text only)

#eef36a

accent

#80ced7

aqua

#1f6fe5

azure

Feedback

#1f7a3d

success

#c0392b

error

Foundations · Typography

One typeface everywhere: Sora. Weight, case, and letter-spacing do the differentiating work — display sits at 800/700, subheads at 600, body at 400, and labels at 600 uppercase.

Display · Sora 800

Hope and exploration

Subhead · Sora 600

Clean energy the earth already makes

Body · Sora 400

Geologic hydrogen forms naturally underground when water reacts with iron-rich rock. This is the body weight used for readable, long-form prose.

Label · Sora 600

DEPTH ~3–5 KM / 0748B5 / ≈10 Mt H₂

Foundations · Radius & elevation

radius-md

radius-lg

radius-xl

shadow-lg

Brand

Fremantle Lake

Emblem mark

Buttons

Inputs

Text input

Helper text explains the field.

Invalid input

Enter a valid email address.

Select

Textarea

Checkbox: keep me informed about the project.

Badges

PrimaryAccentNeutralOutlineActiveOcean

Surfaces

Default card

Surface card

Feature card

Accordion: what is this?

A native details/summary disclosure, fully keyboard operable with content in the DOM.

Does it need JavaScript?

No. It opens and closes without any client JavaScript.

Lists & data

Resource: Geologic hydrogen
Stage: Early-stage exploration
Region: California

Avatar primitive

Monogram used where no photo exists.

Example comparison table.
Attribute	Our approachOurs	Other
Risk	Lower	Higher
Reach	Extensive	Limited

Navigation

Feedback

Information

A neutral, informational message.

Success

Your message was sent.

Error

Something went wrong. Please try again.

Charts & metrics

20tons/day per well

Prospect potential

300MW

Clean electricity

$1.75/kg

Targeted cost

~1%

of US demand

Green$3.50–$6.00/kg

Geologic~$2.50/kg

Dollars per kilogram (sample).

Scope

This build uses the Foundations, Brand, Buttons, Inputs, Selections, Badges, Surfaces, Lists, Navigations, Feedback, and Charts categories. The Options, Pick Details, and Discovery categories are intentionally omitted, because no page consumes them.