WaylaBrand guidelinesv2.0
EV charging without the guesswork
- Version
- 2.0 · Jun 2026
- Discipline
- Digital strategy
- Sector
- Mobility
- Prepared by
- Berke Tok
Foundations
A charging network app built around the three questions a driver actually asks: is a charger free, will it fit my car, and how long until I can leave.
1.1Purpose
The face of a Type 2 connector, the plug every driver in the region already recognises. Volt on graphite, legible at a glance from a car seat.
1.2Audience
Who it is for
EV drivers in the Gulf, often reading the screen from a car seat with sun on the glass.
Positioning
For drivers who need the next charger to work. Unlike maps of every plug, Wayla shows what is free, what fits and what it will cost.
1.3Principles
- P1
Live availability on the map
Pins show power and free bays before you tap, so the map is useful at a glance from the driver's seat.
- P2
Connector first
The car is plugged in before anything else is asked, and the session starts on its own once it is detected.
- P3
A session you can leave
Progress follows the driver onto the lock screen, and the receipt arrives itemised the moment charging stops.
Voice
How Wayla sounds in product, support and marketing. One voice; the tone moves with the moment, not the channel.
2.1Traits
Glanceable
One number per screen does the work: kW, minutes or dirhams. Everything else is secondary.
Certain
We only say a charger is free if we know. Otherwise we say when we last checked.
Direct
Verbs first. “Plug in”, “Start”, “Stop”. No marketing on the charging screen.
2.2Say this, not that
- Say
2 of 4 bays free · checked 1 min ago
NotChargers available nearby!
- Say
68% · 22 min to 80%
NotYour car is charging.
- Say
AED 46.40 for 41.2 kWh
NotPayment completed successfully.
2.3House style
- 01Power in kW, energy in kWh
- 02Times as 22 min, never 0:22
- 03Connector names: Type 2, CCS2
Logo
One mark, one wordmark, one horizontal lockup. The mark is drawn on a 48-unit grid and is never redrawn, only scaled.
3.1Lockups
3.2Construction
Construction circles and the 4-unit grid the mark is drawn on.
- Grid
- 48 units, 4-unit subdivisions
- Construction
- 1 circle, radii 21
- Lockup
- Mark 132 : word 362 units wide
- Gap
- 48 units between mark and word
3.3Clear space and size
Shown at true size. Below these the mark fills in and the word loses its counters.
3.4Misuse
Do not stretch or squash
Do not rotate
Do not recolour
Do not outline
Do not add effects
Do not set on low contrast
Colour
Four colours with fixed roles. Values are the source of truth for screen; print is proofed against the CMYK starting points below.
4.1Palette
- PrimaryVolt
- HEX
- #D7FF3F
- RGB
- 215 255 63
- HSL
- 73 100% 62%
- OKLCH
- 94.0% 0.208 121
- CMYK
- 16 0 75 0
- On it
- Graphite
- GroundGraphite
- HEX
- #121412
- RGB
- 18 20 18
- HSL
- 120 5% 7%
- OKLCH
- 18.8% 0.005 145
- CMYK
- 10 0 10 92
- On it
- Paper
- TintFog
- HEX
- #E7EBE2
- RGB
- 231 235 226
- HSL
- 87 18% 90%
- OKLCH
- 93.5% 0.013 126
- CMYK
- 2 0 4 8
- On it
- Graphite
- PaperPaper
- HEX
- #F7F8F3
- RGB
- 247 248 243
- HSL
- 72 26% 96%
- OKLCH
- 97.7% 0.007 116
- CMYK
- 0 0 2 3
- On it
- Graphite
4.2Proportion
Share of a typical surface. Primary is an accent even where it leads.
4.3Tonal scale
Derived from Volt in linear light, for charts, states and illustration. Never for the mark.
- 50FAFFF0
- 100F7FFE5
- 200EFFFCB
- 300E7FFAC
- 400DFFF84
- 500D7FF3F
- 600C5EA39
- 700B0D232
- 80098B52A
- 9007A9220
4.4Contrast
WCAG 2.2 ratios. AA needs 4.5:1 for text, 3:1 for large text and icons.
- Aa17.34:1AAA
- Aa15.32:1AAA
- Aa16.10:1AAA
- Aa1.13:1Fail
- Aa1.08:1Fail
- Aa17.34:1AAA
- Aa1.08:1Fail
- Aa1.05:1Fail
- Aa16.10:1AAA
Typography
Archivo for everything, from display to captions. One family keeps the product and the marketing in the same voice.
5.1Typeface
Archivo
Bold 680 · Regular 400
5.2Scale
Base 16 px, ratio 1.333. Line height tightens as size grows.
- Display67 / 1.08 / -3%EV charging without the guesswork
- Heading 151 / 1.08 / -3%EV charging without the guesswork
- Heading 238 / 1.2 / -1.5%EV charging without the guesswork
- Heading 328 / 1.2 / -1.5%EV charging without the guesswork
- Lead21 / 1.5 / 0%EV charging without the guesswork
- Body16 / 1.5 / 0%A charging network app built around the three questions a driver actually asks: is a charger free, will it fit my car, and how long until I can leave.
- Caption12 / 1.5 / 0%A charging network app built around the three questions a driver actually asks: is a charger free, will it fit my car, and how long until I can leave.
5.3Setting
Sentence case
Headings, buttons and labels. Title case only for product names.
Tabular figures
Every amount, time and count, so columns line up and values do not jump.
60–75 characters
Running text measure. Short labels may run to the edge of their container.
Layout
Two grids and one spacing scale cover every screen. Print uses the same 12 columns on the A-series.
6.1Grid
6.2Spacing
A 4 px base. Components step on 4 and 8; sections on 48 and up.
- space-14 px
- space-28 px
- space-312 px
- space-416 px
- space-524 px
- space-632 px
- space-748 px
- space-864 px
- space-996 px
Interface
The identity carried into the product: tokens first, then the handful of components every screen is made from.
7.1Tokens
- radius.sm
- 7 px
- radius.md
- 14 px
- radius.lg
- 21 px
- focus
- 2 px #D7FF3F · 2 px offset
- elevation.1
- 0 1 2 / 8%
- elevation.2
- 0 12 32 / 14%
- motion.fast
- 160 ms · ease-out
- motion.base
- 240 ms · ease-out
- hit target
- 44 × 44 px
7.2Components
Live components, set in the brand typeface with the tokens above.
7.3In product
Applications
Where the rules meet the world. When something here is not covered, follow the checklist and keep the lockup clear.
8.1In context
8.2Checklist
Before anything ships.
- The lockup is at least 18 px tall on screen and 8 mm in print.
- Clear space around the lockup is at least half the mark’s height on every side.
- Body text is Graphite on Paper: 17.3:1, AAA.
- Volt is not used for body text on Paper (1.1:1); keep it for fills, marks and large type.
- Headings use Archivo; amounts use tabular figures.
- Copy follows the house style in 2.3, starting with “Power in kW, energy in kWh”.