Approved quote value over six months

01Background

This was a product decision—not a cleanup project.

Revora had no inherited UI debt. The risk was subtler: products, pricing, templates, customers and quotes would each solve the same interaction questions locally.

What is the primary action? What does warning mean? How dense can a table become? Where should guidance appear? If those answers lived inside screens, the interface could look polished and still behave unpredictably.

“I was not repairing design debt. I was designing against the conditions that create it.”

5 product areas×5 repeated decisions=25 chances to drift

01Products02Pricing03Templates04Customers05Quotes

ActionFormStatusFeedbackDensity

Quotes / primaryPricing / primaryProducts / primary

→

Shared decisionaction / primary#6366F1

Figure noteLocal choices compound quietly. The system makes the repeated decisions explicit before screens make them precedent.

02Strategy

Four rules gave the system a point of view.

Each principle had to help me choose between two plausible directions. If it could not change a design decision, it was too generic.

Product pressures

Before defining principles, I named the four tensions the product would repeatedly have to resolve.

Meaning

Names had to preserve intent when raw values changed.

Behaviour

Components had to explain response, not only appearance.

Density

Operational views needed to compress without losing hierarchy.

Risk

Focus, status and error meaning had to survive color alone.

Those pressures became four system rules.

Name purpose, not appearance

A role such as content/primary survives a palette change. A label such as dark-grey does not.

Raw valueneutral / 900→Product intentcontent / primary

The alias keeps its meaning even when the palette changes.

Encode behaviour, not screenshots

Properties describe what a component can do; states describe how it responds. Screens are only compositions.

PropertyHierarchy PrimarySize Medium

StateDefaultHoverFocusDisabled

Make density deliberate

Operational software needs compact views, but hierarchy, focus and consequence cannot disappear with row height.

Comfortable48pxCompact40pxDense32px

Build accessibility into the default

Focus, contrast and redundant status cues belong in the component contract—not in a checklist at the end.

DefaultKeyboard focusError + message! Enter a valid email

03Architecture

A raw value should never explain itself inside a screen.

Five layers connect implementation to intent. A palette can change without every component and workflow being reconsidered.

01Primitiveneutral / 900

Controlled raw material

→

02Semanticcontent / primary

Purpose that survives change

→

03Componenttable / cell / content

Context without local choices

→

04Patternquote / product table

Repeatable interaction logic

→

05Productquote / review

A coherent workflow

Figure noteThe semantic layer is the hinge: primitives describe what a value is; semantic tokens describe why it exists.

One real size chainspace / 48→table / row-height / default

A number becomes a density decision another designer can understand.

04Foundations

Foundations are the product’s smallest decisions—and its longest-lived ones.

The goal was not to offer every possible value. It was to turn raw material into a controlled language for action, content, feedback, density and hierarchy.

01 / Color

The palette is broad. Product choices stay narrow.

Primitives preserve a complete tonal range; semantic aliases decide when a value may enter the interface. This keeps states consistent without removing flexibility from the system.

Primary9 primitives

50#EEF2FF

100#E0E7FF

200#C7D2FE

300#A5B4FC

400#818CF8

500#6366F1

600#4338CA

700#3730A3

800#312E81

Neutral10 primitives

50#F9FAFB

100#F3F4F6

200#E5E7EB

300#D1D5DB

400#9CA3AF

500#6B7280

600#4B5563

700#374151

800#1F2937

900#111827

Success3 primitives

100#DCFCE7

500#16A34A

700#15803D

Error3 primitives

100#FEE2E2

500#DC2626

700#B91C1C

Warning3 primitives

100#FEF3C7

500#D97706

700#B45309

Info3 primitives

100#DBEAFE

500#2563EB

700#1D4ED8

PrimitiveSemantic roleProduct meaning

neutral / 900content / primary

Headings and key values

neutral / 500content / secondary

Labels and supporting copy

primary / 500action / primary

Decisive product actions

error / 500content / error

Validation and destructive risk

info / 500border / focus

Visible keyboard focus

Figure noteRaw values define what exists. Semantic roles define what the product means.

02 / Typography

One family. Twelve intentional text styles.

Inter keeps the application neutral; a compact hierarchy uses scale, weight and line-height to separate orientation, action and dense product data.

Display / lg36 / 44 · Semi Bold

Complex workflows,
made clear.

Heading / h222 / 30 · Semi Bold

Quote configuration

Heading / h318 / 26 · Semi Bold

Pricing rules

Body / lg16 / 26 · Regular

Sales users can adjust quantity and permitted discounts without editing commercial policy.

Body / md15 / 24 · Regular

Used for product copy, form guidance, table descriptions and supporting information.

Label / md14 / 20 · Medium

Maximum discount

text / display/lgtext / heading/h1text / heading/h2text / heading/h3text / body/lgtext / body/mdtext / body/smtext / body/microtext / label/mdtext / label/smtext / button/mdtext / caption/sm

Figure noteThe inventory mirrors the 12 local styles in Figma. Large type is reserved for orientation; labels remain quiet beside the values they describe.

03 / Spacing

A small scale creates rhythm—and named aliases create intent.

The primitive scale handles proportion. Component aliases explain why a specific distance exists.

space / 44px

space / 88px

space / 1212px

space / 1616px

space / 2424px

space / 3232px

space / 4848px

space / 24→padding / card / x

space / 16→padding / card / y

space / 48→table / row-height / default

space / 32→table / row-height / compact

Figure noteAn eight-pixel rhythm is the default; half-steps solve icon and dense-control alignment without opening unlimited choice.

04 / Surface

