---
title: "Harvest design system"
variant: extended
source: https://www.getharvest.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/getharvest-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Harvest · Design System

> Warm editorial clarity for work that pays

**Theme:** light · **Industry:** saas · **Source:** https://www.getharvest.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Harvest pairs warm, paper-like surfaces and expressive serif headlines with practical time-tracking and invoicing interface previews. Alternating section backgrounds, customer proof, and restrained orange accents keep a long SaaS homepage approachable and product-focused.

## North star

Build a calm, editorial canvas around clear product evidence, using orange only as a precise brand signal.

## Overview

The visual identity centers on a warm cream canvas (#fbf5f0), softened by white section bands and pale beige cards. Near-black text anchors the page, while orange is used sparingly for the Harvest mark, small interface details, and emphasis rather than as a broad page fill. Large Besley serif headlines give the hero and section introductions an editorial, confident voice; Muoto VAR keeps navigation, explanatory copy, and controls crisp and human. The homepage moves between centered section introductions and left-aligned feature content, with generous breathing room and a measured maximum content width. Product screenshots and UI mockups are framed as evidence of the software, often against warm orange surrounds. Rounded pill controls and soft card corners contrast with thin, low-contrast dividers. Customer quotes and recognizable client marks add credibility without displacing the product from the visual hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Harvest Cream | `#fbf5f0` | `--color-harvest-cream` | brand | Primary page canvas and warm bands behind the hero, feature showcase, customer stories, and closing CTA. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Alternating workflow and integration sections, footer, and clean surfaces around content. |
| Carbon Ink | `#000000` | `--color-carbon-ink` | neutral | High-contrast headings, navigation, and the black primary free-trial button. |
| Quiet Gray | `#8b8b8b` | `--color-quiet-gray` | semantic | Muted supporting copy, footer text, and secondary explanatory labels. |
| Oat Beige | `#f3ebe4` | `--color-oat-beige` | surface | Customer quote cards, inset panels, and subtle borders against the cream canvas. |
| Soft Charcoal | `#1d1e1c` | `--color-soft-charcoal` | neutral | Dark body and control text, including the free-start CTA variant. |
| Paper Edge | `#e4dfda` | `--color-paper-edge` | semantic | Low-contrast footer and control dividers; a supporting hairline, not a defining fill. |
| Harvest Orange | `#fa5d00` | `--color-harvest-orange` | accent | Harvest logo detail, small links, and occasional interface accents; keep usage selective. |
| Button Mist | `#e8e8e8` | `--color-button-mist` | semantic | Subtle button and footer boundaries rather than prominent colored surfaces. |
| Footer Slate | `#626262` | `--color-footer-slate` | semantic | Secondary footer copy and subdued supporting text. |
| Warm Gray | `#757471` | `--color-warm-gray` | semantic | Low-emphasis descriptive copy and tertiary interface text. |
| UI Silver | `#d3d3d3` | `--color-ui-silver` | semantic | Fine borders within software media and controls; not a primary brand color. |
| Plum Ink | `#2c222d` | `--color-plum-ink` | neutral | Dark brown-plum text inside testimonial cards and selected feature links. |
| Navigation Gray | `#6a696a` | `--color-navigation-gray` | semantic | Muted navigation and footer links where emphasis is lower than the main text. |
| Control Gray | `#999999` | `--color-control-gray` | semantic | Minor button outlines and restrained control details. |

### Semantic aliases

`--color-canvas` → `#fbf5f0` (Harvest Cream) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#f3ebe4` (Oat Beige) · `--color-text` → `#000000` (Carbon Ink) · `--color-text-muted` → `#8b8b8b` (Quiet Gray) · `--color-text-subtle` → `#1d1e1c` (Soft Charcoal) · `--color-border` → `#f3ebe4` (Oat Beige) · `--color-accent` → `#fa5d00` (Harvest Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fbf5f0` | 19.42:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f3ebe4` | 17.81:1 | AAA |
| `#8b8b8b` | `#fbf5f0` | 3.15:1 | AA-large |
| `#8b8b8b` | `#ffffff` | 3.41:1 | AA-large |
| `#8b8b8b` | `#f3ebe4` | 2.89:1 | fail |
| `#1d1e1c` | `#fbf5f0` | 15.48:1 | AAA |
| `#1d1e1c` | `#ffffff` | 16.74:1 | AAA |
| `#1d1e1c` | `#f3ebe4` | 14.2:1 | AAA |
| `#fa5d00` | `#fbf5f0` | 2.93:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Muoto VAR | `--font-body` | webfont | 400, 500, 700 | Navigation, body copy, labels, buttons, and compact feature headings. | Inter |
| Besley | `--font-display` | webfont | 400 | Display and large page-section headlines, including the hero statement. | Lora |

- **Muoto VAR:** Measured weights 400, 500, and 700; compact negative tracking, clear sentence case, and restrained medium-weight controls.
- **Besley:** Measured regular weight; editorial serif with tight negative tracking and open, readable leading.

### Type scale — Perfect Fourth (ratio ≈ 1.343, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 70px | 400 | 1.1 | -0.04em | — | Besley | Primary oversized hero statement. |
| h1 | 67px | 400 | 1.1 | -0.04em | — | Besley | Hero headline and top-level page title. |
| h2 | 50px | 400 | 1.1 | -0.04em | — | Besley | Major section introductions, often centered. |
| h3 | 30px | 400 | 1.3 | -0.04em | — | Muoto VAR | Feature headings and supporting section titles. |
| h4 | 26px | 500 | 1.3 | -0.03em | — | Muoto VAR | Smaller card or subsection headings. |
| body | 16px | 400 | 1.5 | -0.02em | — | Muoto VAR | Descriptions, paragraphs, and customer-story copy. |
| caption | 14px | 400 | 1.5 | -0.02em | — | Muoto VAR | Compact labels and secondary interface details. |
| button | 16px | 500 | 1.2 | -0.02em | — | Muoto VAR | Pill-shaped CTAs and action controls. |
| nav | 16px | 400 | 1.5 | -0.02em | — | Muoto VAR | Header navigation and footer navigation links. |
| link | 16px | 400 | 1.5 | -0.02em | — | Muoto VAR | Inline feature and supporting navigation links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 5, 6, 7, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 56, 60 px.
- Section rhythm 100px · element gap 24px · card padding 28px · max content width 1257px.

Use a centered content frame capped at the measured 1257px maximum width, with generous side breathing room. The hero is a two-column composition: centered copy and signup form beside a large product preview. Alternate full-width cream and white bands; center major section headings, then use left-aligned feature content and card grids beneath. The measured section rhythm is spacious, with a 100px section gap and 24px element gap as the system anchors. Keep content density moderate and let screenshots, testimonial cards, and customer marks carry proof.

## Shape & elevation

- Radius: button `9999px` · input `16px` · card `20px` · media `20px` · nav `9999px` · xs `10px` · sm `16px` · md `20px` · pill `9999px`
- Shadow `md` (nav): `rgba(0, 0, 0, 0.08) 0px 4px 16px 0px, rgba(0, 0, 0, 0.06) 0px 1px 3px 0px`
- Shadow `md-2` (card): `rgba(123, 85, 31, 0.21) 0px 4px 9.9px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The page is mostly flat, relying on cream and white bands, pale card fills, and fine low-contrast borders to separate content. Use restrained soft shadows beneath the floating pill navigation and selected cards, matching the measured subtle depth. Rounded panels layer over warm backdrops for screenshots; avoid heavy outlines or dramatic elevation.

## Imagery

Prioritize Harvest product-interface screenshots and realistic software mockups over lifestyle photography. Show timesheets, invoicing, reporting, and mobile views in clear, framed panels; warm orange surrounds appear around selected previews. Customer-story cards use restrained brand marks and quote text. Third-party logos and payment or integration marks belong inside their feature panels as product context, not as core brand colors.

## Components

### Floating navigation

White pill-shaped header on the cream canvas, with Harvest mark, muted links, outlined contact action, and black free-trial CTA; use subtle shadow.

### Hero signup

Editorial serif headline and centered supporting copy beside a product preview; combine rounded email entry and black pill CTA with short trust notes.

### Product preview

Show a legible software interface inside a softly rounded frame, sometimes set against a warm orange backing panel.

### Workflow features

Use compact icon-led columns with concise titles, short copy, and links on the white band.

### Customer proof cards

Pale beige rounded quote cards pair client identity, industry details, and testimonial copy with understated typography.

### Primary CTA

Black pill button with white medium-weight Muoto text; keep orange out of the main action fill.

### Footer

White surface with Harvest mark, grouped small navigation columns, a product promotion card, and fine muted legal links.

### Measured component styles

- **Primary button** (“Try Harvest free”): background #000000 · text #ffffff · radius 30px · padding 8px 20px · 500 17px Muoto VAR
- **Secondary button** (“Get started for free”): background #1d1e1c · text #ffffff · radius 30px · padding 0px 24px · 500 17px Muoto VAR
- **Link** (“Track Log hours your way, on any device ”): transparent background · text #2c222d · radius 0px · padding 0px · 400 16px Muoto VAR
- **Input**: transparent background · text #1d1e1c · radius 16px · padding 0px · 500 19px Muoto VAR
- **Card** (“FARRYNHEIGHT INDUSTRY Creative services ”): background #f3ebe4 · text #2c222d · radius 20px · padding 30px 20px 30px 30px · 400 16px Muoto VAR
- **Navigation item** (“Home”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Muoto VAR

## Do

- Keep the cream canvas as the defining page color.
- Use Besley for large editorial headlines and Muoto for interface text.
- Alternate cream and white section bands in a calm rhythm.
- Show real product-interface details as the primary visual evidence.
- Reserve orange for small brand and interface accents.
- Make the free-trial action a high-contrast black pill.
- Use pale beige cards and subtle dividers for supporting content.

## Don't

- Do not turn orange into a full-page or dominant section fill.
- Do not replace the serif headline voice with generic all-sans typography.
- Do not crowd the hero or section introductions with excess copy.
- Do not use heavy borders or dramatic shadows on every card.
- Do not make product screenshots too small to read as software.
- Do not treat colors inside customer or product imagery as brand palette.
- Do not make every section a dense card grid.

## Agent prompt

Create a new Harvest-style SaaS page with a warm, editorial, product-led feel. Use Harvest Cream (#fbf5f0) as the primary canvas and Gallery White (#ffffff) for alternating bands; use Carbon Ink (#000000) for headlines and primary actions, with Oat Beige (#f3ebe4) for quiet cards and Harvest Orange (#fa5d00) only for precise accents. Set major headlines in Besley or a close serif substitute and all navigation, body copy, and controls in Muoto VAR or Inter. Build a clear centered content frame with generous breathing room, alternating centered introductions and practical feature layouts. Show product UI in softly rounded panels, add restrained shadows and hairlines, and make the main CTA a black pill. Keep trust evidence visible but secondary.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Cream canvas with floating pill navigation, two-column hero, centered signup copy, product preview, and client-logo row. | Email signup, Free-trial CTA, Trust-note checklist, Client logos | Serif headline, Black pill button, Rounded product frame, Orange brand accents |
| 2 | feature-grid | White band with a left-aligned section title and a row of icon-led workflow summaries. | Browse workflow features, Feature links | Small line illustrations, Compact columns, Plain text links |
| 3 | product-showcase | Cream band with centered heading, horizontal feature-category navigation, and a text-plus-interface showcase. | Switch feature categories, Review feature details | Tabbed category strip, Product UI mockup, Warm inset surface |
| 4 | integrations | White band with centered heading above a multi-column grid of product capabilities, integration marks, and payment options. | Explore connected capabilities, Review payment options | Feature cards, Integration logos, Soft media panels |
| 5 | testimonials | Cream band with centered title, four metrics, and a horizontally browsable row of quote cards. | Browse customer stories, Book a call | Stat row, Pale testimonial cards, Carousel controls |
| 6 | cta | Wide cream-band CTA panel with a warm framed product image, copy and action on the left, and device previews on the right. | Start free trial, Choose desktop or mobile app | Large serif title, Black pill CTA, Orange-framed product preview |
| 7 | footer | White footer with brand mark, grouped link columns, a product promotion panel, and a compact legal row. | Navigate site categories, Open product promotion, Access legal information | Grouped text links, Promo card, Fine divider, Social icons |

## Source CSS custom properties (selected)

```css
--text-nav: #6a696a;
--text-secondary: #8b8b8b;
--text-body-dark: #2c222d;
--surface-page: #fbf5f0;
--surface-section: #fbf5f0;
--surface-card: #fbf5f0;
--surface-card-alt: #fff;
--surface-subcard: #f3ebe4;
--surface-faq: #fff;
--border-card: rgba(29,30,28,.1);
--font-besley: "Besley",Georgia,"Times New Roman",serif;
--font-muoto: "Muoto VAR","MuotoWeb","Helvetica Neue",Helvetica,Arial,sans-serif;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--radius-card: 20px;
--radius-pill: 30px;
--radius-button: 30px;
--radius-full: 50%;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/getharvest-com