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

# Ambrook · Design System

> Grounded financial tools, told through the people who use them.

**Theme:** light · **Industry:** saas · **Source:** https://ambrook.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._

Ambrook pairs warm, paper-like surfaces and bold display typography with documentary photography of working America. A long, spacious SaaS homepage moves from a calm signup hero through product features and customer stories into a deep evergreen product-and-footer band.

## North star

Keep the interface warm and spacious, and let real people and practical product evidence lead before adding visual decoration.

## Overview

The page is built on a warm off-white canvas (#fdfbf7), with a measured, restrained palette that lets documentary imagery carry much of the colour. A muted golden accent (#e8b672) marks the announcement strip, primary signup buttons, and small calls to action; deep evergreen (#252a23) creates a deliberate contrast for the product story, timeline, final signup, and footer. Typography combines Lateral Display’s compact, weighty headlines with Lateral’s clear sans-serif body and interface text. Headings are centered in the introductory and transition sections, then align with product cards and feature copy as the page becomes more functional. Wide margins and generous vertical pauses separate long sections; content sits within a broad measured page width, with compact grids used for industries, resources, and footer links. Photos show farmers, ranchers, customers, and staff in real settings. Product screens and restrained line illustrations add evidence without displacing the human focus.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Field Paper | `#fdfbf7` | `--color-field-paper` | surface | Primary canvas for the hero, most content sections, navigation, and the light-page reading experience. |
| Harvest Gold | `#e8b672` | `--color-harvest-gold` | accent | Primary CTA fill and announcement-band accent; pair with dark text for clear action emphasis. |
| Weathered Umber | `#60564c` | `--color-weathered-umber` | neutral | Measured body-text colour for subdued, readable copy on light surfaces. |
| Deep Evergreen | `#252a23` | `--color-deep-evergreen` | brand | Inverse section background for product features, setup timeline, final CTA, and footer. |
| Oat Linen | `#f6f2eb` | `--color-oat-linen` | surface | Soft contrasting surface for testimonial and customer cards, and select footer or content blocks. |
| Image Fade Black | `#000000` | `--color-image-fade-black` | semantic | Appears in measured image-overlay gradients; treat as media shading, not a defining page colour. |
| Linen Rule | `#dad1c3` | `--color-linen-rule` | semantic | Subtle hairline border colour for separators and understated component edges. |
| Moss Link | `#434f40` | `--color-moss-link` | brand | Secondary green for text links and occasional dark-green buttons, including webinar actions. |
| Bark Text | `#50463c` | `--color-bark-text` | neutral | Additional measured warm-dark text tone; use sparingly for supporting text where present. |
| Dark Soil | `#211b15` | `--color-dark-soil` | neutral | Very dark text used in navigation, card copy, headings, links, and input text. |
| Soft Marigold | `#f0c891` | `--color-soft-marigold` | accent | Lighter gold used for selected headings and accent details, not the dominant CTA fill. |
| Slate Fade | `#4b4b4a` | `--color-slate-fade` | semantic | Measured in image-overlay gradient data; not a defining interface colour. |
| Charcoal Fade | `#191918` | `--color-charcoal-fade` | semantic | Measured in image-overlay gradient data; reserve for dark media shading rather than UI surfaces. |

### Semantic aliases

`--color-canvas` → `#fdfbf7` (Field Paper) · `--color-surface` → `#252a23` (Deep Evergreen) · `--color-surface-2` → `#f6f2eb` (Oat Linen) · `--color-text` → `#60564c` (Weathered Umber) · `--color-text-muted` → `#fdfbf7` (Field Paper) · `--color-text-subtle` → `#252a23` (Deep Evergreen) · `--color-border` → `#dad1c3` (Linen Rule) · `--color-accent` → `#e8b672` (Harvest Gold) · `--color-accent-2` → `#f0c891` (Soft Marigold) · `--color-on-accent` → `#252a23` (Deep Evergreen)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#60564c` | `#fdfbf7` | 6.93:1 | AA |
| `#60564c` | `#252a23` | 2.05:1 | fail |
| `#60564c` | `#f6f2eb` | 6.42:1 | AA |
| `#fdfbf7` | `#252a23` | 14.17:1 | AAA |
| `#fdfbf7` | `#f6f2eb` | 1.08:1 | fail |
| `#252a23` | `#fdfbf7` | 14.17:1 | AAA |
| `#252a23` | `#f6f2eb` | 13.12:1 | AAA |
| `#e8b672` | `#fdfbf7` | 1.79:1 | fail |
| `#e8b672` | `#252a23` | 7.92:1 | AAA |
| `#e8b672` | `#f6f2eb` | 1.66:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%)`
- `linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 100%), linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.9) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Lateral | `--font-body` | webfont | 400, 500 | Primary sans-serif for body copy, navigation, buttons, captions, links, and eyebrow labels. | Inter |
| Lateral Narrow | `--font-lateral-narrow` | webfont | 500, 400 | Narrow display treatment for selected section headings and compact headline layouts. | Roboto Condensed |
| Lateral Display | `--font-display` | webfont | 400, 500, 700 | Primary display face for the hero and major section headings. | DM Sans |

