Etihad — Design Tokens

Colour

Palette & semantic colour

A restrained "Beyond Borders" palette: deep slate surfaces, soft antique gold accents, warm paper and a small, purposeful set of semantic colours for confirmation, caution and alerts.

Surfaces · light

#FCFBF5

Page surface

--paper

Default page & app background

#F2ECDD

Raised band

--cream

Alternating sections, soft cards

#DDD2BB

Muted fill

--sand-2

Secondary & disabled fills

Ink · dark

#1F282B

Primary ink

--ink

Text on light; premium dark panels

#2B353A

Dark surface 2

--ink-2

Layered dark panels

#37434A

Dark surface 3

--ink-3

Tertiary dark / hover

Bronze & gold · brand accents

#D8BE8E

Gold accent

--gold

Accents on dark, the spark, highlights

#C7A977

Bronze

--bronze

Hairlines, chips, accents

#A9874F

Deep bronze

--bronze-deep

Large text & icons only — AA-Large

#74592A

Bronze text

--bronze-text

AA-safe bronze for small text on light

Text neutrals

#6A6253

Body secondary

--taupe

Secondary / body text on light

#A89E8C

Muted on dark

--taupe-2

Footer & caption text on dark

Semantic · success

#6E9C77

Success

--success

Confirmed states, ticks

#E9F1EA

Success surface

--success-bg

Confirmation cards

#3C6B47

Success text

--success-text

Text on success surface

Semantic · caution

#C98A3A

Caution

--amber

Tight-time & edge-case marks

#FBEFDD

Caution surface

--amber-bg

Warning cards (tight pickup time)

#8A4F12

Caution text

--amber-text

Text on caution surface

Semantic · alert

#F6E6E1

Alert surface

--rose-bg

Errors / blocking notices

#9A3B2A

Alert text

--rose-text

Text on alert surface

Lines

rgba(199,169,119,.30)

Gold hairline

--line

Dividers, panel borders on dark

rgba(31,40,43,.12)

Soft hairline

--line-soft

Card borders on light

Type

Typography

Figtree carries display and body — light weights for elegance, bold for emphasis. IBM Plex Mono is the utility face for eyebrows, steps, prices and codes. Two faces, clear roles.

Beyond borders

DisplayFigtree · 300 · clamp(2rem,5vw,3rem)Hero headlines · weight 300 with a gold emphasis word

From research to screens

H1 / sectionFigtree · 300 · clamp(1.6rem,3.4vw,2.3rem)Section titles · light weight, tight tracking

Always know the flight

H2Figtree · 700 · 1.05remCard & sub headings

The AI proposes, the traveller decides.

LeadFigtree · 400 · 1.02remIntro paragraphs · taupe

Calm is the feature — lead with status and human touches.

BodyFigtree · 400 · .95remDefault reading text

Fares are indicative and may change until you book.

SmallFigtree · 400 · .8remCaptions & secondary notes

FEATURE 01 · CHAUFFEUR

Eyebrow / labelIBM Plex Mono · 600 · .68remUppercase, letter-spaced labels & steps

AUH → CDG · $612

Data / codeIBM Plex Mono · 500 · .82remReferences, codes, prices

Signature

The marks that make it ours

Spend boldness in one place: the gold spark, the gold hairline and the masked grid are the recurring signatures across the system.

AI spark

Marks every AI-powered moment.

path: M12 4l1.8 6.2L20 12…

Spark gradient

Gold→bronze, 135°.

