Soft Glass Daydream DESIGN.md

---
version: 1
name: "Soft Glass Daydream Mobile"
colors:
  primary: "#8496E6"
  on-primary: "#FFFFFF"
  surface: "#F4F7FB"
  surface-alt: "#FFFFFF"
  on-surface: "#1C2B41"
  on-surface-variant: "#637388"
  on-surface-muted: "#A0AAB8"
  secondary: "#E8DFD5"
  accent: "#E4E7F5"
  border: "#E8EEF5"
  error: "#E97B86"
  atmos-mist-blue: "#F4F7FB"
  atmos-lavender: "#E4E7F5"
  atmos-warm-sand: "#E8DFD5"
  illus-sky-blush: "#F2D5D0"
  illus-sky-lavender: "#C9C7E0"
  illus-cloud-cream: "#F5E8DA"
  illus-water-teal: "#3F8C9A"
  illus-water-deep: "#1F4A5C"
typography:
  display-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 36px
    fontWeight: 200
    lineHeight: 1.1
    letterSpacing: -0.03em
  display-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 30px
    fontWeight: 300
    lineHeight: 1.15
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: -0.02em
  body-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: -0.005em
  body-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0em
  label-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  label-uppercase:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.18em
  caption:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: 0em
  tab-label:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.04em
rounded:
  sm: 16px
  md: 24px
  lg: 32px
  xl: 40px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  gutter: 24px
  card-padding: 24px
  section-gap: 40px
icons:
  set: hugeicons
  default_variant: stroke
  active_variant: stroke
  stroke_weight: 1.5px
  default_size: 24px
components:
  card:
    backgroundColor: "rgba(255,255,255,0.40)"
    borderColor: "rgba(255,255,255,0.60)"
    borderWidth: 1px
    boxShadow: "0 12px 40px rgba(132,150,230,0.08)"
    rounded: "{rounded.xl}"
    padding: "{spacing.card-padding}"
    textColor: "{colors.on-surface}"
  card-image:
    backgroundColor: "{colors.surface}"
    borderColor: "rgba(255,255,255,0.40)"
    borderWidth: 1px
    boxShadow: "0 16px 40px rgba(132,150,230,0.15)"
    rounded: "{rounded.xl}"
    padding: 0px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.xl}"
    paddingX: 24px
    paddingY: 18px
    border: none
    boxShadow: "0 12px 40px rgba(132,150,230,0.35)"
    iconSize: 20px
    gap: 8px
  button-secondary:
    backgroundColor: "rgba(255,255,255,0.40)"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    borderColor: "rgba(255,255,255,0.60)"
    borderWidth: 1px
    boxShadow: "0 4px 20px rgba(132,150,230,0.05)"
    rounded: "{rounded.lg}"
    paddingX: 16px
    paddingY: 16px
    iconSize: 20px
    gap: 8px
  button-icon-glass:
    backgroundColor: "rgba(255,255,255,0.60)"
    borderColor: "rgba(255,255,255,0.60)"
    borderWidth: 1px
    boxShadow: "0 1px 2px rgba(28,43,65,0.04)"
    rounded: "{rounded.full}"
    size: 40px
    textColor: "{colors.on-surface}"
    iconSize: 20px
  button-text:
    backgroundColor: "rgba(255,255,255,0.40)"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    borderColor: "rgba(255,255,255,0.60)"
    borderWidth: 1px
    boxShadow: "0 1px 2px rgba(28,43,65,0.03)"
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 6px
  input-text:
    backgroundColor: "rgba(255,255,255,0.40)"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    borderColor: "rgba(255,255,255,0.60)"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.md}"
    paddingX: 16px
    paddingY: 16px
    iconSize: 20px
    gap: 12px
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "rgba(255,255,255,0.30)"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    borderColor: "rgba(255,255,255,0.40)"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 12px
    iconSize: 16px
    gap: 8px
  chip-active:
    backgroundColor: "rgba(255,255,255,0.60)"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    borderColor: "rgba(132,150,230,0.30)"
    borderWidth: 1px
    boxShadow: "0 4px 12px rgba(132,150,230,0.15)"
    rounded: "{rounded.full}"
    paddingX: 16px
    paddingY: 12px
  badge-pill:
    backgroundColor: "rgba(255,255,255,0.20)"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    borderColor: "rgba(255,255,255,0.30)"
    borderWidth: 1px
    boxShadow: "0 4px 12px rgba(0,0,0,0.10)"
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 6px
  avatar:
    backgroundColor: "rgba(255,255,255,0.40)"
    borderColor: "rgba(255,255,255,0.60)"
    borderWidth: 1px
    boxShadow: "0 8px 24px rgba(132,150,230,0.15)"
    rounded: "{rounded.full}"
    size: 56px
  list-row:
    backgroundColor: "rgba(255,255,255,0.40)"
    borderColor: "rgba(255,255,255,0.60)"
    borderWidth: 1px
    boxShadow: "0 8px 32px rgba(132,150,230,0.08)"
    rounded: "{rounded.lg}"
    padding: 16px
    gap: 16px
  top-app-bar:
    backgroundColor: "rgba(255,255,255,0.20)"
    textColor: "{colors.on-surface}"
    borderColor: "rgba(255,255,255,0.40)"
    borderWidth: 1px
    boxShadow: none
    height: 88px
    paddingX: 24px
  tab-bar-floating:
    backgroundColor: "rgba(255,255,255,0.60)"
    borderColor: "rgba(255,255,255,0.80)"
    borderWidth: 1px
    boxShadow: "0 16px 40px rgba(132,150,230,0.20)"
    rounded: "{rounded.xl}"
    padding: 8px
    height: 72px
  tab-item-active:
    backgroundColor: "rgba(255,255,255,0.60)"
    textColor: "{colors.primary}"
    typography: "{typography.tab-label}"
    borderColor: "rgba(255,255,255,0.50)"
    borderWidth: 1px
    boxShadow: "0 1px 2px rgba(28,43,65,0.04)"
    rounded: "{rounded.lg}"
    paddingY: 12px
    iconSize: 24px
    gap: 6px
  tab-item-inactive:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface-muted}"
    typography: "{typography.tab-label}"
    border: none
    boxShadow: none
    rounded: "{rounded.lg}"
    paddingY: 12px
    iconSize: 24px
    gap: 6px
