---
version: alpha
name: TravelPerk
description: "Electric lime punched into warm bone, driven by one heavy grotesque"
colors:
  on-surface-variant: "#44443C"
  on-surface: "#14140F"
  surface: "#F5F5EB"
  outline: "#D2D2C8"
  error: "#D20F46"
  primary: "#BEFF50"
  paper: "#FAFAF5"
  pure-white: "#FFFFFF"
  muted-ink: "#6E6E64"
  stone-border: "#919183"
  dark-card: "#30302A"
  positive: "#007D4B"
  positive-tint: "#D6FFEF"
  negative-tint: "#FDE7ED"
  warning: "#FFBE00"
  accent-orange: "#FF8C5F"
  accent-purple: "#C8A0FF"
  accent-cyan: "#82DCFA"
  accent-pink: "#FAB9FA"
typography:
  mega-display:
    fontFamily: OTSono
    fontSize: 200px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
  display:
    fontFamily: OTSono
    fontSize: 90px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.015em
  h1:
    fontFamily: OTSono
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
  h2:
    fontFamily: OTSono
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
  h3:
    fontFamily: OTSono
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  subheading:
    fontFamily: OTSono
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  lead:
    fontFamily: OTSono
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  body:
    fontFamily: OTSono
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  small:
    fontFamily: OTSono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  caption:
    fontFamily: OTSono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  micro:
    fontFamily: OTSono
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
rounded:
  small-chips-inline: 4px
  inputs-small-controls: 8px
  inset-cards: 18px
  buttons-pills: 26px
  feature-cards: 28px
  full-pill: 9999px
spacing:
  3xs: 4px
  2xs: 8px
  xs: 12px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 64px
---
# TravelPerk — Style Reference
> Electric lime punched into warm bone, driven by one heavy grotesque

**Theme:** light

TravelPerk (now branding as "perk+") runs a warm, near-monochrome canvas — bone and off-white paper carrying near-black ink — then detonates a single hyper-saturated chartreuse (`#BEFF50`) across every action, card, and toggle. That lime is the whole personality: it never dilutes into a tint, never appears as text on light, and always sits under near-black type for maximum contrast punch. Typography is a one-font system: OTSono, a tight modern grotesque, scales from 10px captions to 200px display without ever changing family — hierarchy comes entirely from size and the 400/500 weight step. Shapes are soft and confident: 26–28px rounded rectangles and full pills, no hard corners on anything interactive. The layout is generous and airy — a light editorial surface interrupted by dark product-UI screenshots and lime call-to-action moments, the way a fintech travel dashboard looks when it wants to feel both calm and alive.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Perk Lime | `#BEFF50` | `--brand-perk` | THE signature — primary CTA fill, feature cards, toggles, banner. Always under near-black ink; never used as text on a light surface, never a CTA *text* color. |
| Off-Black | `#14140F` | `--brand-offblack` | Primary ink and dark-surface base. The near-black that reads as "black" everywhere. Text on lime, text on bone. |
| Off-White | `#F5F5EB` | `--brand-offwhite` · `--neutral-90` | Warm bone canvas and secondary-button fill. The page's default paper. |
| Paper | `#FAFAF5` | `--neutral-95` | Slightly lifted off-white for section bands and sunk panels. |
| Pure White | `#FFFFFF` | `--neutral-100` | Cleanest surface — logo-rail strip, inset cards over bone. |
| Muted Ink | `#6E6E64` | `--neutral-60` | Secondary label + helper text (warm gray, not neutral gray). |
| Hairline | `#D2D2C8` | `--neutral-80` | Borders, dividers, disabled fills on light. |
| Stone Border | `#919183` | `--neutral-75` | Stronger warm border where `#D2D2C8` is too faint. |
| Dark Card | `#30302A` | `--dark-card` | Warm charcoal card surface, one step up from off-black. |
| Deep Neutral | `#44443C` | `--neutral-50` | Warm dark tone for muted text/dividers on dark surfaces. |
| Positive | `#007D4B` | `--positive-30` | Success — gains, "on time", positive deltas. |
| Positive Tint | `#D6FFEF` | `--positive-95` | Success background wash. |
| Negative | `#D20F46` | `--negative-40` | Error / negative delta (the reporting "−6.5%" red). |
| Negative Tint | `#FDE7ED` | `--negative-95` | Error background wash. |
| Warning | `#FFBE00` | `--warning-60` · `--brand-yellow` | Caution + amber accent. |
| Accent Orange | `#FF8C5F` | `--brand-orange` | Editorial accent only — illustration/marketing, never a CTA. |
| Accent Purple | `#C8A0FF` | `--brand-purple` | Editorial accent — illustration/data. |
| Accent Cyan | `#82DCFA` | `--brand-cyan` | Editorial accent — illustration/data. |
| Accent Pink | `#FAB9FA` | `--brand-pink` | Editorial accent — illustration/data. |

