---
name: Gusto
description: "A strong example of a trustworthy, high-end SaaS design that balances classic editorial typography with modern software UI patterns."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1C1C1C"
  secondary: "#535353"
  tertiary: "#0A8080"
  neutral: "#6B6B6B"
  bg-soft: "#F8F5F2"
  line: "rgba(28,28,28,0.12)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  display:
    fontFamily: didone-serif
    fontSize: 42px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.32px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.16px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Simplified payroll, HR, and benefits platform for small and medium-sized businesses.

*The operating system for small business people management*

## Colors

High-contrast, accessible palette balancing a dominant teal accent with warm neutrals for approachability.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1C1C1C`)** — uses `ink` token
- **Secondary text (`#535353`)** — uses `ink-soft` token
- **Accent (`#0A8080`)** — uses `accent` token
- **Muted (`#6B6B6B`)** — uses `muted` token
- **Borders (`rgba(28,28,28,0.12)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** humanist-sans

- Headlines use a high-contrast serif with tight tracking.
- Body text uses a highly legible humanist sans-serif.
- Maintain a consistent 1.5 line-height for all body text.

## Layout

Centered max-width container with 24px gutters on a 12-column grid.

*Rhythm:* Consistent 4px base grid with standard 8px, 16px, 24px, 32px increments.

## Elevation & Depth

- 0px -2px 16px 0px rgba(28, 28, 28, 0.08)
- 0px 12px 24px 0px rgba(28, 28, 28, 0.12)
- 0px 8px 16px 0px rgba(28, 28, 28, 0.08)
- Borders: 1px solid rgba(28,28,28,0.12)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Rounded pill shape with 8px-12px padding, solid teal primary and white-on-teal inverted variants.
- **card:** White background, 8px border-radius, subtle 0.08-0.12 opacity drop shadow.
- **chip:** Small rounded pills for secondary tags or statuses.
- **input:** Clean bordered inputs with subtle shadows on focus.
- **hero:** Centered typography hero with large serif headline, sans-serif sub-copy, and dual action buttons.

## Do's and Don'ts

**Don't:**
- Don't use neon or saturated primary colors — screenshot shows a muted, professional teal.
- Don't use ultra-modern geometric sans-serifs for headlines — screenshot shows a classic serif.
- Don't use sharp, square corners — screenshot shows consistent 8px border radii.
- Don't use harsh drop shadows or 3D effects — screenshot shows subtle, low-opacity elevation.
- Don't use cramped line-heights — screenshot shows a comfortable 1.5 ratio for body text.
- Don't use heavy font weights for body copy — screenshot shows 400 weight as the standard.

---

## System Prompt (paste into AI agent)

```
Gusto is a premium, approachable SaaS platform for HR and payroll. Its design DNA combines a classic, high-contrast serif for headlines with a clean humanist sans-serif for body text, set against a crisp white and warm off-white background. The primary brand color is a professional, muted teal (hex #0A8080), used consistently for key actions and accents. The layout is spacious and centered, utilizing a 12-column grid with 24px gutters and a strict 4px spacing scale. Key design principles include generous white space, subtle elevation via soft shadows, and a reassuring, professional tone. Avoid overly aggressive neon colors, sharp square corners, or cramped typography.
```