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

# Carrot · Design System

> Bright citrus color meets editorial clarity

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

Carrot’s homepage presents waste-management software through an expansive yellow-green canvas, expressive serif headlines, and practical product imagery. A clear sequence of industry use cases, product features, proof points, and contact prompts makes a long page feel cohesive and direct.

## North star

Keep the bright, continuous canvas and black editorial typography in charge, using imagery as supporting evidence rather than decoration.

## Overview

A continuous bright yellow-green canvas gives the page its defining identity, while black text, rules, and buttons provide sharp contrast and structure. The visual hierarchy pairs Signifier’s refined, lightweight serif display headings with DM Sans for navigation, explanatory copy, and controls. Hero copy sits opposite a stark silhouette on a dotted field; later sections alternate concise text and photography or organize product screenshots into compact grids. Content spans a broad measured maximum width, aligns to consistent left edges, and uses generous vertical separation rather than boxed, card-heavy layouts. The repeated background ties the many use cases, client marks, benefits, testimonial, and footer together. Images and interface mock-ups add detail and varied color, but remain supporting evidence rather than defining the brand palette. Keep controls square, black, and legible; use the muted ochre accent sparingly for secondary links and form details.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Carbon Ink | `#000000` | `--color-carbon-ink` | neutral | Primary text, headings, navigation, fine section rules, dotted motifs, and solid CTA backgrounds. |
| Harvest Gold | `#eecf52` | `--color-harvest-gold` | brand | Measured page canvas across the hero and most content sections; the screenshots also show vivid yellow-green variation. |
| Muted Ochre | `#dbbf4c` | `--color-muted-ochre` | accent | Secondary accent for link and input backgrounds, including case-study and newsletter details. |
| Olive Brown | `#564b1e` | `--color-olive-brown` | accent | Sparse dark accent on measured text and link instances; not a dominant page color. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Button-label contrast and occasional small interface details, rather than a broad page surface. |

### Semantic aliases

`--color-canvas` → `#eecf52` (Harvest Gold) · `--color-text` → `#000000` (Carbon Ink) · `--color-border` → `#000000` (Carbon Ink) · `--color-accent` → `#eecf52` (Harvest Gold) · `--color-accent-2` → `#dbbf4c` (Muted Ochre) · `--color-accent-3` → `#564b1e` (Olive Brown)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#eecf52` | 13.68:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DM Sans | `--font-body` | webfont | 400, 500 | Navigation, body copy, labels, buttons, links, and most section headings. | Inter |
| Signifier | `--font-display` | webfont | 300 | Display and H1 headlines, especially the hero and editorial section titles. | Cormorant Garamond |

- **DM Sans:** Measured weights 400 and 500; clean, untransformed sans with compact explanatory copy and straightforward controls.
- **Signifier:** Measured light weight 300; refined serif contrast, generous scale, and subtly tight tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.377, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 300 | 1.15 | -0.01em | — | Signifier | Oversized editorial statements and prominent display headlines. |
| h1 | 50px | 300 | 1.15 | -0.01em | — | Signifier | Hero headline and primary page-level heading. |
| h2 | 29px | 400 | 1.25 | 0 | — | DM Sans | Main section headings and important content titles. |
| h3 | 24px | 400 | 1.25 | 0 | — | DM Sans | Feature, benefit, and product-item headings. |
| body | 20px | 400 | 1.25 | 0 | — | DM Sans | Explanatory copy, product descriptions, and section paragraphs. |
| caption | 17px | 400 | 1.25 | 0 | — | DM Sans | Small supporting notes, attribution, and privacy text. |
| button | 20px | 400 | 1.4 | 0 | — | DM Sans | Primary and secondary action labels. |
| nav | 20px | 400 | 1.25 | 0 | — | DM Sans | Header navigation and footer navigation labels. |
| link | 20px | 400 | 1.25 | 0 | — | DM Sans | Inline links and case-study actions. |

OpenType features in use: `"liga", "onum"`.

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 9, 10, 12, 14, 16, 24, 32, 40, 48, 120, 198 px.
- Section rhythm 40px · element gap 32px · card padding — · max content width 1360px.