- **Lateral:** Mostly regular weight, with medium-weight navigation and actions; eyebrow labels are uppercase and tracked.
- **Lateral Narrow:** Medium-weight headings use a compressed silhouette and subtly tight tracking; keep case natural.
- **Lateral Display:** Use measured regular-to-bold weights; large headlines have tight tracking and close line spacing.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 67.5px | 700 | 1 | -0.011em | — | Lateral Display | Largest emphasis headlines and high-impact display moments. |
| h1 | 52.5px | 400 | 1.14 | -0.011em | — | Lateral Display | Hero headline and primary page-level message. |
| h2 | 37.5px | 500 | 1.1 | 0 | — | Lateral Display | Major section headings and centered transitions. |
| h3 | 34px | 500 | 1.4 | -0.009em | — | Lateral Narrow | Feature headings, product-story titles, and prominent card headings. |
| h4 | 30px | 500 | 1.4 | -0.01em | — | Lateral Narrow | Smaller feature headings and nested content titles. |
| body | 15px | 400 | 1.5 | 0 | — | Lateral | Main explanatory copy, card descriptions, and customer story text. |
| caption | 13px | 400 | 1.5 | 0 | — | Lateral | Small supporting labels and image or customer captions. |
| button | 15px | 500 | 1.5 | 0 | — | Lateral | Primary and secondary action labels. |
| nav | 15px | 500 | 1.5 | 0 | — | Lateral | Main navigation links and menu labels. |
| link | 13px | 500 | 1.71 | 0 | — | Lateral | Compact inline calls to action such as story and resource links. |
| eyebrow | 13px | 500 | 1.6 | 0.1em | uppercase | Lateral | Uppercase section labels above headings. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 11, 15, 23, 30, 38, 45, 60, 113 px.
- Section rhythm 90px · element gap 8px · card padding — · max content width 1290px.

The measured page max width is 1290px, with a comfortable density and generous section spacing. The hero centers its headline, copy, and signup form above a broad photographic collage; the following sections alternate centered introductions with compact multi-column content. Product features use larger split or card-like layouts, while customer and resource areas use grids. The long dark product section groups content vertically, then places a light rounded setup panel within it. Preserve generous whitespace between blocks and align repeated content to consistent page edges.

## Shape & elevation

- Radius: button `4px` · input `4px` · card `8px` · nav `4px` · link `4px` · xs `2px` · sm `4px` · md `8px`
- Shadow `xl` (other): `rgba(0, 0, 0, 0.05) 0px 0px 2px 0px, rgba(0, 0, 0, 0.02) 0px 1px 2px 0px, rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.03) 0px 8px 12px 0px, rgba(0, 0, 0, 0.03) 0px 18px 22px 0px, rgba(0, 0, 0`
- Motion: standard transition `0.15s cubic-bezier(0.23, 1, 0.32, 1)` on interactive elements.

The design is mostly flat, using section colour changes, whitespace, and hairline borders rather than strong shadows. Cards are defined by softly contrasting Oat Linen surfaces and rounded corners. Product and testimonial media may layer over backgrounds, while inputs use restrained edges and the measured subtle shadow treatment is not a defining visual feature.

## Imagery

Documentary photography of farmers, ranchers, customers, and support staff is central: wide hero portraits, customer stories, and staff imagery feel candid and place-specific. Product UI screenshots sit alongside feature copy and remain legible against contrasting panels. Hand-drawn industry illustrations appear as a supporting category-navigation device. Keep photos natural, with minimal graphic treatment; use overlays only where text must sit on media.

## Components

### Signup form

A wide email input and Harvest Gold CTA sit together in a restrained outlined field; supporting trial, onboarding, and trust details form a compact row beneath.

### Primary CTA