--spark: linear-gradient(135deg,#D8BE8E,#C7A977)

Gold hairline

Dividers & panel edges.

--line: rgba(199,169,119,.30)

Masked grid

Ambient texture on dark headers.

58px grid · radial mask

Shape

Radius

Soft, consistent corners scale with the element — small for controls, generous for sheets and the phone glass.

7pxcontrols, chips

11pxbuttons

14pxcards

16pxflow cards

20pxsheets

27pxphone glass

100pxpills, avatars

Elevation

Shadows

Long, low-opacity shadows with negative spread — present but never heavy, in keeping with a premium, calm surface.

Card0 12px 28px -24px rgba(31,40,43,.5)

Sheet0 -16px 30px -16px rgba(0,0,0,.3)

Phone0 26px 54px -30px rgba(31,40,43,.55)

FAB0 8px 16px -6px rgba(31,40,43,.6)

Rhythm

Spacing & motion

A small spacing scale keeps vertical rhythm consistent inside cards and stacks. Motion is gentle and always respects prefers-reduced-motion.

5pxtight stacks

7pxchips, rows

9pxcard content

11pxsections within a card

Motion: transitions ~150–260ms ease; live elements (ETA, tracking) update calmly. Reduced-motion users get instant state changes — no animation.

Accessibility

Contrast pairings

Every text/background pairing used in the system, measured against WCAG 2.1. Small text targets AA (4.5:1); large text/icons may use AA-Large (3:1).

Foreground	Background	Ratio	Level
`--ink`	`--paper`	14.5:1	AA
`--taupe`	`--paper`	5.81:1	AA
`--taupe`	`--cream`	5.11:1	AA
`--bronze-text`	`--paper`	6.32:1	AA
`--bronze-text`	`--cream`	5.56:1	AA
`--bronze-deep`	`--paper`	3.23:1	AA-Large
`--success-text`	`--success-bg`	5.39:1	AA
`--amber-text`	`--amber-bg`	5.76:1	AA
`--rose-text`	`--rose-bg`	5.71:1	AA
`--gold`	`--ink`	8.36:1	AA
`--bronze`	`--ink`	6.71:1	AA
`--paper`	`--ink`	14.5:1	AA

Rule: --bronze-deep passes only for large text & icons. For small text on light surfaces, always use --bronze-text (#74592A).

Appearance

Light & dark

Both prototypes follow the system setting, with an Auto / Light / Dark control for presenting. Surfaces, text and semantic colours are tokens that change per appearance; the brand slate panels, gold accents and the spark stay the same in both. One deliberate rule: primary dark buttons invert to cream in dark mode so they stay the most prominent thing on screen.

#12181B

Page (dark)

--paper

Screen background

#1B2428

Card (dark)

--surface

Cards, fields, sheets

#243036

Raised (dark)

--cream

Chips, soft fills

#F2ECDD

Text (dark)

--text

Body text; inverted button fill

Foreground	Background	Ratio	Level
`--text` #F2ECDD	`--paper` #12181B	15.2:1	AA
`--text` #F2ECDD	`--surface` #1B2428	13.4:1	AA
`--taupe` #B7AE9C	`--paper` #12181B	8.15:1	AA
`--taupe` #B7AE9C	`--surface` #1B2428	7.18:1	AA
`--bronze-text` #D8BE8E	`--paper` #12181B	9.96:1	AA
`--bronze-text` #D8BE8E	`--surface` #1B2428	8.78:1	AA
`--success-text` #8FCB9B	`--success-bg` #1E3326	7.18:1	AA
`--amber-text` #F0B968	`--amber-bg` #3A2E1A	7.47:1	AA
`--rose-text` #F0A08C	`--rose-bg` #3A2320	7.02:1	AA
`ink` #1F282B	`--on-dark` #F2ECDD	12.76:1	AA

Implementation

Copy the tokens

Drop this :root block into any stylesheet to inherit the full system.

:root{
  /* ink + surfaces */
  --ink:#1F282B; --ink-2:#2B353A; --ink-3:#37434A;
  --paper:#FCFBF5; --cream:#F2ECDD; --sand-2:#DDD2BB;
  /* bronze + gold */
  --gold:#D8BE8E; --bronze:#C7A977; --bronze-deep:#A9874F; --bronze-text:#74592A;
  /* text neutrals */
  --taupe:#6A6253; --taupe-2:#A89E8C;
  /* semantic */
  --success:#6E9C77; --success-bg:#E9F1EA; --success-text:#3C6B47;
  --amber:#C98A3A;   --amber-bg:#FBEFDD;   --amber-text:#8A4F12;
  --rose-bg:#F6E6E1; --rose-text:#9A3B2A;
  /* lines */
  --line:rgba(199,169,119,.30); --line-soft:rgba(31,40,43,.12);
  /* signature */
  --spark:linear-gradient(135deg,var(--gold),var(--bronze));
}
/* type */
font-family:'Figtree',system-ui,sans-serif;   /* display + body */
font-family:'IBM Plex Mono',monospace;          /* labels, data, codes */