## Tokens — Typography
### OTSono — the entire system: display, headings, body, UI, captions, in one family · `--font-sono`
- **Substitute:** Neue Haas Grotesk, Founders Grotesk, Aeonik (fallback stack: `-apple-system, "Segoe UI", Helvetica, Arial, sans-serif`)
- **Weights:** 400 (regular), 500 (medium — all headings), 600 (rare emphasis); italics available at 400/500
- **Sizes:** 200px, 90px, 80px, 60px, 40px, 28px, 22px, 18px, 16px, 14px, 12px, 10px
- **Line height:** tight on display (~1.0–1.05), ~1.4–1.5 on body
- **Letter spacing:** near-neutral; large display leans slightly negative for density
- **Role:** One typeface does everything. Hierarchy is a size-and-weight game — headings are 500, body is 400. No serif, no second sans, no mono.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Mega display | 200px | 1.0 | -0.02em | `--text-mega` |
| Display | 80–90px | 1.02 | -0.015em | `--text-display` |
| H1 | 60px | 1.05 | -0.01em | `--text-h1` |
| H2 | 40px | 1.1 | -0.01em | `--text-h2` |
| H3 | 28px | 1.2 | normal | `--text-h3` |
| Subheading | 22px | 1.3 | normal | `--text-subheading` |
| Lead | 18px | 1.45 | normal | `--text-lead` |
| Body | 16px | 1.5 | normal | `--text-body` |
| Small | 14px | 1.45 | normal | `--text-sm` |
| Caption | 12px | 1.4 | normal | `--text-caption` |
| Micro | 10px | 1.4 | normal | `--text-micro` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 3xs | 4px | `--spacing-3xs` |
| 2xs | 8px | `--spacing-2xs` |
| xs | 12px | `--spacing-xs` |
| sm | 16px | `--spacing-sm` |
| md | 24px | `--spacing-md` |
| lg | 40px | `--spacing-lg` |
| xl | 64px | `--spacing-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Small chips / inline | 4px |
| Inputs / small controls | 8px |
| Inset cards | 18px |
| Buttons / pills | 26px |
| Feature cards | 28px |
| Full pill (toggles, badges) | 9999px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Soft float | `rgba(0,0,0,0.08) 0 3px 12px, rgba(0,0,0,0.08) 0 1px 6px, rgba(0,0,0,0.12) 0 0 2px` | `--shadow-soft` |

### Layout
- **Page max-width:** ~1280px contained content on a full-bleed bone canvas
- **Section gap:** generous — 64px+ vertical rhythm between bands
- **Card padding:** 16–24px inside soft cards
- **Element gap:** 12–16px between controls

## Components
### Primary Button — "Book a demo"
**Role:** The single loudest action on the page.
Fill `#BEFF50`, ink `#14140F`, radius 26px, padding `16px 12px 16px 16px`, 16px/400, trailing chevron. No shadow. The lime does all the work — no gradient, no border.

### Secondary Button — "Explore our product"
**Role:** The alternative, quieter action beside the primary.
Fill `#F5F5EB`, ink `#14140F`, radius 26px, no border on light (or 1px `#14140F` outline when it needs edge), 16px/400. Reads as a soft bone pill next to the lime.

### Ghost Button on Dark
**Role:** Secondary action over dark product surfaces.
Transparent fill, `#FFFFFF` ink, 1px `#FFFFFF` border, radius 26px, padding 16px. Inverted twin of the light secondary.

### Nav Link
**Role:** Top-level navigation (Product, Solutions, Customers, Pricing, Integrations).
`#14140F` ink, 16px/400, no underline, generous horizontal spacing. Utility icon buttons (locale, account, menu) sit right-aligned.

### Announcement Banner
**Role:** Full-bleed waitlist / launch strip pinned above the nav.
Fill `#BEFF50`, ink `#14140F` centered, an underlined inline CTA ("Join the waitlist now.") plus a dismiss ×. The lime as an attention bar.

### Feature Card (Lime)
**Role:** Hero product/benefit card.
Fill `#BEFF50`, radius 28px, near-black content. The card *is* the accent — used for the standout moment, sparingly.

### Dark Card
**Role:** Product-screenshot frame / dark content panel.
Fill `#30302A` or `#14140F`, radius 18–28px, light text. Carries the app-UI imagery (Reporting dashboard, mobile itinerary).

### Segmented Toggle
**Role:** In-page mode switch (Automate / Control / Support).
Full-pill track on `#FAFAF5`, active segment fills `#BEFF50` with `#14140F` label; inactive labels muted. Rounded-full, cream-quiet, lime-active.

### Stat / Metric Row
**Role:** Dashboard figures with directional deltas.
Large near-black number in OTSono, small delta chip beside it — `#007D4B` for gains, `#D20F46` for losses. Warm-gray captions above.

### Rating Badge
**Role:** Social-proof star rating ("+2,060 reviews").
Row of filled stars, near-black count, muted context text — sits centered under the hero headline.

### Virtual Card Visual
**Role:** Marketing render of the product's payment card.
Lime `#BEFF50` card face, dark logo + "VIRTUAL / VISA" marks, rounded corners. Turns the brand color into a physical object.

## Do's and Don'ts
### Do
- Keep the lime `#BEFF50` reserved for action and one hero card per view — its power is scarcity.
- Set near-black `#14140F` on every lime surface; it's the only text color that survives that saturation.
- Run headings, body, and UI all in OTSono — change size and step 400→500, never the family.
- Use warm neutrals (`#6E6E64`, `#D2D2C8`, `#F5F5EB`) — they carry a cream cast, not cold gray.
- Let dark cards (`#30302A` / `#14140F`) hold the product screenshots; they anchor the airy light page.

### Don't
- Don't tint or fade the lime, and never use it as text on a light background.
- Don't introduce a second typeface — this is a deliberate one-font identity.
- Don't reach for the accent set (`#FF8C5F`, `#C8A0FF`, `#82DCFA`, `#FAB9FA`) on CTAs — they're illustration-only.
- Don't use hard 0px corners on interactive elements; the system is soft-cornered throughout.
- Don't swap warm neutrals for cold Tailwind grays — the bone warmth is the point.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#F5F5EB` | Warm bone page background |
| 1 | Paper | `#FAFAF5` | Lifted section bands / sunk panels |
| 2 | White | `#FFFFFF` | Clean inset cards, logo rail |
| 3 | Accent | `#BEFF50` | Lime action surface / hero card |
| Dark 1 | Dark Card | `#30302A` | Warm charcoal panel |
| Dark 0 | Ink | `#14140F` | Near-black dark surface |

## Elevation
Depth is mostly luminance and warmth, not shadow. The bone canvas steps up to paper, then white, then to floating cards that carry a single very soft float shadow (`rgba(0,0,0,0.08)` at 3px/12px, barely-there). Dark product screenshots read as the deepest layer purely by tonal contrast against the light page. There is exactly one shadow token — everything else is separated by rounded corners and color step, not stacked shadows.

## Imagery
Real product UI, generously framed: laptop and phone renders of the actual dashboard (Reporting, itinerary, virtual card), shown inside soft-cornered dark cards. Marketing accents lean on flat brand-color shapes (orange/purple/cyan/pink) as illustration, never photography-heavy. A monochrome partner-logo rail ("Trusted by 1,000s of global teams") sits on a quiet band. The overall register: clean fintech product screenshots on warm paper, one lime object (the card) as the tactile centerpiece.

## Layout
Full-bleed bone canvas with contained ~1280px content. A full-width lime announcement banner pins above a clean centered nav (wordmark left, links center, actions + utility icons right). The hero is centered — oversized OTSono display headline, rating badge, dual CTA (lime + bone pill), then a large product-UI composition below. A monochrome logo rail separates hero from the sectioned body, which alternates airy light bands with dark product panels and lime moments. Generous vertical rhythm; nothing is cramped.

## Typography Signature
This is a one-font identity, and that constraint is the signature. OTSono — a tight, modern grotesque — does display *and* body *and* UI, so the entire page feels authored by one hand. Hierarchy is expressed only two ways: dramatic size jumps (200px display down to 10px micro) and a single weight step from 400 to 500. Headings never go heavier than medium; the impact comes from scale, not boldness. Because the type is warm-black on bone (not pure black on white), even the largest display headline reads soft rather than harsh — corporate travel software that feels approachable at 200px.

## Agent Prompt Guide
## Quick Color Reference
- background: `#F5F5EB` (bone) / paper `#FAFAF5` · text: `#14140F` / muted `#6E6E64` · surface: `#FFFFFF` · dark surface: `#30302A` / `#14140F` · border: `#D2D2C8` · accent / primary action: `#BEFF50` (near-black `#14140F` text on it) · success `#007D4B` · error `#D20F46`

