Brand
One file draws all of eSIM2Go: shared/brand/index.ts. Change a value there and the site, this page and the app follow.
The mark
A single-colour mark, drawn in the brand purple on the page and in white on the purple. Sam Houston Labs owns it.
eSIM2Gothe lockup, as the masthead sets it
The company signature
eSIM2Go is a Sam Houston Labs product and signs its pages as every SHL product does: the registered office, a round-ended rule, the SHL mark and the wordmark in Expletus Sans. It sits at the start of every footer.
Colour
Each swatch is shown on the light page, then the dark. Contrast is measured against the page, or against what a token is painted on.
Page and cards
A near-white page so white cards lift off it; ink for text, hairlines for edges. Both themes.
ground
The page behind the cards: near-white, never pure white, so the white cards lift off it.
- Theme
- light
- dark
- hex
- #f7f7fb
- #0b0b12
- contrast
- –
- –
surface
Cards: the search card, plan cards, panels.
- Theme
- light
- dark
- hex
- #ffffff
- #15151f
- contrast
- –
- –
sunken
Inputs and quiet wells inside a card.
- Theme
- light
- dark
- hex
- #f1f1f7
- #1d1d2a
- contrast
- –
- –
ink
Text.
- Theme
- light
- dark
- hex
- #0f1020
- #f2f2f7
- contrast
- 17.6
- 17.6
ink-soft
Secondary text.
- Theme
- light
- dark
- hex
- #5b5d72
- #a3a5b8
- contrast
- 6.0
- 8.1
rule
Hairlines and card edges.
- Theme
- light
- dark
- hex
- #e6e6ef
- #2a2a3c
- contrast
- –
- –
Brand
The purple, and the gradient every primary action wears.
trip
The brand purple: links, focus, the selected state, the mark.
- Theme
- light
- dark
- hex
- #5a2db9
- #a78bff
- contrast
- 7.8
- 7.3
brand-a
Start of the brand gradient on primary actions (same in both themes).
- Theme
- light
- dark
- hex
- #5a2db9
- #5a2db9
- contrast
- –
- –
brand-b
End of the brand gradient.
- Theme
- light
- dark
- hex
- #8b5cf6
- #8b5cf6
- contrast
- –
- –
on-trip
Text on the brand purple and its gradient.
- Theme
- light
- dark
- hex
- #ffffff
- #ffffff
- contrast
- 8.4
- 8.4
Hero
The deep violet-black the hero and closing band are lit from, and the text on it.
hero
The hero's ground: a deep violet-black the purple glows out of.
- Theme
- light
- dark
- hex
- #0e0b22
- #08070f
- contrast
- –
- –
hero-ink
Text on the hero.
- Theme
- light
- dark
- hex
- #f5f3ff
- #f5f3ff
- contrast
- 17.6
- 18.3
hero-soft
Secondary text on the hero.
- Theme
- light
- dark
- hex
- #b9b3d9
- #b9b3d9
- contrast
- 9.6
- 10.0
Status
A plan's status pill, coloured by meaning, and the verdict as a sentence.
status-full
Covers every country for every day.
- Theme
- light
- dark
- hex
- #15803d
- #4ade80
- contrast
- 4.7
- 11.3
status-days
Every country, but the days run out first.
- Theme
- light
- dark
- hex
- #b45309
- #fbbf24
- contrast
- 4.7
- 11.7
status-countries
Misses one of the trip's countries.
- Theme
- light
- dark
- hex
- #c2410c
- #fb923c
- contrast
- 4.8
- 8.7
full
The covers-all verdict as a sentence: plain ink.
- Theme
- light
- dark
- hex
- = ink
- = ink
- contrast
- 17.6
- 17.6
short
A falling-short verdict as a sentence.
- Theme
- light
- dark
- hex
- #b45309
- #fbbf24
- contrast
- 4.7
- 11.7
Type
Two weights, 700 and 400; IBM Plex Sans Arabic stops at 700, so Arabic display text is set in that. Hierarchy is size and weight, never a third weight and never colour.
Overpass 700
Where are you going?
Overpass 400
Every plan shows whether it covers all of your countries for every day of the trip.
IBM Plex Sans Arabic 700 / 400
إلى أين أنت ذاهب؟
كل باقة تُظهر إن كانت تغطي كل دولك طوال أيام رحلتك.
Overpass Mono, for codes only
PT · MA · ES · DEMO-08ce4f87
Components
The category's own parts, at the leaders' level: white cards with a hairline and a soft shadow, status pills, real flags, the gradient action, the purple-lit hero.
World 10 GB
10 GB · 30 days · Hotspot allowed
Portugal
Morocco
SpainData for your whole trip
The hero and the closing band.
- Card 16px radius, a hairline edge, a soft offset shadow; lifts 2px on hover when it is a link.
- Status pill A dot and two or three words on a 12% tint of its colour: covers all, ends early, misses a country.
- Flag flag-icons artwork (MIT), 4:3, with a hairline so white flags hold their edge.
- Primary action The brand gradient, white text, 12px radius, a purple shadow beneath.
Motion
Quiet: a new trip row rises into place, cards lift on hover, the globe turns to the trip. Everything starts visible, so reduced motion loses nothing.
- row rises
- 420 ms
- easing
- cubic-bezier(0.16, 1, 0.3, 1)