Design System Inspiration of Cabify
1. Visual Theme & Atmosphere
Cabify is a ride-hailing and mobility company. In its own words: "We were born in Madrid (Spain) in
2011 and have been pioneers in creating a new mobility in Iberoamerica." It operates in six
countries — Spain, Chile, Argentina, Peru, Colombia and Uruguay — and more than 40 cities, connecting
riders, companies and drivers.
The site is friendly and purple: white and pale lavender #f2f2fd surfaces, dark text
#1a1a1c and a blue-grey #5e6088, with Cabify's purple #7145d6 on the main action and
a deep aubergine #1f123f for the driver recruitment button. Buttons are 8px-rounded; headings
use Cabify Ciudad and text Cabify Ciudad Text, faces named for the company.
What makes it worth reading:
- Button tokens with their states.
--cta-primary-bg-color / -hover,
--cta-secondary-bg-color / -hover, --cta-outline-border-color / -hover,
--cta-outline-bg-color-active — plus sizes (--cta-s-height 40px, --cta-m-height 50px).
- Hover lightens. The purple lifts to a lighter
#8a6ee4, the aubergine to #362065.
- A ring on press. Pressing a button adds a 2px ring in a lighter purple.
Primary tasks
- Sign up and ride; book for companies.
- Drive with Cabify; manage a fleet.
2. Color Palette & Roles
Measured with getComputedStyle on cabify.com/es: 240 root custom properties; about 195 are
Cabify's — --color-* 115, --typography-* 28, --transition-* 18, --cta-* 18, --heading-* 16,
spacing, radius and grid groups.
Purple
- Primary (
#7145d6) — --color-action-primary, --cta-primary-bg-color,
--color-state-primary-active.
- Primary hover (
#8a6ee4) — --color-state-primary-hover, --cta-primary-bg-color-hover.
- Ring (
#a697ed) — --color-border-primary, --cta-border-color; the press ring.
- Aubergine (
#1f123f) and its hover #362065 (--color-bodytext-primary).
Text and surfaces
- Foreground (
#1a1a1c) — --color-text-primary.
- Text secondary (
#5e6088) — --color-text-secondary; the most frequent <p> colour.
- Surface (
#f2f2fd) — --color-surface, --cta-secondary-bg-color; hover #dddaf9.
- Subdued (
#f8f8fe) — --color-background-subdued.
- Border (
#dbdce8) — --color-border, --cta-outline-border-color; hover #c0c2d8.
- Canvas (
#ffffff).
3. Typography Rules
Font family
Cabify Ciudad (700) for headings and Cabify Ciudad Text (400, 600, 700) for text, both loaded
(document.fonts). Header text uses a 450 weight.
Scale
Small buttons 14px/700 at 40px; medium buttons 18px/700 at 50px.
4. Component Stylings
Measured after declining cookies ("Rechazar"), focus read under a real Tab key, and a hover counted
only when :hover matched; background-image, text-decoration and pseudo-elements were compared too.
- Primary — Regístrate:
#7145d6, white 14px/700, 8px, 40px. Hover #8a6ee4. Press adds
0 0 0 2px #a697ed. Focus is the browser's auto ring.
- Dark — Conduce con nosotros:
#1f123f, white 18px/700, 8px, 50px. Hover #362065. Press
adds 0 0 0 2px #8a6ee4.
- Header link — the language switch:
#5e6088, turning #7145d6 on hover and press.
Radius
8px on buttons; the radius group holds the rest of the scale.
5. Layout Principles
- Lavender and white bands; purple blocks for key messages (28 purple backgrounds on the page).
- Buttons come in two heights, 40px and 50px.
6. Depth & Elevation
Flat; the only shadow on the measured controls is the press ring.
7. Do's and Don'ts
Do
- Use purple
#7145d6 for the main action and lighten to #8a6ee4 on hover.
- Use lavender
#f2f2fd for surfaces and secondary buttons.
- Add a 2px lighter ring on press.
Don't
- Don't darken on hover; Cabify lightens.
- Don't use pure black text; the ink is
#1a1a1c, secondary #5e6088.
- Don't mix in other brand hues for actions.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. Agent Prompt Guide
Quick Color Reference
#7145d6 purple · #8a6ee4 hover · #a697ed ring · #1f123f aubergine · #1a1a1c ink ·
#5e6088 secondary · #f2f2fd lavender · #dbdce8 border
Example Component Prompts
- "A 40px button,
#7145d6, white 14px/700 Cabify Ciudad Text, 8px radius; hover #8a6ee4; press
adds a 2px #a697ed ring."
- "A 50px aubergine
#1f123f button, 18px/700; hover #362065."
10. Voice & Tone
Not assessed as authored voice.
11. Brand Narrative
Cabify grew from Madrid into Iberoamerican mobility, and its site keeps one idea front and centre —
purple — with lavender surfaces and a typeface named for it. The tokens are explicit about every button's
states, and the states lighten rather than darken.
12. Principles
- Purple is Cabify. One brand colour for action.
- Lighten to respond. Hover lifts the colour.
- Its own letters. Cabify Ciudad for headings and text.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. States
Hover: primary to #8a6ee4, dark to #362065, header link to purple. Press: a 2px ring. Focus: the
browser's ring.
15. Motion & Easing
--cta-transition: background-color, box-shadow and colour over 0.25s ease-out.
Tier 1 sources: https://cabify.com/es (live homepage — 240 root custom properties read via getComputedStyle; Cabify Ciudad and Ciudad Text loaded; three components measured at rest, hover, pressed and focus after declining cookies, captured 2026-09-26); https://cabify.com/es/zz-this-does-not-exist (nonsense-path control — HTTP 404 "¡Página no encontrada!", read 2026-09-26); https://cabify.com/en/about-us (Who we are — "We were born in Madrid (Spain) in 2011", 6 countries, 40+ cities, read 2026-09-26)
