Design J · brand guidelines v2 · Nov 2026
Style guide

Small team.
Real people.
Honest data.

Everything that makes a MobiWonder page look and sound like MobiWonder — colour, type, components, icons, illustration and imagery. Built from the approved homepage “J · Combined”.

$0 roaming
HonestReal prices, real networks, real limits. Brackets until a fact is confirmed.
WarmPlain words, a little cheek. Talk like a friend who travels a lot.
ClearOne job per section. Big search, big buttons, nothing hidden.
HumanReal faces, real support. Never fake reviews, never AI people.
01

Logo · the Signal pin

A sunshine map pin with signal inside: a place, with data. Ink signal on sunshine is the default; cobalt is home. The wordmark is Rubik ExtraBold, hand-spaced, all lowercase. Keep clear space equal to the radius of the pin’s head on every side. Minimum size: 16px mark (heavier small-size drawing below 30px), 96px lockup.

Primary — on cobalt
On white
On ink (footer)
On sunshine
One colour — ink
One colour — reversed
✕ Don’t stretch or squash
✕ Don’t tilt the pin
✕ Don’t change the colours
✕ Don’t add effects
✕ Don’t place on busy images
✕ Don’t retype the wordmark
MobiWonder
02

Colour

Cobalt carries the brand, sunshine points at the thing to do next. Use one sunshine element per view where possible — it is the “press here” colour.

#2340D9
CobaltPrimary. Header, hero, primary buttons, links.White text AA ✓ 6.9:1
#FFC93C
SunshineAccent. CTA on cobalt, price stickers, highlights.Ink text AAA ✓ 12.6:1
#141414
InkText, dark sections, footer, secondary buttons.White text AAA ✓ 18:1
#F3F5FF
CloudLight sections, FAQ items, inputs, panels.Ink text AAA ✓
#4A4F66
SlateSecondary text on white and cloud.On white AA ✓ 8:1
#1A2FA6
Cobalt 700Hover and pressed states only.White AAA ✓
#ECEEF8
LineCard borders, dividers.Decorative only
#1C7A43
SuccessCompatible, active, paid. Pair with #E3F6EA.AA ✓
Proportion across a page
Cobalt 40%White 28%Sunshine 15%Ink 12%Cloud 5%
✓ DoSunshine button on cobalt. Cobalt button on white. Ink button as secondary.
✕ Don’tWhite text on sunshine. Slate text on cobalt. Sunshine text on white. Gradients.
✕ Don’tUse #C3CCFF on cobalt for anything under 18px — labels only.
03

Typography

One family: Rubik (SIL Open Font License), 400–800. Rounded, friendly, very legible at small sizes. Sentence case everywhere. Never all-caps except eyebrows.

AaRubikRegular 400 · Medium 500 · SemiBold 600 · Bold 700 · ExtraBold 800ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 $€£¥ · → ✓
Display / H1clamp(40–72px) · 800 · −0.045em · 0.98
No overhead.
Page titleclamp(36–60px) · 800 · −0.04em
All destinations
H2clamp(30–48px) · 800 · −0.035em
Questions? Good.
H319–22px · 700
Keep your number
Ledeclamp(17–20px) · 400 · 1.55
We skip the big ad budgets and pass the savings to you.
Body16px · 400 · 1.55
Your QR code arrives instantly. Set up at home, connect on landing.
Small / meta14px · 400–600
4G LTE · KDDI / Softbank · 7 days
Eyebrow14px · 600 · +0.1em · uppercase
Why MobiWonder
Price800 · tabular figures
$13.99 · $2.00/day
04

Layout, spacing & shape

Container 1240px with 20px gutters. One breakpoint at 820px: above it, desktop nav and multi-column; below it, burger drawer, two-column cards, single-column everything else. Sizes are fluid with clamp(), so there are very few media queries.

