eSIM for wife#123456 · Bulgaria
Active
Bulgaria 15GB · 30 days
Data12.5 of 15.0 GB used
Days27 of 30 days left
$12.50· Auto-renew ON
ESIMD Design System
The single source of truth for tokens, atoms, molecules and organisms shipping across ESIMD — landing pages, account, eSIM detail and order history. Built following the atomic design methodology.
Foundations · Token
Colors
Blue is the only accent. Semantic colors (green / orange / red) mark state and outcome. Neutrals build the layout. Dark theme mirrors both.
Brand & text
Brand
Brand hover
Ink
Secondary
Muted
Grey
Semantic
Success
Success ink
Warn
Warn ink
Danger
Danger ink
PAYG
PAYG ink
Neutrals · surface
Surface
App bg
Divider
Border
Dark surface
Dark bg
Foundations · Token
Typography
Inter is the only face. Weights 400 / 500 / 600 / 700 / 800. Monospace (JetBrains Mono) only for order IDs and technical codes.
Stay connected everywhere
eSIM vs Physical SIM
Bulgaria 15GB · 30 days
Use this balance to renew the current plan or buy another plan for this eSIM.
#123456 · Bulgaria
HOW IT WORKS
#20260514-000051
Foundations · Token
Radius
Four canonical radii. Never mix — each maps to one component role.
Badges
Buttons · cells
Cards · panels
Pills · chips
Foundations · Token
Spacing
Base scale — 4px grid. Used for padding, gap and margins across cards, sections and forms.
4px
8px
12px
16px
20px
24px
32px
48px
64px
Foundations · Asset
Icon set
Lucide icons at stroke-width 2 (2.2 in chips, 2.5 in CTA arrows). Custom SIM-card icon for eSIM avatar.
Atom
Button
Primary drives the main action, Secondary supports, Ghost is a text-only alternative for compact spots, Danger for destructive ops. All buttons radius 16.
Atom
Badge
4px-radius blocks for eSIM state. Pills (99px) for order-status.
eSIM state · 4px block
Active plan
Traffic used up
Plan expired
Waiting for activation
Pay-as-you-go
Global
Order status · pill
Paid
Pending
Failed
Unpaid
Atom
Avatar
52×52 circle plate. Color scheme reflects state — one avatar per eSIM state.
Active
Warn
Danger
Expired
Pending
PAYG
Global
Atom
Progress bar
8px height, pill radius. Colors reflect state — used for Data and Days usage indicators.
Good
Warn
Danger
Atom
Toggle
Boolean switch. Used for Auto-renewal and other on/off settings.
Auto-renew · ON
Auto-renew · OFF
Atom
Checkbox
Multi-select input. Radius 6 for the box, filled brand blue when checked.
Atom
Radio
Single-choice input. Same footprint as checkbox but circular.
Atom
Select
Custom dropdown — button + floating menu. Not native <select>: styling controls option hover, selected accent and check-mark.
Closed
Open · with selected
Atom
Text input
Native input with brand-blue focus ring and matching radius 16.
Atom
Search input
Text input with a magnifier on the left and an optional clear-button when text is present.
Atom
Chip
Small tagged tokens for payment method, PAYG rate and other inline meta.
Apple Pay
Google Pay
Card ···· 4242
eSIM balance
apple
Rate $3.50 / GB
Atom
Link
Text hyperlink. Brand-blue primary; subtle dark option for footer / meta; danger for destructive actions.
Atom
Divider
Single-pixel horizontal separator between related blocks. Also used inside cards to split head/body/footer.
Content above
Content below
Molecule
Metric row
Label (uppercase) + value + progress-bar. Composes eSIM card plan-panel.
Data12.5 of 15.0 GB used
Days27 of 30 days left
Molecule
Balance chip
Wallet icon + amount + optional descriptor. Plain in default state, pill in warn/danger states.
$12.50· Auto-renew ON
$2.30· Renewal needs $24.90
$0.00· top up to renew
Molecule
Transaction row
Icon (in / out) + main text + amount / date pair on the right. Composes balance history and order lists.
Wallet top-upApple Pay · Order #20260514-000051
+$10.00
14 May 2026, 14:22
Auto-renewal · Bulgaria 15GB 30DaysCharged from eSIM balance
−$24.90
12 Apr 2026, 09:01
Molecule
Filter row
Three selects side-by-side — used to filter Order history by eSIM, payment method and status.
Molecule
Search bar
Search input + primary submit button. Used on destinations, help, docs.
Molecule
Input group
Label + field + hint / error message. The base building block for account and checkout forms.
We'll send eSIM install instructions here.
Card number is 4 digits short.
Molecule
Tabs · segmented
Pill-container with 2–3 options. Used to switch between QR / Manual in Installation guide.
Molecule
Tooltip
Dark rounded bubble with a small arrow. Appears on hover for terse hints.
Balance can't be used to buy a new eSIM
Molecule
Empty state
Circle-icon plate + title + supporting text + primary CTA. Used when a list has no data yet.
No eSIMs yet
Buy your first eSIM to stay connected abroad. Each eSIM has its own name, plan and balance.
Organism
eSIM card
The main list unit. Composes: Head (Avatar + Title + Badge) → Plan panel (Metric rows × 2) → Footer (Balance chip + Manage button).
Organism
Informer banner
Contextual banners for low balance and expired states. Warn = orange, Danger = red. Compose from Icon-plate + Title-strong + Body.
Auto-renewal in 3 days needs $24.90 — your balance is $12.50
Top up at least $12.40 to cover the next renewal.
Balance is $0 · auto-renewal failed
The next renewal needs $19.90. Top up now to get the plan back online.
Organism
Comparison table
3-column single-card table. eSIM values are highlighted with a green check.
| eSIMDigital, instant | Physical SIMCard, physical | |
|---|---|---|
| Activation | Online, minutes | In-store card pickup |
| Plastic | No | Yes |
| Switch carrier | Few taps | Replace card |
Organism
Modal
Centered card with a close-button. Buttons stacked full-width for auth. Backdrop is 40% dark with 6px blur.
Sign in to continue
Organism
Dropdown menu
Floating panel with icon-list items. Anchored to the trigger, shadow lift, rounded 16.