coderef

Cabify

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…
DownloadRaw
Cabify

Build with the Cabify look.

Palette, type and components from this DESIGN.md, applied to a sample hero.

Palette

At a glance

Website
cabify.com ↗
Theme
light
Typefaces
System
Sections
11
Length
987 words

Add it to your project

Then prompt your agent

Design System · Cabify

Light and dark previews, tokens and a ready-to-use package, generated from this DESIGN.md. No AI involved: the same file always produces the same output.

Generating design system…

DESIGN.md

DownloadRaw
Design tokens (YAML front matter)
name: Cabify
colors:
  primary: '#7145d6'
  primary-hover: '#8a6ee4'
  ring: '#a697ed'
  aubergine: '#1f123f'
  aubergine-hover: '#362065'
  foreground: '#1a1a1c'
  text-secondary: '#5e6088'
  surface: '#f2f2fd'
  surface-hover: '#dddaf9'
  subdued: '#f8f8fe'
  border: '#dbdce8'
  border-hover: '#c0c2d8'
  canvas: '#ffffff'
typography:
  button:
    fontSize: 14px
    fontWeight: 700
    use: 40px button
  button-large:
    fontSize: 18px
    fontWeight: 700
    use: 50px button
rounded:
  md: 8px
components:
  button-primary:
    type: button
    backgroundColor: '#7145d6'
    textColor: '#ffffff'
    rounded: 8px
    height: 40px
    typography: 14px / 700
    hover: '#8a6ee4'
    pressed: 'box-shadow 0 0 0 2px #a697ed'
    use: 'Regístrate in the header — --cta-primary-bg-color, lifting to --cta-primary-bg-color-hover #8a6ee4; press adds a 2px lavender ring. Focus is the browser''s ring.'
    padding: 0px 12px
  button-dark:
    type: button
    backgroundColor: '#1f123f'
    textColor: '#ffffff'
    rounded: 8px
    height: 50px
    typography: 18px / 700
    hover: '#362065'
    pressed: 'box-shadow 0 0 0 2px #8a6ee4'
    use: 'Conduce con nosotros — deep aubergine, lifting to #362065 on hover; press adds a 2px purple ring.'
  link-header:
    type: button
    backgroundColor: transparent
    textColor: '#5e6088'
    rounded: 8px
    height: 40px
    typography: 14px / 450
    hover: 'fg #7145d6'
    pressed: 'fg #7145d6'
    use: 'The language switch (ES) — grey #5e6088 that turns Cabify purple on hover and press.'
omitted:
  - section: spacing
    reason: No verified values in current evidence.
fonts:
  roles:
    display: Cabify Ciudad
    sans: Cabify Ciudad Text

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.

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.

More like Cabify

All brands designs →

Brand names describe the visual style only; coderef is not affiliated with or endorsed by any brand listed. Licenses