Skip to content
DesignMunkDesignMunk Submit a site

Ambrook

ambrook.com
One place for your books, payments, and bottom line.
Finance Software Next.js Homepage Lateral
Share Visit site
ambrook.com DESKTOP · 1440
Ambrook

AI Breakdown

Design export

---
version: alpha
name: Ambrook
description: One place for your books, payments, and bottom line.
colors:
  primary: "#211b15"
  secondary: "#949894"
  tertiary: "#e8b672"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-aimiru-brown: "#2d3c2d"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Lateral Display
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.14
  headline-md:
    fontFamily: Lateral
    fontSize: 41px
    fontWeight: 700
    lineHeight: 1.2
  headline-sm:
    fontFamily: Lateral Narrow
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.49
    letterSpacing: -0.011em
  headline-xs:
    fontFamily: Lateral
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.18
    letterSpacing: 0.064em
  body-md:
    fontFamily: Lateral
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.075em
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 6px
  sm: 16px
  md: 32px
  lg: 56px
  xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#252a23"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    height: 40px
  button-secondary:
    textColor: "#434f40"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Ambrook: Condensed Headlines and Wheat-Gold Primary CTAs

## Overview

Ambrook's UI is straightforward, utilitarian, and warm. It serves small-to-mid-size operators—farms, construction, trucking—so clarity outranks flourish. The tone is serious but approachable: dense, condensed headlines for impact; medium tracking and ample whitespace for readability. Use the wheat-gold accent only for key actions while keeping surfaces bright and text dark for dependable contrast.

## Colors

