Shared by every brand

Core

The layer no brand owns. Geometry, and the rules for setting words in it. Space, Agōn and Seed each dress this differently; none of them change it.

01 — Readability

Measure

A container has a width. Text in it has a measure — how many characters land on a line — and the two are only the same number by accident. Every figure below is measured from the loaded fonts at render time, so it follows the type rather than a rule of thumb.

characters = width ÷ (size × average advance)

Body — target 60–72

Tolerance 50–75; below 40 line breaks start splitting phrases. The 75 ceiling is not taste: WCAG 1.4.8 Visual Presentation (AAA) caps width at 80 characters. Space and Agōn are dark, and light-on-dark blooms — a long line tires the eye sooner there than it would on paper, so this system sits at the lower end of any published range.

Titles — target 20–40

Headlines are scanned, not read, so the prose range does not apply. Past roughly 50 characters a headline stops arriving as one unit. Note that 30px reads as legal body at 942 and as a bad title at the same width — the job decides, not the size.

Agōn runs narrower

Mono advances are uniform at 0.6em against Inter's ~0.48, so the same container holds roughly a quarter fewer characters. Agōn's legal widths are its own.

The nesting rule
Text never sits directly in a container wider than its legal measure. It nests in the widest container that is legal for its size — so a 942 block holds prose in a 582, not across the full width. This is not a second rule: 942 = 582 + 360 is already in the alignment map. The 582 takes the prose, the 360 takes a sidenote, a caption, or nothing. Readability and the composite decomposition are one rule seen from two sides. See Alignment.
Why not columns
Splitting 942 into two columns gives (942 − 24) ÷ 2 = 459 each. 459 is not a rung. Two columns at 942 break the scale, so nesting wins on constraint rather than preference.
Paragraph length
Four to five lines, then break. Paragraph length is a layout value, not only a writing one — it decides how much unbroken grey the reader faces. A correct measure does not rescue a fifteen-line paragraph.
Also an accessibility contract. 1.4.8 caps measure at 80 characters, asks line spacing of at least 1.5 within paragraphs — body runs 1.62, already passing — paragraph spacing of at least 1.5× line spacing, and no justified text.
1.4.12 Text Spacing (AA) is the one to test: layout must not break when a reader forces line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em and paragraph spacing 2em. Fixed-height cards are where this fails. See Space → Accessibility.

02 — Editorial

Writing that survives the measure

Measure is a budget. What follows is how it gets spent. A 66-character line of clutter reads worse than an 80-character line of clean prose — the tables above make good writing legible, they do not rescue bad writing. After Zinsser, On Writing Well, kept to the principles that change a layout.

Clutter is the disease
Strip every sentence to its cleanest components. Every word that carries no weight is a word the reader pays for and a character spent against the measure. Cutting is not tidying — it is the work.
Short paragraphs
This is a layout instruction. Four to five lines. A paragraph is the unit the eye commits to; make the commitment small and the reader keeps going.
The lead earns its own setting
The opening sentence decides whether the second one is read. It gets a different size or measure — a lede, not a paragraph. This system already does it: the standfirst under every section title.
Active verbs
The verb does the work; adverbs admit it did not. Active constructions are shorter, so they physically ease the measure. Passive voice costs characters and hides who acted.
No qualifiers
“A bit”, “sort of”, “kind of”, “rather”, “quite”. Zinsser calls them weasel words. They dilute the sentence and spend the line on nothing. Same defect as an over-long measure — both weaken what is there.
Trust the reader
Say it once. Restating a point is the writer reassuring themselves. It is also the fastest way to turn four legible lines into twelve.
Rewriting is the writing
First drafts run long by default. A paragraph that will not fit its measure is usually not a layout problem.
This is not Voice. Each brand's Voice section says what it sounds like — Space direct and spacefaring, Agōn precise and physical. Editorial is how any of them is written well. A brand can be perfectly in voice and still unreadable.

03 — Scale

Spatial scale

04 — Containers

Container widths

The scale closes on itself. Each rung is the sum of the two before it — 138+222=360, 360+582=942, 582+942=1524, 942+1524=2466. That run is also the proof the 9xl label was the typo and not its value: 942+1524 lands exactly on 2466, and 942+1542 would not.
10xl is now a container. Container/Natural/3xl [2466] aliases the rung in Figma, so the set no longer stops at the frame. gabrielkroll.com already built against it — .work-panels is min(2466px, 100%), running full-bleed with square corners until the viewport clears 2466, where it rounds and becomes an object. See 05 — Alignment for how the stage centres the frame.

05 — Alignment

Alignment map

Containers answer how wide. This answers where the edges land. Every sanctioned width, centered in the 1524 frame, generates two alignment stops — and content only ever aligns to a stop.

stopleft = (1524 − W) ÷ 2 · stopright = (1524 + W) ÷ 2

Every container width, centered in the frame. Lines are the stops it generates.

A composite is centered, so its outer edges always land on stops by construction. Internal seams do not follow automatically — the decompositions marked below are the ones that also align inside, and those are the ones to reach for first.

The full stop set. Each pair mirrors about the centre at 762.

Above the frame — the display stage

C-3xl · 2466 is not a container inside the frame; it is the stage the frame sits on. Its stops cannot come from (1524 − W) ÷ 2 — that goes negative — so the display tier centres the frame instead.

Stage margin
2466 − 1524 = 942, so the frame sits on exactly one container-xl of margin, split evenly: 471 either side. The margin is not an arbitrary gutter — it is the next rung down, which is why the stage reads as part of the same system rather than as letterboxing.
What grows
Full-bleed objects grow to 2466. Content does not. The reading field stays at 1164 and the frame at 1524 no matter how wide the display gets — gabrielkroll.com caps its hero illustration at 1524 for exactly this reason, so the picture never outgrows the page it sits on. Only edge-to-edge surfaces claim the stage, and at 2466 they stop bleeding and become objects.

Building against the map

Four things the geometry does not tell you, each one learned the expensive way on gabrielkroll.com. The map is a drawing; these are what it costs to build from it.

Gutters
The map's seams are zero-width. Real rows have a gap. A composite specified straight off the drawing loses the gutter to one of its segments. C-360 + C-942 was built at 1302 — the drawn total — so with a 24 gap the still collapsed to 918 and never reached the token it was specified at. The row is 360 + 24 + 942 = 1326. Add the gutters to the composite, or accept that a segment lands off-scale.
Field, not frame
Content aligns to 1164, not 1524. The frame is the display container; the field is what content actually sees — min(1164px, 100vw − 48px), centered, 24 outer padding. The map is drawn at frame width because that is where the stops are derived, not because anything is built there.
Step, don't scale
Sizes on screen are tokens, never percentages of them. Between breakpoints, drop a rung instead of interpolating. The scale is a Fibonacci run, so 582→360 carries 942→582 and 360→222 with it and every pair stays golden. Interpolation lands between rungs and breaks the alignment it was supposed to keep.
Floor
On the scale is not the same as usable. C-138 exists and is a valid stop generator, but a 138 card is below the smallest size worth showing a client. Roles carry their own floor — for gallery cards it is 222. Below it, let content bleed and scroll rather than shrinking to a rung that cannot do its job.
Not yet derived. Every stop above is the 1524 tier. Responsive behaviour below it — the 1164 and 942 container tiers, and mobile — has no alignment model yet. Until it does, sub-1524 layouts are being decided per build rather than by the system.
Why this exists. Snapping widths to the scale is not enough — two sections can both be on-scale and still fail to line up, which is the “unintentional across breakpoints” problem named in DESIGN-DIRECTION.md. Alignment is a property of the system only when edges are shared.
Two classes of stop. Solid lines are edge stops — a centered container's own edges. The faint pair at 360 and 1164 are seam stops: no container edge lands there, but composite seams do, so content may align to them. The centre axis at 762 is drawn here and is not in the Figma map.

06 — Aspect Ratios

Ratio tokens

07 — Easing

Power easing

08 — Duration

Duration tokens

09 — Radius

Border radius

10 — Borders

Border width

11 — Blur

Backdrop blur

12 — Z-Index

Layer scale

13 — Iconography

The icon set

Core carries one icon set: Iconoir. Every brand inherits it — there is no Space set, no Agōn set, no Seed set. One family, drawn on one grid, at one stroke weight.

Iconoir is MIT-licensed and ships as an npm package, so unlike colour and type it needs no export pipeline. Figma mirrors it for design; code installs it directly. Both sides must name the same version.

Specimens

Rendered from the package at 24×24 with no fill and no stroke colour of their own. They are the colour of this paragraph because they inherit it.

Sizes

Iconoir strokes 1.5 at 24. Scale the box and the stroke scales with it — a 16px icon draws a 1px line, a 48px icon draws 3px. The effective weight below is computed, not chosen.

Rules

The colour rule, rendered

Known drift

The Figma library and the npm package are not currently the same vintage. Until they are reconciled, a designer can specify an icon a developer cannot install.

Reference Library

Space

Dark-mode system. Metropolis · Inter · IBM Plex Mono. Built for high-contrast digital products on dark surfaces. House language of Open Orbit Studio; also worn by gabrielkroll.com.

A — Brand

Positioning

Space is the house language of Open Orbit Studio: near-black ground, one signal accent, and structure you feel rather than see. The frontier metaphor is about vantage — going far enough out to see the whole problem — not about sci-fi decoration.

Primary property

Open Orbit Studio

AI-enhanced product sprints for teams that move fast. One problem, shaped and shipped in two weeks.

Second property

gabrielkroll.com

Personal portfolio and studio-facing home. Same theme, warmer register — personal warmth inside a space-tech system.

Sibling brand

Agōn

Worn by Meso+. Draws on the same core as Space and answers to none of its brand rules. See the Agōn tab.

Register

Warm, exacting, cinematic

Confident about the work without becoming self-promotional. Technical without losing the human point of view.

Needs sign-off. Two positioning lines are live in the repos and do not agree — openorbit-site/CLAUDE.md says “two-week product sprint studio for sustainability ventures”, FabaOrigin/CLAUDE.md says “AI Design Sprint agency”. This page follows the shipped homepage headline. Pick one; the voice section inherits from it.

B — Brand

Voice

Direct, spacefaring, warm under the precision. Space states the claim, then gets shorter.

  1. Claim, then a shorter line. The headline makes one claim; the line beneath it is plainer and shorter. “AI-enhanced product sprints for teams that move fast” → “One problem, shaped and shipped in two weeks.”
  2. Spaceflight describes distance and vantage. Orbit, frontier, lightyears, vantage point — used for how far the work travels or what it lets you see. Never set dressing, never rocket imagery for its own sake.
  3. Evidence over adjectives. Two weeks. A working prototype in customers’ hands. WCAG AAA from day one. Specifics carry the confidence; “world-class” and “cutting-edge” do not.
  4. No performed enthusiasm. No exclamation marks, no “we’re thrilled to announce”, no emoji in product surfaces.
  5. The person stays present. First-person plural for the studio, first-person singular on gabrielkroll.com. Capable, curious, approachable — never anonymous corporate.
  6. Show the work before the process. Outcome and artefact lead; method appears only where it explains the outcome.

In voice — shipped lines

One problem, shaped and shipped in two weeks.

Sprint to gain the new vantage point.

At Open Orbit, we care about the Earth and the life on it.

Product in your customers’ hands in two weeks.

Out of voice

We’re excited to announce our revolutionary AI-powered platform!

Blast off into a galaxy of endless possibilities 🚀

Best-in-class, cutting-edge design solutions.

Our proven 7-step methodology unlocks stakeholder value.

C — Brand

Design language

Six rules govern every Space surface. They are the reason two different properties read as one system.

  1. One axis, two registers. A single invisible column governs everything. A section is either editorial — text-led, tight rhythm, measure within reading width — or cinematic — image or statement-led, generous air, content may widen past the reading column. Utility sections stay quiet.
  2. The grid is felt, not drawn. Composition comes from the centered content field and the sanctioned composite widths. No decorative rules, no visible gridlines.
  3. Air is the hierarchy. Sections are separated by space, not borders. The 1px rule is rare and deliberate. Vertical rhythm runs in two gears — 84 for editorial, 138 for cinematic — and the change between them is what signals a register change.
  4. One image system. Every image obeys the scale, one of the sanctioned aspect ratios and one radius, aligned to column edges, with behaviour defined per breakpoint. No floating max-widths, no ad-hoc px.
  5. Motion earns attention. Slow, eased, few. Entrance and scroll reveal only. prefers-reduced-motion is honoured everywhere; no new motion patterns without a reason.
  6. Restraint is the brand. One accent at a time, lots of near-black, generous measure. When a surface feels weak, add space — not colour.

D — Brand

Accent doctrine

Accent is information, never atmosphere. One accent decides a view; the rest support it or stay out.

Photon
Action and highlight. Primary interactive signal, active state, the one thing the eye should reach. One Photon moment per view.
Ia Nova
Commercial. Sales CTA and nav hover. Never compete with Photon as the primary action in the same view — pick the register, then pick the colour.
M-Type
Warm editorial support. Emphasis inside content, never an interactive state.
Nebula
Illustration and orbital artwork only. Not a UI state, not a text colour.
Ion Tail
Illustration and orbital artwork only. Same restriction as Nebula.
Lunar / Space
Figure and ground. #0f0f0f is the void the system sits in; #fbfbfb is everything written on it. Text steps down through the transparency ladder (98 / 74 / 52), never through a different hue.
Standing rules. No gradients built from brand colours. No accent used as a background field larger than a control. No two accents carrying interactive meaning in the same view.
Enforced in F — Usage rules: Nebula and Ion Tail become private names, and there is exactly one accent slot, so a view cannot address two accents without typing a private token.

E — Brand

Anti-references

What Space is defined against. If a screen starts drifting toward one of these, the drift is the bug.

  1. Generic agency-template pages built from repeated card grids, decorative gradients, glass panels, or interchangeable SaaS sections.
  2. Case studies that bury the work in process theatre, or inflate weak evidence with large vanity metrics.
  3. Cold space-tech spectacle with no personal warmth — and magazine styling used as decoration rather than as a consequence of the content.
  4. Excess animation, visible layout grids, or ornamental rules that compete with the work itself.

F — Brand

Usage rules

Everything above is intent. This section is the part that has to bite — the names a product may type, the labels it may set in mono, and two failures rendered rather than described.

The public API

A product reaches for a semantic name, never a brand hue. There is exactly one accent slot, so “one accent per view” stops being a rule anyone has to remember. A --_ name appearing in product code is a bug.

--space-accent

The accent. Photon. Primary action, active state, the one thing the eye reaches. One slot — if a second colour is carrying meaning, the layout is wrong, not the palette.

--space-accent-quiet

The same hue at 22%. Backing wash behind an accented element. Never text.

--space-accent-commerce

Ia Nova. Sales CTA and nav hover only. Never appears as a primary action in the same view as --space-accent.

--space-surface-0/1/2

Ground, component, overlay. Three steps, no fourth.

--space-text-1/2/3

98% / 74% / 52% Lunar. Text steps down through opacity, never through a different hue.

--space-line

Hairline. The only border value.

--_space-nebula
--_space-ion-tail
--_space-m-type

Private. Illustration and orbital artwork only. Not a UI state, not a text colour, not a card border, not a category marker.

Not emitted yet. These names are the decided public API; the build still outputs raw Figma-derived names. Emitting this alias layer is the open pipeline work in PIPELINE.md.

Three roles that are not the same role

Mono became the default for everything small because the type rule said what an Eye Brow must look like and never when it may be used. Small labels do several different jobs, and — since Core 2.0 — none of the common ones is mono.

Eye brow
Inter 500, uppercase, +0.3px, --space-text-3. Names the section the reader is entering. Sits above the h2 that opens a section — nowhere else. Budget: one per section.
Changed in Core 2.0: the eye brow was IBM Plex Mono and is not any more. At eye-brow size the mono made compositions read clunky and heavy — mono's wide, even rhythm fights a label whose whole job is to sit quietly above a heading. Inter carries the same uppercase tracking without the weight.
Index
Metropolis 500, sentence case, --space-text-3. 01 / 02 / 03 when the order itself is information the reader needs. Never mono, never accented, never one colour per item.
Mono
IBM Plex Mono 500. Code snippets, data-visualisation labels and numeric readouts — anywhere character alignment or the machine register is the point. Decorative use is allowed when it is deliberate and rare. Never an eye brow.
Meta
Inter 400, sentence case, --space-text-3. Dates, ranges, captions, bylines, statuses. Unlimited, because it is quiet. Never mono, never uppercase, never accented.
Standing rule. Mono is never coloured, and never an eye brow. An eye brow is --space-text-3 and nothing else — which removes the whole class of small accented uppercase labels at the root.

Enumerating peers

Four parallel items with no differentiator feel under-designed, and the palette is the nearest thing to grab. Position and index carry the sequence; colour carries state.

Don’t

01

Discover

Thursday–Friday

02

Design

Monday–Tuesday

03

Develop

Wednesday–Thursday

04

Deliver

Friday–Tuesday

