A transportation-and-delivery super-app brand whose web surface is a black-and-white duet, framed by a custom geometric display sans, accented by a single signature pill shape (radius 999px) on every interactive element, and decorated only by editorial 4:3 illustrations of riders, drivers, and city objects.
01 / Color Palette
Stark black + white duet, grayscale only. Every primary CTA pill, every dark band, every footer fill is one shade of ink. The system has no second accent — validation cues lean on the editorial illustrations instead of a semantic palette.
The brand does not maintain a separate error / success / warning palette in its public marketing surface. Validation cues come from the primary black or from the brand's editorial illustrations. #0000ee is the system's only chromatic exception.
02 / Typography
Two faces carry the entire system. The display face (substituting Inter 700 for the proprietary geometric display sans) at 32–52 px display sizes with tight 1.22–1.25 line-heights; the text face (Inter 400 / 500) for body, button, link, and small headings. Sentence-case only — never letter-spaced.
04 / Cards & Containers
Cards round to 16 px. Promo cards come in light and dark polarity-flipped variants. The signature alternating-band rhythm — white card, black card, white card, black footer — is the brand's whole depth system.
Default content card chrome — flat, no shadow.
Same chrome plus Level 1 subtle drop shadow.
Gray-tinted sub-region inside a page band.
Reserve your ride up to 30 days ahead. Set a pickup time and lock the price.
Set your hours. Earn on your terms. Polarity-flipped mid-page promo with a white-pill CTA.
Pickup + destination + date/time + black CTA, stacked inside a 16 px shadowed card.
Annual showcase image card — 2:3 desktop, 4:3 mobile. display-xxl headline overlays the bottom.
05 / Forms
Two input variants — a canvas-soft default and a slightly-lighter nested variant for use inside white cards. Inputs sit on canvas-soft surface with flat corners; only the ride-request-form-input-row rounds to 8 px.
06 / Spacing
Base unit 4 px. Sections sit at 32 px gutters; promo-card insets at 24 px; the ride-request form keeps a compact 16 px interior so the form-input rows breathe.
07 / Radius
The pill is the brand's signature interactive shape — 999 px on every interactive element. Cards sit at 16 px. The tab-toggle is the only off-shape exception at 36 px.
08 / Elevation
Four levels. Level 0 (flat) is the default — the brand leans on the hairline-of-canvas contrast and the polarity-flipped black bands for depth, not shadow. Shadow is reserved for the floating pill and the ride-request form card.
09 / Signature
The ride-request form card, the category chip row, the FAQ accordion, the app-download pill, the alternating hero bands (light + dark), and the showcase image card — the components that, taken together, carry the brand even without illustrations.
Request a ride, hop in, and go. Light hero band — display-xxl headline at 52 / 700 on canvas white.
Make the money you need. Set your own hours. Dark hero band — same headline scale, secondary white-pill CTA.
10 / Responsive
Mobile-first breakpoints. Nav stays horizontal until ~1120 px; promo cards collapse from 2-up to 1-up at the mobile boundary; ride-request form scales from a 490-px max-width card to full-bleed edge-to-edge.
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 600 px | Nav collapses to hamburger; promo cards stack; ride-request form full-width. |
| Mobile-Large | 600–767 px | Same as Mobile; chip rows enable horizontal scroll. |
| Tablet | 768–1119 px | 2-up promo grid at upper widths; nav stays horizontal. |
| Desktop | 1120–1135 px | Full nav row visible; promo cards 2-up. |
| Desktop-Large | ≥ 1136 px | Container caps at ~1200 px; bands stay edge-to-edge while content centres. |
Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.
For individuals getting started.
For teams ready to ship.
For organizations operating at scale.