Design language · v0.1

Gold, beaten into a grid.

Goldbeater is an instrument, so it is drawn like one: hairline rules, tabular numbers, no shadows, nothing decorative that is not also load bearing. Gold is the one loud thing on the page, and it is spent on whatever the reader should look at first.

Everything below is read from the live stylesheet. If a value here is wrong, the token is wrong — fix src/styles/theme.css, then re-run npm run palette.

01 · The mark

Five courses of gold, each wider and thinner than the last.

Mark
GoldbeaterLockup
GoldbeaterOn ground

What it is. Goldbeating is hammering a mass of gold into leaf thin enough to see through. The mark is that sequence — one mass redistributed, not five unrelated bars — and it reads as a chart from across the room, which is the other half of the job.

Clear space. Keep the height of the mark clear on every side. Minimum size is 20 px for the mark and 96 px for the lockup; below that, drop the wordmark.

Never. Do not recolour it, outline it, add a shadow, set it on a photograph, stretch it, or rotate it. On a busy ground, put it in a solid canvas panel instead.

02 · Colour

One accent, one ink, and nothing else that is not carrying meaning.

Gold

contrast on paper / on ground

The spine. 400 is the leaf — the fill you set ink on top of. 700 is the struck tone, the only step that may be used as text on paper. Never set gold text on white below 700.

gold-50

—

gold-100

—

gold-200

—

gold-300

—

gold-400

—

gold-500

—

gold-600

—

gold-700

—

gold-800

—

gold-900

—

Ink

contrast on paper / on ground

The same hue at a trace of chroma, so no grey ever looks cold beside the gold. 900 is the ground.

ink-0

—

ink-50

—

ink-100

—

ink-200

—

ink-300

—

ink-400

—

ink-500

—

ink-600

—

ink-700

—

ink-800

—

ink-900

—

Positive

contrast on paper / on ground

positive-100

—

positive-400

—

positive-600

—

positive-700

—

Negative

contrast on paper / on ground

negative-100

—

negative-400

—

negative-600

—

negative-700

—

Info

contrast on paper / on ground

info-100

—

info-400

—

info-600

—

info-700

—

Signal colours are reserved for measured outcomes — a delta, a status, a failed check. They never become decoration and never become a chart series. Every one of them ships with a word or a glyph beside it, because a colour on its own is not a label.

03 · Charts

Gold is always the subject. Everything it is measured against is cool.

Series one is the account you are looking at. Two through four are whatever it is compared with, assigned in this fixed order and never cycled — a fifth series folds into Other or the chart becomes small multiples. Green is deliberately absent: it means positive, and a colour cannot mean two things.

Categorical

contrast on paper / on ground

series-1

—

series-2

—

series-3

—

series-4

—

series-other

—

Sequential

contrast on paper / on ground

seq-1

—

seq-2

—

seq-3

—

seq-4

—

seq-5

—

Diverging

contrast on paper / on ground

Clay to teal through a neutral — not red to green, which is the pair most colour-deficient readers cannot separate.

div-neg-3

—

div-neg-2

—

div-neg-1

—

div-mid

—

div-pos-1

—

div-pos-2

—

div-pos-3

—

04 · Type

Instrument Sans for language. Geist Mono for anything a machine produced.

The split is the rule that holds the whole system together. If a value came out of an account, a query, or a computation — a number, an ID, a field path, a status — it is set in mono with tabular figures. If a person wrote it, it is set in sans. Labels are mono, uppercase, letterspaced and small.
display-xl

Find the money

Hero only. One per page.

display-l

Section openers

The top of a section, after its eyebrow.

display-m

Sub-heads and stat figures

Also the mono figure in a spec cell.

title

Card and cell headings

The heaviest weight in the system: 600.

lede

The paragraph under a section opener

One per section, at most.

body

Running text

Everything else that is a sentence.

small

Dense text inside panels

Table cells, captions, footnotes.

data

$5,730 · 412 rows · 0.22 · run 0412

Every number on every surface. Tabular figures are on by default.

labelRecoverable · monthly

Chrome. It opens every section and heads every column.

05 · Components

A hairline, a fill and a 2 px corner. No shadows anywhere.

Buttons

One primary per view. It is gold, so it is the thing you meant.

Severity
CriticalCritical severity
HighHigh severity
MediumMedium severity
LowLow severity

Bars carry the rank, the word carries the meaning. Never colour alone.

Deltas
14%up 14%3%down 3%no change

Direction is in the glyph first and the hue second.

Leafing

Gold laid over a phrase, the way a highlighter lays over a line.

At most once per screen. It is emphasis, and two emphases are none.

Panel · on paper
Default
The only container in the system. Depth comes from the rule and the surface, never from a blur.
Panel · on ground
Instrument
The dark surface is for what the agent produced — transcripts, findings, charts. Gilding belongs on a dark ground.

06 · Voice

Plain, specific, load bearing.

We are selling an instrument to people who have been sold software before. Every sentence should survive someone asking “how do you know?” Write the mechanism, not the adjective.
RuleWriteNot
Say the number.“412 terms, 19% of spend”“significant wasted spend”
Name the mechanism.“the account ID comes from a signed token”“enter­prise-grade security”
State the limit.“read-only to start”“fully autonomous”
Use the plain verb.“it queries, it writes Python”“leverages AI to unlock insights”

Spelling is US English. The product is Goldbeater, never “GoldBeater” or “Gold Beater”; the domain is goldbeater.ai and it is not part of the wordmark. The agent is “it,” never a given name.