Design System
Figma Library
Building the Brane design system
For two years I designed Brane's public face: product pages, client stories, mobile layouts, and a 73 page redesign of the whole website. When I joined, every page started from a blank canvas, because the file carried no variables and no styles. So I built the library the pages should have come from: 376 variables in three tiers, 18 text styles and 22 components.
Every page was rebuilt from scratch. The file held 73 desktop pages with no variables and no styles, so each one meant setting the same colours, type and spacing by hand, then hoping they matched the page before it.
Turned two years of pages into parts. 376 variables in three tiers, 18 text styles and 22 components, each documented on its own page, so a page is assembled instead of drawn.
A new page now starts from 22 components instead of a blank canvas. One edit in tier 1 reaches all 73 pages, and Dark mode comes from the same tokens rather than a second set of screens.
The Problem
New pages needed to start over from scratch
The site was built a page at a time. Nothing in the file was a variable and nothing was a style, so every new page repeated the same work: set the purple, set the gray, rebuild the type scale, match the spacing, then check it against pages someone else had already drawn.
The time cost. 73 desktop pages, 7 home page versions and 23 client story frames, each one drawn by hand and each one a fresh chance to drift.
The decision cost. Five purples with no rule for which to use: #6607FF, #6718F8, #813CFF, #35008B and #340C7C.
The handoff cost. 49 components named by number. A developer opening the file found "Component 3722" and had to guess.
How might we stop drawing the same page again and again, so a change costs one edit instead of 100+?
The Solution
The Brane Design System
This library turns the Brane website into reusable parts.
Design principles
Informative
Lead with the value of NSL. Each section answers one question a buyer has.
Engaging
Light headlines, illustrations and deep purple moments keep long pages moving.
Accessible
Text roles pass WCAG AA contrast. Focus rings are visible on every control.
Modern
Flat surfaces, hairline outlines and a strict 12-column grid.
Primitives held the values, roles held the meaning, and every component reached straight into the roles. A third tier gives every component its own vocabulary.
Primitives
Raw values with no meaning. Ten purples, ten grays, alphas, and the scales for spacing, radius and type. Nobody designs from this layer.
color/purple/500 = #813CFF
Semantic
The job a value does, with one value per mode. Backgrounds, text, borders and icons. Light and Dark are resolved here and nowhere else.
bg/brand → purple/500
Component
The decision one component makes, named after the part. The only layer a component is allowed to bind to, so a change stays inside the component.
button/primary/bg → bg/brand
41
primitives, private
56
semantic roles
198
component tokens
376
variables in six collections
The Process
How did we get there?
I did an audit first. Every fill, every stroke, every text color in the file, sorted by hex. 56 roles in four groups, each with a Light value and a Dark value. The names say the job, never the color, so the same role can point somewhere else in Dark without interfering components.
Color
Brane's purple is a mid tone, which makes it easy to use wrongly. Every step of the ramp was measured against white before any role could point at it.
