VIEW

One parent.Four children.Same DNA.

Role

Lead / Sole
DS Designer

Timeline

2023 → present
3+ years

Consumed by

5 designers
4 products

Scope

Tokens · Atoms
Docs · Governance

Type

Multi-product DS
Figma · Pre-Variables

— What I owned

Parent DS architecture · base library · 3 of 4 child libraries shipped solo · onboarding + governance walk-through for the rest of the team.

— Worked with

Principal Designer + product leads on call-based governance (no RFC). Consumed by 5 designers across 4 products.

FIG. 01 / OVERVIEW
figma · float.library
BASE FLOAT · v1
● LIVE
Float
§01The brief.   What I was handed in 2023.2023 / Pre-architecture

A thin, undocumented design system existed for the now.gg website. As nowStudio came online in parallel — light theme, B2B-dev-aimed, totally different feel — the existing DS couldn't serve both without one of them compromising the brand or forking the system entirely.

Pain · 01
Existing DS was thin: components scattered across files, no token discipline, no docs.
Pain · 02
Two products in flight (now.gg website + nowStudio), each pulling toward different design languages.
Pain · 03
Figma had no native Variables yet (mid-2023). Token discipline meant 3rd-party plugin tooling.
Pain · 04
No documentation, no governance — designers were copy-pasting components between files.
01 — FOUNDATION

Cement the brand layer

Lock down color, typography, spacing, radius, elevation and the icon set in one shared library. Everything downstream inherits from this.

02 — ATOMS

Ship the smallest base

Three atoms only — button, input field, input box — with extensive variants. Resist promoting organisms into the parent until a second product needs them.

03 — INHERITANCE

Let products keep their flavor

Each product gets a child DS that inherits the parent and overlays its own organisms, patterns, and typography mood without forking.

04 — EVANGELISM

Document. Train. Step back.

In-Figma anatomy docs, internal workshops, and lead-designer feedback rounds — so other designers can spin up child DSes themselves.

§02One parent. Four children.   The architecture.The Move

Float doesn't try to be everything. It owns the brand layer — the bits that must be consistent across products. The children own their personality — the bits that should change because the audience changes.

FIG. 02 · Inheritance map · Float → 4 child design systems
PARENT · BASE LIBRARY
FLOAT
colortypespacingradiuselevation
100+ iconsbuttoninput fieldinput box
CHILD · 01
Float Studio
light · editorial sans
nowStudio · game devs
by me
CHILD · 02
Float Website
dark · fun typeface
now.gg · gamers
CHILD · 03
Float Player
dark · cloud chrome
now.gg cloud player
CHILD · 04
Float Gameroom
experimental · agile
Gameroom (R&D)
by me · 2-day spin-up
Built by me (3)
About this: the inheritance map. Parent owns the brand DNA; each child inherits and overlays its own personality without forking.3 children built by me · 2 by others using the walkthrough
§02 · bGovernance happened on a call.No RFC · No doc site

There was no governance document. A component got pushed into base when the principal designer and the lead designers on the other now.gg products agreed it should live there — a short call, an agreement, a merge. That was the whole process.

It worked because the group was small: five designers who already talked daily. Trust + proximity did the work an RFC template would have done in a bigger org — and it would not scale much beyond that. I'm not pitching this as a method; I'm describing what actually held the system together.

§03The foundations.Tokens · Icons · Anatomy

Three things had to be true for the parent/child bet to work: one source of truth for design + dev, an icon library that scaled across products, and documentation that lived where designers already were.

— 01 / Tokens

No raw values. Single source of truth across design and dev.

Tokens did exactly what tokens are meant to do — kill raw hex / px values, give engineering one named contract to read against. The interesting part is how they got there in two phases, before and after the platform caught up.

V · 01 — Before nativeMid-2023

Tokenized in a 3rd-party plugin.

Months before Figma shipped native Variables, I built color, type, spacing, radius, and elevation tokens through a community plugin. Components were bound to plugin-managed token names — not raw values. The discipline was in place before the platform supported it.

  • ToolingCommunity plugin
  • CoverageColor · type · spacing · radius · elevation
  • StatusFile lost in migration
V · 02 — After nativeJune 2023 →

Lifted onto Figma Variables.

When native Variables shipped, the team moved every plugin token onto the new system. The migration itself was an order of magnitude smaller than it would have been from raw values — every component already pointed at a named token, so the swap was largely a re-binding job, not a re-design one.

  • ToolingNative Figma Variables
  • CoverageSame five token categories, plus mode support
  • StatusLive across all 4 children
