CURATED · OPEN · FREE

Gusto

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

fintechsaas

↓ Download design system (15 MB)Open in OpenDesign

Visit: https://gusto.com

📦 Browse pack contents →

Identity DNA

payrollHRbenefitssmall businesssimplified

The operating system for small business people management

Color

#0A8080Accent

#1C1C1CInk

#535353Ink soft

#FFFFFFBG

#F8F5F2BG soft

#6B6B6BMuted

rgba(28,28,28,0.12)Line

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

Typography

didone-serif · humanist-sans

display56px · 500
display42px · 500
body18px · 400
body16px · 400
body14px · 400

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.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(28,28,28,0.12)

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth 0.2s background-color and color transitions on interactive elements. · Subtle 0.1s ease-out transform on hover states.

Background-color darkens slightly, cursor becomes pointer. · Subtle 0.1s ease-out transform for tactile feedback.

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.

Voice & Don'ts

Tone Professional, approachable, and reassuring.
Headlines Clear, benefit-driven statements with a classic serif authority.
CTAs Direct, action-oriented verbs like 'Create', 'Compare', and 'See'.

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.
Avoid: Jargon-heavy financial terminology
Avoid: Aggressive or overly urgent sales language
Avoid: Cold, impersonal corporate speak

Inside the pack — real screenshots

Gusto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko