# Liftango Design System

> High-contrast utility meets transit-focused clarity, anchored by a vibrant orange signal and heavy geometric typography.

**Source:** [https://liftango.com](https://liftango.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Liftango utilizes a high-contrast "monochrome plus one" strategy, where a deep slate foundation (`#3a3a48`) and pure white canvas are punctuated exclusively by a high-energy orange (`#ee7334`). The system relies on **Montserrat** for heavy, authoritative display headings (weight 800) and **Roboto** for functional, legible body and UI elements. Layouts are structured with generous vertical rhythm (up to 120px gaps) and a "glass" card motif that uses white borders on transparent or light backgrounds. Interaction design is centered around rounded rectangular buttons with 8px radii, avoiding the pill shapes common in modern SaaS for a more structured, industrial feel.

## Signature DNA
1. **The Signal Orange** (`#ee7334`): Used as the singular chromatic driver for CTAs, text links, and primary brand markers. It provides a 2.9:1 contrast ratio against white, prioritizing brand vibrance over strict WCAG AA compliance for non-text elements.
2. **Heavy Geometric Display**: Headlines use Montserrat-woff at weight 800 with tight line heights (1.2), creating a dense, impactful typographic block that contrasts with the airy Roboto body text.
3. **Glass & Grid Surfaces**: Content is often housed in transparent containers with 1px white borders (`--glass-outline`) or light azure backgrounds (`#eff8f8`), creating a layered effect without heavy drop shadows.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--dark-slate-blue` | `#3a3a48` | Primary text, headings, and dark UI elements | 106 | 1 | Computed Style |
| `--dark-navy` | `#2c2c36` | Deepest text emphasis and footer backgrounds | 33 | 1 | Computed Style |
| `--white` | `#ffffff` | Page background, button text, glass borders | 31 | 1 | Computed Style |
| `--silver` | `#c6c6c6` | Input borders and disabled-state indicators | 27 | 1 | Computed Style |
| `--azure` | `#eff8f8` | Subtle section backgrounds (e.g., "Local Perspective") | 5 | 1 | Computed Style |
| `--dim-grey` | `#737373` | Secondary metadata and footer descriptions | 5 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--orange` | `#ee7334` | Primary CTA background, active links, brand icons | 44 | 1 | Computed Style |
| `--dodger-blue` | `#1378d1` | Functional accent (rarely used in main UI) | <5 | 0.8 | Declared Token |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Montserrat-woff | 700, 800 | Display, Hero Headings | Montserrat | SIL Open Font |
| Roboto | 300, 400, 500, 700 | Body, UI Labels, Buttons | Roboto | Apache 2.0 |
| Icomoon | 400 | Social Icons, UI Glyphs | N/A | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display-lg}` | 36px | 43.2px | normal | 800 | Hero/Section H2 | `h2.heading-large` |
| `{text.display-md}` | 28px | 33.6px | normal | 800 | Secondary H2 | `h2` |
| `{text.display-sm}` | 24px | 28.8px | normal | 800 | Card Headings | `h3.heading-medium` |
| `{text.title-md}` | 20px | 26px | normal | 500 | Intro Paragraphs | `p.text-size-medium` |
| `{text.body-lg}` | 16px | 22.4px | normal | 400 | Standard Body | `p.text-size-regular` |
| `{text.body-md}` | 16px | 20px | normal | 500 | Button/Link Text | `a.arrow-button` |
| `{text.body-sm}` | 14px | 17.5px | normal | 400 | Footer Links | `a.footer-menu-link` |
| `{text.caption}` | 12px | 20px | 1px | 500 | Section Labels | `div.section-subheading` |

### Principles
1. **Heading Density**: Montserrat headings must use weight 800 and a 1.2 line-height ratio to maintain the "heavy geometric" brand signature.
2. **Functional Body**: All long-form reading and interactive labels switch to Roboto for maximum legibility across devices.
3. **Uppercase Labels**: Small section subheadings (`12px`) are tracked out (+1px) to provide clear hierarchy above large headings.

## Spacing
**Base unit:** 4px (inferred)
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 10 |
| `{space.sm}` | 16px | 18 |
| `{space.md}` | 24px | 17 |
| `{space.lg}` | 32px | 10 |
| `{space.xl}` | 80px | 6 |
| `{space.section}` | 120px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, footer | 205 occurrences |
| `{radius.sm}` | 5px | Secondary buttons | `Rounded Button` (observed once) |
| `{radius.md}` | 8px | Primary buttons, cards | `Rounded Button` (observed twice) |
| `{radius.lg}` | 12px | Glass surface containers | `Surface` component |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary action (e.g., "Submit", "Get in touch")
**Pages observed:** pricing, about
**Spec:** Background: `#ee7334` | Text: `#ffffff` | Radius: `8px` | Padding: `8px 40px` | Font: `Roboto 500 16px`
**States observed:** Default | Hover: captured (darker orange)