FIG. 03 · Native token sheet · post-migrationfigma · float / variables
tokenSheet
— 02 / Icons

Hand-crafted, on demand. One library, four products.

Icons were drawn project-by-project as features needed them — not a 500-icon dump. The result was a shared library every child DS pulled from, sized and stroke-matched to the brand, without a third-party set fighting the typography.

FIG. 04 · Icon set · contact-sheet viewfigma · float / icons
iconGrid
— 03 / Anatomy

Documentation lived inside Figma.

Every base atom got an anatomy frame next to the component itself: numbered callouts, token references, light + dark variants side by side. One artifact served both designers (how to use it) and engineering (what tokens to bind to). No external doc site to keep in sync, no second source to rot.

FIG. 05 · Component anatomy · callouts + token referencesfigma · float / docs
inputAnatomy
§04Four faces of Float.Brand pluralism · No fork

A gamer browsing now.gg and a game dev in nowStudio shouldn't see the same product. The architecture's job was to let those two brand expressions live without one of them compromising — and without forking the system to do it.

— What the grid actually shows

One real outlier. One shared gaming line.

Studio is the genuine outlier — different audience, different typeface, different mood. Website, Player, and Gameroom share the gaming-brand flavor (dark, fun typeface) and inherit it from the same parent. Gameroom adds the strongest technical proof: multiple themes via tokens — same components, swap the palette.

FIG. 06 · The four children · brand outlier + shared linescreenshots from the live products
themeSplit01
01
Float Studio
The genuine flavor break. Light theme, editorial sans, calm and dense — aimed at game devs publishing through nowStudio. The reason the parent/child split exists: this product couldn't share now.gg's gamer mood without compromising one of them.
themeSplit02
02
Float Website
The gaming-brand baseline. Dark theme, fun typeface, gamer-first. Sets the flavor that Player and Gameroom both inherit.
themeSplit03
03
Float Player
The cloud player surface. Inherits Website's flavor — same dark/fun typeface — applied to a different surface. Built by another designer using the walkthrough.
themeSplit04
04
Float Gameroom
Same gaming-brand flavor as Website, but a white default theme — and the project shipped with multiple theme options, all driven by token swaps. This is the architecture's strongest proof: same components, just flip the palette. Foundation reuse meant ~2 days from zero to designable.
§05Three decisions I'd make again.Craft + reasoning

Three calls held the architecture up — one structural, one disciplinary, one social. None of them had a clean killed alternative actively on the table at the time; they read like trade-offs in retrospect, but the day-of, they were just the choices that felt right. I'm flagging that upfront so the framing stays honest.

DEC · 01 — Structural

Architect parent/child early — even with only one product live.

The why. The temptation with one product is to build a monolithic DS and split it later when the second product comes online. The split never goes well later — by then, the first product's components have absorbed assumptions that don't generalise.

Cementing the parent layer first — color, type, spacing, atoms — and treating Studio as the first child meant Website, Player, and Gameroom dropped in without a refactor. Gameroom went from 0 → designable in ~2 days on the inherited foundation.

“Architect once. Inherit forever.”
DEC · 02 — Disciplinary

Tokenise before the platform makes it easy.

The why. Discipline is a design decision, not a tool decision. Waiting for native Variables would have meant 6+ months of components bound to raw values — every one of which would need to be re-bound by hand later.

The plugin tokens carried that discipline forward: by the time Variables shipped, every component already pointed at a named token. The migration was a re-binding job, not a re-design one — an order of magnitude smaller than starting cold.

DEC · 03 — Social

Governance via call, not via doc — for as long as the team is small.

The why. The Float team is small: ~5 designers, each individually leading design on a different now.gg product. We talk daily — and that daily contact is the substrate the governance runs on. A component got pushed into base when the principal designer and the leads on the other products agreed on a call. That was the whole process.

An RFC template would have added friction without buying any quality the call wasn't already delivering. Trust + proximity did the work formal governance does in bigger orgs.

Honest caveat. This works for us at our size. Past ~15 designers — or the day individual product leads stop talking weekly — the call falls over and a written process becomes the only option. I'd make this same call tomorrow at our scale; I wouldn't prescribe it to a bigger team.