Nine mono labels in one view. Four accents spent on an order that 01–04 already states. A gradient built from brand colours. Glows with no offset. The palette is gone and nothing has been said.

Do

01

Discover

Thursday–Friday

02

Design

Monday–Tuesday

03

Develop

Wednesday–Thursday

04

Deliver

Friday–Tuesday

Zero mono. Index in the display face, dates in Inter. One Photon mark, spent on the only thing that is actually information — which step you are on.

Accent as atmosphere

A surface that feels empty invites glow, haze and drawn connectors. Space answers emptiness with space.

Don’t

Design sprint · nine working days

From an idea to evidence that it matters.

AI makes building faster.

Brand hue as mood lighting. The eye lands on the haze, not the sentence.

Do

Design sprint

From an idea to evidence that it matters.

Nine working days. AI makes building faster.

One eye brow. Ground stays ground. The sentence is the loudest thing on the surface, which is correct.

01 — Colors

Color tokens

Brand

Primary scale

Neutrals — on-dark (opaque)

Neutrals — on-bright (opaque)

02 — Accessibility

WCAG 2.2

Conformance is a property of the tokens or it is a promise nobody keeps. The three criteria below are the ones a design system can actually own — contrast, focus and target size. Everything else in WCAG is decided in markup, not here.

Contrast · 1.4.3 AA

Every ratio below is computed from the token values on this page, not typed in. Change a hex and the verdicts change with it — a contrast table that can be edited independently of the palette is a table that will eventually be wrong.

AA body ≥ 4.5 · AA large (24px+, or 18.66px bold) ≥ 3 · UI component & graphics ≥ 3
There are two text ramps, and the choice is the accessibility decision.
Translucent carries alpha so the surface beneath shines through — for overlays and anything sitting on varying ground. Its rendered colour, and therefore its contrast, is a function of what is behind it: text-3 passes at 5.34 on the page ground and fails at 3.35 on surface-2. Same token, opposite verdict. That is the ramp behaving correctly, not a defect — but it means a translucent token is only certified against the surfaces measured above.
Opaque is a solid true-tone value that renders identically on any surface, so its contrast is fixed and can be checked once.
The rule. Reach for translucent when the tone should pick up what is behind it. Reach for opaque when it must not shift. If a translucent token lands on a surface it was not certified against, either step up a rung or use the opaque equivalent — do not assume the ratio travelled with it.
Ia Nova and M-Type are different colours that measure alike. Hue 10.8° and 10.9°, saturation 69.3% both — but lightness 47.3% against 57.8%, and lightness is what decides the name. Ia Nova reads as a dark red; M-Type reads salmon-orange. They are not a ramp and must not be merged into one.
What the numbers do settle is a usage limit: Ia Nova is 4.01 and fails AA as body text; M-Type is 5.50 and passes. So Ia Nova is a fill and large-text colour, never small text on dark — which costs nothing, since it is the commercial accent and lives on buttons and CTAs. M-Type keeps its own role as warm editorial support. Neither hex changes.
Nebula at 2.32 is the doctrine's evidence. It fails every threshold, including the 3:1 floor for non-text UI. “Illustration and orbital artwork only” was written from taste in D — Accent doctrine; the arithmetic independently arrives at the same restriction.

Focus · 2.4.11 AA · 2.4.13 AAA · 1.4.11 AA

Space had no focus token at all, which is the largest WCAG 2.2 gap in the system — most of what 2.2 added is about focus. Tab into the buttons below to see the ring.

A link

--space-focus-ring

Photon. 16.38:1 on the ground, far past the 3:1 that 1.4.11 asks of a focus indicator. Agōn substitutes Signal Green at 5.65:1; both clear it comfortably.

--space-focus-width

2px. 2.4.13 wants a perimeter of at least 2px around the component — 1px is the common default and it does not qualify.

--space-focus-offset

2px. Separates the ring from the control so it reads against both the control and the surface behind it.

Focus is exempt from the one-accent rule. The accent doctrine says one accent decides a view, and a Photon focus ring would appear to break it. It does not: focus is transient and user-invoked, never present at rest, and it belongs to the browser's conversation with the reader rather than to the composition. It is a system signal, not an accent. That exemption is the resolution to the conflict — it is not a licence to reuse Photon elsewhere in the same view.
Standing rule. Never outline: none without a replacement indicator in the same rule. 2.4.11 also requires that a focused element is not hidden behind sticky headers or footers — Space's fixed sidebar and any future sticky bar have to leave the focused control visible.

