--- version: alpha name: Gusto description: A warm, confident payroll platform where a deep teal primary carries all interactive weight, a proprietary rounded sans rules every headline at semibold, and clean white surfaces with gentle card lift give small-business owners a system that feels capable without feeling cold. colors: # Surface / canvas background: "#ffffff" surface: "#f5f2f0" # warm off-white section bands (manifest: theme_color) surface-teal: "#f0f8f7" # very light teal tint — hover wash, feature card bg surface-gradient: "#dff1f5" # was rgb(223,241,245) — bottom of the subtle home gradient # Ink / text ink: "#262626" # near-black primary text ink-soft: "#535353" # secondary copy, subheadings ink-muted: "#767676" # captions, helper text # Brand accent — teal primary: "#0a8080" # the signature CTA teal — buttons, links, active states on-primary: "#ffffff" # white text on teal primary-hover: "#0c9a9a" # lightened teal for hover (from dembrandt hover) primary-container: "#f0f8f7" # was rgba(10,128,128,0.06) — Google format requires hex # Secondary accent — coral accent-coral: "#f45d48" # warm coral / salmon — feature icons, illustrative accents accent-gold: "#997000" # muted amber — feature icon set companion accent-blue: "#005397" # deep navy — feature icon set companion accent-green: "#30a46c" # emerald — feature icon set companion # Semantic success: "#30a46c" warning: "#997000" error: "#f45d48" # Borders border: "#e8e4e0" # warm hairline dividers border-teal: "#0a8080" # teal 1px for outlined secondary buttons # Shadow tints (opaque approximations) shadow-soft: "#1c1c1c" # was rgba(28,28,28,0.08–0.12) — Google format requires hex typography: display-hero: fontFamily: "clearface, -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 56px fontWeight: 600 lineHeight: 1.14 letterSpacing: 0.28px display: fontFamily: "clearface, -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 48px fontWeight: 600 lineHeight: 1.17 letterSpacing: -0.24px heading-section: fontFamily: "clearface, -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 42px fontWeight: 600 lineHeight: 1.19 letterSpacing: -0.55px heading-sub: fontFamily: "clearface, -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 32px fontWeight: 600 lineHeight: 1.25 letterSpacing: -0.29px body-large: fontFamily: "GCentra, -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 19px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "GCentra, -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.32px body-medium: fontFamily: "GCentra, -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.32px nav-link: fontFamily: "GCentra, -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0px button-ui: fontFamily: "GCentra, -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px label: fontFamily: "GCentra, -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 700 lineHeight: 1.5 letterSpacing: 1.04px caption: fontFamily: "GCentra, -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 48px 4xl: 64px 5xl: 80px rounded: none: 0px sm: 4px md: 8px lg: 14px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 12px 24px button-secondary-hover: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 12px 24px button-ghost-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px card-tinted: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 10px 16px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: 4px 10px nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 12px 24px feature-icon: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" rounded: "{rounded.lg}" padding: 12px --- # Gusto Design System ## Overview Gusto's visual system is a masterclass in accessible friendliness — the kind that communicates "we handle your payroll so you don't have to worry" rather than "we are a bank." The canvas is pure white (`{colors.background}`) with warm off-white section bands (`{colors.surface}`) that keep the page from feeling clinical. Against that warmth, a single powerful teal (`{colors.primary}`) carries every interactive moment: the "Create free account" CTA, form focus states, active nav items, icon fills. Teal is not a background color here; it is a verb. The type system pairs two proprietary faces that most users will never notice by name but will absolutely feel. **Clearface** — Gusto's display font — is a rounded, slightly quirky humanist sans used at semibold for all headlines. Its character comes from slightly wider letter-shapes and a warmth that avoids the neutrality of Inter or the coolness of Neue Haas. Body copy and UI strings run in **GCentra**, a friendly geometric with wide apertures and a faint character-spaced quality. Together they deliver what the product promises: professional enough to trust with a W-2, warm enough that signing in on a Tuesday morning does not feel like filing taxes. Depth is handled conservatively. Cards earn a subtle layered shadow (`{colors.shadow-soft}`) that floats them just above the white canvas without drama. Feature-tour screenshots nest inside product frames with their own soft lift. There are no gradients on interactive elements, no glassy surfaces, no bright highlights — just clean separation between canvas and content, brand teal for anything clickable, and coral (`{colors.accent-coral}`) reserved for illustrative feature-icon punctuation. **Key Characteristics:** - Teal (`{colors.primary}`) is the sole interactive accent — all CTAs, links, active states, and focus rings use it exclusively - **Clearface** semibold at weight 600 anchors every headline — the rounded-humanist character signals friendly capability, not fintech austerity - **GCentra** (`{typography.body}`) handles all UI text with a faint 0.32px tracking that keeps small copy readable - Warm off-white section bands (`{colors.surface}`) break up the page without cooling it down - Feature icons use a teal-container / coral / gold / navy / emerald set (`{colors.accent-coral}`, `{colors.accent-gold}`, `{colors.accent-blue}`, `{colors.accent-green}`) — color-coded by product line but never dominating layout - `8px` border-radius (`{rounded.md}`) on all interactive controls — rounded but not bubbly - Subtle card-level shadow (`{colors.shadow-soft}`) at low opacity; no hard ledges, no colored shadows - Primary button is solid teal on white; secondary is teal outline on white — both at identical size and radius for easy pairing - Near-zero negative tracking on large headlines; slight positive tracking on small labels - A barely-there gradient (`{colors.surface-gradient}` → white) anchors the homepage hero, fading upward into the headline ## Colors ### Surface & Canvas - **White** (`{colors.background}`): The primary canvas for all content, cards, and the nav. - **Warm Off-White** (`{colors.surface}`): Section-band tint from the manifest theme color — hospitable, not cold gray. - **Teal Tint** (`{colors.surface-teal}`): Very light teal wash used for feature card backgrounds and button hover states; was an rgba value, flattened to opaque. - **Gradient Foot** (`{colors.surface-gradient}`): The soft aqua tint at the base of the home hero gradient — barely visible, grounds the above-the-fold section. ### Ink / Text - **Near-Black** (`{colors.ink}`): Primary text — `#262626`, not pure black, which softens the overall tone. - **Soft Gray** (`{colors.ink-soft}`): Secondary headings and supporting copy. - **Muted** (`{colors.ink-muted}`): Helper text, captions, and metadata. ### Brand Accent - **Primary Teal** (`{colors.primary}`): The single interactive accent — all CTAs, links, active icons, input focus rings. Never used as a page background. - **Teal Hover** (`{colors.primary-hover}`): The 10% lightened teal for hover states on primary elements. - **Teal Container** (`{colors.primary-container}`): Near-transparent teal wash for badges and feature-icon backgrounds; was rgba — flattened per Google spec. ### Feature Accents (icon system) - **Coral** (`{colors.accent-coral}`): The warmest punctuation — Payroll and HR feature icons. Also serves as the semantic `error` color. - **Amber** (`{colors.accent-gold}`): Benefits / finance feature icons. - **Navy** (`{colors.accent-blue}`): Time tracking and compliance icons. - **Emerald** (`{colors.accent-green}`): Success and positive-action icons. ### Borders & Shadows - **Warm Hairline** (`{colors.border}`): Card edges, input borders, table dividers. - **Teal Border** (`{colors.border-teal}`): The 1px teal stroke on the outlined secondary button. - **Shadow Tint** (`{colors.shadow-soft}`): The near-black base for multi-layer card shadows; was a trio of rgba values — flattened for the Google spec. ## Typography ### Font Family - **Display**: `clearface` (Gusto custom), fallbacks `-apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`. Runs at weight 600 for all headlines. Rounded, slightly wide letterforms. - **UI sans**: `GCentra` (Gusto custom), same fallback stack. Covers all body copy, labels, buttons, captions. A clean geometric with readable apertures. - **OpenType Features**: `"tnum"` (tabular numbers) used in financial data tables — keeps payroll figures column-aligned. ### Hierarchy The full type scale lives in the `typography:` token block. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 56px / 600 / +0.28px — **Clearface** page headline, homepage H1 | | `display` | 48px / 600 / -0.24px — section-level "Payroll, done." callouts | | `heading-section` | 42px / 600 / -0.55px — feature section titles | | `heading-sub` | 32px / 600 / -0.29px — card group headings, comparison headers | | `body-large` | 19px / 400 — **GCentra** lead paragraph under the hero | | `body` | 16px / 400 / +0.32px — standard body and product copy | | `body-medium` | 16px / 500 / +0.32px — emphasized body, feature bullet points | | `nav-link` | 16px / 400 — top navigation labels | | `button-ui` | 16px / 500 — button labels across all variants | | `label` | 13px / 700 / +1.04px — uppercase section labels and overlines | | `caption` | 13px / 400 — metadata, helper text, badge labels | ### Principles - **Clearface speaks, GCentra works**: the proprietary display font gives headlines personality; GCentra keeps the interface legible and neutral. - **Semibold by default for headlines**: weight 600 on Clearface reads as confident without crossing into aggressive. Gusto does not use weight 700 or 800 in marketing copy. - **Track inversely by size**: large Clearface headlines use slight negative or near-zero tracking; small GCentra labels get positive tracking (up to +1.04px) for legibility. - **Tabular figures in financial contexts**: `font-feature-settings: "tnum"` ensures payroll numbers align in tables. ## Layout ### Spacing System The full scale is in the `spacing:` token block. Base unit: 8px. Section-level vertical rhythm opens up to `{spacing.5xl}` (80px); component internals stay compact at `{spacing.md}`–`{spacing.xl}`. ### Grid & Container - Max content width: approximately 1100–1200px, centered - Hero: centered headline + subtext + dual-CTA row + product screenshot below - Feature sections: two-column (copy left, screenshot right) or three-up card grid - Social proof / logo bar: horizontal scroll strip below the fold ### Whitespace Philosophy - **Air is a feature**: generous padding between sections signals the product is easy to navigate, not overwhelming - **Screenshots earn their space**: product UI mockups get breathing room inside soft card frames — they are the proof, not decoration - **Color only for action**: warm neutrals everywhere else preserve teal's authority as the signal of "tap here" ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, warm hairline `{colors.border}` | Section bands, form inputs at rest | | Subtle (Level 1) | `0 -2px 16px rgba(28,28,28,0.08)` | Navigation bar lift | | Card (Level 2) | `0 8px 16px rgba(28,28,28,0.08)` | Feature cards, pricing tables | | Elevated (Level 3) | `0 12px 24px rgba(28,28,28,0.12)` | Product screenshot frames, modals | | Focus Ring | `0 0 0 3px {colors.primary-container}` spread | Input and button focus — teal tint, no harsh ring | **Shadow Philosophy**: Gusto's shadow vocabulary is restrained and neutral — no tinted shadows, no colored glows. Shadows are pure near-black at low opacity, layered for product screenshots that need genuine depth (the Gusto payroll UI mockup uses three layers). The overall effect is a page that reads clean and trustworthy. Shadows do not have a brand personality here; that role belongs entirely to the teal. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `none` | 0px | Dividers, table borders | | `sm` | 4px | Tags, small status chips | | `md` | 8px | Buttons, inputs, modal containers — the dominant interactive radius | | `lg` | 14px | Feature cards, screenshot frames, larger UI containers | | `pill` | 9999px | Rarely used; sign-in badge and cookie-search elements | Gusto's shape system is straightforwardly modern: 8px for interactive, 14px for cards. It avoids both the sharp rectilinearity of enterprise SaaS and the overly-bubbly radius of consumer apps. The result is professional and approachable without trying too hard at either end. ## Components The complete component spec lives in the `components:` token block. ### Button Variants - **`button-primary`** — Solid teal (`{colors.primary}`) fill, white text, 8px radius, 12×24px padding. The site's "Create free account" anchor. On hover, teal lightens to `{colors.primary-hover}`. - **`button-secondary`** — White fill with a 1px teal stroke (`{colors.border-teal}`), teal text. "How Gusto works" style. On hover, fill shifts to the teal container tint (`{colors.primary-container}`). - **`button-ghost`** — White fill, near-black text, no border. Used for low-emphasis nav actions (sign in). On hover, background shifts to `{colors.surface}`. ### Cards - **`card`** — White fill, warm hairline border, 14px radius, layered card shadow. Feature content and pricing tiers live here. - **`card-tinted`** — Warm off-white fill (`{colors.surface}`), same radius. Used on white-background sections to create visual grouping without a border. ### Inputs - **`input`** — White fill, `{colors.border}` hairline, 8px radius, 10×16px padding. **`input-focus`** adds a teal outline ring — controlled by a teal-container box-shadow spread. ### Feature Icons - **`feature-icon`** — Square container at 14px radius, teal-container fill, centered SVG icon in teal or one of the accent colors. Product-line color-coding (coral = Payroll, gold = Benefits, etc.). ### Navigation - **`nav-bar`** — White surface, near-black nav links in GCentra 400, teal for the "Create free account" pill on the right. Gains subtle shadow on scroll. ### Badges - **`badge`** — Teal-container background, teal text, 4px radius, 4×10px padding. Typically labels "New", "Beta", or feature categories. ## Do's and Don'ts ### Do - Use `{colors.primary}` for all interactive elements — CTAs, links, focused inputs, active nav items - Pair a `button-primary` and `button-secondary` as a dual-CTA row on hero and feature sections - Set all marketing headlines in **Clearface** (`{typography.display-hero}`) at weight 600 - Use warm off-white section bands (`{colors.surface}`) between content groups — never cool gray - Apply a multi-layer neutral card shadow (`{colors.shadow-soft}`) to product screenshots and floating cards - Round interactive elements to `{rounded.md}` (8px) and larger containers to `{rounded.lg}` (14px) - Use tabular figures (`"tnum"`) wherever payroll or financial data appears in columns - Reserve coral (`{colors.accent-coral}`) for feature icon fills and semantic error states only ### Don't - Don't use teal (`{colors.primary}`) as a section background or large fill — its authority comes from scarcity - Don't mix Clearface and GCentra within the same UI control — Clearface is headlines only - Don't introduce colored shadows or drop-shadows with hue — shadows here are neutral near-black - Don't add border-radius above 14px (`{rounded.lg}`) on cards — Gusto is not a bubbly consumer product - Don't rely on coral or accent colors for interactive affordances — teal holds that role exclusively - Don't set body copy in Clearface — it is a display-only face; GCentra handles body and UI - Don't use weight 400 for headline Clearface — semibold 600 is the defining call --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <425px | Single column; hero headline scales down; dual CTA stacks vertically | | Mobile | 425–599px | Nav collapses to menu toggle; product screenshots shrink to full-width cards | | Tablet | 600–895px | Two-column layout begins; feature section cards go 2-up | | Desktop | ≥896px | Full layout; 2-col feature rows; centered max-width container | ### Touch Targets - Primary and secondary buttons: ~44px tall with 12px vertical padding — comfortable for thumbs - Nav items carry sufficient horizontal padding; mobile menu items are full-width tap targets ### Collapsing Strategy - **Navigation**: full horizontal bar collapses to a hamburger toggle on mobile; teal CTA button always persists - **Hero**: headline and subtext stay centered; the product screenshot drops below copy - **Feature sections**: two-column copy/screenshot rows stack vertically on tablet and below - **Type**: Clearface display (56px) scales down toward 32–36px on mobile; body GCentra stays 16px ### Image Behavior - Product UI screenshots are contained in rounded card frames (`{rounded.lg}`); they reflow as block elements on mobile rather than breaking layout --- ## Agent Prompt Guide ### Quick Color Reference - Background: White (`{colors.background}`) - Text: Near-Black (`{colors.ink}`) - Brand accent / CTAs: Teal (`{colors.primary}`) - Section bands: Warm Off-White (`{colors.surface}`) - Border: Warm Hairline (`{colors.border}`) - Feature icons: Coral (`{colors.accent-coral}`), Gold (`{colors.accent-gold}`), Navy (`{colors.accent-blue}`), Emerald (`{colors.accent-green}`) ### Example Component Prompts - "Create a Gusto-style hero section on white (`{colors.background}`) with a 56px Clearface semibold headline in near-black (`{colors.ink}`), a 19px GCentra subhead in `{colors.ink-soft}`, and a dual-CTA row: teal filled `button-primary` and teal-outline `button-secondary` side by side, both at `{rounded.md}` with `12px 24px` padding" - "Build a Gusto feature card: white fill (`{colors.background}`), `{rounded.lg}` (14px) radius, `{colors.border}` hairline, layered neutral card shadow `0 8px 16px rgba(28,28,28,0.08)`, 24px internal padding, a feature-icon container in `{colors.primary-container}` at top, and a 32px Clearface 600 heading below it" - "Create a Gusto-style input field: white fill, `{colors.border}` 1px outline, `{rounded.md}` (8px) radius, `10px 16px` padding, GCentra 16px body text; on focus, replace the outline with a 2px teal ring (`{colors.primary}`) plus a `{colors.primary-container}` glow spread" - "Design a Gusto section badge: `{colors.primary-container}` fill, `{colors.primary}` GCentra caption text, `{rounded.sm}` (4px) radius, `4px 10px` padding — used above a section heading as a product-line label" - "Build a Gusto navbar: white background, GCentra 16px nav links in `{colors.ink}` left-center, right-aligned group with a ghost 'Sign in' link and a solid teal `button-primary` 'Create free account'; add a `0 -2px 16px rgba(28,28,28,0.08)` bottom shadow on scroll" - "Create a Gusto pricing row with tabular figures: GCentra body at `{typography.body}` with `font-feature-settings: 'tnum'` so dollar amounts align in columns; surface `{colors.surface}` row background on alternating rows, warm hairline `{colors.border}` between rows" ### Iteration Guide 1. Start on white (`{colors.background}`); add warm off-white bands (`{colors.surface}`) to break up long pages. If you reached for cool gray, warm it. 2. Teal (`{colors.primary}`) is for action only — buttons, links, and focused inputs. If teal appears as a section fill or background wash, pull it back. 3. All headlines use Clearface at weight 600. If the heading is in a sans-serif at weight 700, swap to Clearface 600. 4. GCentra handles body, labels, buttons, and captions. Keep Clearface out of the UI layer. 5. Interactive elements round to `{rounded.md}` (8px); cards and containers to `{rounded.lg}` (14px). If you see sharp corners on buttons or bubbly 24px cards, correct them. 6. Card shadows are neutral near-black, low opacity, multi-layer for screenshots. Never tint a shadow with teal or coral. 7. Feature icons follow the Gusto color set — teal container for generic, coral/gold/navy/emerald for product-line coding. Don't improvise new accent colors. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Gusto. Brand names and trademarks belong to their respective owners.