Skip to content
Alea0.1

Foundations

Colors

Eight scales made with the Palette Generator's OKLCH engine (the same one in the Figma plugin), and semantic tokens that change between dark and light. Components only use the semantic ones.

Semantic tokens

These change with the theme. Flip the theme in the header to see the light values.

bg

--alea-bg#272625
--alea-bg-deep#1f1e1d

surface

--alea-surface#1d1c1b
--alea-surface-deep#121212
--alea-surface-raised#262829
--alea-surface-hover#242322
--alea-surface-overlay#000000b8

border

--alea-border#ffffff14
--alea-border-strong#ffffff2e
--alea-border-control#ffffff5c

text

--alea-text#f7f7f7
--alea-text-soft#f9f8f5
--alea-text-muted#dbdbdbb3
--alea-text-faint#dbdbdb99

accent

--alea-accent#cd57ff
--alea-accent-strong#e1a4ff
--alea-accent-second#ffce1f
--alea-accent-third#8b6cf0
--alea-accent-subtle#cd57ff24
--alea-accent-on#111011

focus

--alea-focus#cd57ff
--alea-focus-halo#cd57ff33

chip

--alea-chip-bg#ffffff
--alea-chip-text#111011

field

--alea-field-bg#121212

status

--alea-status-success#3ddc84
--alea-status-success-bg#3ddc841f
--alea-status-danger#ff8a8a
--alea-status-danger-bg#ff7a7a1f
--alea-status-warning#f5a524
--alea-status-warning-bg#f5a5241f
--alea-status-info#9cc2ff
--alea-status-info-bg#3b82f61f

Scales

Step 400 of purple is the brand purple #CD57FF; 200 of yellow is #FFCE1F. Use the scales for illustrations and charts, and the semantic tokens for UI.

purple

50#faf2ff
100#f5e2ff
200#edcaff
300#e1a4ff
400#cd57ff
500#c144f4
600#ae2ae0
700#940dc2
800#7d01a5
900#6a068b
950#2f183b

yellow

50#fff5d9
100#ffe8a9
200#ffce1f
300#e9ba00
400#c29b00
500#a98700
600#947600
700#7b6100
800#675100
900#574400
950#2d2200

violet

50#f5f4ff
100#e9e7ff
200#d8d3ff
300#c0b5ff
400#a189ff
500#8b6cf0
600#7d5cdf
700#6848c2
800#573ba4
900#49328b
950#241f3a

neutral

50#f6f5f4
100#ebe9e7
200#dbd9d5
300#c3c0ba
400#a49f98
500#8c8780
600#7e7972
700#68645e
800#57534d
900#494641
950#242322

green

50#e5fcec
100#c7f8d5
200#9af0b6
300#3ddc84
400#00be6a
500#00a65c
600#00914f
700#007941
800#006535
900#00552c
950#022c15

red

50#fff2f1
100#ffe2e0
200#ffcac7
300#ffa49f
400#fc6968
500#e5484d
600#d4363f
700#b6212e
800#9a1624
900#83151e
950#391817

amber

50#fff4e6
100#ffe5c6
200#ffd095
300#f5a524
400#d88e00
500#bd7b00
600#a56b00
700#8a5900
800#734900
900#623e00
950#331f01

blue

50#f0f6ff
100#deebff
200#c4dbff
300#9cc2ff
400#639eff
500#3b82f6
600#2c73e6
700#1b5ec8
800#124daa
900#104290
950#14233c

Gradients

--alea-gradient-accentradial-gradient(100% 100% at 25% 100%, #cd57ff 0%, #ffce1f 100%)
--alea-gradient-accent-linearlinear-gradient(120deg, #cd57ff 0%, #ffce1f 100%)
--alea-gradient-buttonlinear-gradient(180deg, #33363f 0%, #020202 100%)