---

# Soft Glass Daydream Mobile

## Overview

**Airy. Translucent. Ambient.** This aesthetic feels like looking out of a window at altitude — soft pastel light, layers of frosted glass, and barely-there chrome that defers to the imagery beneath it. Every surface is a low-opacity white pane backed by `backdrop-blur`, hovering over a gradient page that drifts from cool blue-grey through faint lavender into warm sand.

The system is **flat in mass but layered in transparency**. There are almost no hard borders; instead, hairline white-alpha rims separate planes, and oversized rounded corners (`{rounded.xl}` ≈ 40px) make every container feel like a polished pebble. Color is restrained: a single dusty periwinkle carries all primary action and never appears at full saturation in fills, only as the brand stamp on CTAs and active glyphs.

Type does the heavy lifting. Headlines are oversized, drawn at **ExtraLight 200** or **Light 300** with tight negative tracking, then paired with tiny ALL-CAPS metadata at +0.18em tracking. The result is editorial — closer to a high-end travel magazine than a typical product UI — but warmed by the soft palette so it never feels cold.

## Colors

The system runs on **one chrome palette** plus an **atmospheric gradient** behind everything.

- `{colors.surface}` (`#F4F7FB`) is the base — an off-white with a blue undertone.
- `{colors.surface-alt}` (`#FFFFFF`) is reserved for solid white inside dense components (card chips, divider mid-points). It is never used as a full-screen background.
- `{colors.on-surface}` (`#1C2B41`) is a deep navy used for all primary text. Pure black is forbidden.
- `{colors.on-surface-variant}` (`#637388`) is the workhorse for metadata, captions, inactive states.
- `{colors.primary}` (`#8496E6`) is a dusty periwinkle — the only saturated color in chrome. Reserved for: primary CTA fills, active tab icons, active chip text, focus rings, accent dots in timelines, and the small "currency / price" emphasis in display numerals.
- `{colors.secondary}` (`#E8DFD5`) is a warm sand. Appears only as a gradient anchor in the page background and as a tonal accent on small dots / micro-elements. Never used as a button fill.
- `{colors.accent}` (`#E4E7F5`) is a pale lavender, used identically — gradient anchor only.

**The page background is always a diagonal gradient:** `bg-gradient-to-br from-{surface} via-{accent}/40 to-{secondary}/30`. This is non-negotiable — flat surface backgrounds break the aesthetic immediately.

