TRACKIN

Design tokens & visual reference — 110 tokens, 41 icons

Colors 5

text-primary
#111827
text-secondary
#374151
text-tertiary
#6B7280
text-inverse
#FFFFFF
brand-color
#111827

Radius 7

xs
4px
sm
6px
md
8px
lg
12px
xl
16px
2xl
20px
full
100px

Shadows 7

xs
sm
card
elevated
md
lg
xl

Typography 16

The quick brown fox jumps over the lazy dog
font-family · Inter
The quick brown fox jumps over the lazy dog
font-mono · JetBrains Mono
The quick brown fox jumps over the lazy dog
font-size-base · 15px
The quick brown fox jumps over the lazy dog
font-size-sm · 13px
The quick brown fox jumps over the lazy dog
font-size-xs · 11px
The quick brown fox jumps over the lazy dog
font-size-lg · 17px
The quick brown fox jumps over the lazy dog
font-size-xl · 22px
The quick brown fox jumps over the lazy dog
font-size-2xl · 28px
The quick brown fox jumps over the lazy dog
font-size-3xl · 34px
The quick brown fox jumps over the lazy dog
font-weight-normal · 400
The quick brown fox jumps over the lazy dog
font-weight-medium · 500
The quick brown fox jumps over the lazy dog
font-weight-semibold · 600
The quick brown fox jumps over the lazy dog
font-weight-bold · 700
The quick brown fox jumps over the lazy dog
line-height-tight · 1.2
The quick brown fox jumps over the lazy dog
line-height-normal · 1.5
The quick brown fox jumps over the lazy dog
line-height-relaxed · 1.65

Animation 5

Hover me
ease-spring
cubic-bezier(0.22, 1, 0.36, 1)
Hover me
duration-fast
150ms
Hover me
duration-normal
250ms
Hover me
duration-slow
400ms
Hover me
stagger-index
0

Auth Brand 5

brand-dark
#0A1628
brand-mid
#1E3A5F
accent-glow
rgba(37, 99, 235, 0.3)
accent-glow-light
rgba(37, 99, 235, 0.25)
TokenValue
--brand-gradient linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-mid) 50%, var(--brand-dark) 100%)

Borders 4

border-hairline
#E5E7EB
border-subtle
#D1D5DB
border-color
#E5E7EB
border-separator
#D1D5DB

Bottom Bar 1

TokenValue
--bottom-bar-height 84px

Brand 5

accent-color
#2563EB
accent-hover
#1D4ED8
accent-light
#EFF6FF
accent-bg
rgba(37, 99, 235, 0.08)
secondary
#8B5CF6

Button Inner Shadow For Tactile Feel 2

btn-primary
btn-primary-hover

Component 2

TokenValue
--sidebar-width 260px
--sidebar-collapsed 72px

Gray Scale 10

50
100
200
300
400
500
600
700
800
900

Interactive 3

accent-active
#1E40AF
border-hover
#D1D5DB
TokenValue
--focus-ring 0 0 0 2px var(--accent-light), 0 0 0 4px var(--accent-color)

Layout 4

bg-app
#F3F4F6
bg-card
#FFFFFF
bg-input
#F9FAFB
bg-elevated
#FFFFFF

Layout Tokens 2

TokenValue
--page-gutter 24px
--touch-target 44px

Order Status Colors 10

status-deposited
#3B82F6
status-deposited-bg
#EFF6FF
status-in-progress
#F59E0B
status-in-progress-bg
#FFFBEB
status-ready
#10B981
status-ready-bg
#ECFDF5
status-collected
#6B7280
status-collected-bg
#F3F4F6
status-late
#EF4444
status-late-bg
#FEF2F2

Overlay 2

bg-overlay
rgba(0, 0, 0, 0.5)
bg-overlay-heavy
rgba(0, 0, 0, 0.85)

Semantic Shadows 2

error-ring
accent-ring

Semantic State Colors 8

color-success
#10B981
color-success-bg
#ECFDF5
color-warning
#F59E0B
color-warning-bg
#FFFBEB
color-error
#EF4444
color-error-bg
#FEF2F2
color-info
#3B82F6
color-info-bg
#EFF6FF

Spacing Scale 9

space-xxs
4px
space-xs
8px
space-sm
12px
space-base
16px
space-md
20px
space-lg
24px
space-xl
32px
space-2xl
48px
space-3xl
64px

Utility Classes For Fixed Stagger Delays 1

TokenValue
--stagger-index 8

Icons 41

⬇ Download SVG Sprite (41 icons)
Usage
<svg width="24" height="24"><use href="icons.svg#alert"/></svg>

Click any icon to copy its <use> snippet.

alert
archive
backpack
bag
camera
check-circle
chevron-left
chevron-right
clock
close
coat-hanger
dashboard
devices
download
edit
image
inbox
link
list
lock
logout
mail
orders
package
phone
plus
qrcode
search
settings
shield
shirt
shoe
shop
smile
sneaker
tool
tote
trash
user
watch
wrench
Internal tokens (wf-*)

Canvas 2

canvas-bg
#f5f5f5
canvas-text
#1a1a1a

Flow Sections 4

flow-bg
#ffffff
flow-border
#e5e5e5
flow-title
#1a1a1a
flow-description
#666666

Device Frames 5

device-bg
#ffffff
device-bezel
#1a1a1a
device-bezel-inner
#333333
device-title
#888888
TokenValue
--wf-device-radius 36px

Status Bar 24

status-bar-bg
transparent
status-bar-text
#000000
browser-bar-bg
#e5e5e5
browser-dots-red
#ff5f57
browser-dots-yellow
#febc2e
browser-dots-green
#28c840
browser-url-bg
#ffffff
browser-url-text
#666666
TokenValue
--wf-status-bar-height 44px
--wf-browser-bar-height 36px
--wf-space-xs 4px
--wf-space-sm 8px
--wf-space-md 12px
--wf-space-lg 16px
--wf-space-xl 24px
--wf-space-2xl 32px
--wf-space-3xl 48px
--wf-space-4xl 64px
--wf-font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
--wf-font-size-xs 10px
--wf-font-size-sm 12px
--wf-font-size-md 14px
--wf-font-size-lg 16px
--wf-font-size-xl 20px

Shadows 3

sm
md
lg

Border Radius 2

wf-md
8px
wf-lg
12px

Semantic Colors 7

text-secondary
#666666
text-tertiary
#999999
bg-canvas
#f5f5f5
bg-component
#ffffff
bg-subtle
#f5f5f5
accent
#007AFF
border
#e5e5e5