Gazelle Design System — Foundations

Color

Semantic roles first — reach for these in product code. The primitives below are the raw palette the roles alias; use them directly only for brand or campaign work.

Semantic roles

Foreground · text & icons

fg-primary

--color-neutral-grey-950

fg-brand

--color-brand-blue-gazelle-900

fg-muted

--color-neutral-grey-700

fg-inverse

--color-neutral-grey-50

fg-link

--color-brand-blue-gazelle-600

Surface · backgrounds

surface-page

--color-neutral-grey-50

surface-oyster

--color-oyster-500

surface-card

--color-neutral-grey-50

surface-brand

--color-brand-blue-gazelle-900

surface-muted

--color-neutral-grey-100

Border & focus

border-subtle

--color-neutral-grey-200

border-default

--color-neutral-grey-950

focus-ring

--color-brand-blue-gazelle-600

Primitives

Brand · gazelle blue (full 50–950 scale)

#F2F7FD

100

#DEEAFA

200

#BED8F8

300

#8CBCF6

400

#559CF4

500

#2883F4

600

#0A6EEA

700

#0861CF

800

#054CA4

900

#033A7E

950

#011B3B

Neutral (full 50–950 grey scale)

#FFFFFF

100

#F2F2F2

200 (border)

#E0E0E0

300

#C6C6C6

400

#ADADAD

500

#939393

600

#7A7A7A

700

#606060

800

#454545

900

#2A2A2A

950

#1C1C1C

Functional · green (full 50–950 scale)

#EAF7EC

100

#E1F4E3

200

#C2EDC9

300

#A0E8B1

400

#7BE79B

500

#53E989

600

#28ED7B

700

#09E574

800

#00C86E

900

#009B55

950

#008449

Functional · red (full 50–950 scale)

#FCE8E4

100

#FBDFDA

200

#FACDC5

300

#F9BBB0

400

#F9A89A

500

#FA9583

600

#FB826C

700

#FD6E54

800

#FF5A3C

900

#C33C28

950

#A02A1C

Oyster · signature soft-mint neutrals (full 50–950 scale)

#FCFDFB

100

#FAFDFA

200

#F7FBF7

300

#F4FAF4

400

#F1F8F2

500

#EEF7EF

600

#EAF6EB

700

#E6F5E7

800

#E1F4E3

900

#DCF3DF

950

#DAF3DC

Theme accents · light blue (full 50–950 scale)

#E0F8FA

100

#D9F6F9

200

#C9F2F7

300

#B8EEF5

400

#A8EAF2

500

#96E6F0

600

#84E1ED

700

#72DDEA

800

#5ED8E8

900

#4BD3E5

950

#40D1E3

Theme accents · light green (full 50–950 scale)

#F9FFF7

100

#F2FFED

200

#E1FED7

300

#D0FEC0

400

#BEFDA7

500

#AAFE8C

600

#96FC72

700

#81FC56

800

#6AFD35

900

#53FA18

950

#47FA07

Theme accents · pink (full 50–950 scale)

#FDFAFD

100

#FCF4FB

200

#FCEDFA

300

#FAE0F6

400

#F8CEF1

500

#F5BEEB

600

#F4B5E8

700

#F2ADE5

800

#F1A7E3

900

#EA71D2

950

#CE1CA8

Theme accents · yellow (full 50–950 scale)

#FFF7BE

100

#FFF7B9

200

#FFF5AD

300

#FFF4A0

400

#FFF292

500

#FFF082

600

#FFEE70

700

#FFEC5D

800

#FFEA47

900

#FFE62F

950

#FFE521

Theme accents · sand (full 50–950 scale)

#EDEDE1

100

#EAEAD7

200

#E5E5C8

300

#DFDFBE

400

#D8D8AE

500

#D2D2A0

600

#CFCF9A

700

#CDCD94

800

#CBCB90

900

#B9B964

950

#7A7A32

Theme accents · caramel (full 50–950 scale)

#FDFCFC

100

#F6F5F3

200

#E5E2DC

300

#D7D3C9

400

#C3BDAF

500

#B6AF9D

600

#B0A996

700

#ACA48F

800

#A8A08A

900

#948A6C

950

#5E5846

Black & white (continuous opacity — not a stepped scale)

black/0black/25black/50black/75black/100

white/0white/25white/50white/75white/100

