Yesim Coverage — UI tokens and components (mirror of production styles)
This page lists colors, typography, radii, and reusable UI blocks used in
public/index.html.
Keep it in sync when tokens or classes change. There is no separate chat UI in this app; map tooltip and tap-toast are the closest to “bubbles.”
--logo#FD731A--brand#ee8332--brand-emph#ec6b2d--brand-subtle#fbe7d7--on-brand#fff7f2--covered--covered-h--covered-sel--covered-g--covered-g-h--yellow--yellow-h--bg--bg-2--text-1--text-2--text-3--border--border-md--ocean| Where | Value |
|---|---|
theme-color, active tab text on orange | #ee8332, #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) | rgba(255,255,255,.45) |
| Spinner track | rgba(238,131,50,.2) |
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, sidebar h3 |
| 16–21px | — | Icon buttons, flag emoji in cards |
| 18–20px | 800 | Plan price, footer price |
| 34px | — | Empty state emoji |
--r-pill | 500px — pills, search, tabs, CTA |
|---|---|
--r-card | 20px — cards, panels, legend |
--r-sec | 24px — search dropdown |
eSIM · tap countries to explore
Production: #search, #searchDrop, states hover / keyboard .on.
Legend FAB (mobile):
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.
Inline SVG (search), emoji / symbols (flags, legend ⓘ, zoom +/−/⊙, empty 🌍). No icon font or sprite sheet.