Use Harvest Gold (#e8b672) with Deep Evergreen (#252a23) text, medium Lateral weight, and the measured small rounded button treatment.

### Industry category grid

A compact multi-column set of hand-drawn line illustrations with short category labels and simple text links on Field Paper.

### Product feature panels

Combine concise feature copy and screenshots or contextual photography; alternate light and dark treatments, using Deep Evergreen for the main product-story band.

### Customer story cards

Pair real customer imagery and short testimonial copy with Oat Linen surfaces, simple metrics, and understated story links.

### Setup timeline

Place a light rounded panel inside the dark section; present three progress stages in a horizontal row with green progress bars and short instructions.

### Footer link columns

Use a Deep Evergreen background, compact uppercase column labels, grouped text links, and the brand wordmark as a strong closing element.

### Measured component styles

- **Primary button** (“Try for Free”): background #e8b672 · text #252a23 · radius 3.75px · padding 0px 15px · 500 15px Lateral
- **Secondary button** (“Watch Webinars”): background #434f40 · text #ffffff · radius 3.75px · padding 0px 15px · 500 15px Lateral
- **Link** (“Read Their Story”): transparent background · text #434f40 · radius 3.75px · padding 0px · 500 13.125px Lateral
- **Input**: transparent background · text #211b15 · radius 3.75px · padding 11.3px 7.5px 11.3px 11.3px · 400 15px Lateral
- **Card** (“$12M in credit secured Josh McKinney Own”): background #f6f2eb · text #211b15 · radius 7.5px · padding 0px · 400 15px Lateral
- **Navigation item** (“Product Industries About Customers Prici”): transparent background · text #211b15 · radius 0px · padding 0px · 400 15px Lateral

## Do

- Use Field Paper (#fdfbf7) as the default canvas.
- Reserve Harvest Gold (#e8b672) for clear actions and small emphasis.
- Use Deep Evergreen (#252a23) for deliberate full-width contrast bands.
- Let documentary customer and industry photography feel natural.
- Pair major headings with generous whitespace and restrained copy.
- Use thin rules and surface contrast instead of heavy card shadows.

## Don't

- Do not replace the warm canvas with stark white across the page.
- Do not turn every section into a dark panel.
- Do not add saturated colours outside the measured palette.
- Do not crowd the hero or collapse the long section rhythm.
- Do not make product screenshots more prominent than their explanation.
- Do not apply decorative gradients as general page backgrounds.

## Agent prompt

Build a new Ambrook-style SaaS page with a warm, editorial agricultural-finance character. Use Field Paper (#fdfbf7) as the main canvas, Dark Soil (#211b15) or Weathered Umber (#60564c) for readable text, and Harvest Gold (#e8b672) for primary actions. Create one clear Deep Evergreen (#252a23) feature band for product evidence or a closing CTA, with Oat Linen (#f6f2eb) cards for contrast. Use a bold, tightly tracked display face for headings and a clean sans-serif for body and controls; keep eyebrow labels small, uppercase, and letter-spaced. Structure the page with a centered introduction, spacious feature blocks, real-world photography, and concise customer proof. Keep borders delicate, shadows quiet, and buttons modestly rounded. Follow measured widths and spacing only; do not invent unsupported token values.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and signup form above a wide, full-bleed human-work photo collage. | email capture, free-trial CTA, trust reassurance | announcement strip, centered display headline, photo collage |
| 2 | logo-cloud | A horizontal trust row with customer logos and centered adoption statement. | social proof | logo row, thin separator |
| 3 | category-nav | Centered introduction above a compact grid of illustrated industry links. | industry discovery, category links | line illustrations, multi-column grid |
| 4 | cta | Centered eyebrow and headline with a single compact action link. | product orientation, get-started link | centered transition block, gold CTA |
| 5 | feature-grid | One wide feature panel followed by two smaller side-by-side panels. | feature discovery, deep-dive links | product screenshot, photo-backed cards, feature grid |
| 6 | cta | Centered customer proof heading and a story-link action. | customer validation, story navigation | eyebrow label, centered heading |
| 7 | testimonials | Wide customer-story area with map imagery and horizontally arranged testimonial cards. | customer proof, testimonial browsing | stat cards, customer portraits, carousel controls |
| 8 | other | Centered heading on a full-width Deep Evergreen band. | section orientation | inverse surface, centered headline |
| 9 | product-showcase | Vertical feature story within a dark band, with copy and product imagery arranged along the page. | feature exploration, free-start links | dark background, product media, alternating feature copy |
| 10 | how-it-works | Centered introduction above a light, rounded three-stage horizontal timeline inside the dark section. | onboarding explanation, step-by-step guidance | progress bars, three-column steps, light inset panel |
| 11 | cta | Centered heading, brief supporting copy, and a compact contact action. | human support reassurance, contact link | light canvas, centered content |
| 12 | team | A row of staff portraits with compact names, roles, and locations. | team introduction | portrait gallery, small captions |
| 13 | feature-split | Two-column support and bookkeeping-service content with imagery beneath each column. | service discovery, webinar action, service inquiry | split content, green buttons, support imagery |
| 14 | feature-grid | Centered heading above four compact resource columns. | resource discovery, learning links | icon-led columns, subtle vertical dividers |
| 15 | cta | Two-column dark CTA area with centered signup content and email capture. | email capture, free-trial CTA, trust reassurance | Deep Evergreen band, gold button, compact benefits row |
| 16 | footer | Multi-column link directory on Deep Evergreen, ending with a large wordmark. | site navigation, support discovery | grouped link columns, inverse palette, brand wordmark |

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