## Example Component Prompts
1. **Primary CTA button**: Pill button, fill `#BEFF50`, text `#14140F` at 16px/400 OTSono, radius 26px, padding `16px 12px 16px 16px`, trailing chevron, no shadow, no border.
2. **Segmented toggle**: Full-pill track on `#FAFAF5`, three labels (Automate/Control/Support), active segment filled `#BEFF50` with `#14140F` text, inactive labels `#6E6E64`, radius 9999px.
3. **Feature card**: Rounded 28px card filled `#BEFF50`, near-black `#14140F` heading in OTSono 28px/500 and body 16px/400, no shadow — the card is the accent.
4. **Dashboard stat row**: Large `#14140F` OTSono number (~40px), small delta chip beside it — `#007D4B` on `#D6FFEF` for gains, `#D20F46` on `#FDE7ED` for losses, `#6E6E64` caption above.
5. **Announcement banner**: Full-width bar filled `#BEFF50`, centered `#14140F` text at 14px, underlined inline link + right-aligned dismiss ×.

## Similar Brands
- **Monzo** — warm, high-energy fintech that leans on one loud brand color against calm neutrals.
- **Ramp** — corporate spend software with a clean editorial surface and confident single-hue accents.
- **Brex** — dark/light product-UI framing and generous type-driven marketing for finance teams.
- **Linear** — the one-family, size-and-weight typographic discipline and soft-cornered restraint.
- **Cash App** — a single hyper-saturated green used as the entire personality, always paired with near-black.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Brand */
  --brand-perk: #BEFF50;
  --brand-offblack: #14140F;
  --brand-offwhite: #F5F5EB;
  --brand-orange: #FF8C5F;
  --brand-purple: #C8A0FF;
  --brand-cyan: #82DCFA;
  --brand-pink: #FAB9FA;
  --brand-yellow: #FFBE00;

  /* Colors — Warm Neutrals */
  --neutral-50: #44443C;
  --neutral-60: #6E6E64;
  --neutral-70: #838377;
  --neutral-75: #919183;
  --neutral-80: #D2D2C8;
  --neutral-90: #F5F5EB;
  --neutral-95: #FAFAF5;
  --neutral-100: #FFFFFF;
  --dark-card: #30302A;

  /* Colors — Semantic */
  --positive-30: #007D4B;
  --positive-95: #D6FFEF;
  --negative-40: #D20F46;
  --negative-95: #FDE7ED;
  --warning-60: #FFBE00;
  --warning-95: #FFEDB8;

  /* Typography — Family */
  --font-sono: 'OTSono', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Typography — Scale */
  --text-mega: 200px;
  --text-display: 80px;
  --text-h1: 60px;
  --text-h2: 40px;
  --text-h3: 28px;
  --text-subheading: 22px;
  --text-lead: 18px;
  --text-body: 16px;
  --text-sm: 14px;
  --text-caption: 12px;
  --text-micro: 10px;
  --leading-tight: 1.02;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-card-inset: 18px;
  --radius-button: 26px;
  --radius-card: 28px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-soft: 0 3px 12px rgba(0,0,0,0.08), 0 1px 6px rgba(0,0,0,0.08), 0 0 2px rgba(0,0,0,0.12);
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Brand */
  --color-brand-perk: #BEFF50;
  --color-brand-offblack: #14140F;
  --color-brand-offwhite: #F5F5EB;
  --color-brand-orange: #FF8C5F;
  --color-brand-purple: #C8A0FF;
  --color-brand-cyan: #82DCFA;
  --color-brand-pink: #FAB9FA;
  --color-brand-yellow: #FFBE00;

  /* Colors — Warm Neutrals */
  --color-neutral-50: #44443C;
  --color-neutral-60: #6E6E64;
  --color-neutral-70: #838377;
  --color-neutral-75: #919183;
  --color-neutral-80: #D2D2C8;
  --color-neutral-90: #F5F5EB;
  --color-neutral-95: #FAFAF5;
  --color-neutral-100: #FFFFFF;
  --color-dark-card: #30302A;

  /* Colors — Semantic */
  --color-positive-30: #007D4B;
  --color-positive-95: #D6FFEF;
  --color-negative-40: #D20F46;
  --color-negative-95: #FDE7ED;
  --color-warning-60: #FFBE00;
  --color-warning-95: #FFEDB8;

  /* Typography — Family */
  --font-sono: 'OTSono', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Typography — Scale */
  --text-mega: 200px;
  --text-display: 80px;
  --text-h1: 60px;
  --text-h2: 40px;
  --text-h3: 28px;
  --text-subheading: 22px;
  --text-lead: 18px;
  --text-body: 16px;
  --text-sm: 14px;
  --text-caption: 12px;
  --text-micro: 10px;

  /* Spacing */
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-card-inset: 18px;
  --radius-button: 26px;
  --radius-card: 28px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-soft: 0 3px 12px rgba(0,0,0,0.08), 0 1px 6px rgba(0,0,0,0.08), 0 0 2px rgba(0,0,0,0.12);
}
```