Konnect

Design tokens & visual reference — 180 tokens, 36 icons

Brand Colors 30

green
#22C55E
green-dark
#16A34A
green-light
#DCFCE7
blue
#3B82F6
blue-dark
#2563EB
blue-light
#DBEAFE
orange
#F59E0B
orange-dark
#D97706
orange-light
#FEF3C7
red
#EF4444
red-dark
#DC2626
red-light
#FEE2E2
purple
#8B5CF6
purple-dark
#7C3AED
purple-light
#EDE9FE
green
#22C55E
green-dark
#16A34A
green-light
#DCFCE7
blue
#3B82F6
blue-dark
#2563EB
blue-light
#DBEAFE
orange
#F59E0B
orange-dark
#D97706
orange-light
#FEF3C7
red
#EF4444
red-dark
#DC2626
red-light
#FEE2E2
purple
#8B5CF6
purple-dark
#7C3AED
purple-light
#EDE9FE

Spacing 24

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
space-16
64px
space-20
80px
space-24
96px
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
space-16
64px
space-20
80px
space-24
96px

Border Radius 14

sm
4px
md
6px
lg
8px
xl
12px
2xl
16px
3xl
24px
full
9999px
sm
4px
md
6px
lg
8px
xl
12px
2xl
16px
3xl
24px
full
9999px

Shadows 14

xs
sm
md
lg
xl
brand
blue
xs
sm
md
lg
xl
brand
blue

Typography 30

The quick brown fox jumps over the lazy dog
font-family · SF Pro Display
The quick brown fox jumps over the lazy dog
font-size-xs · 10px
The quick brown fox jumps over the lazy dog
font-size-sm · 12px
The quick brown fox jumps over the lazy dog
font-size-base · 14px
The quick brown fox jumps over the lazy dog
font-size-md · 16px
The quick brown fox jumps over the lazy dog
font-size-lg · 18px
The quick brown fox jumps over the lazy dog
font-size-xl · 20px
The quick brown fox jumps over the lazy dog
font-size-2xl · 24px
The quick brown fox jumps over the lazy dog
font-size-3xl · 28px
The quick brown fox jumps over the lazy dog
font-size-4xl · 32px
The quick brown fox jumps over the lazy dog
font-weight-regular · 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
font-weight-black · 800
The quick brown fox jumps over the lazy dog
font-family · SF Pro Display
The quick brown fox jumps over the lazy dog
font-size-xs · 10px
The quick brown fox jumps over the lazy dog
font-size-sm · 12px
The quick brown fox jumps over the lazy dog
font-size-base · 14px
The quick brown fox jumps over the lazy dog
font-size-md · 16px
The quick brown fox jumps over the lazy dog
font-size-lg · 18px
The quick brown fox jumps over the lazy dog
font-size-xl · 20px
The quick brown fox jumps over the lazy dog
font-size-2xl · 24px
The quick brown fox jumps over the lazy dog
font-size-3xl · 28px
The quick brown fox jumps over the lazy dog
font-size-4xl · 32px
The quick brown fox jumps over the lazy dog
font-weight-regular · 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
font-weight-black · 800

Z Index 10

dropdown 100
dropdown 100
sticky 200
sticky 200
modal-backdrop 300
modal-backdrop 300
modal 400
modal 400
tooltip 500
tooltip 500

Transitions 6

Hover me
fast
150ms ease
Hover me
base
200ms ease
Hover me
slow
300ms ease
Hover me
fast
150ms ease
Hover me
base
200ms ease
Hover me
slow
300ms ease

Gradients 8

green
linear-gradient(135deg, var(--green), var(--green-dark))
brand
linear-gradient(135deg, var(--green), var(--blue))
blue
linear-gradient(135deg, var(--blue), var(--blue-dark))
orange
linear-gradient(135deg, var(--orange), var(--orange-dark))
green
linear-gradient(135deg, var(--green), var(--green-dark))
brand
linear-gradient(135deg, var(--green), var(--blue))
blue
linear-gradient(135deg, var(--blue), var(--blue-dark))
orange
linear-gradient(135deg, var(--orange), var(--orange-dark))

App Colors 6

app-bg
#F8FAFC
app-text
#1A1A2E
app-text-secondary
#64748B
app-bg
#F8FAFC
app-text
#1A1A2E
app-text-secondary
#64748B

Component Heights 8

TokenValue
--height-topbar 44px
--height-tabbar 56px
--height-input 44px
--height-button 44px
--height-topbar 44px
--height-tabbar 56px
--height-input 44px
--height-button 44px

Grays 22

50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950

Semantic Colors 8

color-success
var(--green)
color-info
var(--blue)
color-warning
var(--orange)
color-error
var(--red)
color-success
var(--green)
color-info
var(--blue)
color-warning
var(--orange)
color-error
var(--red)

Icons 36

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

Click any icon to copy its <use> snippet.

alert-triangle
arrow-down
bank
bell
camera
check
chevron-right
clock
credit-card
cube
flash
globe
hand
help-circle
history
image
info
lightbulb
lock
log-out
map-pin
message
more-vertical
navigation
package
phone
plus
runner
send
settings
shield
star
upload
user
wallet
zap
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