**Glass tokens are not in the palette but in the components:** every card surface is `bg-white/40` (or `/30`, `/50`, `/60` depending on layer depth) with `backdrop-blur-xl` or `backdrop-blur-2xl`. White-alpha is the *real* surface system; the named tokens are content colors.

**Illustration palette** (`illus-*`) is for photography only — soft sunset blush, lavender mist, cream cloud highlights, and a separate teal/deep-blue water gamut. These never bleed into chrome.

**Tonal recipe — primary at low attention:** for a soft secondary action that still carries primary hue, render `button-secondary` with `bg-{primary}/10` and `text-{primary}`. For a low-key destructive, swap to `text-{error}` over the same glass.

## Typography

The typeface is **Plus Jakarta Sans** for everything UI, with **Playfair Display** loaded as an optional serif counterpoint and **JetBrains Mono** available for confirmation codes / reference numbers (rarely used).

**Weight strategy is the signature move.** Headlines use **200 (ExtraLight) or 300 (Light)** with aggressive negative letter-spacing (`-0.02em` to `-0.03em`). Body uses **500 (Medium)**. Labels and metadata jump to **700 (Bold)**. This wide weight gap — extralight headlines next to bold-caps eyebrows — is what gives the aesthetic its editorial feel.

- `{typography.display-lg}` and `{typography.display-md}` — screen titles, hero phrases, oversized numerals (price totals, time-of-day). Always thin-weight, always tracked tight.
- `{typography.headline-md}` — secondary section titles inside the page body.
- `{typography.body-md}` — paragraph and field text. Medium weight by default.
- `{typography.body-sm}` — supporting text inside cards, secondary metadata.
- `{typography.label-md}` — button text, primary card labels, names. Bold.
- `{typography.label-uppercase}` — the eyebrow / kicker pattern: `uppercase` + `tracking-[0.18em]` + `font-bold` at 10–11px in `{colors.on-surface-variant}`. Used liberally above titles, on form-field labels, on chip metadata. This tracked-out caps style is load-bearing.
- `{typography.caption}` — short bold pill text (price tags, status badges).
- `{typography.tab-label}` — bottom nav.

**Numeric pattern:** prices, times, and codes are rendered in `{typography.display-md}` (Light 300, tight tracking) — the thin-weight numeral against bold-caps metadata is a recurring visual rhythm.

## Spacing & Layout

Generous and airy. Side gutters are `{spacing.gutter}` (24px) — the screen never feels edge-to-edge. Vertical rhythm between major sections is `{spacing.section-gap}` (32–40px). Cards breathe internally at `{spacing.card-padding}` (24px), with 16–20px gaps between rows inside.

Components are **never tightly stacked**. Even within a card, items are separated by 20px gaps and hairline `bg-white/60` dividers (1px, full-bleed). The aesthetic depends on whitespace; halving the spacing kills it.

The bottom nav is **always floating** with 24px insets on left / right / bottom — never edge-locked. Sticky headers use `bg-white/20` (lighter than cards) so the page beneath remains visible through them.

## Elevation & Depth

Depth is conveyed by **transparency stacks**, not hard shadows.

Three opacity tiers form the layer system:
- **Page** — the gradient background, fully visible.
- **Card / chip / list-row** — `bg-white/30` to `/50`, `backdrop-blur-xl`, hairline `border-white/60`.
- **Floating chrome** (CTA, bottom nav, active states) — `bg-white/60` to `/80`, `backdrop-blur-3xl`, hairline `border-white/80`.

Shadows are present but soft and tinted with the brand hue. Recipes:
- Card resting: `shadow-[0_8px_32px_rgba(132,150,230,0.06)]`
- Card prominent: `shadow-[0_12px_40px_rgba(132,150,230,0.08)]`
- Floating CTA / nav: `shadow-[0_16px_40px_rgba(132,150,230,0.20)]`
- Primary button: `shadow-[0_12px_40px_rgba(132,150,230,0.35)]`
- Image card: `shadow-[0_16px_40px_rgba(132,150,230,0.15)]`

Note the alpha is always low and the color is **never neutral grey** — shadows carry the periwinkle tint. Black-tinted shadows would feel foreign.

## Shapes

Radii are unusually large. The base unit is 24px (`{rounded.md}`) — already softer than typical mobile UI — and most surfaces step up to 32–40px. The aesthetic philosophy: every container is a **smooth pebble**.

