AURUM / Introduction
Figma Variables Linked
Product Design System

Aurum
Design
System

A systematic approach to building interfaces — grounded in three-tier design tokens, driven by Figma Variables, and built for teams that care about craft.

47Components
120+Tokens
3Breakpoints
WCAGAA Compliant
01 — Foundation

Color

Three-tier architecture: primitives define the raw palette, semantic tokens apply meaning, component tokens bind to UI elements. All tiers are mapped to Figma Variables with dark and light mode support.

Figma · Color Variables
Variable Group
color/primitive/* → color/semantic/*
Modes
Dark (default), Light
Token Format
W3C DTCG · JSON
Scopes
Fill, Stroke, Text, Effect
Semantic Tokens
Brand Palette
gold/200
#F0D580
gold/300
#E2BE55
brand/default ★
#C9A84C
gold/500
#B08A35
gold/700
#6A4E10
Semantic Colors
color/success
#3D9E6B
color/warning
#E8A838
color/error
#D95F5F
color/info
#4A90D9
02 — Foundation

Typography

Three-font system. Cormorant Garamond anchors display hierarchy with editorial weight. Instrument Sans handles UI. DM Mono carries all token and code references.

Figma · Text Styles
Style Groups
display/* · body/* · mono/*
Scale Ratio
Augmented fourth × 1.333
Variables
type/size/* · type/weight/*
Dev Mode
font-family, size, weight, line-height
display/5xl96px · 300 · −0.03em
Aurum
display/3xl48px · 300 · −0.03em
Design System
display/2xl32px · 300 · −0.02em
Section Heading
body/xl24px · 400
Subheading text
body/lg20px · 400
Large body copy
body/base15px · 400 · 1.6lh
Standard body text. The quick brown fox jumps over the lazy dog and the quick design system token bridges the gap between Figma and code.
body/sm13px · 400
Small / caption. Supporting information and metadata labels.
mono/sm13px · 400 · DM Mono
--color-brand-default: #C9A84C
03 — Foundation

Spacing

Base-4 scale mapped to Figma Variables under the spacing/* group. All component padding and gap values reference these tokens — never hardcoded numbers.

Figma · Spacing Variables
Variable Group
spacing/*
Base Unit
4px
Auto Layout
Gap + padding bound to spacing vars
Dev Mode
Red-line annotations auto-export
04 — Foundation

Radius

Six radius stops from sharp to fully rounded. Each token maps to component hierarchy — form elements use radius/md, cards use radius/lg, pills use radius/full.

none · 0
sm · 3px
md · 6px
lg · 10px
xl · 16px
full · ∞
05 — Foundation

Elevation

Shadow tokens establish the Z-axis hierarchy. Higher elevation signals interactive priority — tooltips sit above cards, modals above tooltips.

none
Flat surface
sm
Tooltip · Tag
md
Card · Popover
lg
Modal · Drawer
06 — Foundation

Motion

Four easing curves and five duration stops. Click each box to replay the animation — they correspond directly to Figma prototype animation settings.

Figma · Prototype Animations
Standard
cubic-bezier(.4,0,.2,1) · 220ms
Enter
cubic-bezier(0,0,.2,1) · 400ms
Spring
cubic-bezier(.34,1.56,.64,1) · 360ms
Exit
cubic-bezier(.4,0,1,1) · 140ms
FADE UP
ease-decelerate
SCALE IN
ease-standard
SLIDE IN
ease-spring
FAST EXIT
ease-accelerate
Components

Button

Four variants × three sizes × four states. The compound variant system in Figma mirrors the CSS class composition 1-to-1, so Dev Mode exports accurately for engineers.

Figma · Button/Root
Variants
variant · size · state · iconLeft · iconRight
Auto Layout
Horizontal · gap: spacing/2 · pad: spacing/2 spacing/5
Variables
color/brand · spacing/3–5 · radius/md
Dev Mode
height: 36px · font: body/sm/500 · transition: all 120ms
Variants
Sizes
States
Components

Badge

Status indicators with six semantic variants. Monospace typeface ensures numerical values align consistently in dense UI contexts.

Figma · Badge/Root
Variants
variant · dot · size
Auto Layout
H · gap: spacing/1 · pad: 2px spacing/2
Variables
color/success etc. · radius/full
Dev Mode
font: mono/xs/500 · border: 1px semantic
Default Brand Success Warning Error Info
Components

Input

Form fields with label, hint, icon, and four states. Focus ring uses brand token at 12% opacity fill — consistent with the Figma variable scope set to "Fill".

Figma · Input/Root
Variants
state: default · focus · error · disabled
Auto Layout
V · gap: spacing/2 · field: H hug
Variables
color/border · color/brand · radius/md
Dev Mode
height: 40px · focus ring: 2px brand/subtle
Default
Supporting hint text
Error State
This field is required
Disabled
This field is locked
Focused (simulated)
ring = brand token ×0.12α
Components

Card

Two elevation tiers — surface and elevated. Cards compose Header, Body, and Footer slots, each mapped to nested Auto Layout frames in Figma with consistent slot spacing.

Figma · Card/Root
Component
Card/Root + Card/Header · Card/Body · Card/Footer
Auto Layout
V · fill container · radius: radius/lg
Variants
elevation: surface · elevated
Variables
color/bg/surface · color/border/subtle
Surface Card
elevation: surface

Default elevation for content containers. Uses bg/surface and a subtle border stroke with no shadow applied.

surface
Elevated Card
elevation: elevated

Raised elevation for dialogs, popovers, and featured content. Shadow/md applied, bg/elevated fill.

elevated
Components

Avatar

Five sizes with image fallback to initials. Stackable via avatar group with −8px offset and 2px border ring using bg/base to visually separate overlapping instances.

JK
JK
JK
JK
JK
JK
AL
MR
+4
Avatar group · offset −8px
Components

Toggle

Spring-animated thumb with brand-token active state. The Figma prototype uses smart-animate between off/on variant instances to simulate the CSS spring easing.

Figma · Toggle/Root
Variants
state: off · on · disabled
Prototype
On click → swap variant · smart animate
Auto Layout
H · gap: spacing/3 · align: center
Variables
color/brand · color/border/default
Off
On
Disabled
Components

Progress

Linear progress with semantic color variants and two track heights. Fill transition uses the decelerate easing curve — same timing as the Figma prototype number input animation.

Completion72%
Success88%
Error34%
Large track · warning55%
Components

Tabs

Underline pattern with brand token active indicator. Interactive below — tab switching mirrors the Figma prototype's conditional visibility component state.

Overview
Specs
Usage
Dev Mode
Tab component built with the underline pattern — a 2px border-bottom using color/brand on the active state. In Figma, this is achieved via a variant property named state with values: default, hover, active.
Components

Chip

Compact interactive labels for filtering and multi-selection. Click to toggle. The removable variant adds an × target mapped to an optional icon slot in Figma.

Design System
Figma
Tokens
React
Accessibility
Tailwind CSS
Remove me ×
Components

Skeleton

Shimmer loading states that mirror real content layout. Pure CSS animation — no JavaScript. The shimmer gradient uses the same bg/elevated and bg/overlay tokens as all surfaces.

Copied to clipboard