Black and white take any opacity, not a fixed set of stops — Tailwind v4 generates /0–/100 on the fly via color-mix(), e.g. bg-black/50 or rgb(0 0 0 / 50%) directly in CSS.

Token reference

Naming is mechanical for colour: the Figma variable is the CSS variable minus the --color- prefix, with / for the first - — --color-surface-oyster ↔ surface/oyster. Semantic roles live in Figma's Color collection, primitives in Primitives.

All 152 `--color-*` tokens. Legacy column lists the back-compat alias kept for older markup.
CSS variable	Value	Tailwind	Figma	Legacy alias
Semantic — foreground
`--color-fg-primary`	#1C1C1C	`text-fg-primary`	`fg/primary`	— removed
`--color-fg-brand`	#033A7E	`text-fg-brand`	`fg/brand`	— removed
`--color-fg-muted`	#606060	`text-fg-muted`	`fg/muted`	— removed
`--color-fg-inverse`	#FFFFFF	`text-fg-inverse`	`fg/inverse`	— removed
`--color-fg-link`	#0A6EEA	`text-fg-link`	`fg/link`	— removed
Semantic — surface
`--color-surface-page`	#FFFFFF	`bg-surface-page`	`surface/page`	`--surface-page`
`--color-surface-oyster`	#EEF7EF	`bg-surface-oyster`	`surface/oyster`	`--surface-oyster`
`--color-surface-card`	#FFFFFF	`bg-surface-card`	`surface/card`	`--surface-card`
`--color-surface-brand`	#033A7E	`bg-surface-brand`	`surface/brand`	`--surface-brand`
`--color-surface-muted`	#F2F2F2	`bg-surface-muted`	`surface/muted`	`--surface-muted`
Semantic — border & focus
`--color-border-subtle`	#E0E0E0	`border-border-subtle`	`border/subtle`	`--border-subtle`
`--color-border-default`	#1C1C1C	`border-border-default`	`border/default`	`--border-default`
`--color-focus-ring`	#0A6EEA	`ring-focus-ring`	`focus-ring`	`--focus-ring`
Primitive — brand
`--color-brand-blue-gazelle`	#033A7E	`bg-brand-blue-gazelle`	`brand/blue-gazelle`	`--gz-blue`
Primitive — brand gazelle blue (full 50–950 scale; 900 aliases the primary above)
`--color-brand-blue-gazelle-50`	#F2F7FD	`bg-brand-blue-gazelle-50`	— not in Figma yet	`--gz-info-100`
`--color-brand-blue-gazelle-100`	#DEEAFA	`bg-brand-blue-gazelle-100`	— not in Figma yet	—
`--color-brand-blue-gazelle-200`	#BED8F8	`bg-brand-blue-gazelle-200`	— not in Figma yet	—
`--color-brand-blue-gazelle-300`	#8CBCF6	`bg-brand-blue-gazelle-300`	— not in Figma yet	—
`--color-brand-blue-gazelle-400`	#559CF4	`bg-brand-blue-gazelle-400`	— not in Figma yet	—
`--color-brand-blue-gazelle-500`	#2883F4	`bg-brand-blue-gazelle-500`	— not in Figma yet	—
`--color-brand-blue-gazelle-600`	#0A6EEA	`bg-brand-blue-gazelle-600`	— not in Figma yet	`--gz-info`
`--color-brand-blue-gazelle-700`	#0861CF	`bg-brand-blue-gazelle-700`	— not in Figma yet	—
`--color-brand-blue-gazelle-800`	#054CA4	`bg-brand-blue-gazelle-800`	— not in Figma yet	—
`--color-brand-blue-gazelle-900`	#033A7E	`bg-brand-blue-gazelle-900`	= `brand-blue-gazelle`	—
`--color-brand-blue-gazelle-950`	#011B3B	`bg-brand-blue-gazelle-950`	— not in Figma yet	—
Primitive — neutral
`--color-neutral-ink`	#1C1C1C	`bg-neutral-ink`	`neutral/ink`	`--gz-black`
`--color-neutral-white`	#FFFFFF	`bg-neutral-white`	`neutral/white`	`--gz-white`
`--color-neutral-border`	#E0E0E0	`bg-neutral-border`	`neutral/border`	= `grey-200`
Primitive — neutral grey (full 50–950 scale; 50/200/950 alias white/border/ink above)
`--color-neutral-grey-50`	#FFFFFF	`bg-neutral-grey-50`	— not in Figma yet	—
`--color-neutral-grey-100`	#F2F2F2	`bg-neutral-grey-100`	`neutral/grey-100`	`--gz-grey-100`
`--color-neutral-grey-200`	#E0E0E0	`bg-neutral-grey-200`	`neutral/border`	—
`--color-neutral-grey-300`	#C6C6C6	`bg-neutral-grey-300`	— not in Figma yet	—
`--color-neutral-grey-400`	#ADADAD	`bg-neutral-grey-400`	— not in Figma yet	—
`--color-neutral-grey-500`	#939393	`bg-neutral-grey-500`	— not in Figma yet	—
`--color-neutral-grey-600`	#7A7A7A	`bg-neutral-grey-600`	— not in Figma yet	—
`--color-neutral-grey-700`	#606060	`bg-neutral-grey-700`	`neutral/grey-700`	`--gz-grey-700`
`--color-neutral-grey-800`	#454545	`bg-neutral-grey-800`	— not in Figma yet	—
`--color-neutral-grey-900`	#2A2A2A	`bg-neutral-grey-900`	— not in Figma yet	—
`--color-neutral-grey-950`	#1C1C1C	`bg-neutral-grey-950`	— not in Figma yet	—
Primitive — functional green (full 50–950 scale)
`--color-functional-green-50`	#EAF7EC	`bg-functional-green-50`	— not in Figma yet	—
`--color-functional-green-100`	#E1F4E3	`bg-functional-green-100`	`functional/green-200`	`--gz-green-100`
`--color-functional-green-200`	#C2EDC9	`bg-functional-green-200`	— not in Figma yet	—
`--color-functional-green-300`	#A0E8B1	`bg-functional-green-300`	— not in Figma yet	—
`--color-functional-green-400`	#7BE79B	`bg-functional-green-400`	— not in Figma yet	—
`--color-functional-green-500`	#53E989	`bg-functional-green-500`	— not in Figma yet	—
`--color-functional-green-600`	#28ED7B	`bg-functional-green-600`	— not in Figma yet	—
`--color-functional-green-700`	#09E574	`bg-functional-green-700`	— not in Figma yet	—
`--color-functional-green-800`	#00C86E	`bg-functional-green-800`	`functional/green-500`	`--gz-green`
`--color-functional-green-900`	#009B55	`bg-functional-green-900`	— not in Figma yet	—
`--color-functional-green-950`	#008449	`bg-functional-green-950`	— not in Figma yet	—
Primitive — functional red (full 50–950 scale)
`--color-functional-red-50`	#FCE8E4	`bg-functional-red-50`	— not in Figma yet	—
`--color-functional-red-100`	#FBDFDA	`bg-functional-red-100`	`functional/red-200`	`--gz-red-100`
`--color-functional-red-200`	#FACDC5	`bg-functional-red-200`	— not in Figma yet	—
`--color-functional-red-300`	#F9BBB0	`bg-functional-red-300`	— not in Figma yet	—
`--color-functional-red-400`	#F9A89A	`bg-functional-red-400`	— not in Figma yet	—
`--color-functional-red-500`	#FA9583	`bg-functional-red-500`	— not in Figma yet	—
`--color-functional-red-600`	#FB826C	`bg-functional-red-600`	— not in Figma yet	—
`--color-functional-red-700`	#FD6E54	`bg-functional-red-700`	— not in Figma yet	—
`--color-functional-red-800`	#FF5A3C	`bg-functional-red-800`	`functional/red-500`	`--gz-red`
`--color-functional-red-900`	#C33C28	`bg-functional-red-900`	— not in Figma yet	—
`--color-functional-red-950`	#A02A1C	`bg-functional-red-950`	— not in Figma yet	—
Primitive — oyster (full 50–950 scale)
`--color-oyster-50`	#FCFDFB	`bg-oyster-50`	— not in Figma yet	—
`--color-oyster-100`	#FAFDFA	`bg-oyster-100`	— not in Figma yet	—
`--color-oyster-200`	#F7FBF7	`bg-oyster-200`	`oyster/200`	`--gz-oyster-200`
`--color-oyster-300`	#F4FAF4	`bg-oyster-300`	— not in Figma yet	—
`--color-oyster-400`	#F1F8F2	`bg-oyster-400`	— not in Figma yet	—
`--color-oyster-500`	#EEF7EF	`bg-oyster-500`	`oyster/white`	`--color-oyster-white`
`--color-oyster-600`	#EAF6EB	`bg-oyster-600`	— not in Figma yet	—
`--color-oyster-700`	#E6F5E7	`bg-oyster-700`	— not in Figma yet	—
`--color-oyster-800`	#E1F4E3	`bg-oyster-800`	`oyster/800`	`--gz-oyster-800`
`--color-oyster-900`	#DCF3DF	`bg-oyster-900`	— not in Figma yet	—
`--color-oyster-950`	#DAF3DC	`bg-oyster-950`	— not in Figma yet	—
Primitive — theme accents
`--color-theme-light-blue-50`	#E0F8FA	`bg-theme-light-blue-50`	— not in Figma yet	—
`--color-theme-light-blue-100`	#D9F6F9	`bg-theme-light-blue-100`	— not in Figma yet	—
`--color-theme-light-blue-200`	#C9F2F7	`bg-theme-light-blue-200`	`theme/light-blue-200`	—
`--color-theme-light-blue-300`	#B8EEF5	`bg-theme-light-blue-300`	— not in Figma yet	—
`--color-theme-light-blue-400`	#A8EAF2	`bg-theme-light-blue-400`	— not in Figma yet	—
`--color-theme-light-blue-500`	#96E6F0	`bg-theme-light-blue-500`	`theme/light-blue-500`	`--gz-light-blue`
`--color-theme-light-blue-600`	#84E1ED	`bg-theme-light-blue-600`	— not in Figma yet	—
`--color-theme-light-blue-700`	#72DDEA	`bg-theme-light-blue-700`	— not in Figma yet	—
`--color-theme-light-blue-800`	#5ED8E8	`bg-theme-light-blue-800`	`theme/light-blue-800`	—
`--color-theme-light-blue-900`	#4BD3E5	`bg-theme-light-blue-900`	— not in Figma yet	—
`--color-theme-light-blue-950`	#40D1E3	`bg-theme-light-blue-950`	— not in Figma yet	—
`--color-theme-light-green-50`	#F9FFF7	`bg-theme-light-green-50`	— not in Figma yet	—
`--color-theme-light-green-100`	#F2FFED	`bg-theme-light-green-100`	— not in Figma yet	—
`--color-theme-light-green-200`	#E1FED7	`bg-theme-light-green-200`	`theme/light-green-200`	—
`--color-theme-light-green-300`	#D0FEC0	`bg-theme-light-green-300`	— not in Figma yet	—
`--color-theme-light-green-400`	#BEFDA7	`bg-theme-light-green-400`	— not in Figma yet	—
`--color-theme-light-green-500`	#AAFE8C	`bg-theme-light-green-500`	`theme/light-green-500`	`--gz-light-green`
`--color-theme-light-green-600`	#96FC72	`bg-theme-light-green-600`	— not in Figma yet	—
`--color-theme-light-green-700`	#81FC56	`bg-theme-light-green-700`	— not in Figma yet	—
`--color-theme-light-green-800`	#6AFD35	`bg-theme-light-green-800`	`theme/light-green-800`	—
`--color-theme-light-green-900`	#53FA18	`bg-theme-light-green-900`	— not in Figma yet	—
`--color-theme-light-green-950`	#47FA07	`bg-theme-light-green-950`	— not in Figma yet	—
`--color-theme-pink-50`	#FDFAFD	`bg-theme-pink-50`	— not in Figma yet	—
`--color-theme-pink-100`	#FCF4FB	`bg-theme-pink-100`	— not in Figma yet	—
`--color-theme-pink-200`	#FCEDFA	`bg-theme-pink-200`	`theme/pink-200`	—
`--color-theme-pink-300`	#FAE0F6	`bg-theme-pink-300`	— not in Figma yet	—
`--color-theme-pink-400`	#F8CEF1	`bg-theme-pink-400`	— not in Figma yet	—
`--color-theme-pink-500`	#F5BEEB	`bg-theme-pink-500`	`theme/pink-500`	`--gz-pink`
`--color-theme-pink-600`	#F4B5E8	`bg-theme-pink-600`	— not in Figma yet	—
`--color-theme-pink-700`	#F2ADE5	`bg-theme-pink-700`	— not in Figma yet	—
`--color-theme-pink-800`	#F1A7E3	`bg-theme-pink-800`	`theme/pink-800`	—
`--color-theme-pink-900`	#EA71D2	`bg-theme-pink-900`	— not in Figma yet	—
`--color-theme-pink-950`	#CE1CA8	`bg-theme-pink-950`	— not in Figma yet	—
`--color-theme-yellow-50`	#FFF7BE	`bg-theme-yellow-50`	— not in Figma yet	—
`--color-theme-yellow-100`	#FFF7B9	`bg-theme-yellow-100`	— not in Figma yet	—
`--color-theme-yellow-200`	#FFF5AD	`bg-theme-yellow-200`	`theme/yellow-200`	—
`--color-theme-yellow-300`	#FFF4A0	`bg-theme-yellow-300`	— not in Figma yet	—
`--color-theme-yellow-400`	#FFF292	`bg-theme-yellow-400`	— not in Figma yet	—
`--color-theme-yellow-500`	#FFF082	`bg-theme-yellow-500`	`theme/yellow-500`	`--gz-yellow`
`--color-theme-yellow-600`	#FFEE70	`bg-theme-yellow-600`	— not in Figma yet	—
`--color-theme-yellow-700`	#FFEC5D	`bg-theme-yellow-700`	— not in Figma yet	—
`--color-theme-yellow-800`	#FFEA47	`bg-theme-yellow-800`	`theme/yellow-800`	—
`--color-theme-yellow-900`	#FFE62F	`bg-theme-yellow-900`	— not in Figma yet	—
`--color-theme-yellow-950`	#FFE521	`bg-theme-yellow-950`	— not in Figma yet	—
`--color-theme-sand-50`	#EDEDE1	`bg-theme-sand-50`	— not in Figma yet	—
`--color-theme-sand-100`	#EAEAD7	`bg-theme-sand-100`	`theme/sand-100`	—
`--color-theme-sand-200`	#E5E5C8	`bg-theme-sand-200`	`theme/sand-200`	—
`--color-theme-sand-300`	#DFDFBE	`bg-theme-sand-300`	— not in Figma yet	—
`--color-theme-sand-400`	#D8D8AE	`bg-theme-sand-400`	— not in Figma yet	—
`--color-theme-sand-500`	#D2D2A0	`bg-theme-sand-500`	`theme/sand-500`	`--gz-sand`
`--color-theme-sand-600`	#CFCF9A	`bg-theme-sand-600`	— not in Figma yet	—
`--color-theme-sand-700`	#CDCD94	`bg-theme-sand-700`	— not in Figma yet	—
`--color-theme-sand-800`	#CBCB90	`bg-theme-sand-800`	`theme/sand-800`	—
`--color-theme-sand-900`	#B9B964	`bg-theme-sand-900`	— not in Figma yet	—
`--color-theme-sand-950`	#7A7A32	`bg-theme-sand-950`	— not in Figma yet	—
`--color-theme-caramel-50`	#FDFCFC	`bg-theme-caramel-50`	— not in Figma yet	—
`--color-theme-caramel-100`	#F6F5F3	`bg-theme-caramel-100`	`theme/caramel-100`	—
`--color-theme-caramel-200`	#E5E2DC	`bg-theme-caramel-200`	`theme/caramel-200`	—
`--color-theme-caramel-300`	#D7D3C9	`bg-theme-caramel-300`	— not in Figma yet	—
`--color-theme-caramel-400`	#C3BDAF	`bg-theme-caramel-400`	— not in Figma yet	—
`--color-theme-caramel-500`	#B6AF9D	`bg-theme-caramel-500`	`theme/caramel-500`	`--gz-caramel`
`--color-theme-caramel-600`	#B0A996	`bg-theme-caramel-600`	— not in Figma yet	—
`--color-theme-caramel-700`	#ACA48F	`bg-theme-caramel-700`	— not in Figma yet	—
`--color-theme-caramel-800`	#A8A08A	`bg-theme-caramel-800`	`theme/caramel-800`	—
`--color-theme-caramel-900`	#948A6C	`bg-theme-caramel-900`	— not in Figma yet	—
`--color-theme-caramel-950`	#5E5846	`bg-theme-caramel-950`	— not in Figma yet	—
Primitive — black & white (continuous /0–100 opacity, not stepped)
`--color-black`	#000000	`bg-black/<0–100>`	— not in Figma	—
`--color-white`	#FFFFFF	`bg-white/<0–100>`	— not in Figma	—