Design Tokens - Etihad Design System

Colors

CSS Custom Properties

All color tokens are defined as CSS custom properties on :root and scoped to [data-theme="light"]. Use var(--ey-color-*) to reference them.

Source: src/core/settings/_colors.scss

Neutral

--ey-color-neutral-50

#F9FAFB

--ey-color-neutral-75

#EFF1F3

--ey-color-neutral-100

#E5E7EB

--ey-color-neutral-200

#D1D5DB

--ey-color-neutral-300

#C4C8CF

--ey-color-neutral-400

#9CA3AF

--ey-color-neutral-500

#6B7280

--ey-color-neutral-600

#4B5563

--ey-color-neutral-700

#374151

--ey-color-neutral-800

#1F2937

--ey-color-neutral-900

#111827

Gold

--ey-color-gold-50

#FEF9EE

--ey-color-gold-100

#EDE2D0

--ey-color-gold-200

#DEC39B

--ey-color-gold-300

#C8AA7F

--ey-color-gold-400

#B8935A

--ey-color-gold-500

#B08747

--ey-color-gold-600

#996F2A

--ey-color-gold-700

#826332

--ey-color-gold-800

#6C5128

--ey-color-gold-900

#56411F

Dark Blue

--ey-color-dark-blue-50

#E8EFF2

--ey-color-dark-blue-100

#CDDCE4

--ey-color-dark-blue-200

#9CB9C9

--ey-color-dark-blue-300

#6A95AE

--ey-color-dark-blue-400

#456577

--ey-color-dark-blue-500

#2E4755

--ey-color-dark-blue-600

#263A46

--ey-color-dark-blue-700

#1B2932

--ey-color-dark-blue-800

#121C21

--ey-color-dark-blue-900

#090E11

Desert Sunrise

--ey-color-desert-sunrise-50

#FFFBF5

--ey-color-desert-sunrise-100

#FFE7C6

--ey-color-desert-sunrise-200

#FFD69F

--ey-color-desert-sunrise-300

#FFC575

--ey-color-desert-sunrise-400

#FFB33F

--ey-color-desert-sunrise-500

#FEAA00

Liwa Orange

--ey-color-liwa-orange-50

#FFF7F5

--ey-color-liwa-orange-100

#FFD1C5

--ey-color-liwa-orange-200

#FFB29E

--ey-color-liwa-orange-300

#FA9278

--ey-color-liwa-orange-400

#F4704F

--ey-color-liwa-orange-500

#F05D38

Saadiyat Blue

--ey-color-saadiyat-blue-50

#F4FAFB

--ey-color-saadiyat-blue-100

#C4E3E8

--ey-color-saadiyat-blue-200

#9BD0D8

--ey-color-saadiyat-blue-300

#70BDC9

--ey-color-saadiyat-blue-400

#3BAABA

--ey-color-saadiyat-blue-500

#00A1B2

Mangrove Green

--ey-color-mangrove-green-50

#E6EDEA

--ey-color-mangrove-green-100

#B3C3BC

--ey-color-mangrove-green-200

#839E93

--ey-color-mangrove-green-300

#54796A

--ey-color-mangrove-green-400

#235741

--ey-color-mangrove-green-600

#003C23

Success

--ey-color-success-50

#C7FADA

--ey-color-success-300

#1FEA6A

--ey-color-success-500

#0C8839

--ey-color-success-700

#074B20

Destructive

--ey-color-destructive-50

#FDE7E7

--ey-color-destructive-300

#F46C6C

--ey-color-destructive-500

#E51111

--ey-color-destructive-700

#8A0A0A

Warning

--ey-color-warning-50

#FEF4EB

--ey-color-warning-300

#F9BB80

--ey-color-warning-500

#E6740A

--ey-color-warning-700

#A65407

Link Blue

--ey-color-link-blue-300

#29B0FF

--ey-color-link-blue-400

#008EE0

--ey-color-link-blue-500

#005F96

--ey-color-link-blue-700

#003A5C

Loyalty

--ey-color-loyalty-bronze

#EDE2D0

--ey-color-loyalty-silver

#CECECE

--ey-color-loyalty-gold

#996F2A

--ey-color-loyalty-platinum

#636363

--ey-color-loyalty-diamond

#235741

--ey-color-loyalty-exclusive

#000000

Spacing

SCSS Variables

A consistent spatial scale used across all components for padding, margin, and gap. Naming follows the convention $var-space-{value} where the suffix is 10× the pixel value.

Source: src/core/settings/_variables.scss

