Dimension is SVB's enterprise digital product design system — a comprehensive token architecture, component library, and usage documentation supporting product teams across the entire organization. The system covers foundational visual elements (color, typography, spacing, icons), a full component library with design and usage guidance, content guidelines, patterns, and a React component library aligned to FCB Evolve. Managed and documented in Supernova; tokens managed via Figma Variables.
- Live Docsdimension.supernova-docs.io
- ToolsFigma Variables, Supernova, React, Storybook, Playwright (visual regression)
- TypeDesign System / Token Architecture / Component Documentation
- ScopeFoundations · Components · Patterns · Content Guidelines · React Library
1. Token Architecture — Five Semantic Groups
Tokens in Dimension are organized into five purpose-based groups. Using the correct group is enforced by documentation and Figma linting — a fill token must never be applied to a text element, and vice versa. This structure ensures designs stay coherent when any token value changes.
Page
Background color of page-level surfaces
Fill
Background color of components (cards, buttons, chips)
Text
All text elements only
Border
Dividers, strokes, component outlines
Icon
Icons and other non-text shapes
2. Primitive Color Scale
Semantic tokens reference primitives — never hardcoded hex values. The primary palette anchors SVB's brand identity; the neutral, success, warning, and danger scales provide the full semantic range.
PRIMARY (SVB Brand Blue)
primary/100
#e0eff6
primary/200
#b3d8ea
primary/400
#1f8dc1
primary/500 ← action default
#007db8
primary/700
#005789
primary/900 ← action-hover
#004b6c
NEUTRAL
neutral/100
#f5f5f5
neutral/300
#e0e0e0
neutral/500
#9e9e9e
neutral/600
#757575
neutral/800
#424242
neutral/900 ← text default
#212121
STATUS SCALES
success/100
#e3f1e2
success/300
#98cc97
success/600
#388e3c
warning/100
#ffe8d9
warning/300
#ffab75
warning/600
#ef6c00
DANGER
danger/100
#fee7e4
danger/300
#f1a7a7
danger/600
#b71c1c
3. Semantic Tokens → CSS Custom Properties
Token values are exported from Figma Variables to CSS custom properties via Supernova. Components consume only the semantic layer — never the primitives directly. This ensures a single source of truth between design and code.
dimension-tokens.css (generated export)
/* ── Fill tokens ── */
--color-fill-default: #ffffff;
--color-fill-default-hover: #f5f5f5;
--color-fill-secondary: #e0e0e0;
--color-fill-disabled: #f5f5f5;
--color-fill-action: #1f8dc1; /* primary/400 */
--color-fill-action-hover: #e0eff6; /* primary/100 */
--color-fill-action-secondary: rgba(0, 125, 184, 0.04);
--color-fill-action-secondary-hover:#004b6c; /* primary/900 */
--color-fill-info-secondary: #e3f1e2; /* success/100 */
--color-fill-warning-secondary: #fee7e4; /* danger/100 */
--color-fill-danger: #b71c1c; /* danger/600 */
/* ── Text tokens ── */
--color-text-default: #212121; /* neutral/900 */
--color-text-secondary: #757575; /* neutral/600 */
--color-text-placeholder: #9e9e9e; /* neutral/500 */
--color-text-disabled: #e0e0e0; /* neutral/300 */
--color-text-action: #007db8; /* primary/500 */
--color-text-action-hover: #1f8dc1; /* primary/400 */
--color-text-success: #388e3c;
--color-text-warning: #ef6c00;
--color-text-danger: #b71c1c;
--color-text-white: #ffffff;
/* ── Border tokens ── */
--color-border-default: #e0e0e0; /* neutral/300 */
--color-border-secondary: #f5f5f5;
--color-border-tertiary: #9e9e9e; /* neutral/500 */
--color-border-action: #007db8; /* primary/500 */
--color-border-action-hover: #1f8dc1;
--color-border-action-secondary: #b3d8ea; /* primary/200 */
--color-border-success: #98cc97;
--color-border-warning: #ffab75;
--color-border-danger: #b71c1c;
/* ── Spacing (4pt grid) ── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;4. Component Documentation Sample — Button
Every Dimension component ships with Usage, Design, and Content guidance. Below is the condensed Markdown format of the Button usage doc, reflecting the actual live documentation.
docs/button-usage.md
## Button
> An interactive element that allows users to perform actions or navigate a flow.
> Live spec: https://dimension.supernova-docs.io/latest/components/button
### Styles
| Style | Purpose |
|-----------|------------------------------------------------------------------|
| Primary | Main action on a page or within a component. One per container. |
| Secondary | Supporting or less important actions. Multiple allowed per page. |
| Tertiary | Least important actions or high-density action areas. |
### Types
| Type | Notes |
|------|--------------------------------------------------------------------|
| Text | Default. Most accessible — always prefer over icon-only. |
| Icon | Use sparingly; requires `aria-label`. Reserve for universal icons. |
### States
Default · Hover · Focused · Disabled
### When to Use
✅ To initiate an action: submit data, download a file, navigate within a flow.
❌ If the action takes the user to an external site — use a Link instead.
❌ If the label needs more than 3 words — use a Link instead.
### Rules
- Limit button labels to **3 words or less**
- Primary action goes to the **right** when pairing with secondary
- **16px** gap between paired buttons (--space-4)
- On mobile: buttons expand to **full width**; stack when multiple
- Dark backgrounds: use white **secondary** button — never primary
### Destructive Buttons
Reserve for actions where the user risks **losing something**.
Always pair with a confirmation step; avoid for reversible actions.
### Token Reference
- Fill: --color-fill-action → primary default bg
- Fill: --color-fill-action-hover → primary hover bg
- Text: --color-text-white → primary label
- Border: --color-border-action → secondary border
- Text: --color-text-action → secondary label
- Space: --space-4 (16px) → button gap5. Component Library
Dimension ships a complete component library covering the full range of enterprise product needs. Each component includes Usage, Design, and Content tabs — keeping design and engineering alignment in one place.
- Action Bar
- App Bar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Checkbox
- Chip
- Contextual Banner
- Data Table
- Date Picker Field
- Dialog
- Drawer
- Drop Anchor
- Empty State
- Input Group
- Link
Full documentation at dimension.supernova-docs.io
Want to feel how semantic tokens work? Try the design token playground — tweak primary color, radius, and spacing and watch a preview rethemed live via CSS custom properties.