Identity Guidelines
The system every TrueeSIM page is built from. Two working hues, one accent budget, and a monospace rule that does most of the identifying.
The idea
TrueeSIM should read like a network operator's own site: calm, specific and evidence-led. Each colour has exactly one job, structure is carried by hairlines and surface steps rather than shadows, and every figure a carrier would print on a spec sheet is set in monospace.
- Accent budget
- ≤ 5%
- Working hues
- 2
- Corner radius
- 0
- Structural shadows
- 0
Logo
The mark is the one place Signal Orange survives. It is not a UI colour and the tokens do not drive it.
Symbolism
The mark represents the convergence of connectivity and travel: a signal reaching across a border, resolved into a single square that echoes the geometry of the interface it sits in.
- Minimum size
- 24 × 24 px
- Clear space
- 25% of mark height
- Never
- Rotate, recolour, or place on a busy field
Colour roles
Each colour has one job. A colour used outside its job is a bug. Signal Orange was retired as the UI accent because white on it is 2.83:1 and fails WCAG AA; Digital Teal passes at 4.8:1 and took over action, so "act" and "it worked" never share a colour.
Swatches render through the live token, so they follow the active theme. The ratios quoted are measured against paper in the light theme.
Tech Blue
7.8:1
Structure and trust. Links, active nav, data emphasis, dark surfaces.
--color-brand
Digital Teal
4.8:1
Action. Primary CTA, signal bar, recommended edge. Never above 5% of a viewport.
--color-accent
Status Green
4.9:1
Connection state. Live, connected, succeeded. Never used for actions.
--color-status
Ink
19.6:1
Primary text.
--color-ink
Neutral ramp
Paper
Page canvas
Paper 2
Grouping surface
Paper 3
Inset / well
Paper 4
Pressed / track
Rule
Hairline. Carries structure
Ink 2
Secondary text
Typography
Three faces, each with a fixed role. All display type is roman; italic headings are banned.
Display
Aa
Archivo
600 / 700
All headings. A sturdy institutional grotesque, it reads operator rather than startup.
Body and UI
Aa
Inter
400 / 500 / 600
All prose, labels and controls.
Mono
Aa
JetBrains Mono
400 / 500 / 600
Every telecom figure. The most recognisable thing about this system.
The mono rule
Monospace is reserved for data a carrier would print on a spec sheet, and is used for nothing else. Prose, headings, buttons and navigation are never mono. Every mono numeral runs tabular-nums.
- Prices
- Data amounts
- Durations
- ISO country codes
- Network operators
- Bands and tech (5G, LTE-A)
- ICCID / IMSI
- Order references
- Destination counts
- Dates and percentages
Structure
Hairlines and surface steps do the work that shadows used to. Everything is square except the button, the status dot and the avatar.
The signal bar
A 2px Digital Teal rule marking the one active or recommended thing. It is the app's punctuation mark.
Recommended
Square corners
Cards, panels, inputs and badges meet at right angles. The pill belongs to the button alone.
Motion
Hover changes border and background. It never lifts, and shadows are not structure.
- Fast
- 120ms
- Base
- 200ms
- Slow
- 320ms
Voice
Specific over enthusiastic. We never invent a metric or a testimonial.
Attributes
- Clear and direct
- Explain the technology in terms a traveler already understands.
- Trustworthy
- Prioritise accuracy and transparency. Never invent a metric.
- Helpful
- Focus on solving the customer's problem, not on describing ourselves.
- Global
- Write with international awareness. Assume the reader is abroad.
- Specific
- Name the country, the plan, the number. Specificity is what reads as a carrier.
CTA copy
A verb plus an object. The right-hand column is banned outright.
- Choose a plan
- Get started
- Add data
- Learn more
- See coverage
- Discover
Banned outright
These are the tells that make a site read as templated. None of them appear anywhere in the app, including on this page.
- Text gradients
- Background gradients on surfaces
- Blurred colour blobs
- Glassmorphism and backdrop-blur
- Hover-lift transforms
- Coloured elevation shadows
- Rounded-full cards
- Emoji as UI iconography
- Italic headings
- Fake browser or phone chrome
- Invented metrics and testimonials
- Learn more / Get started