Token	Value	Preview
$var-space-00	0
$var-space-20	2px
$var-space-40	4px
$var-space-60	6px
$var-space-80	8px
$var-space-100	10px
$var-space-120	12px
$var-space-160	16px
$var-space-200	20px
$var-space-240	24px
$var-space-320	32px
$var-space-400	40px
$var-space-480	48px
$var-space-640	64px
$var-space-800	80px
$var-space-960	96px

Typography

SCSS Variables

Type scale tokens for headings and body text. The font family is EtihadAltis with five weights: Light, Book, Text, Medium, and Bold.

Source: src/core/settings/_variables.scss

Font Weight	SCSS Variable	Value
Light	$var-font-light	"Light"
Book	$var-font-book	"Book"
Text	$var-font-text	"Text"
Medium	$var-font-medium	"Medium"
Bold	$var-font-bold	"Bold"

Heading	Desktop Size / Line-height	Mobile Size / Line-height
H1	60px / 80px	32px / 48px
H2	48px / 64px	28px / 40px
H3	40px / 48px	24px / 32px
H4	32px / 40px	22px / 32px
H5	24px / 32px	20px / 24px
H6	20px / 24px	18px / 24px

Body Style	Size	Line-height
Body Large	18px	24px
Body Medium	16px	24px
Body Small	14px	20px
Body XS	12px	16px
Body XXS	10px	13px

Breakpoints

SCSS Variables

Responsive breakpoints that define the grid system's adaptive layout. Use the corresponding media query variables for consistency.

Source: src/core/settings/_variables.scss

Token	Value	Description
$var-xs-small	360px	XS-Small max width
$var-xs-max	576px	XS max width
$var-sm-max	992px	SM max width
$var-md-max	1200px	MD max width
$var-lg-max	1400px	LG max width

Media Query Variable	Range
$breakpoint-xs-only	max-width: 576px
$breakpoint-sm-up	min-width: 577px
$breakpoint-sm-only	577px → 992px
$breakpoint-md-up	min-width: 993px
$breakpoint-md-only	993px → 1200px
$breakpoint-lg-up	min-width: 1201px
$breakpoint-lg-only	1201px → 1400px
$breakpoint-xl-up	min-width: 1401px

Container Margins	Value
$var-container-xs-margin	16px
$var-container-sm-margin	24px
$var-container-md-margin	32px
$var-container-lg-margin	64px

Borders & Radius

SCSS Variables

Border width and radius tokens used for cards, buttons, inputs, modals, and other interactive surfaces.

Source: src/core/settings/_variables.scss

Token	Value
$var-border-width-0	0
$var-border-width-10	1px
$var-border-width-20	2px
$var-border-width-30	3px

Token	Value	Preview
$var-border-radius-00	0
$var-border-radius-40	4px
$var-border-radius-80	8px
$var-border-radius-120	12px
$var-border-radius-160	16px
$var-border-radius-200	20px
$var-border-radius-240	24px
$var-border-radius-full	50%

Shadows

SCSS Variables

Elevation tokens used to create depth and visual hierarchy. Applied to cards, modals, dropdowns, and sticky elements.

Source: src/core/settings/_variables.scss

Token	Value	Preview
$var-shadow	0 0 8px rgba(0,0,0,0.12)
$var-shadow-raised	0 6px 24px 0 rgba(0,0,0,0.08)
$var-shadow-overlay	0 0 1px rgba(0,0,0,0.31)
$var-shadow-overlay-1	0 16px 20px 0 rgba(0,0,0,0.32)
$var-shadow-overlay-sticky	0 10px 8px -10px rgba(0,0,0,0.08)

Sizing

SCSS Variables

Component sizing tokens, animation timing, and other miscellaneous design values used across the system.

Source: src/core/settings/_variables.scss

Token	Value	Usage
$ey-grid-columns-default	12	Grid columns
$ey-grid-gutter	8px	Grid gutter width
$var-btn-height-normal	40px	Default button height
$var-btn-height-large	48px	Large button height
$var-input-field-height	40px	Input field height
$var-container-lg-width	1280px	Large container width
$var-container-md-width	850px	Medium container width

Token	Value	Usage
$var-modal-width-default	960px	Default modal
$var-modal-width-large	1076px	Large modal
$var-modal-width-medium	650px	Medium modal
$var-modal-width-small	450px	Small modal
$var-animation-fade-time	1s	Fade animation duration
$var-modal-blur	6px	Modal backdrop blur

Aspect Ratio	Value
1-1	1 : 1
4-3	4 : 3
16-9	16 : 9
5-2	5 : 2
3-4	3 : 4
2-3	2 : 3

🎨 Design Tokens

Colors

Spacing

Typography

Breakpoints

Borders & Radius

Shadows

Sizing