- `{rounded.sm}` (16px) — small inner chips, calendar tiles, micro-cards inside a parent card.
- `{rounded.md}` (24px) — inputs, list rows, small image frames.
- `{rounded.lg}` (32px) — buttons, mid-size cards, image thumbnails in horizontal scrollers.
- `{rounded.xl}` (40px) — the hero pattern: the main composite cards on every screen, the floating tab bar, the primary CTA.
- `{rounded.full}` — avatars, icon buttons, badges, pill tags.

Rule of thumb: the larger the surface, the larger the radius. A full-bleed hero card uses `{rounded.xl}`; a 60px chip uses `{rounded.full}`. Mixing 8–12px radii into this system breaks the softness.

## Components

### card

The universal glass surface. Every grouping of content sits on one. `bg-white/40` + `backdrop-blur-xl` + `border-white/60` + soft periwinkle shadow.

```html
<div class="bg-white/40 backdrop-blur-xl border border-white/60 rounded-[40px] p-6 shadow-[0_12px_40px_rgba(132,150,230,0.08)]">
  <p class="text-[10px] font-bold text-[#637388] uppercase tracking-[0.18em] mb-1.5">[Eyebrow]</p>
  <h2 class="text-3xl font-light text-[#1C2B41] tracking-tight">[Card title]</h2>
</div>
```

A **two-column inner row** (the recurring "From / To", "Dates / Passengers" pattern) is composed by placing two `bg-white/40 rounded-[24px] p-3.5 border border-white/50` sub-cards side by side with 12px gap inside the parent card.

### card-image

Used for any photographic tile (destination cards, hero banners). Image fills the radius; a `from-black/50 via-black/10 to-transparent` gradient overlay sits at the bottom 60% to support white text. Caption is bottom-left in `label-uppercase` (white/80) with the title in `display-md` (light, white). A glass `badge-pill` sits bottom-right.

```html
<div class="relative w-[240px] h-[300px] rounded-[40px] overflow-hidden border border-white/40 shadow-[0_16px_40px_rgba(132,150,230,0.15)]">
  <img src="[image]" class="w-full h-full object-cover" />
  <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 to-transparent"></div>
  <div class="absolute bottom-0 left-0 right-0 p-5">
    <p class="text-white/80 text-[10px] font-bold uppercase tracking-[0.18em] mb-0.5">[Region]</p>
    <div class="flex justify-between items-end">
      <h4 class="text-2xl font-light text-white tracking-tight">[Place]</h4>
      <div class="px-3 py-1.5 rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white text-xs font-bold">[Value]</div>
    </div>
  </div>
</div>
```

### button-primary

The single saturated CTA in the system. Solid `{primary}` fill, white text, oversized radius, and a **deep periwinkle-tinted shadow** that makes it appear to float. An optional pseudo-element `bg-white/20` slides up on press for a wash highlight.

```html
<button class="w-full py-4 rounded-[40px] bg-[#8496E6] text-white font-medium text-base tracking-wide shadow-[0_12px_40px_rgba(132,150,230,0.35)] active:scale-[0.98] flex items-center justify-center gap-2">
  <span>[Action]</span>
  <iconify-icon icon="hugeicons:[icon-name]" class="size-5"></iconify-icon>
</button>
```

### button-secondary

Glass tile with icon-on-circle above label. Used for the "quick action" row below the hero card. Stacks vertically: 40px white-glass circle holding a primary-tinted icon, then bold 12px label below.

```html
<button class="flex-1 py-4 px-4 bg-white/40 backdrop-blur-xl border border-white/60 rounded-[32px] flex flex-col items-center gap-2 shadow-[0_4px_20px_rgba(132,150,230,0.05)] active:scale-[0.98]">
  <div class="size-10 rounded-full bg-white/60 flex items-center justify-center border border-white/40 shadow-sm">
    <iconify-icon icon="hugeicons:[icon-name]" class="size-5 text-[#8496E6]"></iconify-icon>
  </div>
  <span class="text-xs font-semibold tracking-tight text-[#1C2B41]/80">[Label]</span>
</button>
```

### button-icon-glass

Circular header / overlay button. `bg-white/60 backdrop-blur-md` on glass surfaces, or `bg-white/40 backdrop-blur-md` when sitting on top of a photographic hero.

```html
<button class="size-10 rounded-full bg-white/60 backdrop-blur-md border border-white/60 flex items-center justify-center shadow-sm active:scale-90">
  <iconify-icon icon="hugeicons:[icon-name]" class="size-5 text-[#1C2B41]"></iconify-icon>
</button>
```

