Foundations
Colours
Primitive ramps and semantic colour tokens from variables.json.
Every colour resolves from variables.json — the same source the native
(SwiftUI/Compose) and web token exports read. Brand red is #e00800; the neutral
backbone is the midnight ramp anchored at midnight/1000 = #191329.
Use semantic tokens (surface/*, text/*, border/*, button/*, status/*)
in product code; primitives are the raw ramps behind them.
text · 26
default.default
#191329
default.subtle
#575362
default.muted
#908e9a
default.disabled
#c0bfc8
default.inverse
#ffffff
default.inverseSubtle
rgba(255, 255, 255, 0.75)
default.inverseMuted
rgba(255, 255, 255, 0.60)
default.inverseDisabled
rgba(255, 255, 255, 0.50)
brand.default
#e00800
brand.subtle
#e73933
brand.muted
#ed6b66
brand.strong
#950500
brand.pressed
#bb0700
brand.disabled
#a8a6b1
positive.default
#27633b
positive.subtle
#54bc72
positive.muted
#9ff3b7
positive.disabled
#c0bfc8
danger.default
#8c3f0c
danger.subtle
#e07830
danger.muted
#ffb16f
danger.disabled
#c0bfc8
warning.default
#806d2c
warning.subtle
#d5b549
warning.muted
#ffe68f
warning.disabled
#c0bfc8
surface · 32
canvas.default
#ffffff
canvas.inverse
#f7f7fa
canvas.brand
#e73933
canvas.brandMuted
#fff2f2
canvas.midnight
#140f21
base.default
#f0f0f5
base.inverse
#ffffff
base.brand
#e00800
base.brandMuted
#fce6e6
base.midnight
#191329
sunken.default
#e4e3ea
sunken.inverse
#f0f0f5
sunken.brand
#bb0700
sunken.brandMuted
#f9cecc
sunken.midnight
#140f21
raised.default
#ffffff
raised.inverse
#ffffff
raised.brand
#e73933
raised.brandMuted
#fff2f2
raised.midnight
#312c40
overlay.scrim
rgba(25, 19, 41, 0.50)
overlay.floating
#f7f7fa
overlay.floatingMiddleground
#908e9a
overlay.floatingInverse
#191329
glass.midnight.lg
rgba(25, 19, 41, 0.60)
glass.midnight.md
rgba(25, 19, 41, 0.20)
glass.midnight.sm
rgba(25, 19, 41, 0.07)
glass.white.xl
rgba(255, 255, 255, 0.40)
glass.white.lg
rgba(255, 255, 255, 0.20)
glass.white.md
rgba(255, 255, 255, 0.15)
glass.white.sm
rgba(255, 255, 255, 0.10)
glass.white.xs
rgba(255, 255, 255, 0.05)
border · 55
surfaceBased.canvas.default
#f0f0f5
surfaceBased.canvas.inverse
#d8d7de
surfaceBased.canvas.brand
#ed6b66
surfaceBased.canvas.brandMuted
#f9cecc
surfaceBased.canvas.midnight
#494456
surfaceBased.base.default
#d8d7de
surfaceBased.base.inverse
#e4e3ea
surfaceBased.base.brand
#e9524d
surfaceBased.base.brandMuted
#f6b5b3
surfaceBased.base.midnight
#575362
surfaceBased.raised.default
#e4e3ea
surfaceBased.raised.inverse
#e4e3ea
surfaceBased.raised.brand
#ed6b66
surfaceBased.raised.brandMuted
#f9cecc
surfaceBased.raised.midnight
#575362
surfaceBased.sunken.default
#c0bfc8
surfaceBased.sunken.inverse
#d8d7de
surfaceBased.sunken.brand
#e73933
surfaceBased.sunken.brandMuted
#f08480
surfaceBased.sunken.midnight
#494456
surfaceBased.overlay.floating
#d8d7de
surfaceBased.overlay.floatingInverse
#ffffff
surfaceBased.glass.default.lg
rgba(255, 255, 255, 0.60)
surfaceBased.glass.default.md
rgba(255, 255, 255, 0.70)
surfaceBased.glass.default.sm
rgba(255, 255, 255, 0.80)
surfaceBased.glass.inverse.lg
rgba(255, 255, 255, 0.80)
surfaceBased.glass.inverse.md
rgba(255, 255, 255, 0.90)
surfaceBased.glass.inverse.sm
#ffffff
interactive.default.default
rgba(25, 19, 41, 0.20)
interactive.default.subtle
rgba(25, 19, 41, 0.10)
interactive.default.strong
rgba(25, 19, 41, 0.50)
interactive.default.pressed
#191329
interactive.default.disabled
rgba(25, 19, 41, 0.07)
interactive.inverse.default
rgba(255, 255, 255, 0.60)
interactive.inverse.subtle
rgba(255, 255, 255, 0.40)
interactive.inverse.strong
rgba(255, 255, 255, 0.80)
interactive.inverse.pressed
#ffffff
interactive.inverse.disabled
rgba(255, 255, 255, 0.40)
interactive.accent.default
#e00800
interactive.accent.pressed
#bb0700
interactive.accent.subtle
#e9524d
interactive.accent.muted
#f08480
interactive.accent.disabled
#a8a6b1
interactive.positive.default
#3b8b53
interactive.positive.subtle
#6ced90
interactive.positive.muted
#c1f7d0
interactive.positive.disabled
#c0bfc8
interactive.danger.default
#b85a1a
interactive.danger.subtle
#ff9f52
interactive.danger.muted
#ffd1a8
interactive.danger.disabled
#c0bfc8
interactive.warning.default
#aa913a
interactive.warning.subtle
#ffd957
interactive.warning.muted
#ffecab
interactive.warning.disabled
#c0bfc8
badge · 46
surface.status.neutral
#f0f0f5
surface.status.neutralInverse
#191329
surface.status.disabled
#e4e3ea
surface.status.positive
#6ced90
surface.status.warning
#ffdf73
surface.status.danger
#ffb16f
surface.status.brand
#e00800
surface.offers.newCard
#0e2916
surface.offers.newPlan
#0e2916
surface.offers.megaDeals
#e00800
surface.offers.greenFriday
#e00800
surface.offers.discount
#e00800
surface.offers.limitedStock
#ffd957
surface.offers.validity
#ffd957
surface.offers.limitedTime
#ffd957
surface.offers.bestSeller
#bb2d81
surface.offers.onlineExclusive
#7c0124
surface.offers.exclusiveForEmirati
#7c0124
surface.offers.soldOut
#797584
surface.offers.neutral
#191329
surface.offers.neutralMidnight
#f0f0f5
text.status.neutral
#191329
text.status.neutralInverse
#ffffff
text.status.disabled
#908e9a
text.status.positive
#191329
text.status.warning
#191329
text.status.danger
#191329
text.status.brand
#ffffff
text.offers.newCard
#ffffff
text.offers.newPlan
#ffffff
text.offers.megaDeals
#ffffff
text.offers.greenFriday
#ffffff
text.offers.discount
#ffffff
text.offers.limitedStock
#191329
text.offers.validity
#191329
text.offers.limitedTime
#191329
text.offers.bestSeller
#ffffff
text.offers.onlineExclusive
#ffffff
text.offers.exclusiveForEmirati
#ffffff
text.offers.soldOut
rgba(255, 255, 255, 0.75)
text.tiers.platinumNumber
#191329
text.tiers.goldNumber
#462f2d
text.tiers.goldNumberPlus
#ffe68f
text.tiers.silverNumber
#191329
text.tiers.silverNumberPlus
#ffffff
text.tiers.bronzeNumber
#ffffff
button · 63
primary.surface.brand.default
#e00800
primary.surface.brand.pressed
#bb0700
primary.surface.brand.disabled
#c0bfc8
primary.surface.midnight.default
#191329
primary.surface.midnight.pressed
#f0f0f5
primary.surface.midnight.disabled
#615d6d
primary.surface.inverse.default
#ffffff
primary.surface.inverse.pressed
#312c40
primary.surface.inverse.disabled
#e4e3ea
primary.text.brand.default
#ffffff
primary.text.brand.pressed
#ffffff
primary.text.brand.disabled
rgba(255, 255, 255, 0.75)
primary.text.midnight.default
#ffffff
primary.text.midnight.pressed
#191329
primary.text.midnight.disabled
rgba(255, 255, 255, 0.50)
primary.text.inverse.default
#191329
primary.text.inverse.pressed
#ffffff
primary.text.inverse.disabled
#a8a6b1
secondary.surface.brand.pressed
#bb0700
secondary.surface.midnight.pressed
#191329
secondary.surface.inverse.pressed
#ffffff
secondary.text.brand.default
#e00800
secondary.text.brand.pressed
#ffffff
secondary.text.brand.disabled
#a8a6b1
secondary.text.midnight.default
#191329
secondary.text.midnight.pressed
#ffffff
secondary.text.midnight.disabled
#a8a6b1
secondary.text.inverse.default
#ffffff
secondary.text.inverse.pressed
#191329
secondary.text.inverse.disabled
rgba(255, 255, 255, 0.50)
secondary.border.brand.default
#e00800
secondary.border.brand.pressed
#bb0700
secondary.border.brand.disabled
#a8a6b1
secondary.border.midnight.default
#191329
secondary.border.midnight.pressed
#191329
secondary.border.midnight.disabled
#a8a6b1
secondary.border.inverse.default
#ffffff
secondary.border.inverse.pressed
rgba(255, 255, 255, 0.40)
secondary.border.inverse.disabled
rgba(255, 255, 255, 0.40)
tertiary.text.brand.default
#e00800
tertiary.text.brand.pressed
#bb0700
tertiary.text.brand.disabled
#a8a6b1
tertiary.text.midnight.default
#191329
tertiary.text.midnight.pressed
#bb0700
tertiary.text.midnight.disabled
#a8a6b1
tertiary.text.inverse.default
#ffffff
tertiary.text.inverse.pressed
#bb0700
tertiary.text.inverse.disabled
rgba(255, 255, 255, 0.50)
glass.surface.default
rgba(255, 255, 255, 0.15)
glass.surface.pressed
#ffffff
glass.surface.disabled
rgba(255, 255, 255, 0.10)
glass.text.default
#ffffff
glass.text.pressed
#e00800
glass.text.disabled
rgba(255, 255, 255, 0.60)
link.text.brand.default
#e00800
link.text.brand.pressed
#bb0700
link.text.brand.disabled
#a8a6b1
link.text.midnight.default
#191329
link.text.midnight.pressed
#bb0700
link.text.midnight.disabled
#a8a6b1
link.text.inverse.default
#ffffff
link.text.inverse.pressed
#bb0700
link.text.inverse.disabled
rgba(255, 255, 255, 0.50)
alertMessage · 10
surface.success
#c1f7d0
surface.alert
#ffecab
surface.warning
#ffc28b
surface.info
#e4e3ea
surface.midnight
#140f21
text.success
#164025
text.alert
#55481d
text.warning
#612a05
text.info
#191329
text.infoInverse
#f7f7fa
atomSurfaces · 8
default
#e4e3ea
red
#fcebeb
orange
#fcf3eb
yellow
#fcfceb
green
#ecfce8
blue
#ebf7fc
purple
#ebebfc
violet
#f9ebfc
chips · 39
default.outline.surface.selected
#140f21
default.outline.text.default
#575362
default.outline.text.selected
#ffffff
default.outline.text.disabled
#c0bfc8
default.outline.border.default
rgba(25, 19, 41, 0.50)
default.outline.border.selected
#191329
default.outline.border.disabled
rgba(25, 19, 41, 0.20)
default.filled.surface.default
#ffffff
default.filled.surface.selected
#140f21
default.filled.surface.disabled
rgba(25, 19, 41, 0.07)
default.filled.text.default
#575362
default.filled.text.selected
#ffffff
default.filled.text.disabled
#908e9a
default.filled.border.default
rgba(25, 19, 41, 0.50)
default.filled.border.selected
#191329
default.filled.border.disabled
rgba(25, 19, 41, 0.20)
default.inverse.surface.selected
#ffffff
default.inverse.text.default
rgba(255, 255, 255, 0.75)
default.inverse.text.selected
#575362
default.inverse.text.disabled
rgba(255, 255, 255, 0.50)
default.inverse.border.default
rgba(255, 255, 255, 0.40)
default.inverse.border.selected
#ffffff
default.inverse.border.disabled
rgba(255, 255, 255, 0.40)
default.glass.surface.default
rgba(255, 255, 255, 0.15)
default.glass.surface.selected
#ffffff
default.glass.surface.disabled
rgba(255, 255, 255, 0.10)
default.glass.text.default
#ffffff
default.glass.text.selected
#191329
default.glass.text.disabled
rgba(255, 255, 255, 0.50)
default.glass.border.default
rgba(255, 255, 255, 0.40)
default.glass.border.selected
#ffffff
default.glass.border.disabled
rgba(255, 255, 255, 0.40)
suggestion.surface.default
#ffffff
suggestion.surface.selected
#ffffff
suggestion.surface.disabled
#e4e3ea
suggestion.text.default
#575362
suggestion.text.selected
#191329
suggestion.text.disabled
#908e9a
suggestion.border.selected
rgba(25, 19, 41, 0.50)
dismiss · 2
default
#908e9a
inverse
#c0bfc8
filterPill · 13
surface.inverse.selected
#f0f0f5
text.default.default
#575362
text.default.selected
#191329
text.default.disabled
#908e9a
text.inverse.default
rgba(255, 255, 255, 0.75)
text.inverse.selected
#191329
text.inverse.disabled
rgba(255, 255, 255, 0.50)
border.default.default
rgba(25, 19, 41, 0.50)
border.default.selected
#191329
border.default.disabled
rgba(25, 19, 41, 0.20)
border.inverse.default
rgba(255, 255, 255, 0.80)
border.inverse.selected
#ffffff
border.inverse.disabled
rgba(255, 255, 255, 0.40)
green · 11
50
#f9fefb
100
#edfdf2
200
#dafbe3
300
#c1f7d0
400
#9ff3b7
500
#6ced90
600
#54bc72
700
#3b8b53
800
#27633b
900
#164025
1000
#0e2916
inputField · 17
surface.default.default
#ffffff
surface.default.disabled
#f7f7fa
surface.inverse.default
rgba(255, 255, 255, 0.15)
surface.inverse.disabled
rgba(255, 255, 255, 0.15)
border.default
#d8d7de
border.focus
#e9524d
border.filled
#d8d7de
border.error
#ff9f52
border.disabled
rgba(25, 19, 41, 0.07)
text.default.label.default
#575362
text.default.label.disabled
#c0bfc8
text.default.value.default
#191329
text.default.value.disabled
#c0bfc8
text.inverse.label.default
rgba(255, 255, 255, 0.60)
text.inverse.label.disabled
rgba(255, 255, 255, 0.50)
text.inverse.value.default
#ffffff
text.inverse.value.disabled
rgba(255, 255, 255, 0.50)
mark · 20
default.surface.default
#c0bfc8
default.surface.selected
#e00800
default.surface.disabled
#d8d7de
default.surface.selectedDisabled
#d8d7de
default.icon.default
#ffffff
default.icon.selected
#ffffff
default.icon.disabled
#f0f0f5
default.icon.selectedDisabled
#908e9a
default.border.default
#908e9a
default.border.disabled
#d8d7de
inverse.surface.default
#c0bfc8
inverse.surface.selected
#ffffff
inverse.surface.disabled
rgba(255, 255, 255, 0.40)
inverse.surface.selectedDisabled
rgba(255, 255, 255, 0.40)
inverse.icon.default
#ffffff
inverse.icon.selected
#e00800
inverse.icon.disabled
rgba(255, 255, 255, 0.60)
inverse.icon.selectedDisabled
rgba(255, 255, 255, 0.60)
inverse.border.default
#ffffff
inverse.border.disabled
rgba(255, 255, 255, 0.40)
midnight · 25
50
#f7f7fa
100
#f0f0f5
150
#e4e3ea
200
#d8d7de
300
#c0bfc8
400
#a8a6b1
500
#908e9a
600
#797584
700
#615d6d
750
#575362
800
#494456
900
#312c40
1000
#191329
1100
#140f21
a90
rgba(25, 19, 41, 0.90)
a80
rgba(25, 19, 41, 0.80)
a75
rgba(25, 19, 41, 0.75)
a70
rgba(25, 19, 41, 0.70)
a60
rgba(25, 19, 41, 0.60)
a50
rgba(25, 19, 41, 0.50)
a40
rgba(25, 19, 41, 0.40)
a30
rgba(25, 19, 41, 0.30)
a20
rgba(25, 19, 41, 0.20)
a10
rgba(25, 19, 41, 0.10)
a07
rgba(25, 19, 41, 0.07)
navbarTab · 3
surface.selected
#ffffff
text.default
#ffffff
text.selected
#e00800
orange · 12
50
#fff8f3
100
#ffeedd
200
#ffe0c4
300
#ffd1a8
400
#ffc28b
450
#ffb16f
500
#ff9f52
600
#e07830
700
#b85a1a
800
#8c3f0c
900
#612a05
1000
#3a1602
red · 16
50
#fff2f2
100
#fce6e6
200
#f9cecc
300
#f6b5b3
400
#f39c99
500
#f08480
600
#ed6b66
700
#e9524d
800
#e73933
900
#e3211a
1000
#e00800
1100
#bb0700
1200
#950500
1300
#700400
1400
#4b0300
1500
#2d0200
sectionLink · 24
solid.default.surface.default
#ffffff
solid.default.surface.pressed
#ffffff
solid.default.surface.disabled
#ffffff
solid.default.icon.default
#575362
solid.default.icon.pressed
#e00800
solid.default.icon.disabled
#c0bfc8
solid.inverse.surface.default
#f0f0f5
solid.inverse.surface.pressed
#f0f0f5
solid.inverse.surface.disabled
#f0f0f5
solid.inverse.icon.default
#575362
solid.inverse.icon.pressed
#e00800
solid.inverse.icon.disabled
#c0bfc8
glass.default.surface.default
rgba(255, 255, 255, 0.40)
glass.default.surface.pressed
rgba(255, 255, 255, 0.40)
glass.default.surface.disabled
rgba(255, 255, 255, 0.15)
glass.default.icon.default
#575362
glass.default.icon.pressed
#e00800
glass.default.icon.disabled
#c0bfc8
glass.inverse.surface.default
rgba(255, 255, 255, 0.20)
glass.inverse.surface.pressed
rgba(255, 255, 255, 0.20)
glass.inverse.surface.disabled
rgba(255, 255, 255, 0.15)
glass.inverse.icon.default
rgba(255, 255, 255, 0.75)
glass.inverse.icon.pressed
#ffffff
glass.inverse.icon.disabled
rgba(255, 255, 255, 0.50)
special · 60
mauve.70
#f0e9ed
mauve.100
#e0d2da
mauve.200
#cbb3c1
mauve.300
#b18ea3
mauve.400
#976884
mauve.500
#7d4265
mauve.550
#631c46
mauve.600
#53173a
mauve.700
#42132f
mauve.800
#320e23
mauve.900
#210917
mauve.1000
#14060e
redSand.100
#f6e8e7
redSand.200
#f0d9d7
redSand.300
#e8c6c3
redSand.400
#e0b3ae
redSand.500
#d9a09a
redSand.550
#d18d86
redSand.600
#ae7670
redSand.700
#8b5e59
redSand.800
#694743
redSand.900
#462f2d
redSand.1000
#2a1c1b
teal.70
#eff2f2
teal.100
#d0d7d8
teal.150
#dadfdf
teal.200
#b1bcbd
teal.300
#8b9b9d
teal.400
#64797c
teal.500
#3d585b
teal.550
#16363a
teal.600
#122d30
teal.700
#0f2427
teal.800
#0b1b1d
teal.900
#071213
teal.1000
#040b0c
burgundy.70
#f2e6e9
burgundy.100
#e5ccd3
burgundy.200
#d3aab6
burgundy.300
#be8092
burgundy.400
#a8566d
burgundy.500
#922b49
burgundy.550
#7c0124
burgundy.600
#67011e
burgundy.700
#530118
burgundy.800
#3e0112
burgundy.900
#29000c
burgundy.1000
#190007
pink.1000
#bb2d81
pink.1100
#a92573
gold.200
#f6eed2
gold.400
#f1e3b4
gold.600
#e2c668
gold.800
#b78d3b
gold.1000
#a17a2f
bronze.700
#e8b8a4
bronze.1000
#9f5739
bluePlatinum.300
#c2c1e7
bluePlatinum.1000
#595779
silver.1000
#e8e7ea
status · 9
default
#191329
accent
#e00800
accentPressed
#bb0700
disabled
#c0bfc8
disabledInverse
#f0f0f5
inverse
#ffffff
danger
#b85a1a
warning
#aa913a
positive
#3b8b53
statusIcon · 10
surface.positive
#c1f7d0
surface.danger
#ffd1a8
surface.warning
#ffecab
surface.brand
#f9cecc
surface.neutral
#d8d7de
icon.positive
#27633b
icon.danger
#8c3f0c
icon.warning
#806d2c
icon.brand
#e3211a
icon.neutral
#191329
statusIndicator · 9
text.positive
#3b8b53
text.danger
#b85a1a
text.warning
#aa913a
text.neutral
#191329
surface.positive
#c1f7d0
surface.danger
#ffd1a8
surface.warning
#ffecab
surface.neutral
#e4e3ea
surface.glass
rgba(255, 255, 255, 0.05)
stepper · 4
default.default
#e4e3ea
default.selected
#e73933
inverse.default
rgba(255, 255, 255, 0.40)
inverse.selected
#ffffff
tab · 8
default.surface.default
#ffffff
default.surface.selected
#fce6e6
default.text.default
#908e9a
default.text.selected
#e00800
inverse.surface.default
rgba(255, 255, 255, 0.20)
inverse.surface.selected
#ffffff
inverse.text.default
#ffffff
inverse.text.selected
#e00800
white · 13
1000
#ffffff
a90
rgba(255, 255, 255, 0.90)
a80
rgba(255, 255, 255, 0.80)
a75
rgba(255, 255, 255, 0.75)
a70
rgba(255, 255, 255, 0.70)
a60
rgba(255, 255, 255, 0.60)
a50
rgba(255, 255, 255, 0.50)
a40
rgba(255, 255, 255, 0.40)
a30
rgba(255, 255, 255, 0.30)
a20
rgba(255, 255, 255, 0.20)
a15
rgba(255, 255, 255, 0.15)
a10
rgba(255, 255, 255, 0.10)
a05
rgba(255, 255, 255, 0.05)
yellow · 11
100
#fff7dd
200
#fff2c7
300
#ffecab
400
#ffe68f
500
#ffdf73
550
#ffd957
600
#d5b549
700
#aa913a
800
#806d2c
900
#55481d
1000
#332b11