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 webpage of Brane was rebuilt from scratch. The file held 73 desktop pages with no variables and no styles, so each one meant setting the same colors, type and spacing by hand.
Developed a Design system, 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.
Brane Enterprises specializes in AI-driven solutions, leveraging machine learning, deep learning, NLP, computer vision, and generative AI to power autonomous systems, robotics, and intelligent automation.
Brane needed a low-code platform to help enterprise users design custom AI solutions without deep coding knowledge.
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.
Brane's old purple website:
Darwin Center
Blockchain Solutions
Digital CEO
Industries
braneenterprises.com in October 2023, from the Internet Archive.
“Existing AI tools felt too technical to plug into our own software.”
Paraphrased from our buyer interviews.
Problem statement
Buyers needed to understand NSL in the first scroll, without a sales call.
Goals
01
Say what it does. Plain words before product names.
02
Show proof people trust. Real industries and real clients, fewer claims.
03
One system. Every page built from the same parts.
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 Research
Understanding the needs
The team ran 10 user interviews and a competitive audit. The interviews pointed to two kinds of buyer.
Persona 1
The technical buyer
IT directors, CTOs and solution architects.
Role Picks the platform.
Looks for Speed, security and scale.
Persona 2
The business buyer
CEOs, heads of operations and product owners.
Role Signs the budget.
Looks for Return, rollout time and fit with current systems.
What both of them asked
What does it do for me, and how fast?
Darwin Center
Brane’s hub for biodiversity research.
Digital CEO
An AI agent for company operations, run on a private LLM.
Blockchain Solutions
Blockchain as a service, configured through NSL.
Industries
NSL by sector, from aerospace to banking.
Legacy Modernization
Old code like COBOL moved to modern stacks.
What I noticed
Every page followed one recipe. A claim at the top, benefits in a grid of equal cards, then the purple band.
Fast to build, but every page looked like every other page.
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.
Work Sans, light at display sizes.
Primitive scales, then role colors for Light and Dark.
One button in three sizes and four styles, on white and on purple.
24 pixel UI icons and 48 pixel feature icons.
Three decisions
Decision 1
Light pages, purple for action.
On the live site deep purple filled every hero, so nothing stood out. In the redesign the page is white, and purple marks buttons, links and the closing band.
Trade-off The site gave up some of its dramatic first impression.
Decision 2
Tiles instead of cards.
The first tile states the result in numbers, 100x acceleration and 10x enhancement. The other three show one model each, with a drawing of what it does.
Decision 3
Photos in place of abstract shapes.
Eight photo cards show where NSL runs: strategy rooms, industries, legacy systems, data centers. People and hardware replace the isometric shapes of the live site.
Low-Fi to High-Fi wireframing. Seven versions of the first scroll. The layout settled by version two. What kept changing was the drawing inside the tiles. Then made it Responsive and Robust across all devices.
Accessibility
We tested every text and background pairing the roles allow, in Light and in Dark, against WCAG 2.1 AA at 4.5:1.
Client stories
One template for every client
I designed case study pages for four Brane clients: an emergency services network, a health insurance plan administrator, a school and a healthcare platform. Every story runs the same four beats.
01
Overview
02
Business challenges
03
Approach
04
Impact
Emergency services network
Faster response times for ambulances.
Health insurance plan administrator
New pricing on top of an old mainframe.
School
An integrated ERP for the whole school.
Healthcare platform
Care delivery across a fragmented network.
Before & After
The Execution
Building Products and Assets
Using the Design System
Website
Brane’s desktop web design is clean, modern, and optimized for user experience, featuring a structured layout with intuitive navigation. The pages emphasizes digital transformation and AI-powered custom solutions with engaging 3D visuals and iconography.
Mobile
To address user confusion over AI terminology, we introduced expandable info sections to progressively disclose details. The Brane mobile web design delivers a clean, modern, and highly accessible user experience, optimized for seamless navigation and readability. The design prioritizes mobile-first principles, ensuring responsive layouts that adapt fluidly across different screen sizes.
Visuals
Dashboards and illustrations for Brane’s products
I designed product dashboards and illustrations for Brane’s pages and explainer videos, all inside the Brane brand guidelines.
The Results
Impact & Learnings
My contribution
From the Brane operations team's monthly report, after the pages went live.
40%
Faster design
to developer handoff
38%
more unique visitors, quarter on quarter
50%
more leads
through the site
Published by Brane on braneenterprises.com. Reported by Brane Operations, 2024
Business Impact
80+
mobile apps launched
10M+
active users
100,000+
Brane AI conversations a day
Design systems significantly accelerated our design and development cycles and deepened my expertise in design tokens, component architecture, and documentation.