Breakpoints
≤ 480pxCompact header: icon-only My eSIMs, 21px wordmark
≤ 1100pxHeader nav and locale move into the drawer
≤ 820px2-col cards · 1-col content · full-width CTAs · sticky buy bar
≥ 821pxDesktop nav, locale popover, multi-column
Section rhythm
Alternate backgrounds so every section reads as its own card. Never two cobalt sections touching except header + hero.
Spacing scale
4px icon gaps
8px chips, tight stacks
12px inline groups
16px card grid gap
20px page gutter
24px card padding
32px block gaps
48px column gap
96px section padding (max)
Radius
Inputs · 12–14
Big CTA · 16
Panels · 20–24
Cards · 18–28 fluid
Pills · 99
Elevation
Flat + line
cards
Raised
buy box
Pop
menus, search
Sticker
(drop-shadow)
05

Components

The kit every page is built from. Each one exists once in the theme (snippets) and is reused — don’t restyle per page.

Buttons
Select planCheck my phoneEmail usText link
Find my eSIMMy eSIMsSecondary on blue
FocusHoverDisabledSmall
Form fields
Chips, badges, price sticker, segmented tabs
AllAsiaEuropeJapanPopular4G LTECompatibleExpires in 3 daysNew$0.93/day
Notes
Install your eSIM on Wi-Fi before you fly. It switches on when you land.
Each QR code can be installed once. Don’t delete the eSIM until your trip is over.
Destination card
$0.93/dayJapan
4G LTE · 7 days $11.99Select plan
Country row (lists, search)Japanfrom$0.93/daySouth Koreafrom$0.80/dayEurope38 countriesfrom$0.80/day
Plan picker
How many days?
3 days5 days7 days10 days
$13.99$2.00/day
Add to cart
Accordion (FAQ)
How do I install my eSIM after buying?

Open the email we send you, go to Settings › Mobile › Add eSIM, and scan the QR code. It takes about a minute.

Can I keep my WhatsApp number?

Yes. Your usual SIM stays in your phone, so WhatsApp, iMessage and texts keep working.

Table (stacks to cards on mobile)
CountryNetworkTypeAPN
JapanKDDI / Softbank4Gcmhk
CanadaBell / Telus3G/4Gcmlink
Header & mobile drawer
DestinationsWhat’s an eSIM?How it worksRefer a friendHelpEN · $ CADMy eSIMs1
Destinations›
What’s an eSIM?›
How it works›
Redeem eSIM›
My eSIMs›
Help & FAQ›
Find my eSIM
Header rules
  • Sticky, cobalt, always shows My eSIMs + cart.
  • Cart gets a sunshine count badge.
  • ≤1100px: nav and locale move into the bottom-sheet drawer.
  • ≤480px: My eSIMs collapses to a 46px SIM icon (label kept for screen readers).
  • Current page gets a 2px sunshine underline.
Step cards
1

Pick your plan

Choose your destination, days and data. Pay with Shop Pay, Apple Pay or card.

2

Get your QR code

It lands in your inbox in seconds, with install steps for your phone.

3

Scan, land, connect

Add the eSIM at home on Wi-Fi. When you land, turn on data roaming for it.

06

Iconography

One line-icon set, drawn on a 24px grid with a 2px stroke, round caps and joins. Icons inherit text colour. In feature lists they sit in 48px rounded tiles that alternate sunshine and cobalt. Ship as one SVG sprite (snippets/mw-icon.liquid).

search
globe
chev-down
chev-right
chev-left
arrow-right
menu
close
check
plus
minus
cart
user
sim
qr
mail
chat
phone
tablet
laptop
signal
wifi
bolt
tag
shield
refund
clock
calendar
pin
plane
copy
lock
info
alert
gift
heart
star
download
settings
filter
book
card
battery
antenna
external
Feature tiles
07

Spot illustrations

Vector “stickers” for explaining things photos can’t: QR codes, compatibility, help, refunds. Flat cobalt / sunshine / white / ink, a white die-cut outline and the same soft sticker shadow as the photo cut-outs — so photos and drawings live happily in one collage. Use them for steps, empty states, errors and help. Never as a substitute for showing real people.

phone-qr
envelope
globe
chat
devices
?
lifebuoy
?
map
$
refund
gift
tower
eSIM$0
suitcase
sim-cross
✓ DoOne illustration per card or empty state. Keep text in HTML next to it so it translates.
✓ DoMix with photo stickers in collages — same outline, same shadow, same tilt.
✕ Don’tGradients, 3D renders, outlined “corporate Memphis” people, or new colours.
08