### button-text

A pill rendered as glass — used for "See all" links beside section headers. Glass surface, primary text, full radius, low padding.

```html
<button class="text-xs font-semibold text-[#8496E6] bg-white/40 px-3 py-1.5 rounded-full border border-white/60 shadow-sm">[Link]</button>
```

### input-text

Glass field with leading icon. No visible border on focus — the periwinkle ring is subtle, applied via `focus-within:ring-1 focus-within:ring-[#8496E6]/30`.

```html
<div class="bg-white/40 backdrop-blur-md border border-white/60 rounded-3xl p-4 flex items-center gap-3">
  <iconify-icon icon="hugeicons:[icon-name]" class="size-5 text-[#8496E6]"></iconify-icon>
  <input type="text" class="bg-transparent border-none focus:ring-0 text-sm font-semibold flex-1 placeholder:text-[#637388]/50" placeholder="[Placeholder]" />
</div>
```

### chip / chip-active

Pill-shaped glass. Inactive uses `bg-white/30` with neutral text; active uses `bg-white/60` with `border-{primary}/30` and `ring-1 ring-{primary}/20` for a subtle inner glow.

```html
<!-- inactive -->
<button class="px-4 py-3 rounded-full bg-white/30 border border-white/40 text-xs font-semibold text-[#1C2B41]">[Label]</button>

<!-- active -->
<button class="px-4 py-3 rounded-full bg-white/60 border border-[#8496E6]/30 ring-1 ring-[#8496E6]/20 shadow-[0_4px_12px_rgba(132,150,230,0.15)] text-xs font-bold text-[#8496E6]">[Label]</button>
```

A **horizontally-scrolling tile chip** (used for the calendar / metric strip) is a 80px-wide `rounded-2xl` glass tile holding two stacked text rows: tracked-out caps label on top, bold value below. Active variant gains the periwinkle ring.

### badge-pill

Translucent over photography: `bg-white/20 backdrop-blur-md border-white/30` with bold white text. Over chrome: `bg-white/60` with `{on-surface}` text. Always `{rounded.full}` and `{typography.caption}`.

### avatar

A 56px circle with a 4px white-alpha ring effect created by wrapping the `<img>` in a `bg-white/40 backdrop-blur-xl border-white/60 p-1` container, then `rounded-full` on the image.

```html
<div class="size-14 rounded-full p-1 bg-white/40 backdrop-blur-xl border border-white/60 shadow-[0_8px_24px_rgba(132,150,230,0.15)]">
  <img src="[avatar]" class="size-full rounded-full object-cover" />
</div>
```

### list-row

Glass card with leading 48px circle (icon or category mark), flexible center column, trailing icon button. `bg-white/40 + backdrop-blur-xl + border-white/60 + rounded-[32px]`.

### top-app-bar

Sticky, ultra-translucent: `bg-white/20 + border-b border-white/40`. Holds a leading glass icon-button, a centered title block (`headline-md` over `label-uppercase` metadata), and a trailing icon-button. When the screen has a photographic hero, the top bar is omitted entirely and two free-floating glass icon-buttons sit in the top corners instead.

### tab-bar-floating (signature)

The bottom nav is **always floating** — never edge-locked. Inset 24px from each side and the bottom, it's a `{rounded.xl}` glass slab at higher opacity (`/60`) and stronger blur (`backdrop-blur-3xl`) than cards. The active tab is its own `{rounded.lg}` glass tile *inside* the slab, lifting slightly with `bg-white/60 border-white/50 shadow-sm`. This nested-glass pattern is signature.

```html
<nav class="fixed bottom-6 left-6 right-6 bg-white/60 backdrop-blur-3xl border border-white/80 rounded-[40px] shadow-[0_16px_40px_rgba(132,150,230,0.20)] p-2 flex justify-between items-center">
  <button class="flex-1 py-3 flex flex-col items-center gap-1.5 rounded-[32px] bg-white/60 shadow-sm border border-white/50">
    <iconify-icon icon="hugeicons:[icon-name]" class="size-6 text-[#8496E6]"></iconify-icon>
    <span class="text-[10px] font-bold text-[#8496E6] tracking-wide">[Tab]</span>
  </button>
  <button class="flex-1 py-3 flex flex-col items-center gap-1.5 rounded-[32px] text-[#637388]/80">
    <iconify-icon icon="hugeicons:[icon-name]" class="size-6"></iconify-icon>
    <span class="text-[10px] font-bold tracking-wide">[Tab]</span>
  </button>
</nav>
```