Target size · 2.5.8 AA

New in WCAG 2.2, and the scale already answers it: the 24 minimum is a rung.

--space-target-min

24px — the lg rung. The AA floor for any pointer target. Not a new number; the rung that was already there, given a name.

--space-target-touch

44px — the floor for touch-primary surfaces. Above WCAG, matching platform guidance. Meso+ already mandates it, so Agōn inherits this as its default rather than 24.

24 is a floor, not a target. 2.5.8 exempts inline links inside a sentence, controls whose size is set by the user agent, and cases where the presentation is essential — but a 20px icon button is none of those. Where a control must render smaller, give it a transparent hit area that reaches the floor rather than shrinking the target.

03 — Typography

Type scale

Eye brow is rationed. These specimens are the sizes, not the licence. Mono is for one job — see F — Usage rules for the budget and for the two roles that look like eye brows and are not. Full governance: TYPOGRAPHY.md.

04 — Elevation

Surface elevation

Reference Library

Agōn

A precision training instrument with the physical charge of the gym floor. Mono type, one green signal, one gold rest signal, flat construction. Shares the core scale and geometry; everything expressive is its own. Worn by Meso+.

A — Brand

Positioning

Meso+ is for serious resistance-training athletes who already think in sets, RIR, microcycles and mesocycles. They are not looking for motivation, accountability, or a beginner plan. They want a quieter, sharper instrument that remembers the work and helps them make the next training decision.

North star

The Workset Record

A training record made physical: a checked set on a clipboard, the knurling of a bar, the calm decision between attempts.

Point of view

Progress is a signal, not a streak

Read across sessions, readiness and training blocks. Meso+ suggests progression; it never automates judgment.

Personality

Precise, physical, insider

The calm authority of a measuring instrument with the tactile energy of a working strength gym. It never performs enthusiasm for the athlete.

Why dark

Fluorescent gym light

Dark because it lives beside an athlete checking the next set without wanting glare — not to signal “premium” or “technical”.

B — Brand

Voice

Agōn speaks the athlete’s language, exactly. Same restraint as its siblings, no lift, no lyricism.

  1. Use the real vocabulary. RIR, microcycle, deload, top set, back-off. Never translate a term the reader already owns; the vocabulary is the proof you built this for them.
  2. State the reading, not the verdict. Report what the data says and let the athlete decide. “Volume down 12% on this block” — not “You’re slacking”.
  3. No motivation, ever. No streaks, badges, leaderboards, congratulation copy, or encouragement. The work is its own reason.
  4. Specific over broad. A named detail beats a performance claim. Concrete beats aspirational, every time.
  5. No spaceflight metaphors. Agōn inherits Space structure, not Space imagery. Its metaphors are chalk, steel, rubber and the pause before a hard set.
  6. Labels use the source data’s case. Uppercase only when the underlying data is uppercase — not for styling.

In voice

Week 3 of 5. Volume is holding; RIR is drifting down.

Last top set: 142.5 kg × 5 @ RIR 2.

Deload suggested. Your call.

Progress is a signal read across blocks, not a streak.

Out of voice

Crush your goals! 💪 7-day streak unlocked!

A “mesocycle” is a training block lasting 4–6 weeks.

You’re falling behind. Get back on track.

Launch into your next training orbit.

Needs sign-off. The sample lines are written to the personality defined in mesoplus-site/PRODUCT.md; they are not shipped copy. Approve or replace before they get quoted as canon.

C — Brand

Design language

Precision comes from the core structure and real product data. Energy comes from hard crops, direct photography and a few abrupt changes in scale — not from decorative motion.

  1. Show the instrument working. Product data and interaction carry the argument. No ornamental device renders, no floating phones.
  2. Earn the athlete’s recognition. Real training language and specific details instead of broad performance claims.
  3. Quiet at rest, forceful in emphasis. Controlled and exact, with a few decisive moments of scale, photography and green signal.
  4. The athlete stays in command. Meso+ suggests progression; it does not automate judgment.
  5. Make the work physical. Texture, crop and rhythm evoke chalk, steel, rubber, and the pause before a hard set.

D — Brand

The two standing rules

