# Perk — Design System
> An intelligent travel and spend management platform for modern teams.
- **Canonical:** https://uiuxskills.com/library/perk
- **Source:** https://www.perk.com/
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:46.954Z

---

---
version: alpha
name: Perk
description: An intelligent travel and spend management platform for modern teams.
tone: >-
  Professional, efficient, and direct. The tone is authoritative yet helpful, focusing on removing
  friction from complex business processes.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-container: "#F4F4F4"
  on-surface: "#1A1A1A"
  on-primary: "#FFFFFF"
  neutral-60: "#666666"
  neutral-80: "#333333"
  error: "#D32F2F"
  success: "#388E3C"
  focus-ring: "#000000"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.neutral-80}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.neutral-80}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.neutral-80}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.neutral-60}"
  badge:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.full}"
  divider:
    backgroundColor: "{colors.neutral-80}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Perk is a high-efficiency platform designed for enterprise travel and expense management. Its visual identity is defined by a bold, high-contrast aesthetic that prioritizes clarity, speed, and professional reliability.

## Colors

The color strategy relies on a stark, monochromatic foundation to ensure maximum readability and a professional, enterprise-grade feel.

*   Primary (#000000): The core brand color used for primary actions and identity.
*   Surface (#FFFFFF): The primary background color for all application interfaces.
*   Surface-container (inferred) (#F4F4F4): Used for section backgrounds and card containers.
*   On-surface (#1A1A1A): The primary text color for high-contrast readability.
*   On-primary (inferred) (#FFFFFF): The text color for elements placed on primary-colored backgrounds.
*   Neutral-60 (#666666): Secondary text color for labels and metadata.
*   Neutral-80 (#333333): Used for borders, structural dividers, and secondary interactive states.
*   Error (inferred) (#D32F2F): Semantic color reserved for critical alerts and destructive actions.
*   Success (inferred) (#388E3C): Semantic color for positive status indicators.
*   Focus-ring (inferred) (#000000): High-contrast ring for accessibility and keyboard navigation.

## Typography

The typography system utilizes a clean, sans-serif family to maintain a direct and authoritative tone.

*   Display-lg (inferred), Display-md (inferred): Used for high-impact hero headlines.
*   Headline-lg (inferred), Headline-md (inferred), Headline-sm: Used for section titles and sub-headers.
*   Body-md: The standard weight and size for all paragraph text.
*   Label-sm: Used for small UI labels, metadata, and button text.

## Layout

The layout follows a 1300px max-width container with a responsive gutter system. A 4px base unit governs all spacing, ensuring consistent rhythm across the interface. The section order typically follows: nav, hero, social-proof, features, and footer. The hero pattern centers the headline and subhead, flanked by dual primary CTAs and a product-focused image. On mobile, the navigation collapses into a drawer to maintain focus on content.

## Elevation & Depth

Depth is used sparingly to maintain a flat, clean aesthetic. Subtle shadows are applied to distinguish interactive elements from the background.

*   Elevation.sm (inferred): Subtle lift for small UI elements.
*   Elevation.md (inferred): Standard card lift for interactive containers.
*   Elevation.lg (inferred): Pronounced shadow for modals, drawers, or floating overlays.

## Shapes

The shape language balances structural rigidity with approachable action elements. Structural components like cards and input fields utilize a subtle radius, while interactive elements like buttons and badges are fully rounded to signal their purpose.

*   Rounded.sm: Used for input fields and small badges.
*   Rounded.md: Used for cards and structural containers.
*   Rounded.full: Used exclusively for action buttons and status badges.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for the background and `{rounded.full}` for the shape. Use primary buttons for main actions and secondary buttons (transparent background with `{colors.primary}` border) for alternative actions.

### Card
Cards utilize `{colors.surface}` as a background and `{rounded.md}` for corners. Apply `{elevation.md}` to cards that require visual separation from the background.

### Input Field
Input fields feature a `{colors.neutral-80}` border and `{rounded.sm}` corners. Upon focus, the border must transition to `{colors.primary}` to provide clear feedback.

### Badge
Badges use `{rounded.full}` to differentiate them from standard text. Use `{colors.surface-container}` for neutral status, `{colors.success}` for positive outcomes, and `{colors.error}` for alerts.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.error}` for non-destructive actions. |
| Apply `{typography.body-md}` for all body copy. | Avoid mixing `{typography.headline-lg}` with body text styles. |
| Use `{rounded.full}` for all action buttons. | Do not use `{rounded.sm}` on primary buttons. |
| Maintain `{spacing.2xl}` between major sections. | Do not exceed `{spacing.2xl}` for standard section margins. |
| Use `{colors.neutral-80}` for all structural dividers. | Avoid using `{colors.surface-container}` as a background for primary text. |
| Apply `{elevation.md}` to elevated cards. | Never remove the `{colors.focus-ring}` from interactive elements. |
| Use `{colors.primary}` for focus states. | Do not use low-contrast colors for text on `{colors.surface-container}`. |
| Use `{typography.label-sm}` for button labels. | Do not use decorative fonts for UI labels. |

## Content Style

CTA labels must be action-oriented and use imperative verbs (e.g., "Book a demo," "Learn more"). Keep labels concise to maintain the platform's efficient tone.

Headings should be benefit-driven, clear, and declarative. Avoid marketing fluff; focus on the specific value the feature provides to the user.

Copy density should be kept low. Use short, scannable paragraphs and frequent bullet points to explain complex workflows. Maintain generous whitespace between blocks to emphasize the platform's "no-friction" philosophy.

## Imagery & Icons

The brand uses a mixed treatment of clean product UI screenshots and minimalist illustrations to explain complex workflows. Imagery should be high-resolution and maintain a professional, neutral color palette that complements the `{colors.surface}` and `{colors.primary}` brand colors. Avoid overly stylized or decorative photography; prioritize images that provide functional context.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Perk, a minimal enterprise travel and spend management platform. Match its professional, friction-free tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its YAML token name — `{colors.primary}`, `{spacing.lg}`, `{rounded.full}` — never hardcode hex values, px sizes, or font sizes.
2. Respect all component definitions under `components:` exactly. Do not invent variants (e.g. a pill-shaped card, a ghost button with no border) that the spec does not list.
3. Follow the Layout narrative: max-width 1300px container, 4px base unit, `{spacing.2xl}` between major sections, mobile-nav collapses to a drawer.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g. rounded-sm on a button), surface the conflict before proceeding.
5. Tokens annotated "(inferred)" are visual approximations. If an authoritative source (Storybook, theme file, metadata) exists, those values take precedence.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, typography, and elevation value.
- Apply `{rounded.full}` to all action buttons and status badges; `{rounded.md}` to cards; `{rounded.sm}` to input fields and small badges.
- Include hover, focus, and disabled states for every interactive component where the spec defines them.
- Use `{colors.focus-ring}` as a visible focus ring on all interactive elements — never remove it.
- Write CTAs with imperative verbs and keep labels concise per the Content Style section.

**Must NOT:**
- Invent colors, font sizes, radii, or elevation values absent from the spec.
- Use generic utility defaults such as `text-gray-500` or `rounded-md` when a named token exists.
- Use `{colors.error}` for any non-destructive action.
- Add emoji, decorative fonts, filler copy, or marketing language.
- Rewrite existing page copy, button labels, or headings, or alter navigation structure as a side effect of applying tokens.

## When in doubt
- If a value is not in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on those backgrounds, use `{colors.on-surface}`.
- For unspecified breakpoints, apply mobile-first layout with one breakpoint at 768px, consistent with the Layout narrative.
- If torn between two elevation levels, choose the lower one — Perk's aesthetic is intentionally flat.