Photography

Real people, real places, real light. Every photo should answer “where am I?” or “who is this for?” in under a second. Crop for the job: 4:3 for cards, 4:5 for region tiles, 16:9 or wider for heroes, always leaving calm space for the name and price.

Place you can recogniseMt Fuji says Japan before the headline does.
People doing travel thingsCandid, mid-moment, natural light.
Real life, real agesFamilies, couples, solo, 20s to 70s.
The phone in contextShow connection happening — on a beach, not on a desk.
✕ Generic postcard skylinesEmpty landmark shots with no people feel like stock.
✕ Flags as photosFlags belong in lists, never as a card image.
✕ AI-generated peopleIf it isn’t real, it doesn’t belong on a trust page.
✕ Text baked into imagesIt can’t be translated or read by screen readers.
Card · 4:3, name bottom-left, price top-right
$0.80/dayGreece
Europe plan · 38 countriesSelect plan
Region tile · 4:5 with bottom scrimfrom $1.47/dayAsiaOne eSIM, many countries
Page hero · photo in a rounded frame + stickers
from $0.93/dayKDDI · Softbank
Sourcing. Current images are Unsplash (free commercial licence) — credit list in the asset manifest. Replace with your own photos over time. Anything that says “our team” or “our customer” must be a real person who agreed to it.
09

Stickers & collage

Our signature: photo cut-outs with a white die-cut edge, scattered like stickers on a laptop lid. It’s how a small team makes real photos feel warm and handmade. Lean into humans — “real humans” is the story.

$0 roaming Hi, I’m Maya!
1 · Cut-outRemove the background, keep one subject. Add a 6–10px white die-cut border.
2 · Shadowdrop-shadow(0 12px 18px rgba(20,20,40,.25)). Same on every sticker and illustration.
3 · TiltRotate between −10° and +8°. Never two neighbours at the same angle.
4 · BackplateGroup on a cobalt or sunshine circle so the collage reads as one shape.
5 · Budget3–5 pieces per collage: one hero, one or two supporting, one or two tags/labels.
6 · Position in %Lay out inside an aspect-ratio box with % offsets so it scales as one unit.
Sticker library
✕ NeverPresent a stock person as a team member or customer. The “Hi, I’m Maya” support sticker must be a real MobiWonder person.
10

Flags & country marks

Circle flags (open-source “circle-flags”, MIT) at 24, 32 or 48px with a 1px line ring. They help scanning in lists, search results, cart lines and the plan header. They are labels, not imagery.

✓ Use inCountry lists, search suggestions, cart and order lines, coverage lists, product title chip.
✕ Not asCard photos, hero images, backgrounds, or decoration. Regions get photos, not flag mosaics.
11

Voice & tone

Warm, plain, a little cheeky — the friend who travels a lot and always knows which SIM to get. Short sentences. Specific numbers. Admit limits. Canadian/British spelling (travellers, centre).

✓ We sayNo billboards. No overhead. Just cheaper data.
✕ We don’t sayRevolutionary global connectivity solutions!
✓ We sayYour QR code is in your inbox.
✕ We don’t sayYour digital SIM profile has been provisioned.
✓ We sayIf it won’t connect and we can’t fix it, you get a full refund.
✕ We don’t say100% guaranteed satisfaction!!
✓ We sayData only — keep your number for calls and texts.
✕ We don’t sayUnlimited everything*
✓ We sayMaya from our team replies, day or night.
✕ We don’t sayOur AI-powered support bot is here 24/7.
12

Accessibility & motion

Good for everyone, required for trust. These are acceptance criteria, not nice-to-haves.

ContrastAA minimum everywhere. Slate on white/cloud passes. #C3CCFF on cobalt only ≥18px.
Focus3px sunshine ring, 2px offset, on every interactive element.
Targets44×44px minimum. Pills and icon buttons are 44–46px.
MotionDrawer slides up 280ms (cubic-bezier .2,.8,.2,1). Off when reduced motion is on.
StructureOne H1 per page. Landmarks: header, nav, main, footer. Breadcrumbs as nav.
LanguageAll UI text in locale files (en, fr, es, zh-CN, zh-TW). No text in images.