---
version: alpha
name: Car Company
description: Clinical-grade calm — a near-white clinical canvas, charcoal ink, and a single teal accent reserved for status and CTAs. Modern grotesque sans, generous whitespace, low-radius cards, and outline iconography that signal healthcare-logistics infrastructure rather than marketplace flash.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f6f8f8"
  surface-muted: "#eef1f2"
  ink: "#16201f"
  ink-secondary: "#4b5856"
  ink-tertiary: "#7c8785"

  # Teal accent system
  primary: "#0f9b8e"
  primary-hover: "#0c8377"
  primary-soft: "#e2f3f1"
  primary-ink: "#0a5a52"

  # Status
  warning: "#e08a3c"
  danger: "#d4503f"
  success: "#2f9e6f"

  # Borders + lines
  border: "#e2e6e6"
  border-strong: "#cdd3d3"
  divider: "#eef1f2"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "Inter, -apple-system, Segoe UI, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.68px
  section-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.78px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
    borderColor: "{colors.border-strong}"
  badge:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
  tier-tag:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.sm}"
    padding: 4px 10px
---

# Car Company Design System

## Overview

Car Company (carcompany.ai) presents non-emergency medical transportation as clinical infrastructure rather than a ride-hailing marketplace, and its design system is built to earn that trust. The canvas is a clean near-white (`{colors.background}`) broken only by soft gray section bands (`{colors.surface-soft}`), with charcoal ink (`{colors.ink}`) carrying all primary text. The result is a calm, gallery-like clinical surface where information sits in clearly bordered cards and nothing competes for attention except the single teal accent.

That teal (`{colors.primary}`) is the system's discipline. It appears only where the brand wants the eye to land — primary CTAs, the logo mark, status highlights, and soft badge fills (`{colors.primary-soft}`). Everything else stays achromatic, so the accent reads as a deliberate signal of action or safety state rather than decoration. This restraint mirrors the product thesis: patient safety treated as infrastructure, where every credentialed tier and monitoring signal has a defined place.

Typography is a modern grotesque sans (Inter-class) with confident negative tracking at display sizes (`{typography.display-hero}` at -1.68px) that relaxes to neutral at body. Three weights do the work — 400 for reading, 500 for UI and emphasis, 600 for headings and eyebrows. Outline iconography, "Get in touch" CTAs with an arrow-up-right glyph, and generous whitespace complete a tone that is professional, legible, and quietly serious.

Card geometry is low-radius and bordered rather than shadowed. Cards use hairline borders (`{colors.border}`) and modest 12px corners (`{rounded.lg}`), reinforcing the structured, document-like feel of healthcare logistics. Depth comes from surface tinting (white cards on soft-gray bands), not heavy elevation.

**Key Characteristics:**
- Near-white clinical canvas (`{colors.background}`) with charcoal ink (`{colors.ink}`)
- Single teal accent (`{colors.primary}`) reserved for CTAs, status, and badges
- Soft-gray section bands (`{colors.surface-soft}`) for depth instead of shadows
- Inter-class grotesque sans with negative display tracking, three weights (400/500/600)
- Hairline-bordered, low-radius cards (`{rounded.lg}`)
- Outline iconography and arrow-up-right CTA glyphs
- Status palette (warning/danger/success) for clinical state signaling
- Generous whitespace and clear typographic hierarchy

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Page and card surface.
- **Surface Soft** (`{colors.surface-soft}`): Alternating section bands for depth.
- **Surface Muted** (`{colors.surface-muted}`): Tier tags, inert fills.
- **Ink** (`{colors.ink}`): Primary text and headings — charcoal, not pure black.
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy, descriptions.
- **Ink Tertiary** (`{colors.ink-tertiary}`): Captions, muted metadata.

### Teal Accent
- **Primary** (`{colors.primary}`): CTAs, logo, key highlights.
- **Primary Hover** (`{colors.primary-hover}`): CTA hover state.
- **Primary Soft** (`{colors.primary-soft}`): Badge and pill backgrounds.
- **Primary Ink** (`{colors.primary-ink}`): Text on soft teal fills.

### Status
- **Warning** (`{colors.warning}`): Caution states.
- **Danger** (`{colors.danger}`): Error / critical states.
- **Success** (`{colors.success}`): Confirmed / on-track states.