Use a broad measured page maximum of 1360px, with content aligned to consistent left edges and ample side margins. The hero uses two columns: editorial text on the left and a graphic field on the right. Subsequent blocks alternate two-column industry stories with compact three- or four-column product and benefit grids. Separate major bands with thin dark rules and generous vertical gaps; maintain a spacious overall density while allowing the footer to become information-dense. Keep headings left-aligned and avoid floating card layouts.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease` on interactive elements.

The design is predominantly flat: no measured shadow system or radius scale. Use thin black horizontal rules to distinguish major content bands, and square black controls for crisp separation. Product screenshots and photographs provide their own depth and contrast; avoid adding decorative card shadows or rounded containers.

## Imagery

Combine real-world waste and building photography with product-interface screenshots, client logos, and a simple black hero silhouette over a dotted field. Keep images rectangular and clearly framed within their columns; mock-ups may sit on softly contrasting image backdrops. Photography and interface details bring specificity, but should not override the bright page canvas or the black-and-serif identity.

## Components

### Header navigation

A compact top bar with the Carrot wordmark, inline navigation, and black Demo and Log in controls. Keep labels dark and the bar visually integrated with the canvas.

### Hero

Two-column introduction: small sans-serif kicker, large light serif headline, body copy, and a square black contact CTA beside a dotted graphic field.

### Feature tiles

Three- or four-column product and benefit summaries with concise DM Sans titles and copy; product sections pair interface imagery with short explanations.

### Industry story

Two-column case or sector block pairing a left-aligned serif title, explanatory text, and compact action with rectangular contextual photography.

### Case-study proof

A concise performance story with sorting-rate comparison, a dotted graphic, and an ochre-backed case-study link.

### Newsletter form

Footer subscription area with explanatory text, ochre input treatment, black submit button, and a compact privacy-policy note.

### Footer

Dense multi-column link groups for product, company, social, and contact information, ending with the Carrot wordmark.

### Measured component styles

- **Primary button** (“Demo”): background #000000 · text #ffffff · radius 0px · padding 8px 14px 9px 14px · 400 20px DM Sans
- **Link** (“Read the case study”): background #dbbf4c · text #000000 · radius 0px · padding 8px 14px 9px 14px · 400 20px DM Sans
- **Input**: background #dbbf4c · text #000000 · radius 0px · padding 8px 105px 8px 24px · 400 20px DM Sans
- **Navigation item** (“Product Our why About us Contact Demo Lo”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px DM Sans

## Do

- Use the measured Harvest Gold canvas as the unifying page color.
- Set display headlines in a light editorial serif.
- Use DM Sans for navigation, body copy, and controls.
- Keep major content aligned to clear left edges.
- Use black square CTAs for high-contrast actions.
- Show product interfaces and contextual waste imagery as evidence.
- Separate long content runs with fine horizontal rules.

## Don't

- Do not introduce unmeasured colors as brand colors.
- Do not replace the bright canvas with large white panels.
- Do not make every section a rounded card.
- Do not use heavy shadows or decorative gradients.
- Do not center all headings or body copy.
- Do not let mock-up colors redefine the page palette.

## Agent prompt

Build a new Carrot-style SaaS page around a continuous Harvest Gold (#eecf52) canvas, using Carbon Ink (#000000) for typography, rules, and square primary actions. Use Muted Ochre (#dbbf4c) only for secondary link or form emphasis; keep Olive Brown (#564b1e) sparse and Clean White (#ffffff) chiefly for contrast. Pair a light editorial serif such as Signifier for large headlines with DM Sans for navigation, body copy, and controls. Establish a broad, left-aligned content grid, then vary the rhythm with a two-column hero, split image-and-copy stories, and compact feature grids. Favor generous section separation and thin rules over cards, shadows, or ornament. Use rectangular product screenshots and contextual photography as supporting proof, not as the source of the brand palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with left-aligned copy and a dotted black graphic field on the right. | Primary contact action, Product value proposition | Light serif headline, Dotted graphic field, Square black CTA |
| 2 | feature-grid | Three-column feature grid with product visuals above concise explanatory copy. | Scan feature benefits | Product screenshots, Compact sans-serif headings |
| 3 | feature-split | Two-column industry story with text on the left and a large photograph on the right. | Industry-specific discovery, Discover link | Serif section title, Rectangular contextual photo |
| 4 | feature-split | Two-column industry story pairing left-aligned copy with a rectangular waste-handling photo. | Industry-specific discovery, Discover link | Serif section title, Rectangular contextual photo |
| 5 | how-it-works | Four-column product overview with interface screenshots and short text beneath. | Compare product modules | Product interface imagery, Compact feature descriptions |
| 6 | stats | Two-column case-study band with story and metrics on the left, dotted comparison graphic on the right. | Before-and-after proof, Read case study | Sorting-rate comparison, Ochre link treatment |
| 7 | logo-cloud | Wide, seven-column logo arrangement across a lightly separated horizontal band. | Build trust through client proof | Monochrome client marks, Thin divider rule |
| 8 | feature-grid | Four-column benefits section with text-led modules and compact headings. | Scan differentiated benefits | Text-led benefit blocks, Consistent column rhythm |
| 9 | testimonials | Single-column testimonial with prominent serif quote and small attribution. | Social proof | Editorial quotation, Small sans-serif attribution |
| 10 | cta | Single-column contact prompt with a concise statement and one black action button. | Contact conversion | Minimal copy, Square black CTA |
| 11 | footer | Newsletter row followed by dense multi-column navigation, contact details, and wordmark. | Email subscription, Explore footer links | Ochre input field, Black submit button, Multi-column link groups |

## Source CSS custom properties (selected)

```css
--theme-ui-colors-black: #000000;
--theme-ui-colors-white: #FFFFFF;
--theme-ui-colors-seaweed: #72723B;
--theme-ui-colors-lime: #E7EB5D;
--theme-ui-colors-carrot: #FF8736;
--theme-ui-colors-beige: #E9D7C9;
--theme-ui-colors-gray: #F8F1F1;
--theme-ui-colors-grays-1: #F8F1F1;
--theme-ui-colors-grays-2: #EEE7E7;
--theme-ui-colors-grays-3: #DAD3D3;
--theme-ui-colors-grays-4: #B2ABAB;
--theme-ui-colors-grays-5: #948D8D;
--theme-ui-colors-grays-6: #6F6C6C;
--theme-ui-colors-shades-light: rgba(0,0,0,0.08);
--theme-ui-colors-shades-medium: rgba(0,0,0,0.16);
--theme-ui-colors-shades-dark: rgba(0,0,0,0.48);
--theme-ui-colors-shades-darkest: rgba(0,0,0,0.64);
--theme-ui-colors-text: #000000;
--theme-ui-colors-background: #FFFFFF;
--theme-ui-colors-primary: #E7EB5D;
--theme-ui-colors-secondary: #FF8736;
--theme-ui-colors-accent: #FF8736;
--theme-ui-colors-highlight: #E7EB5D;
--theme-ui-colors-muted: rgba(0,0,0,0.64);
--theme-ui-colors-hairline: rgba(0,0,0,0.08);
--theme-ui-colors-backgroundTint: rgba(0,0,0,0.08);
```

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