Design System · Case Study

FashionGo
Linesheet

A token-first UI kit for a wholesale fashion B2B platform — exported as 98 CSS variables, spanning every surface from data tables to product cards.

FashionGo Vendor
Figma · CSS
98 CSS variables
UI Kit + Linesheet
98+
Design tokens exported
as CSS variables
2
Type roles
Display + Functional
1
Source of truth across
design and engineering
3
Token layers
Primitive → Semantic → Component
01
System Architecture

From raw value
to shipped UI

Everything in the system flows upward from primitive tokens. No component ever references a raw hex value — only named semantic tokens. This makes global changes (themes, brand updates) a single-source operation.

Token hierarchy — FashionGo Linesheet
Primitive
#E11074
#1A1A1A
#ECECEC
#F7F7F7
Inter 700
Inter 400
6px radius
16px base
↓ assigned meaning
Semantic
--color-primary
--color-foreground
--color-border
--color-muted
--color-destructive
--space-4
--radius-m
↓ composed into
Component
Badge
Button
Input
Table
Card
Dropdown
Tab Menu
Sidebar
Modal
↓ assembled into
Pattern
Linesheet view
Item management
Order table
Empty state
Product grid
02
Color Tokens

Primitive → Semantic
two-layer model

Primitive tokens name raw values. Semantic tokens assign purpose. The Linesheet system exports both layers as CSS variables — 98 total across Mode 02 (Variation B), covering base, badge, chart, sidebar, and sonner states.

Neutral Gray — primitive scale
900800700600500400300200100White
Warm Gray — primitive scale
700600500400300
Semantic tokens — base layer
Primary
--color-primary
Foreground
--color-foreground
Background
--color-background
Destructive
--color-destructive
Muted
--color-muted
Border
--color-border
Secondary
--color-secondary
Sidebar BG
--color-sidebar-bg
Badge semantic tokens — status colors
Green Red Blue Amber Purple Teal Indigo Slate Gray
Linesheet Color Tokens — full export from Figma
Linesheet Color Tokens — 98 variables exported from Figma (Mode 02 · Variation B)
03
Typography

Two typefaces,
one role each

Inter is used across all UI — navigation, labels, data, inputs, and headings. Weight and tracking do the work of differentiation: 900 for display, 700 for headings, 400 for body. No decorative typefaces, no arbitrary size decisions.

Role Sample Spec Typeface Used for
H1 Large Titles 32px / 800 / −0.04em Inter Page headers, brand moments
H2 Mid-Level Titles 22px / 600 / −0.01em Inter Section headers, panel titles
H3 Subtitles 16px / 600 / 0 Inter Card titles, table labels
body Body text for product descriptions and list content 14px / 400 / 0 Inter General UI copy, descriptions
price $24.00 16px / 700 Inter Wholesale price, primary CTA value
label SECTION LABEL 11px / 700 / 0.08em Inter Navigation labels, column headers
04
Key Decisions

The choices that
shaped the system

A design system is a series of constrained decisions. Documenting them prevents revisiting the same debate and helps new contributors understand the boundaries.

Decision Alternative considered Chosen approach Why
Token format SCSS variables CSS custom properties Runtime theming; framework-agnostic
Naming convention Raw hex values in components Semantic token names Single-point brand updates; prevents drift
Typography pairing Single typeface (Inter only) Inter — weight scale Functional vs editorial separation; fashion brand feel
Sidebar behavior Fixed expanded sidebar Collapse at ≤1600px Preserves content width on common vendor monitor sizes
Color modes Single mode Mode 02 — Variation B Supports future theming (TheEdit, AsiaDirect sub-brands)
Badge system One generic badge 9 semantic status badges Order state, shipping, discount, and label all need distinction
05
Components

Built from
tokens up

Every component references only semantic tokens — never primitives. Below: four components from the Linesheet kit, each with token annotations showing exactly which variable governs which visual property.

Sidebar — collapsed state (≤1600px)
1
Background: --sidebar-background → Gray 900 (#1A1A1A)
2
Active icon: --sidebar-accent → Primary (#E11074)
3
Inactive: --sidebar-foreground → 25% white alpha
Badge — semantic status variants
Free Shipping Discount 26 SS
1
Background: --badge-green → Green 300 (light tint)
2
Dot color: --badge-green-accent → Green 600 (full saturation)
3
Each status has its own primitive pair — accent + light background — stored as semantic token pairs
Data table — item management
Items data table with dropdown
1
Header bg: --table-header → warm surface
2
Price column: always --color-primary — price is a primary CTA signal
Slide-in panel — new item entry
New item form slide-in panel
1
Border: --color-input → border token; on focus → --color-ring pink outline
2
CTA button: --color-primary — consistent with all primary actions
06
Engineering Handoff

Exploring design &
engineering documentation

Documented as a self-directed exploration — To explore how design and engineering documentation could work together, I set up Storybook using Claude Code and documented my Shopcord component variants there myself. The Controls panel shows how props could be adjusted in real time, and the Accessibility tab shows how WCAG review could become a shared process rather than a design-only checklist.

Storybook FashionGo Linesheet UI Kit
Storybook showing Button All Variants — 6 variants × 3 sizes with Controls panel
Variants
Default · Secondary · Destructive · Outline · Ghost · Link — all 6 variants documented in a single story
Controls
Engineers can toggle variant, size, and disabled state live in the Controls panel — no code required
Accessibility
The Accessibility tab surfaces contrast ratios and ARIA attributes per component — reviewed together, not after the fact
07
Patterns

Components assembled
into flows

Patterns are reusable compositions of components — a modal + form + table working together as a single user flow. The linesheet creation flow combines all three.

Access Type modal — linesheet creation flow
Access Type modal — step 1 of linesheet creation
Add from Customers panel — customer selection
Add from Customers — multi-select with search
08
Outcome

What the system
made possible

98+
CSS variables exported from Figma — every visual decision traceable to a named token
1
Single source of truth shared between Figma components and engineering
9
Semantic badge variants covering every order, shipping, and label state in the platform

The two-layer token model was the key unlock. By separating primitive values from semantic meaning, the system supports future sub-brand theming (TheEdit, AsiaDirect) without touching any component code — only the semantic layer needs to change.