One ring. Two names.

Oxide

The decision

Mac set Oxide on 2026-10-09. It takes its look from macanderson.com: a warm near-black ground called soot (#151515), a cream ground called bone (#FCFDFC), the open ring as the mark, Space Grotesk headings at weight 400, round pill controls, and a brighter gold with a new rust in place of the old metal gold on obsidian.

• Gold is identity, and the one action on a screen. It is the agent dot, stella's asterisk, the first eyebrow's square, the primary button, and the focus ring on soot. It never marks a state, never fills a surface, and never colours words.
• Rust is where you are, and depth. The current tab, the current page, a link's underline, a pressed filter, the ember glow, the radar's sweep, the focus ring on bone, and at most one accent word on a screen.
• Every status is a glyph and a word. Colour backs them up and is never the only signal.
• Panels at rest are solid. Glass is only for what floats: the sticky bar, menus, popovers, toasts, dialogs, drawers, and the command menu.
• The mark is the only picture we own. A surface that needs a picture builds it from the ring, the person, the agent, and the radar.

Logos

Wordmarks

Both words are Space Grotesk 400, lowercase, at 131.7px per em. oxagen's x takes the gold, gold-deep on bone, and every other letter takes the text colour. oxagen is 453 by 93 in its ink box. stella is followed by a drawn gold asterisk, 399 by 94 with it.

The drawn asterisk

stella's asterisk is drawn, not taken from the font. It has six arms from one centre, made of three strokes with round caps: one upright, and two at 30 degrees either side of horizontal. Its box is 0.42 of the font size, and its top meets the cap height. Its stroke changes with the size the word is set at, so it keeps the weight of the letters: 3.4 on a 24 box at 64px and up, 3.7 at 38px, 4.2 at 25.4px, and 4.7 at 20px.

Variants

Lockups

A lockup is the mark, a gap, and the word. The mark's 64 grid stands 1.5 times the font size, the gap is a third of the mark's height, and the mark centres on the x-height. stella's lockup drops the asterisk after the word, because the icon already holds it. oxagen's lockup carries the gold twice, in the agent dot and the x. stella's carries it once, in the asterisk.

Minimum sizes

Wordmark 88px wide on screen, 24mm in print. Icon 24px, 8mm. Lockup 120px, 32mm. Below that, use the favicon.

Misuse

Icons

The open ring

The oxagen mark is the open ring, drawn on a 64 grid. The ring is centred at (32, 32) with radius 21 and a 4.5 stroke with round caps. Its gap is 64 degrees wide, centred 45 degrees up and to the right. The person is a dot of radius 5.5 at the centre, in the text colour. The agent is a gold dot of radius 4.25 at the gap, on the ring itself. On soot a rust glow sits behind the agent. On bone the agent takes gold-deep and the glow drops.

The person sits at the centre. The ring is the agent's loop. The gap is where the person steps in.

stella shares the ring. Its gold asterisk sits at the centre in place of both dots, with arms of 9 and a 4.2 stroke. The gap stays open for the person.

Small marks thicken so the gap stays open. For oxagen the ring stroke, the person, and the agent are 32px: 5, 6, and 5, 24px: 5.5, 6.5, and 5.5, 16px: 7, 7.5, and 7. stella's ring and asterisk thicken the same way. A favicon PNG comes from a tile, because a ring in the text colour on nothing is no favicon on a tab of the same colour.

16

32

48

180 app

16

32

48

180 app

Colour

Palette

The gold is #F4B13E. Its two neighbours are derived from it in OKLCH, a colour space where equal steps look equal, and the build fails if they stop matching. The gold clears 9.7:1 on soot. On bone it is 1.8:1, so it never sets words there.

Rust is new in Oxide. Its words clear 4.5:1 on every surface of their theme, the same check the build runs for a status word.

Ember ramp

The ember ramp is for charts of heat and volume, from low to high. It runs from rust's darkest tone up through the gold. The tokens are --ox-ember-0 to --ox-ember-7.

Grounds

Dark comes first. Each step up from the canvas is one step lighter on soot: the sidebar and fields, the panel, then the lifted row a pointer or the current item takes. On bone the lifted row steps darker. Every page ships both themes.

Text

Text comes in four roles, each with one value on soot and one on bone. Every role that carries meaning clears 4.5:1 on its ground, and the build checks it. The quietest text is for decoration only.

Status

A status shows a 16px glyph and a word, never colour alone. A filled dot is allowed or settled. The orbit is live work. The open ring with the mark's gap waits on a person. A diamond is failed. A hollow ring is quiet. The word sits beside the glyph in primary text at weight 500.

The hues are verdigris for allowed, lapis for approval, garnet for failed, denied, and critical, and verdigris teal for proven. Quiet states, such as waiting or closed, take secondary text.

Priority

Priority is an outlined badge with no fill, in Geist Mono 600. P0 takes a garnet border and garnet words. An item with no priority reads "none" in secondary text, with no badge.

P0 P1 P2 P3 none

Every token

Type

Typefaces

Space Grotesk sets hero copy, every h1 to h3, and both wordmarks, on every surface, the app included. It always takes weight 400, and never runs below 20px. At the shipped bases its smallest step is 21.14px. Geist sets h4 to h6 and every other line. Geist Mono sets code, ids, digests, agent and runtime names, figures, and eyebrows.

Aeonik, Aeonik Mono, Aeonik Fono and Monaspace Neon load too, so a page that still names one keeps working. No role reads them.

Samples

Scales

A surface picks one scale and keeps it. The marketing scale (text-m-*) is large and spaced, for a page read once. The app scale (text-a-*) is dense, for the web app, panels, tables, and logs. Each scale has one base: 16px on marketing and 14.8px in the app. Every other step is the base times its ratio, so a new base moves every step.

The steps under the base are for labels, badges, timestamps, and table headers: app micro is 12.69px, app 2xs is 11.1px, and marketing micro is 14px. Running text, buttons, inputs, menu items, and table cells use the base. Every size reads a step token or a house utility.

Weights

Tracking

Tracking is the space between letters. Headings track tighter as they grow, so large type does not look loose. The eyebrow opens up.

Type rules

• Headings use sentence case. Capitalise the first word and proper names only.
• An eyebrow is Geist Mono 500, uppercase, at 0.08em tracking, in secondary text. It is 2xs in the app and micro on marketing. The first eyebrow on a page carries a 7px gold square with a soft rust glow, which counts as the identity.
• A stat's figures take Geist Mono 400 at the h2 size. Every digit is the same width, so columns line up.
• One accent word per screen, at most. It stays upright, in rust words, in an empty state, onboarding, or a marketing hero.

Surfaces

Shape and surface

A panel at rest is solid: a card, a panel, a table's frame, or the sidebar. It takes 19px corners, a 1px hairline, a lit top edge, and a soft deep shadow. Glass is only for what floats over the page.

Corner radius

Each step multiplies one base, --ox-radius-base, which is 0.45rem. A card takes rounded-4xl. On the website, cards and panels round at 18px (--ox-radius).

Canvas

The canvas is the ground under every surface. It carries the ember glow, rust at 0% on soot and 0% on bone, as a radial about 820px wide at the top left, behind the mark. Film grain sits over the canvas, never over a panel. A product sets both as --glass-canvas.

Glass

A glass surface keeps part of its fill and blurs what lies beneath it, so the page shows through as soft colour. Text that rests sits on a solid panel.

• Text on a sticky bar takes the primary text colour. It stays above 8:1 whatever scrolls under it.
• Every glass surface has an opaque fallback. A browser with no backdrop filter, and a reader who asks for reduced transparency or more contrast, get the surface opaque.
• A dialog sits on a scrim, the dark layer that covers the page behind it, with a 4px blur.

Interaction

Hover and press

Buttons, chips, filters, and the search field are pills. A button is 44px tall, a small button 36px, and a chip 40px. Fills, borders, text, and underlines change over 200ms. The press and the gold action's glow take 250ms, and only the press moves on its curve. A pressed button sinks to 0.97. With reduced motion on, hover and press apply at once. Try each control below.

Motion

Spinners and the radar

The oxagen spinner is the mark thinking: the agent dot and a rust sweep orbit the centre once every 2.4 seconds. Below 32px the sweep drops and the strokes thicken. stella's asterisk turns once every 3.2 seconds inside its still ring. The radar is the full orbit field, for a page or panel that waits. All of it is CSS inside the SVG, and it holds still at rest under reduced motion.

Art

Composition

A piece of art is a ground with the ember glow and the grain, the brand's mark or its radar placed off-centre, and at most a few lines of type. Headlines are Space Grotesk 400, and every other line is Geist. Every surface below is the vector the kit ships.

Wallpapers

radar is the default: a still of the orbit field at the top right of the Work page, turned 65 degrees so the agent dot and the sweep are in view. graph wires a field of nodes to the mark in rust. blocks rebuilds the mark from tiles. orbit hangs rings of nodes off the mark. glow and quiet are the mark alone, faint and as a hairline. word and echo carry the wordmark. eclipse draws a giant open ring with a rust glow at its gap. trails circles the mark with star trails that all turn the same 56 degrees. contour draws a contour map with the mark on its summit. dusk sets the mark on a horizon, with its reflection in dashes on the water below. emboss presses the mark into the ground and stamps its gold in foil.

Social

Ads

Every ad takes its copy from an approved, launch-released entry in messages/. The kicker is the ad's eyebrow, with its gold square. The rule under the headline is rust. The workforce ad takes the radar behind its type, because it draws many agents under one control plane.

Content cards

Files

Kit files

No file in this kit is drawn by hand. Every PNG is a render of the SVG beside it, and every SVG comes from build/. Every value comes from theme/theme.json, so one change there moves every asset on the next run.

python3 -m venv .venv && .venv/bin/pip install fonttools brotli pyyaml
brew install harfbuzz librsvg
.venv/bin/python build/build.py --check   # check the theme and every file, write nothing
.venv/bin/python build/build.py           # every asset
.venv/bin/python build/build.py --svg     # skip the raster pass
.venv/bin/python build/playbook.py        # rebuild this document