Lumelys Protect

Design tokens & visual reference — 60 tokens, 20 icons

Colors 1

white

#F5F5F5

Spacing 13

space-xs

4px

space-sm

8px

space-md

16px

space-lg

24px

space-xl

32px

space-2xl

48px

space-xs

4px

space-sm

8px

space-md

12px

space-lg

16px

space-xl

24px

space-2xl

32px

space-3xl

48px

Radius 8

4px

8px

12px

full

9999px

4px

8px

12px

full

9999px

Typography 6

Token	Value
`--font-heading`	"SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", sans-serif
`--font-body`	"SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", sans-serif
`--font-mono`	"Courier New", monospace
`--font-heading`	"SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", sans-serif
`--font-body`	"SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", sans-serif
`--font-mono`	"Courier New", monospace

Other 12

gold

#C9A24D

gold-light

#E1C878

gold-dim

rgba(201, 162, 77, 0.45)

gold

#C9A24D

gold-light

#E1C878

gold-dim

rgba(201, 162, 77, 0.45)

bg-app

#0B0B0B

bg-card

#1a1a1a

bg-dark

#151515

gray

#B7B7B7

border

#2a2a2a

Token	Value
`--radius`	12px

Status 4

red

#e74c3c

success

#34C759

red

#e74c3c

success

#34C759

Surfaces 8

bg-app

#0B0B0B

bg-dark

#151515

bg-card

#1a1a1a

bg-border

#2a2a2a

bg-app

#0B0B0B

bg-dark

#151515

bg-card

#1a1a1a

bg-border

#2a2a2a

Text 8

text-main

#F5F5F5

text-muted

#B7B7B7

text-muted-light

#D4D4D4

text-inverse

#0B0B0B

text-main

#F5F5F5

text-muted

#B7B7B7

text-muted-light

#D4D4D4

text-inverse

#0B0B0B

Icons 20

⬇ Download SVG Sprite (20 icons)

Usage

<svg width="24" height="24"><use href="icons.svg#building"/></svg>

Click any icon to copy its <use> snippet.

building

chat

check

clipboard-check

clock

event

fire

link

location

lock

person

phone

shield

shield-check

shield-person

team

video

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

Token	Value
`--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

Token	Value
`--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

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