Cabify DESIGN.md

Design System Inspiration of Cabify

Overview

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.

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.

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.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

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).

Typography

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.

Layout

• Lavender and white bands; purple blocks for key messages (28 purple backgrounds on the page).
• Buttons come in two heights, 40px and 50px.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

Flat; the only shadow on the measured controls is the press ring.

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)

Components

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.

States

Hover: primary to #8a6ee4, dark to #362065, header link to purple. Press: a 2px ring. Focus: the browser's ring.

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.

Voice & Tone

Not assessed as authored voice.

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."

Governance

Known Gaps

• Contrast, link-header. Text #5e6088 on #00000000 measures 3.50:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.