- **primary (#211b15):** Ink-dark text for headlines and body; default icon and link color in neutral contexts.
- **secondary (#949894):** Subtext, captions, metadata, and muted icons; never on primary actions.
- **tertiary (#e8b672):** Primary accent/CTA background; limited to buttons, badges, and small highlights.
- **neutral (#ffffff):** Page background and card surfaces.
- **border (#e5e7eb):** Dividers, input outlines, card strokes, and table lines.
- **brand-aimiru-brown (#2d3c2d):** Deep brand accent for rare emphasis (tags, small badges) or dark tints over imagery.
- **surface ({colors.neutral}):** Alias of neutral for components that sit on the page.
- **on-surface ({colors.primary}):** Alias of primary for legible text on light surfaces.

## Typography

- Lateral Display (headline-lg 56px/1.14, 700): custom/self-hosted; not freely loaded by agents. Substitutes: Inter (700–900) or Roboto (700) with slightly reduced letter-spacing to emulate density.
- Lateral (headline-md 41px/1.2 700; headline-xs 22px/1.18 500; body-md 16px/1.5 500 with 0.075em tracking): custom/self-hosted. Use Inter (400–700) or Roboto (400–700) as substitutes.
- Lateral Narrow (headline-sm 30px/1.49 500, slight negative tracking): custom/self-hosted. Substitute with Inter (600) or Roboto (500–700) and apply tighter letter-spacing.
- Inter and Roboto: Google-hosted and freely available; recommended fallbacks across sizes for agents building previews or prototypes.

## Layout

Spacing follows a deliberate step pattern: 6/16/32/56/96px. Use 16px inside components, 32px for intra-section rhythm, 56px for section padding, and 96px for major breaks. Content reads best in a centered column with generous gutters; stack sections vertically with md or lg spacing. Lists, feature grids, and testimonials should snap to the 16px internal grid for consistency.

## Elevation & Depth

The system is mostly flat. Use the measured sm shadow for subtle lift on floating elements like sticky navs or input+CTA groups. Larger shadows are none; hierarchy relies on whitespace, the border color (#e5e7eb), and tonal contrast between #ffffff surfaces and #211b15 text. Avoid tinted panels unless supporting imagery requires separation.

## Shapes

Two radii define tone: 4px small for buttons, inputs, and chips; 8px medium for cards and media. Corners are functional and sturdy—avoid circular pills. Images and cards should align radii when adjacent.

## Components

Buttons and cards are the core building blocks.
- Button — primary: 40px height; 12px 16px padding; 4px radius; background #e8b672; text #252a23. Reserve for the main CTA.
- Button — secondary: 40px height; 12px 16px; 4px radius; text #434f40 on neutral background; no fill by default.
- Button — link: text-only in #211b15; 0px radius.
- Card: #ffffff background; #211b15 text; 8px radius; 16px padding; optional sm shadow.

Distinctive components on this page:
### Hero email capture
- Centered input group with a 40px input and adjacent primary button. Border #e5e7eb, 4px corners; sm shadow to lift from hero imagery.
### Industry tiles
- Grid of links (Farming, Ranching, Construction, etc.) styled as quiet cards: 8px radius, 16px padding, primary text, border separators.
### Customer metrics cards
- Large numeric stat (e.g., $12M, 100%) set in headline sizing; supporting label in secondary color; card background #ffffff with 8px radius and border.
### Photo strip gallery
- Row of editorial images beneath the hero, cropped consistently; no visible border; 8px corner on each image when used in cards.
### "What You Get" feature list
- Stacked features with 22–30px headings, 16px body, and link CTAs. Spacing: 16px inside, 32px between items.
### "How to Start" timeline
- Three steps (Today, This Week, End of the Month) in a horizontal or stacked layout; use headline-xs for step titles; connectors handled with the border color.
### Team roster
- Small profile cards with image, name, role, and location; 8px image corners; secondary color for meta.
### Trust badges strip
- Monochrome partner or customer logos in a horizontally scrolling or wrapped row; 16px gaps; subdued to secondary tint.

## Do's and Don'ts

- Do reserve #e8b672 for the primary action; one per view when possible.
- Do keep headlines in the Lateral family (or Inter/Roboto fallback) and maintain sizes: 56px > 41px > 30px > 22px.
- Do use #e5e7eb borders and whitespace for grouping instead of heavy shadows.
- Don't round corners beyond 8px or introduce pill buttons.
- Don't place secondary text in the accent color; use #949894 for metadata and captions.
- Don't mix multiple accent colors; brand-aimiru-brown (#2d3c2d) is for rare emphasis only.

## Agent Prompt Guide

Color quick reference — text: #211b15; background: #ffffff; border: #e5e7eb; accent: #e8b672.

1) Build a hero with email capture
- Background #ffffff, center column 720px. H1 set in "Lateral Display" 56px/1.14 700 (fallback: Inter 700). Subcopy in "Lateral" 16px/1.5 500 with 0.075em tracking. Input: 40px height, 4px radius, 1px border #e5e7eb. Button: 40px height, 12px 16px, 4px radius, background #e8b672, text #252a23. Apply sm shadow: 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, 0.05) 0px 52px 64px 0px.

2) Create a three-feature row
- Section padding 56px. Each card: 8px radius, 16px padding, background #ffffff, 1px border #e5e7eb. Title in "Lateral" 22px/1.18 500; body in "Lateral" 16px/1.5 500; link styled as button-link (#211b15).

3) Build a testimonial metric card
- Card 8px radius, 16px padding. Stat headline in "Lateral Narrow" 30px/1.49 500 (fallback: Inter 600). Label in #949894 16px. CTA link in #211b15. No heavy shadow; rely on border #e5e7eb.

4) Assemble an industry grid
- Four to six tiles, each 8px radius, 16px padding, 1px border #e5e7eb on #ffffff. Tile title in "Lateral" 22px/1.18 500; hover adds subtle background tint (keep text #211b15) and underline on links. Gap between tiles: 32px.

5) Footer columns
- Background #ffffff, 32px vertical rhythm. Column headings in "Lateral" 22px/1.18 500; links in 16px/1.5 500 #211b15; separators in #e5e7eb.

## Similar Brands

- QuickBooks: Also accounting-first with green accents; Ambrook is warmer with wheat-gold CTAs and condensed headlines.
- Xero: Lighter, rounder, and more pastel; Ambrook is sturdier with darker ink and tighter type.
- Stripe: Pristine grids and quiet borders in common; Stripe leans cool/tech, Ambrook leans agricultural/workwear.
- Ramp: High-contrast black/white finance UI; Ambrook trades starkness for warmth and industry imagery.
- Mercury: Minimal and dark-leaning; Ambrook uses brighter surfaces and editorial photography to localize the brand.

More like this

Browse Finance →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 32 minutes ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 32 minutes ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 12 hours ago
polymer.co
Polymer HR & Recruiting
Polymer
Attract and hire great people with a powerful ATS and job board
Homepage · 14 hours ago