#### Text Input
**Role:** Lead generation and contact forms
**Pages observed:** pricing, about
**Spec:** Background: `#ffffff` | Border: `1px solid #c6c6c6` | Radius: `7px` | Padding: `7px 14px` | Font: `Roboto 400 14px`
**States observed:** Default | Focus: captured

### Tier 2: Patterns
#### Glass Surface
**Role:** Content grouping on dark or photographic backgrounds
**Pages observed:** home, pricing, about
**Spec:** Background: `rgba(255, 255, 255, 0)` | Border: `1px solid #ffffff` | Radius: `12px` | Padding: `0px`
**States observed:** Default

#### Footer
**Role:** Global site navigation and legal
**Pages observed:** pricing, about
**Spec:** Background: `#f5f5f5` | Border-top: `1px solid #ffffff` | Radius: `0px` | Padding: `32px 32px 64px`
**States observed:** Default

### Tier 3: Surface-specific
#### Feature Card
**Role:** Displaying service types (Public, Corporate, Community Transport)
**Pages observed:** home
**Spec:** Background: `#ffffff` | Border: `2px solid #ffffff` | Radius: `8px` | Padding: `24px` | Shadow: none
**States observed:** Default

#### Azure Section
**Role:** Alternating background for high-density content
**Pages observed:** home
**Spec:** Background: `#eff8f8` | Text: `#3a3a48` | Padding: `80px 120px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Vertical Gap | 80px - 120px |
| Horizontal Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | 1440px | Full horizontal nav; 3-up card grids |
| Mobile | 390px | Hamburger menu; 1-up stacked cards; padding reduced to 16px |

## Imagery & decoration
- **Transit Photography**: Uses high-angle, desaturated cityscapes or bright, high-contrast photos of branded transit vehicles.
- **Network Graphics**: Subtle background patterns of connected nodes and lines (white on azure or grey) to symbolize connectivity.
- **Avoids**: Soft shadows, gradients, and rounded "pill" buttons.

## Do's
- Use `#ee7334` for all primary calls to action.
- Set main headings in **Montserrat 800** with a line-height of 1.2.
- Use the Azure background (`#eff8f8`) to separate white sections.
- Apply an `8px` radius to all primary buttons.
- Use 1px white borders for "glass" containers over dark backgrounds.

## Don'ts
- **Wrong**: Using a pill-shaped (999px) button. **Right**: Use `8px` radius. **Reason**: Liftango uses a structured, geometric UI language.
- **Wrong**: Setting body text in Montserrat. **Right**: Use Roboto. **Reason**: Montserrat's wide geometry is reserved for display impact.
- **Wrong**: Using `#ee7334` for large background areas. **Right**: Use it as an accent. **Reason**: High-saturation orange causes eye strain on large surfaces.

## Quick start

### CSS Custom Properties
```css
:root {
  --orange: #ee7334;
  --dark-slate-blue: #3a3a48;
  --dark-navy: #2c2c36;
  --silver: #c6c6c6;
  --azure: #eff8f8;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --radius-button: 8px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #ee7334;
  --color-surface-dark: #3a3a48;
  --color-surface-muted: #eff8f8;
  --font-display: "Montserrat";
  --font-body: "Roboto";
  --radius-md: 8px;
}
```

## Agent prompt examples
- "Generate a hero section with a background image, a Montserrat 800 heading in #3a3a48, and a primary button using #ee7334 with an 8px corner radius."
- "Create a 3-column grid of cards with white backgrounds, 8px border-radius, and Roboto 400 body text."
- "Design a 'glass' container with a 1px white border and no background for use on a dark image background."

## Known gaps
- **Shadow Tokens**: No drop shadows were observed in the analyzed pages; the system appears to rely entirely on borders and background shifts for depth.
- **Hover States**: Specific hex values for button hover states were not captured in the computed evidence, though visual changes were noted.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://liftango.com | Desktop 1440 | 2026-06-06 |
| Pricing | https://liftango.com/pricing | Desktop 1440 | 2026-06-06 |
| About | https://liftango.com/about | Desktop 1440 | 2026-06-06 |