### Borders & Lines
- **Border** (`{colors.border}`): Card outlines, hairlines.
- **Border Strong** (`{colors.border-strong}`): Inputs, secondary buttons.
- **Divider** (`{colors.divider}`): Section separators.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `-apple-system, Segoe UI, sans-serif`
- A neutral grotesque sans chosen for clinical legibility and density tolerance.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline |
| `section-heading` | Major section titles |
| `sub-heading` | Sub-sections, card group headings |
| `card-title` | Feature and tier card titles |
| `body-large` | Lead paragraphs, hero subtitle |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, nav |
| `button-ui` | Buttons, links |
| `caption` | Metadata, badge text |
| `eyebrow` | Uppercase tracked labels above headings |

### Principles
- **Negative tracking at scale**: Display headlines compress to -1.68px; tracking relaxes to neutral by body size.
- **Three weights, strict roles**: 400 (read), 500 (interact), 600 (announce). No 700.
- **Eyebrows for structure**: Small uppercase tracked labels (`{typography.eyebrow}`) introduce sections.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a generous jump to `{spacing.3xl}` (64px) and `{spacing.4xl}` (96px) for section rhythm.

### Grid & Container
- Max content width ~1200px, centered.
- Hero: single-column, left- or center-aligned with large top padding.
- Feature/tier sections: 2–3 column card grids.

### Whitespace Philosophy
- **Clinical calm**: Generous vertical padding between sections; white space is the primary tool for hierarchy.
- **Banding for depth**: Soft-gray bands alternate with white instead of using shadows or color blocks.

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Teal fill, white text, 8px radius. The default CTA.
- **`button-secondary`** — White surface with `{colors.border-strong}` outline.

### Badges & Tags
- **`badge`** — Soft teal pill for status/category highlights.
- **`tier-tag`** — Muted-gray square tag for transport tier labels (sedan, stretcher van, BLS, ALS).

### Cards
- **`card`** — White surface, hairline border, 12px radius.
- **`card-soft`** — Soft-gray fill variant for nested or banded contexts.

### Inputs
- **`input`** — White surface, border-strong outline. Focus switches border to teal (`{colors.primary}`).

### Navigation
- **`nav-bar`** — White sticky header, charcoal links, teal CTA right-aligned, hairline bottom border.

## Do's and Don'ts

### Do
- Reserve teal (`{colors.primary}`) for CTAs, status, and the logo — never decorative fills.
- Use soft-gray bands (`{colors.surface-soft}`) for section depth instead of shadows.
- Keep cards low-radius and hairline-bordered.
- Use `{colors.ink}` (charcoal) for text, not pure black.
- Apply negative tracking to display headlines.

### Don't
- Don't scatter teal across body chrome — it dilutes the safety signal.
- Don't use weight 700 — 600 is the maximum.
- Don't add heavy drop shadows; depth comes from banding and borders.
- Don't introduce competing accent hues alongside teal except defined status colors.

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, tightened padding |
| Tablet | 600–1024px | 2-column grids appear |
| Desktop | 1024–1200px | Full multi-column layout |
| Large Desktop | >1200px | Centered, generous margins |

### Collapsing Strategy
- Hero: 56px headline scales down, maintains negative tracking.
- Navigation: links collapse to hamburger; teal CTA persists.
- Tier/feature cards: 3-column → 2-column → single column.
- Section spacing: 64–96px → ~40px on mobile.

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Teal `{colors.primary}`
- Background: White `{colors.background}`
- Heading text: Charcoal `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- Focus: Teal `{colors.primary}`

### Example Component Prompts
- "Create a hero on white. Headline 56px Inter weight 600, line-height 1.05, letter-spacing -1.68px, color `{colors.ink}`. Subtitle 18px weight 400 in `{colors.ink-secondary}`. Teal CTA button (`{colors.primary}`, 8px radius, 12px 20px padding) with arrow-up-right icon."
- "Design a tier card: white background, hairline `{colors.border}`, 12px radius, 24px padding. Title 20px weight 600. Muted-gray tier tag `{colors.surface-muted}` with `{colors.ink-secondary}` eyebrow text."
- "Build a status badge: `{colors.primary-soft}` background, `{colors.primary-ink}` text, pill radius, 4px 12px padding, 13px weight 500."

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Car Company. Brand names and trademarks belong to their respective owners.