This page lists colors, typography, radii, and reusable UI blocks used in
public/index.html.
Keep it in sync when tokens or classes change. Map data: Natural Earth 50m (countries-50m.json, Crimea split). New features: island dot markers (7 px circles for tiny nations, visible zoom ≥ 3), 6-tier country label reveal, search aliases (Cabo Verde, Ivory Coast, Burma, Czechia, Holland, DPRK/ROK), semi-transparent country fills, graticule grid, ocean gradient. There is no separate chat UI in this app; map tooltip and tap-toast are the closest to “bubbles.”
Colors — CSS variables
--orange1000 #FF7A00--brand → --buttonPrimaryFillDefault--brand-emph#ec6b2d--brand-subtle#fbe7d7--on-brand#fff7f2--covered--covered-h--covered-sel--covered-g--covered-g-h--yellow#b0b8c8--yellow-h#9aa3b4--bg--bg-2--text-1--text-2--text-3--border--border-md--ocean → --blue300--ocean-deep → --blue400Literals (not tokenized)
| Where | Value |
|---|---|
theme-color, active tab text on orange | #FF7A00, #fff |
.data-banner.err | bg #fff3e0, text #8a4a00 |
| Tooltips / toasts / shadows | rgba(26,26,26,.93), rgba(0,0,0,.1) … .28 |
Map stroke (SVG) .cpath | rgba(255,255,255,.45) stroke, 0.35px width |
| Map fill-opacity (semi-transparent fills) | covered 0.82, nocov 0.88; hover/sel go to 1 |
Ocean gradient (SVG #oceanGrad) | --blue300 → --blue400 (top → bottom) |
| Graticule grid lines | rgba(255,255,255,.18), 0.3px |
| Island dot stroke | rgba(255,255,255,.75), 1px |
| Country label fill / stroke | rgba(30,30,30,.9) / rgba(255,255,255,.92) |
| Spinner track | rgba(238,131,50,.2) |
| Map data source | /countries-50m.json — Natural Earth 50m TopoJSON (Crimea split) |
Typography
Font: Inter (Google Fonts) weights 400, 500, 600, 700, 800. Fallback: system-ui, sans-serif.
| Size | Weights in use | Examples in app |
|---|---|---|
| 10px | 400, 600 | Trust row, tooltip subline, card meta, price tag |
| 11px | 400, 600, 700 | Header subtitle, coverage pill, tabs, labels, hints |
| 12px | 400, 500, 700 | Data banner, tooltip body, empty state, plan messages |
| 13px | 400, 600, 700 | Search, list rows, sidebar title weight mix, CTA |
| 14px | 500 (body), 700 | Base body |
| 24px | 600 | Sidebar h3 — --f24-semiBold |
| 32px | .round-flag--32 | Country flags in sidebar / search (DS RoundFlag) |
| 18–20px | 800 | Plan price, footer price |
| 34px | — | Empty state emoji |
Radius tokens
--r-pill | 500px — pills, search, tabs, CTA |
|---|---|
--r-card | 20px — cards, panels, legend |
--r-sec | 24px — search dropdown |
UI components
Header title (product chrome)
Coverage
eSIM · tap countries to explore
Data banner
Search field + dropdown list
Production: #search, #searchDrop, .checkbox — DS RadioButton variant="check" (24px, radius 6px, --borderSecondary / --fillRadiobuttonActive*, IconCheck white). Row .on + hover/press on box. Search matches canonical name and SEARCH_ALIASES.
Tag — orange subtle (coverage count)
Dark theme (all UI tokens)
Chrome uses [data-theme='dark'] from export colors.scss. Map country/ocean fills stay the same. On the live map: button in header, ?theme=dark, or system dark mode.
Coverage
eSIM · tap countries to explore
Your trip
Map tooltip & tap toast (“bubble-like”)
Map chrome: legend, zoom, FAB legend
Background: SVG #oceanGrad linear gradient --blue300 → --blue400. Graticule grid lines at rgba(255,255,255,.18). Map data: /countries-50m.json (Natural Earth 50m, Crimea split). Zoom extent: 1–24×.
Legend FAB (mobile) — IconButton light + IconInfo:
Loader (map blocking state)
Map fill states (reference)
Semi-transparent fills: covered fill-opacity: 0.82, not-covered fill-opacity: 0.88. Hover and selected states use fill-opacity: 1. Not-covered color changed from yellow (#ffda3d) to neutral gray (#b0b8c8).
Island dot markers (tiny island nations)
Circle markers are rendered on top of tiny country polygons (area < 0.002 steradians) that are too small to tap reliably at low zoom. Dots are always 7 px on-screen (radius scaled by 7/zoomK) and fade in at zoom ≥ 3.
CSS class .island-dot + .covered / .nocov / .sel. Shares the same click / hover / tooltip handlers as .cpath country polygons. Examples: Maldives, Nauru, Tuvalu, Seychelles, São Tomé & Príncipe.
Country name labels — 6-tier zoom reveal
| Tier | Area threshold | Reveal at zoom | Examples |
|---|---|---|---|
| 1 | ≥ 0.18 sr | 1.0 | Russia, Canada, USA, China, Brazil, Australia |
| 2 | ≥ 0.04 sr | 1.5 | India, Kazakhstan, Algeria, Saudi Arabia |
| 3 | ≥ 0.012 sr | 2.5 | Sudan, Iran, France, Turkey, Ethiopia |
| 4 | ≥ 0.004 sr | 4.0 | Germany, Poland, Norway, Sweden, Ukraine |
| 5 | ≥ 0.002 sr | 6.0 | Smaller countries |
| 6 | < 0.002 sr | 8.0 | Micro-islands: Maldives, Nauru, etc. |
Labels render at a constant 11 px on-screen (SVG font-size = 11/zoomK px). White text-stroke (stroke-width: 0.12em, paint-order: stroke fill) ensures legibility over any fill. Countries smaller than 0.00005 sr are excluded entirely.
Trip panel: sheet handle, mode tabs (hidden in prod UI), badge, clear
On narrow viewports the same aside becomes a bottom sheet; spacing and chip-style cards are overridden in @media (max-width: 768px) in index.html.
Empty state
Icons
Country flags: /flags/{iso}.svg in .round-flag (32px). Remove: .ccard-remove + .icClose (icon only). Inline SVG (search), symbols (legend ⓘ, zoom, empty 🌍).