Signal rule
Green is information, never atmosphere. One primary action, active state, or progression signal at a time. No decorative glows, no gradients, no broad mood lighting in green.
Rest rule
Gold is rest; green is work. They are mutually exclusive, never adjacent. The athlete is training or recovering, never both, so a view carries one or the other — which is why a second signal does not break “one signal at a time”, it completes it. Gold must never appear in a training view, and green must never appear in the breathing sheet. They are also 2.15:1 against each other, so they could not be told apart if they did sit together.
The glow carve-out
The breathing orb is the one glow — and the one gradient — Agōn permits. “No decorative glows, no gradients” stands everywhere else. The orb is exempt because neither is decorating the interface: the glow is the interface, a metronome the athlete watches to pace a breath, and the gradient is what makes a flat circle read as a sphere. The moment a glow stops being the thing you are looking at, or a gradient stops describing a form, the rule applies again.
Two registers
Mono is the instrument; serif is the athlete’s handwritten note. DM Mono turns headline and data into one instrument panel. Instrument Serif Italic appears only for brief human annotations, the wordmark, and product-native moments. Never build an editorial magazine composition out of the pairing.

E — Brand

Anti-references

  1. Generic fitness transformation marketing with before/after promises.
  2. Neon bodybuilding, supplement, or cyberpunk gym branding.
  3. Polished corporate SaaS pages made from floating devices, glowing orbits, gradient atmosphere and interchangeable feature cards.
  4. Influencer-led community apps — streaks, badges, leaderboards, motivational hype.
  5. Editorial-serif mannerisms used as decoration: oversized italic manifestos, ticker strips, repeated tiny labels, numbered feature scaffolds.

01 — Inheritance

What Agōn shares, and what is its own

Agōn is a brand in its own right, a peer of Space and Seed rather than a child of either. What it shares is the core — the geometry every FOOO brand is built on. Everything expressive is its own, and answers to no other brand's rules.

From the core
Spatial scale, container widths, aspect ratios, power easing, duration tokens, blur, z-index — identical across every brand, because that is what the core is for. Neutrals share the same on-dark ladder.
Its own · type
DM Mono + Instrument Serif Italic. Display, headline, body and label are all mono; serif is annotation only. Nothing here is inherited — the pairing is chosen for the instrument register, not adapted from another brand.
Its own · accent
Signal Green #779632, plus the gold Rest pair. Muted on purpose: Photon reads as studio energy, Signal Green reads as instrument readout. The resemblance is a shared taste for one loud colour, not a lineage.
Its own · elevation
Flat by default. Depth comes from contrast, photographic overlap and structural rules. One restrained shadow only where a product surface physically overlaps another. No card stacks.
Its own · radius
4px and 8px only — tighter than the other brands, closer to a printed record than a soft app surface.
Open gap. These values live in mesoplus-site/DESIGN.md front-matter, not in FOOO. There is no tokens/agon.json and no dist/clean/agon.json — this tab documents a theme whose tokens are still hand-copied into mesoplus-site/index.html. Adding Agōn to the token build is the fix.

02 — Colors

Color tokens

Signal

Rest — the breathing orb, core to edge

Neutrals — chalk, steel, rubber

Rest is the second signal, and the only one that is not green. Two stops, because the orb is a sphere and a single flat gold cannot describe it: #ffe8a0 at the lit core, #f5c842 at the edge. Both are read from the running app rather than specified at it — the orb was designed in code, so the code is the source.
Contrast. 15.18:1 and 11.60:1 on gym black; both clear AA and AAA as text. They read against the ground, not against Signal: gold to green is 2.14:1, under the 3:1 that 1.4.11 asks of adjacent meaningful colours, so the two must never sit edge to edge as the only thing telling two states apart. They never need to — see the rule in D — Standing rules.

03 — Typography

Type scale

Reference Library

Seed

Organic, earth-toned system. Exo 2 · Inter · IBM Plex Mono. For nature-aligned, regenerative product contexts. Worn by fabaorigin.com.

A — Brand

Brand & design language

In the works

Coming soon

Seed has a token foundation but no brand definition yet — fabaorigin.com is the least developed of the three properties. Positioning, voice, design language and anti-references get written once the offer behind the site is settled.

The foundations below are live and safe to build against. Treat anything about tone, imagery or accent behaviour as undefined until this section is filled in — do not infer Seed’s brand from Space’s.

01 — Colors

Color tokens

Brand

Primary scale

Secondary scale

Accents — Elm

02 — Typography

Type scale

03 — Shadows

Shadow tokens