§06Outcomes, not outputs.Three years in · before / after Float
— DESIGNERS CONSUMING
5×
From: 5 designers, no shared library — copy-paste between files
Why it matters: same headcount, different unit of work. Drift disappeared because there was nothing to drift from.
— CHILD DESIGN SYSTEMS
4+1
From: 1 thin, undocumented DS for the now.gg website
Why it matters: two of the four children — Website and Player — were built by other designers using the walkthrough. The parent/child model passed its hands-off test.
— TOKENS · PRE-VARIABLES
~100
From: 0 formal tokens — raw hex / px values everywhere
Why it matters: when native Variables shipped, every component already pointed at a name. Migration was a re-bind, not a re-design. Best-recollection count.
— CHILD-DS COMPONENTS
200+
From: 0 shared — each product re-built atoms locally
Why it matters: child products stayed in flavor without forking the parent. New designers onboard against one library, not a stack of inconsistent files. Order of magnitude.
RECOGNITION

Pseudo-titled “Design System Officer” by my Principal Designer in recognition of the Float work.

FOR THE TEAM

A new product surface that would normally take weeks to scaffold visually now lands in days — Gameroom proved this with a 2-day foundation phase. New designers onboard against a single library instead of a stack of inconsistent files.

The best design system is the one the team actually uses.

— pinned in the Float file

§07Architect → Evangelist → pseudo-DSO, then onward.Adoption · Workshops · Three systems after

Designing a system isn't shipping it — adoption is. Three formal workshops + lead-designer feedback rounds gating every child DS launch. The proof it worked: two of the four children — Website and Player — were built by other designers using the walkthrough, not by me.

On the title: my Principal Designer / Design Manager pseudo-titled me “Design System Officer” in recognition of the work. Not an HR title change — an internal acknowledgement. I'm calling it what it was.

— Three workshops

Each workshop existed to remove me from a future decision.

Tokens so the team could add a new one without breaking anything. Documentation so every new component shipped with its anatomy frame. Child-DS creation so other designers could build the next product's system without me in the room. That's the leadership move — not running the workshops, but designing them to be unnecessary later.

Session · 01

Token workshop

What tokens are, why they matter.

Pre-Variables, tokens were a foreign concept to most of the team. Hands-on session covering primitives, semantic aliases, and plugin tooling — everyone left able to add a token without breaking the system.

Session · 02

Documentation walkthrough

The anatomy frame as standard.

Walked the team through the in-Figma anatomy doc pattern: numbered callouts, token references, dual variants. From then on, every new component shipped with its anatomy frame as part of the definition of done.

Session · 03

Child-DS creation

So others could build the next ones.

The walkthrough that mattered most. After this session, two designers built Float Website and Float Player following the model — with lead-designer feedback rounds gating each launch. The architect-to-evangelist arc earned the pseudo-DSO title.

FIG. 07 · Workshop / DSO momentinternal · workshop
workshopShot
— After Float

Many more design systems made or contributed to. Here are some of my favourites.

The same parent/child inheritance idea carried into systems that came after — each rebuilt against what the tools, the team, and the industry could express by then. A few stand out for what they proved the model could do.

bluePrintDocs
BlueStacks AppPlayer · 2024BluePrint

Native Figma Variables from day one. Two themes — Windows + macOS — handled through the same token tree. Same inheritance idea, now branching on platform instead of brand.

apparatusShot
6labs.ai · 2025Apparatus

The AI-native one. Tokens, components, and anatomy structured so an LLM can read the system — not just designers and engineers. The audience expanded again: agents joined the team.

— The bet, in retrospect

One foundation, four real products — and three tool generations later, still inheriting.

In 2023 the bet was that brand pluralism didn't need forking — that one parent/child model could host genuinely different products on shared primitives. Float made the bet work. BluePrint and Apparatus made the model portable — across orgs, across surfaces, and across a tooling shift I didn't see coming. The DS file has a shelf life. The inheritance model doesn't.

Two things Float taught me to do every time since
  • Version every system change. Float discussed impact before changes but never tagged releases — “when did X change” had no answer in retrospect. Every system since has shipped with dated, scoped releases so the history stays readable.
  • Stand up the code-side mirror with engineering on day one. Figma-only tokens have a ceiling — the source of truth needs to live in code too. Apparatus carried this through end-to-end; BluePrint started catching up halfway. Float is where I learned not to wait.
— NEXT   04 / 06   —   BlueStacks · four years, ten surfaces
A four-year tenure across ten surfaces