Radius, border and elevation share one quiet voice.

Containers should explain hierarchy without turning an operations product into a stack of floating cards.

Radius roles

4812999

Control · surface · dialog · pill

Border roles

SubtleDefaultStrongFocusDivider

Structure strengthens only with interaction or risk.

Elevation roles

0123

Canvas · card · popover · modal

Figure noteThe base shadow combines a 1px contact edge with a soft 32px ambient shadow; stronger elevation is reserved for overlays.

05 / Responsive behaviour

Layout changes by priority, not by shrinking everything.

Revora's responsive rules collapse navigation, stack workspaces and preserve primary actions as width disappears.

Desktop≥ 1100

Persistent navigation and side-by-side work areas.

Compact1000–820

Reduced columns; supporting panels move below the task.

Mobile≤ 760

Navigation becomes a drawer and actions stay reachable.

Figure noteThe shipped product uses several content-aware thresholds—including 1100, 1000, 820 and 760px—rather than one universal breakpoint.

05Components

The table became the hardest test of the system.

Buttons are easy to showcase. A configurable table reveals whether foundations, properties, states and product behaviour actually work together.

Before drawing it, I asked

Which cells are structural—and which stay optional?
How do editing, selection and row actions coexist?
What changes across default, dense and compact modes?
How can status scan quickly without dominating the row?

Quote products3 line items

ProductPriceStatus

Starter bundleHardware$2,480Approved

ImplementationService$8,900Review

Support planRecurring$1,200Draft

SelectionPrimary + supporting contentSemantic stateRow action

Figure noteThe row is composed from independent cells, so selection, editing, status and actions can change without multiplying the entire table.

Compose cells

Checkbox, status, editable value and row action can be included without rebuilding the row.

Keep states independent

Selection, hover and editing describe different behaviours—not one oversized variant list.

Let density inherit

Rows reference named height variables, keeping compact views deliberate and reversible.

Six table behavioursStates stay independent, so the row can respond without becoming a new component.

DefaultReady to scan

HoverAction becomes visible

SelectedSelection persists

EditingValue enters context

Validation errorGuidance stays local

LockedMeaning remains readable

Table states and densitySame anatomy, different operational rhythm.

Default · 48

Dense · 40

Compact · 32

Button matrixHierarchy, size and state are separate properties—not 45 manually drawn buttons.3 hierarchies × 3 sizes × 5 states = 45 intentional combinations

SmallMediumLarge

Primary

Secondary

Ghost

DefaultHoverFocusPressedDisabled

Input statesGuidance appears nearest the value and consequence.

DefaultFocusedErrorEnter a value below 30%.Disabled

Status languageText and shape carry meaning with color.

● Approved◆ Review! Blockedi Information○ Draft

Navigation statesOpen and collapsed modes share one selected state.

06Product proof

The system disappears when the workflow starts making sense.

A library proves little in isolation. I tested the language in one demanding composition that combines navigation, analytics, data density and review states.

WORKSPACE / QUOTES

Quote performance

Track pipeline health, review risk and keep sales moving.

Total pipeline$184.2K↑ 12.4% this month

Awaiting review08$47.6K in value

Approval rate72%↑ 6% from July

Approved quote valueMarch–August 2026

$31.4K August

QuoteCustomerValueStatus

QT-1048Acme Retail$24,800Approved

QT-1047Northstar Labs$18,250Review

QT-1046Fable Foods$9,720Draft

QT-1045Atlas Mobility$31,400Approved

Semantic surfacesCanvas, sidebar and cards separate context without excess elevation.

Shared action hierarchyViolet is reserved for the page's decisive next step.

Reusable filteringDate and status controls share one predictable pattern.

Compact data densityRows stay scannable while preserving useful context.

Status languageText, shape and color carry meaning together.

Figure noteOne composed screen tests the system across navigation, action hierarchy, data density, status and responsive structure.

07Accessibility

A state is only useful when its meaning survives the color.

Accessibility was encoded at foundation and component level: contrast pairs, visible focus, redundant error cues and readable density.

Contrast pairing

Aa16.82:1

Aa6.12:1

Aa4.81:1

Figure noteForeground and background roles are tested as pairs, not isolated swatches.

Focus visibility

Figure noteA 2px violet ring with a 3px offset stays visible beyond the control edge.

Error communicationDiscount! Enter a value below 30%.

Figure noteLabel, border, symbol and guidance communicate the error together.

08Evolution

Version 1.0 is a foundation—not a finished institution.

I built the system as the sole product designer. The next phase is about making its logic easier to maintain, share and connect to production code.

V1.0 · Built

Shared product language

Primitive, semantic and component variables
12 text styles and core foundations
Buttons, inputs, tables and navigation
Responsive product compositions

→

V1.1 · Next

Make the source of truth stronger

Normalize naming and variable scope
Complete usage and accessibility guidance
Add code syntax and token export
Introduce release notes and deprecation rules

What I would improve first

Early labels still contain naming and spelling drift; descriptions are incomplete; token-to-code handoff is not yet automated. Showing those gaps matters more than pretending a first version has mature governance.

09Reflection

AI can generate a screen. The system decides whether it belongs.

As interface generation becomes easier, the durable skill shifts toward defining the product language AI must work inside: intent, semantics, accessibility and behaviour.

AI helps with

Exploring compositions, drafting documentation and automating repetitive specification work.

Human judgment still owns

What a component means, when it should exist, how risk is communicated and which trade-offs fit the product.

I built the system so every screen could make a different decision in the same language.

Continue the story

See how the system behaves inside the complete Revora product.

View the Revora case study ↗