Internal · noindex · v1.3.0
Actively maintained UI kit — tokens, components, inventory, and versioned changelog in docs/DESIGN_SYSTEM.md. Mock data only; no API required.
web/src/app/globals.css
brand-accent
--brand-accent
#059669
brand-accent-hover
--brand-accent-hover
#047857
brand-dark
--brand-dark
#18181b
brand-muted
--brand-muted
#71717a
brand-surface
--brand-surface
#f4f4f5
brand-border
--brand-border
#e4e4e7
brand-page-bg
--brand-page-bg
#fafafa
brand-region-row
--brand-region-row
#e8eaf6
H1 — page hero
Find the best travel eSIM
H2 — section
Popular Destinations
Body
Compare data plans instantly and find the best option for your trip.
Label / uppercase
Sort
web/src/components/SiteHeader.tsx
SiteHeader
SiteFooter
web/src/components/CatalogSearchBar.tsx
Hero variant
Nav variant
web/src/components/TripModeToggle.tsx
web/src/components/PlanDesktopCard.tsx
PlanDesktopCard — catalog row (lg+)
Resize viewport to lg+ to preview desktop rows.
PlanMobileCard — catalog row (< lg)
PlanFilterPanel + PlanCatalogToolbar + PlanComparisonTable (interactive)
CountryDestinationCard
RegionCard
CountryListItem
RegionCountriesSection
Compare eSIM plans across 3 countries
BlogHero
How to choose, compare, and get the most from travel eSIM plans.· 12 articles
PostCard — featured
PostCard — default
PostContent
Look at data amount, validity, and price per GB for your destination.
Check whether tethering and 5G are included if you need them.
HeroSection
MultiCountryPlansHero
Plans that cover all selected destinations
WhySection
Why esim-rank
Built to simplify a fragmented market — everything you need to compare and choose the right eSIM, in one place.
A growing catalog of prepaid plans from partner providers — compare price, data, validity, and coverage side by side.
Listings are ranked by value and features, not commission. Filters and sorting help narrow options for any trip.
Real traveler feedback on service quality and reliability — coming soon as we onboard more providers.
Curated deals from partners so you can find affordable plans without overpaying for connectivity abroad.
components/experiments/ · inspired by Aave Building Glass for the Web
POC only — Aave-style stack: base layer + clipped overlay with RGB-split feDisplacementMap + backdrop lens. Not on prod pages. Falls back when prefers-reduced-motion is set.
Glass trip mode — Aave overlay + RGB displacement
Glass sort toggle — Aave overlay + RGB displacement
Selected: rank
Production baseline — TripModeToggle
| Component | Path | Used on |
|---|---|---|
| SiteHeader | components/SiteHeader.tsx | All pages |
| SiteFooter | components/SiteFooter.tsx | All pages |
| BrandWordmark | components/BrandWordmark.tsx | SiteHeader |
| HeroSection | components/HeroSection.tsx | / |
| WhySection | components/WhySection.tsx | / |
| PopularRegionsSection | components/PopularRegionsSection.tsx | / |
| CatalogSearchBar | components/CatalogSearchBar.tsx | /, header |
| TripModeToggle | components/TripModeToggle.tsx | /, /[country] |
| CountryDestinationCard | components/CountryDestinationCard.tsx | / |
| RegionCard | components/RegionCard.tsx | /, /region |
| CountryListItem | components/CountryListItem.tsx | /region, /country |
| RegionCountriesSection | components/RegionCountriesSection.tsx | / |
| RegionHubSection | components/RegionHubSection.tsx | /region |
| CatalogHubBreadcrumb | components/CatalogHubBreadcrumb.tsx | /country, /region |
| PlanDesktopCard | components/PlanDesktopCard.tsx | Plan rows (lg+) |
| PlanMobileCard | components/PlanMobileCard.tsx | Plan rows (<lg) |
| plan-card-shared | components/plan-card-shared.tsx | PlanProviderLogo, badges |
| PlanComparisonTable | components/PlanComparisonTable.tsx | /[country], /plans, /region, /[country]/[provider] |
| PopularPlanCards | components/PopularPlanCards.tsx | /[country] — promoted hero |
| PlanFilterPanel | components/PlanFilterPanel.tsx | /[country], /region/[slug], /plans |
| PlanCatalogToolbar | components/PlanCatalogToolbar.tsx | /[country], /region/[slug], /plans, /[country]/[provider] |
| FilterRangeSlider | components/FilterRangeSlider.tsx | PlanFilterPanel |
| PlanFilters | components/PlanFilters.tsx | /design-system demo only (legacy) |
| ClickOutButton | components/ClickOutButton.tsx | Provider page plan rows |
| CountryPageClient | components/CountryPageClient.tsx | /[country] |
| RegionCatalogPageClient | components/RegionCatalogPageClient.tsx | /region/[slug] |
| ProviderCatalogPageClient | components/ProviderCatalogPageClient.tsx | /[country]/[provider], /region/[slug]/provider/[provider] |
| PlansPageClient | components/PlansPageClient.tsx | /plans |
| MultiCountryPlansHero | components/MultiCountryPlansHero.tsx | /plans |
| BlogHero | components/BlogHero.tsx | /blog |
| PostCard | components/PostCard.tsx | /blog |
| PostContent | components/PostContent.tsx | /blog/[slug] |
| PostHogProvider | components/PostHogProvider.tsx | layout (infra) |
| GlassTripModeToggle | components/experiments/GlassTripModeToggle.tsx | /design-system |
| GlassSortToggle | components/experiments/GlassSortToggle.tsx | /design-system |
