One system. Three brands. Four products.
FOOO — for Faba Origin and Open Orbit — is the design system behind Open Orbit Studio, gabrielkroll.com, Meso+ and fabaorigin.com. Tokens are authored in Figma, versioned as JSON in this repo, and documented here: brand definition and design language alongside the primitives.
01 — Brands
Three brands, one skeleton
Scale, containers, ratios, easing, duration, radius and layering are identical everywhere. A brand owns colour, type, elevation — and its own positioning, voice and anti-references. Nothing structural moves.
Shared by all three
Core
Scale, containers, alignment, aspect ratios, easing, duration, radius, borders, blur and layering — plus the neutral and text ramps above. Owned once, inherited by every brand. No colour of its own, which is the point.
Space
Dark-mode, near-black ground, one signal accent. Metropolis · Inter · IBM Plex Mono.
Agōn
Instrument register. Mono type, one green signal, one gold rest signal, flat construction. DM Mono · Instrument Serif.
Seed
Organic and earth-toned, for nature-aligned and regenerative contexts. Exo 2 · Inter · IBM Plex Mono.
02 — Start here
Pick the job you're doing
The same pages serve design and code. These are the shortest routes in.
Designing a screen
Scale, type, ratios
Snap every size to the scale. On-token type only. One radius, one of six sanctioned aspect ratios.
Building it
Tokens and values
Hex, rgba, easing curves and durations, ready to copy. Machine-readable exports live in dist/clean/.
Writing the words
Voice and anti-references
Each brand carries a voice with in-voice and out-of-voice samples, plus the references it is defined against.
03 — Contents
What the library holds
Two layers per brand. Brand answers why it looks like this; foundations answer what the value is.
Brand — A to E
Positioning, voice and the rules a surface is judged against. Written per brand, not shared.
Foundations — 01 to 12
The primitives. Identical across brands except colour, type and elevation.
04 — State
What is wired, and what is not
A design system that overstates its own readiness costs more than one that does not exist. Current honest state.
Working
Token build
Figma → tokens/tokens.json → Style Dictionary → dist/{css,js,clean}. Run with npm run build.
Working
Documentation
This site. Brand and foundations for Space, brand and deltas for Agōn, foundations for Seed.
Not wired
Distribution to consumers
Every consumer holds hand-copied hex literals. No import, no package, no symlink. See PIPELINE.md.
Decided
Public alias layer
Generated Figma names cannot be the public API — one rename breaks every consumer. Hand-authored aliases over the generated output. Not built.
Missing
Agōn tokens
No tokens/agon.json. Values live in mesoplus-site/DESIGN.md front-matter and inline CSS.
Pending
Seed brand definition
Foundations are safe to build against. Positioning, voice and design language wait on the offer behind fabaorigin.com.