### Composition recipes (not separate components)

- **Eyebrow + headline pair** — the universal pattern for any titled block: `{typography.label-uppercase}` in `{colors.on-surface-variant}` over `{typography.display-md}` or `{typography.headline-md}` in `{colors.on-surface}`.
- **Two-column metadata strip** inside a card — two `bg-white/40 rounded-3xl p-3.5 border-white/50` sub-cards side by side, each holding a 32px white circle + icon + (eyebrow / value) text stack.
- **Vertical timeline** — a 2px-wide gradient line `bg-gradient-to-b from-{primary}/40 to-{secondary}/40` between two endpoint dots: a hollow `border-2 border-{primary}` for origin, a filled `bg-{secondary}` for destination. Each row to the right of the line uses the eyebrow + value pattern.
- **Horizontal connector** (between two values in a row) — a 1px dashed `border-{primary}/30` line with a centered iconified glyph in a small `bg-white px-1` plate.

## Iconography

**Iconify set: `hugeicons`** — exclusively. The set's slightly geometric, slightly soft stroke icons match the type's editorial-meets-friendly tone perfectly.

- Default variant: stroke (the bare hugeicons name, e.g. `hugeicons:airplane-01`, `hugeicons:calendar-03`). hugeicons icons typically don't carry variant suffixes.
- Active state: same stroke icon, recolored to `{colors.primary}`. **Filled variants are not used** — color does the work, weight stays consistent.
- Sizes: 16px inside dense chips, 20px for inline / button leading icons, 24px for tab bar.
- Color mapping: stroke icons inherit `currentColor`; on glass cards they use `{colors.on-surface-variant}` for muted icons or `{colors.primary}` for accented icons. Pure `{colors.on-surface}` is rare for icons — they almost always whisper.

A **categorical brand mark** (used to differentiate items in a list, like "vendor" or "category" tiles) is a 40px circle filled with a soft 2-stop gradient (`from-{hue}-300 to-{hue}-500`) holding a white icon. Vary the gradient hue per item; keep saturation low.

## Illustration & Imagery

**Style / Technique**: cinematic atmospheric photography with a soft, diffused, slightly hazy quality — golden-hour or blue-hour lighting, low contrast, generous bloom. Subjects feel observed-from-afar (aerial city, mountain peaks above clouds, atolls seen from a window) rather than crisp documentary close-ups. The mood is contemplative and dream-like.

**Palette**: imagery uses two primary atmospheric gamuts:
- **Warm sunset** — soft blush `#F2D5D0`, dusty lavender `#C9C7E0`, cream cloud highlights `#F5E8DA`, with subtle peach sun-glow.
- **Cool dawn** — pale blue `#D8E4F0`, lavender mist, white cloud, with slate-grey accents.

Plus a tropical-water gamut (`{colors.illus-water-teal}`, `{colors.illus-water-deep}`) used only for water subjects. Photos rarely contain saturated reds, greens, or yellows. The dominant feeling is **pastel washed by light**, never punchy.

**Edge treatment**: photographic, no outlines. Subjects often dissolve into the surrounding atmosphere (clouds bleeding into sky, mountains fading into mist) — there is rarely a hard subject edge.

**Shading & light**: natural soft light, diffused through cloud or atmospheric haze. Highlights are blown gently rather than clipped. Strong directional sun is welcome but always low-angle (sunrise / sunset). No hard studio lighting, no flash, no neon.

**Composition & framing**: centered or rule-of-thirds subject with substantial atmospheric negative space (sky, water, cloud). The subject often occupies less than 40% of the frame; the surrounding "empty" volume carries the mood. Aerial / above-horizon viewpoints recur. Aspect is portrait-tall for cards (4:5 to 3:4) and landscape (16:9 to 3:2) for full-bleed heroes.

**Background within the illustration**: integrated atmosphere — never transparent, never flat color. The background IS the mood.

**Container styling**:
- Frame radius: `{rounded.xl}` (40px) for hero scrollers and full-screen image headers; `{rounded.lg}` (32px) for smaller thumbnails.
- Border: hairline `border-white/40`, 1px, on every framed image to soften the edge against the page gradient.
- Padding: zero — images bleed to the rounded edge. The frame is the radius.
- Container background: matches the page (`{colors.surface}`) so any image transparency would reveal page color, but images are always opaque.

