Role
Product Designer
Company
Sublima UI
Client
B2B SaaS · confidential
Scope
Colour, type, elevation, spacing, grids, icons, 50 components, documentation
THE SYSTEM, LIVE
Create workspace
Cancel
Workspace name
Northwind Analytics
Visible to everyone you invite
Active
Beta
Blocked
What it is
A design system built for a client at Sublima UI who was starting a B2B SaaS product from zero. It covers the six foundations a product needs before anyone draws a screen — colour, typography, elevation, spacing, grids and icons — and the fifty components a working interface actually consumes.
The system is built in two layers. Underneath sit six raw colour ramps. Above them sit forty-six named roles: text/primary, action/primary/bg, status/danger/border. Components only ever ask for a role. No component anywhere in the library references a colour value directly.
That indirection is the whole design. It is what makes a theme change an edit in one place, what gives design and engineering the same word for the same thing, and what let dark mode ship as a second column in a table rather than a second design.
The problem
Building from nothing is a harder start than it sounds.
The client had no legacy interface to consolidate and no old system to migrate off. That reads like the easy version of this problem. It is not.
When there is nothing to copy, every screen becomes an independent invention. The first designer picks a blue. The second picks a slightly different blue, because the first one was never written down. Button padding is 12px on Tuesday and 14px on Thursday. By screen twenty you do not have a product — you have twenty products that share a logo, and the cost of reconciling them compounds with everything shipped on top.
The rebrand set the timing. A new visual direction has to reach every surface, and there is exactly one moment when foundations can be installed without paying a migration cost: before the first screen exists. Retrofitting a system at screen forty means rebuilding forty screens.
THE DESIGN TENSION
The brand had already changed once. Nothing in the system was allowed to assume it would not change again.
What I designed
I started from what I wanted to be true of the team’s daily work six months after handover, rather than from a component list. Three things, and every decision after them followed from these.
Make the right choice the easy one
Consistency enforced in review is consistency that fails the week everyone is busy. Controls exist at 32, 40 and 48 pixels and nowhere between, and inputs share those heights, so a button and the field beside it align without anyone measuring.
One vocabulary for design and engineering
Most handoff friction is translation. A designer says “the light grey border”; an engineer finds three greys and picks one. Naming roles means both sides say the same word and mean the same value.
Accessibility in the primitives
Accessibility added at review fails, because by then a hundred components already encode the same mistake. Target sizes, focus states and colour-independent status were built into the base components.
Colour: two layers, so a rebrand is one edit
Six ramps — a cool neutral, an indigo brand, and four status hues. These are raw material, and nothing in a component touches them. Between the ramps and the components sits the role layer, and each role points at a different ramp step per mode.
This is the direct answer to the client’s constraint. Their brand had just changed once, and the next change lands on forty-six names rather than fifty components. Dark mode was the proof: it cost a second column in a table, not a second design.
NEUTRAL · 13 steps
BRAND · 11 steps
SUCCESS · 11 steps
WARNING · 11 steps
DANGER · 11 steps
INFO · 11 steps
Seventy-nine steps across six ramps. Nothing in a component references any of them directly.
Type, depth and space on one rhythm
Eighteen text styles from display to caption. Sizes step on a 2px rhythm and every line height is a multiple of four, so a paragraph and the button beside it share a baseline without anyone nudging either one.
Elevation is six steps with no improvising between them — a resting card is xs, a menu is lg, a modal is 2xl. Depth stays readable because it is quantised. The seventh is a focus ring: a named, designed state rather than a browser default nobody styled.
TYPE SCALE
Display
48 / 56 · 700
The quick brown fox jumps
Heading/1
36 / 44 · 700
The quick brown fox jumps
Heading/2
30 / 38 · 700
The quick brown fox jumps
Heading/3
24 / 32 · 600
The quick brown fox jumps
Heading/4
20 / 28 · 600
The quick brown fox jumps
Heading/5
18 / 26 · 600
The quick brown fox jumps
Heading/6
16 / 24 · 600
The quick brown fox jumps
Body/Large
18 / 28 · 400
The quick brown fox jumps
Body/Medium
16 / 24 · 400
The quick brown fox jumps
Body/Small
14 / 20 · 400
The quick brown fox jumps
Label/Medium
14 / 20 · 500
The quick brown fox jumps
Label/Small
12 / 16 · 500
The quick brown fox jumps
Caption
12 / 16 · 400
The quick brown fox jumps
Overline
12 / 16 · 600
THE QUICK BROWN FOX
ELEVATION
xs
sm
md
lg
xl
2xl
focus
SPACING · 4PX BASE
space-2
2px
space-4
4px
space-6
6px
space-8
8px
space-12
12px
space-16
16px
space-20
20px
space-24
24px
space-32
32px
space-40
40px
space-48
48px
space-64
64px
space-80
80px
space-96
96px
Grids and icons
Three layout grids, one per breakpoint. A grid is vertical columns separated by gutters, and its job is to give the main elements of an interface something to align to — so a hero, a table and a card row all share the same left edge without anyone deciding it screen by screen.
LAYOUT GRIDS · THREE BREAKPOINTS
DESKTOP
1440px · 12 columns · 32px gutter · 120px margin
TABLET
768px · 8 columns · 24px gutter · 48px margin
MOBILE
375px · 4 columns · 16px gutter · 16px margin
The icon set is drawn on a 24px frame with a 1.75px stroke, round caps and round joins, so a glyph sitting beside 14px text has the same optical weight as the text does. Strokes are bound to text roles rather than fixed colours — an icon inherits the colour of whatever it sits next to, in either mode.
ICONS · 41 GLYPHS · 24PX FRAME, 1.75PX STROKE
Check
X
Chevron Down
Chevron Up
Chevron Left
Chevron Right
Arrow Right
Arrow Left
Plus
Minus
Search
User
Bell
Settings
House
Calendar
Clock
Lock
Eye
Trash 2
Pencil
Download
Upload
External Link
Info
Circle Alert
Triangle Alert
Circle Check
Star
Heart
Menu
List Filter
Copy
Ellipsis
Ellipsis Vertical
Paperclip
File
Image
Log Out
Refresh Cw
Sizes step 16 / 20 / 24 / 32 — 16 beside small text, 20 as the default, 24 for a standalone target.
Components: fifty sets, 267 variants
Every component is a set with named variant properties — variant, size, state — rather than a row of separate frames. A designer configures an instance from the properties panel instead of hunting for the right copy and detaching it. Button alone carries 45 combinations from five variants, three sizes and three states.
1
Actions
2
Inputs
3
Feedback
4
Navigation
5
Data
6
Marketing
ACTIONS · 6 COMPONENTS
DARK
BUTTON · 45 VARIANTS
Add item
Continue
Filter
Delete
Download
Disabled
Small · 32
Medium · 40
Large · 48
BUTTON ICON · 9 VARIANTS
BUTTON GROUP · 4 VARIANTS
Day
Week
Month
SEGMENTED CONTROL · 4 VARIANTS
List
Board
Timeline
TEXT LINK · 4 VARIANTS
View documentation
DROPDOWN MENU · 2 VARIANTS
Edit
Duplicate
Export
Delete
Accordion
2
Alert
8
Alert global
4
Autocomplete
3
Avatar
15
Badge
12
Badge count
6
Badge dot
4
Breadcrumbs
3
Button
45
Button group
4
Button icon
9
Card
3
Checkboxes
8
Combobox
2
Date picker
2
Divider
4
Drawer
2
Dropdown menu
2
Empty state
3
Footer
2
File upload
3
Hero
2
Icon container
15
Loading bar
4
Modal
2
Navigation side
2
Navigation header
2
Pagination
2
Progress indicator
6
Radio buttons
6
Rating
6
Select
4
Search input
3
Segmented control
4
Slider
3
Slot
3
Stepper
2
Summary list
2
Table
2
Tabs
2
Tag
8
Testimonial
2
Text
9
Text area
4
Text block
2
Text input
10
Text link
4
Toggle
6
Tooltip
4
pages
components
variants
semantic roles
The system
Organised the way a team reads it: a Getting Started page, a Foundations group covering colour, typography, elevation, spacing, grids and icons, then one page per component, an overview contact sheet, and a worked example screen assembled entirely from the library — so the system is shown doing its job rather than described.
Styles are named to match the foundations pages exactly. Elevation/lg on the elevation page is Elevation/lg in the style picker. One vocabulary, not a documentation set and a working set that quietly drift apart.
Selected decisions
Disabled states use a token pair, not lowered opacity
The convention is to drop a component to 40% opacity and call it disabled. It is one line, and it is wrong: opacity multiplies against whatever sits behind it, so the same disabled button is legible on a white card and illegible on a grey panel, and neither result was designed.
Disabled is a pair of real roles instead — action/disabled/bg and action/disabled/fg — with values chosen deliberately in both modes. It costs two more tokens and removes an entire class of accidental contrast failure.
2
extra roles, versus one opacity value
Every
surface renders the same disabled state
0
components rely on opacity for meaning
Three control heights, and nothing between them
Buttons, inputs, selects and search fields all resolve to 32, 40 or 48 pixels. The restriction is the feature. A form row assembled from four different components lines up because there was never an option that would have broken it, which means alignment stops being something anyone checks.
Status never rides on colour alone
Every alert, badge and status chip pairs its tone with an icon and a word. Roughly one in twelve men has some form of colour vision deficiency; a red border alone is not a message to them, it is a slightly different grey. The icon is not decoration — it is the part that carries the meaning, and the colour reinforces it.
What I would take to the next one
The two-layer model earned its keep, and I would start there again without hesitating. What I would do differently is write the exceptions down as I went. Every system accumulates them — the one component that needs a hair more padding, the one place a rule genuinely should not apply — and if they are not documented they get read as mistakes and quietly “fixed” by the next person, which is how a system starts drifting from the inside.
Two things also remain open, and they are worth naming rather than glossing. The semantic pairs were chosen to sit comfortably above 4.5:1, but a formal contrast audit across all forty-six roles in both modes has not been run. And the roles should reach engineering as a token export rather than being read off a screen — the entire point of naming a role once is that both sides of the handoff say the same word.
The last thing any system needs is the one thing a library cannot supply on its own: a real screen, built against it under a deadline. That is where the missing components and the ones nobody reaches for both show up. No inventory survives that untouched, including this one.
Behance
Copyright @2026 Manish Durgude