Colour

One brand green does all the accent work. Everything else is a neutral scale that flips between light and dark. The values below are read from the stylesheet at build time.

Brand green

The green is the single accent. It fills primary buttons, marks the active tab, draws the bar under a page title and rings a focused control. Because it means only those things, a reader learns to read green as “this does something”.

--color-green Light Dark The one accent: primary buttons, active tab, the title bar, focus rings.
--color-green-dark Light Dark Hover and pressed green on solid buttons.
--color-green-light Light Dark A lighter tint, used sparingly.
--color-green-text Light Dark Green for text and links: readable on light, brand lime on dark.
--color-green-text-hover Light Dark Hover green for text and links.
--color-white Light Dark Pure white, mostly for text on solid green.

Lime green is bright, and at body-text size on a white background it does not meet the contrast bar. That is why a separate text green exists: light mode steps the green down for text and links, while dark mode keeps the brand lime. The reason it exists is set out on the accessibility page. Accessibility.

Neutrals & surfaces

The neutral tokens carry two values, one per theme, so a surface is designed in both from the start. Text sits at three weights of emphasis; backgrounds step from the page, to tinted bands, to raised cards.

--bg-primary Light Dark The page background.
--bg-secondary Light Dark Tinted bands, specimen stages, code headers.
--bg-card Light Dark Cards and sheet surfaces.
--bg-nav Light Dark The blurred nav backdrop.
--text-primary Light Dark Headings and high-emphasis text.
--text-secondary Light Dark Body copy.
--text-muted Light Dark Meta, captions, disabled labels.
--border-color Light Dark Hairlines and card borders.
--badge-bg Light Dark Badge, tag and table-header fill.
--badge-text Light Dark Badge and tag text.
--code-bg Light Dark Inline and block code background.
--timeline-line Light Dark The work-experience timeline rail.
--device-edge Light Dark The outer ring on the phone frame.
--device-button Light Dark The phone frame's side buttons.

Elevation tokens (the themed shadows) are documented on the Shape & elevation page.

Interaction

Links and solid buttons move through the greens on hover. The states are the same everywhere, so a control always tells you what it will do.

State	Links	Solid buttons
Default	`--color-green-text`	`--color-green`
Hover	`--color-green-text-hover`	`--color-green-dark`
Disabled	Reduced opacity; the colour does not change.

Callouts

Long-form articles use four callout colours to flag a trap, an aside, a caution or a neutral note. These are the one place a colour other than green carries meaning.

Callout		Border	When to reach for it
	Red flag		A mistake or trap worth stopping the reader on.
	Tip		A helpful aside that is not essential.
	Warning		Something to do with care.
	Info		Neutral context or a pointer elsewhere.

Scope: callout colours live in article prose only. They never appear in the interface chrome, where green and the neutrals do all the work.

These docs make one deliberate exception to that rule. The Do and Don’t cards further down use green and red, because a design system documenting itself is the one place those signals belong outside prose.

Illustration colour

The interface holds to one green, but the blog’s hero illustrations carry a palette of their own. It works the same way in miniature: a fixed pool of ten, the brand lime always present, and one soft ground per series. How the heroes are drawn is on the Media page.

The shared palette

The ten, read from the live posts at build time. Each illustration uses only a few of them, which is where the variety between heroes comes from; the pool itself never changes.

Lime
Navy
Coral
Teal
Plum
Amber
Blush
Sky
Charcoal
Sand

One ground per series

Backgrounds deliberately sit off the palette: soft, near-white tints that read as ground rather than as one of the ten. Each published series keeps its own tint, so a series reads as a set in the feed — its identity lives in that ground. Below, the whole pool sits on each ground: the mix changes per image, the family never does.

State Management
RN Module Federation
RN Foundations
Hiring

Using colour

Body copy stays neutral.

Let green mean one thing: interaction or emphasis. If it is green, it should be tappable or worth noticing.

Don’t

Introduce a second accent. A new colour steals the meaning green is carrying.

A readable green link

Use the text green for green text and links, so it stays readable on a light background.

Don’t

Small lime text on white fails the bar

Paint the brand lime onto small text on white. It fails the contrast bar; that is what the text green is for.

Design every surface in both themes at once. The token pairs make that the default, not an afterthought.

Don’t

Reach for a callout colour in the interface. Those belong in article prose.