**CSS treatment on the `<img>`**: `object-cover`, no blend-mode, full opacity, no filter. The image speaks for itself.

**Box-shadow**: `shadow-[0_16px_40px_rgba(132,150,230,0.15)]` on framed thumbnails so they appear to lift from the gradient. Full-bleed hero images don't get a shadow — instead, a `bg-gradient-to-t from-{surface} via-{surface}/60 to-transparent` overlay at the bottom 40% blends the image into the page below.

**Aspect ratio rule**: preserve source ratio inside the frame; crop with `object-cover`. Hero headers are typically 3:2 to 5:4 height-to-width; destination thumbnail cards are 4:5 portrait.

**Anti-references**: NOT 3D, NOT illustrated / vector, NOT cartoon, NOT pixel, NOT high-saturation editorial, NOT studio-product-shot, NOT macro-close-up, NOT high-contrast photojournalism, NOT black-and-white.

**Style recipe prompt**:

> *Cinematic atmospheric photograph of [SUBJECT], shot at golden hour or blue hour with soft diffused light. Pastel palette of dusty lavender, blush peach, cream cloud, and pale blue. Low contrast, gentle bloom, hazy atmosphere — subject partially veiled by mist, cloud, or distance. Generous negative space; subject occupies less than half the frame. Aerial or elevated vantage when applicable. Natural integrated background — never flat, never transparent. No hard shadows, no neon, no high saturation, no studio lighting. Quiet, contemplative, dream-like mood.*

For inline categorical marks where photography is overkill, use the **gradient-circle + icon** pattern described in the Components section instead of generating an illustration.

## Hierarchy & Emphasis

Visual weight comes from **size and translucency**, not from saturation or boldness. The loudest thing on any screen is a thin-weight 36px headline against a tracked-out 10px caps eyebrow — the contrast in *style* (extralight vs bold-caps) creates the rhythm.

Saturated periwinkle (`{colors.primary}`) is reserved exclusively for: the primary CTA fill, active tab icons + labels, currency totals on confirmation, accent dots on timelines, and icon glyphs inside glass containers. It must never be used as a card background or section divider — that breaks the system instantly.

Metadata always whispers: `{typography.label-uppercase}` in `{colors.on-surface-variant}` is the universal "supporting role" treatment.

## Distinctive Details

1. **Nested glass** — a glass tile inside a glass slab inside a gradient page. The floating tab bar's active-tab tile is the canonical example: three transparency layers visible simultaneously, each with its own white-alpha border. Replicate this pattern wherever a "selected" or "elevated" sub-state appears within a glass surface.
2. **Periwinkle-tinted soft shadows** — every shadow in the system is `rgba(132,150,230, ...)`, never `rgba(0,0,0, ...)`. The hue tint is what makes the floating chrome feel like part of the same atmosphere as the page gradient.
3. **Extralight headline + tracked-bold-caps eyebrow** — the recurring two-line typographic stamp. It appears on every section title, every card header, every metadata strip. If you remove this pattern, the design collapses into generic glassmorphism.

## Do's and Don'ts

### Do

- Always ground every screen on the diagonal page gradient (`from-{surface} via-{accent}/40 to-{secondary}/30`).
- Pair every headline with a tracked-out caps eyebrow above it.
- Use `backdrop-blur-xl` (or stronger) on every white-alpha surface — the blur is essential.
- Tint shadows with the periwinkle hue, not with black.
- Use `{rounded.xl}` (40px) on all hero containers; let radii be larger than feels normal.
- Use weight contrast (200/300 vs 700) instead of color contrast for emphasis.
- Float the bottom nav with 24px insets.

### Don't

- Don't use pure white (`#FFFFFF`) as a card background — always use white-alpha + blur.
- Don't use `{colors.primary}` as a surface fill (only as an accent and CTA fill).
- Don't introduce hard borders in `{colors.border}` grey — borders are always `white/40` to `white/80`.
- Don't use neutral / black shadows.
- Don't tighten the spacing — the airiness is load-bearing.
- Don't introduce a second sans typeface; Plus Jakarta Sans handles every weight role.
- Don't use filled icon variants — color, not weight, indicates active state.
- Don't put illustrations or photos inside a glass card — photographic frames are solid (image fills the radius); glass cards hold text and chrome only.
- Don't edge-lock the tab bar; it must float.
- Don't use saturated photography — atmospheric pastel only.