Gusto DESIGN.md

Payroll and HR platform with a warm, people-first aesthetic — coral-orange brand accents, generous whitespace, and human-centered data UI.

1. Visual Theme & Atmosphere

Gusto makes payroll feel human. The design rejects the cold blue grids of legacy HR software, instead embracing warmth: a coral-orange brand color, soft shadows, and a conversational, approachable tone. UI surfaces are clean white with subtle structure — nothing feels bureaucratic. Data is displayed with care, not density, ensuring non-technical employees feel as comfortable as payroll admins.

2. Color Palette & Roles

3. Typography Rules

css--font-sans: 'Tiempos Text', 'Georgia', serif;
--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 15px;
--font-size-md: 17px;
--font-size-lg: 22px;
--font-size-xl: 28px;
--font-size-2xl: 36px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-base: 1.6;

4. Component Stylings

css/* Primary Button */
.button-primary {
  background: #F45D48;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.15s;
}
.button-primary:hover { background: #D44030; }

/* Employee Card */
.employee-card {
  background: #FFFFFF;
  border: 1px solid #E2E2EF;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.15s;
}
.employee-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.employee-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FEF0EE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #F45D48;
  flex-shrink: 0;
}

/* Payroll Summary Card */
.payroll-card {
  background: #FFFFFF;
  border: 1px solid #E2E2EF;
  border-radius: 12px;
  padding: 24px;
}
.payroll-card__amount {
  font-size: 36px;
  font-weight: 700;
  color: #1E1E2E;
  font-family: var(--font-ui);
}
.payroll-card__label {
  font-size: 14px;
  color: #9E9EB8;
  margin-top: 4px;
}
.payroll-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
}
.payroll-card__status--paid {
  background: rgba(40,167,69,0.1);
  color: #28A745;
}

/* Status Badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
}

/* Input */
.input {
  border: 1.5px solid #E2E2EF;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 15px;
  font-family: var(--font-ui);
  color: #1E1E2E;
  background: #FFFFFF;
  transition: border-color 0.15s;
}
.input:focus {
  outline: none;
  border-color: #F45D48;
  box-shadow: 0 0 0 3px rgba(244,93,72,0.12);
}

5. Layout Principles

6. Depth & Elevation

css.shadow-card { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.shadow-hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.shadow-modal { box-shadow: 0 16px 48px rgba(0,0,0,0.12); }

7. Do's and Don'ts

Do:

• Use coral orange for all primary CTAs and important highlights
• Keep the layout warm and spacious — HR software users are often non-technical
• Show employee avatars with initials in warm coral when no photo is available
• Use conversational confirmation messages after completing payroll actions

Don't:

• Don't use cold blue or gray-heavy palettes — it contradicts the brand warmth
• Don't display raw tax data without context labels or summaries
• Don't use more than 3 status states for any payroll item

8. Responsive Behavior

9. Agent Prompt Guide

You are designing for Gusto — payroll and HR platform.
Use white backgrounds with coral-orange (#F45D48) as the primary CTA and accent color.
Employee avatars use initial letters on warm coral circular backgrounds.
Payroll cards display large bold dollar amounts with muted labels and pill status badges.
Inputs use coral focus rings; cards have subtle borders and a soft hover shadow.
Typography uses a serif (Tiempos Text) for display, Inter for UI labels.
Tone is warm, human, and reassuring — never cold or bureaucratic.