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

# Grain · Design System

> Calm, spacious product storytelling with a confident green signal.

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

Grain’s homepage pairs a near-white canvas and restrained green accents with expansive product storytelling. Large, crisp typography and interface-rich media make a complex AI meeting product feel approachable and organized.

## North star

Keep the page quiet and spacious, using green sparingly to guide attention through product proof and primary actions.

## Overview

The page is built on a near-white #fafafa canvas, with the opening hero gaining its own soft, cool-toned visual atmosphere through product imagery rather than a strongly coloured section band. Green #009959 is the key brand signal: it highlights a phrase in the hero, marks primary calls to action, and appears in small interaction details such as FAQ indicators. Near-black headings establish hierarchy, while several measured grey tones keep body copy, supporting labels, and footer details distinct without adding visual clutter. Poppins gives display and selected headings a rounded, assertive character; Inter carries navigation, paragraphs, controls, and dense interface copy. The layout alternates centered introductions and modular feature sections with two-column product demonstrations. Generous vertical breathing room separates long sections, and soft product screenshots, logos, and card surfaces make the page feel tangible. Fine borders and subtle shadows define edges without turning the design into a stack of heavy panels.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#fafafa` | `--color-gallery-mist` | surface | Main page canvas and dominant background across the long feature, FAQ, and integrations sections. |
| Grain Green | `#009959` | `--color-grain-green` | brand | Primary CTA fill, highlighted hero text, and small interaction accents such as FAQ plus marks. |
| Soft Graphite | `#707070` | `--color-soft-graphite` | neutral | Muted supporting copy and secondary explanatory text. |
| Deep Ink | `#141414` | `--color-deep-ink` | semantic | Primary headings, navigation, body emphasis, and text on white product cards. |
| Slate Ink | `#313232` | `--color-slate-ink` | neutral | Secondary headings, feature descriptions, and text inside elevated information cards. |
| Cloud Line | `#f0f0f0` | `--color-cloud-line` | semantic | Fine borders, button edges, and subtle transitions within pale gradient treatments. |
| Pale Divider | `#e7e7e7` | `--color-pale-divider` | neutral | Secondary section and control edges; use as a quiet separator rather than a prominent band. |
| Muted Charcoal | `#545454` | `--color-muted-charcoal` | neutral | Secondary text, including subdued supporting and footer copy. |
| True Black | `#000000` | `--color-true-black` | neutral | Sparse navigation, footer, and heading text captured by measurement; not the dominant text tone. |
| Silver Text | `#949494` | `--color-silver-text` | neutral | Low-emphasis labels, review metadata, and tertiary button text. |
| Quiet Silver | `#c9c9c9` | `--color-quiet-silver` | neutral | Subtle button and footer borders, used to define edges without strong contrast. |

### Semantic aliases

`--color-canvas` → `#fafafa` (Gallery Mist) · `--color-text` → `#141414` (Deep Ink) · `--color-text-muted` → `#707070` (Soft Graphite) · `--color-text-subtle` → `#313232` (Slate Ink) · `--color-border` → `#f0f0f0` (Cloud Line) · `--color-accent` → `#009959` (Grain Green) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#141414` | `#fafafa` | 17.65:1 | AAA |
| `#707070` | `#fafafa` | 4.74:1 | AA |
| `#313232` | `#fafafa` | 12.32:1 | AAA |
| `#009959` | `#fafafa` | 3.53:1 | AA-large |

### Gradients

- `linear-gradient(rgba(240, 240, 240, 0.4), rgba(250, 250, 250, 0.4))`
- `linear-gradient(rgba(250, 250, 250, 0.4), rgba(240, 240, 240, 0.4))`
- `linear-gradient(rgba(240, 240, 240, 0.4), rgb(255, 255, 255))`
- `linear-gradient(rgba(250, 250, 250, 0.4), rgba(240, 240, 240, 0.36))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Variablefont Slnt Wght | `--font-body` | webfont | 400, 600, 500 | Navigation, body copy, feature descriptions, controls, captions, and most section headings. | Inter |
| Poppins | `--font-display` | webfont | 600 | Display hero headline and selected H1/H3 headings. | Poppins |

- **Inter Variablefont Slnt Wght:** Primarily regular weight with measured medium and semibold; clean sentence case, with slightly tight tracking on selected headings.
- **Poppins:** Semibold for display and headings; display uses tight negative tracking, while text remains in sentence case.

### Type scale — Perfect Fourth (ratio ≈ 1.338, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1.04 | -0.017em | — | Poppins | Oversized hero headline, with selected words picked out in green. |
| h1 | 38px | 600 | 1.25 | 0 | — | Poppins | Prominent feature and section titles. |
| h2 | 32px | 600 | 1.3 | 0 | — | Inter Variablefont Slnt Wght | Major section headings, including centered introductions. |
| h3 | 28px | 600 | 1.6 | 0 | — | Poppins | Feature subheadings and smaller product-story headings. |
| h4 | 20px | 400 | 1.6 | -0.02em | — | Inter Variablefont Slnt Wght | Supporting headline or prominent explanatory copy. |
| body | 14px | 400 | 1.5 | 0 | — | Inter Variablefont Slnt Wght | Feature descriptions, paragraphs, and general page copy. |
| caption | 12px | 400 | 1.43 | 0 | — | Inter Variablefont Slnt Wght | Small labels, helper text, and interface metadata. |
| button | 14px | 500 | 1.43 | 0 | — | Inter Variablefont Slnt Wght | Primary and secondary CTA labels. |
| nav | 14px | 400 | 1.6 | 0 | — | Inter Variablefont Slnt Wght | Header navigation and menu labels. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 8, 11, 12, 16, 19, 20, 24, 30, 32, 40, 48, 86, 96 px.
- Section rhythm 96px · element gap 12px · card padding 24px · max content width 864px.

A spacious long-form homepage organized around a centered content frame measured at 864px max width, with a two-column hero and alternating feature splits. Section headings are often left-aligned above product demonstrations, while overview, metrics, integrations, and FAQ blocks use centered headings. A four-column capability overview and three-column results row provide compact contrast within an otherwise open layout. Sections have generous measured vertical rhythm, with image and UI media balanced against text rather than stretched as full-bleed backgrounds.

## Shape & elevation

- Radius: button `12px` · card `10px` · media `14px` · nav `8px` · link `24px` · xs `3px` · sm `6px` · md `8px` · lg `10px` · xl `12px` · 2xl `14px` · pill `9999px`
- Shadow `sm` (button, link): `rgba(0, 0, 0, 0.04) 0px 4px 8px 0px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.08) 0px 4px 16px 0px`
- Shadow `hairline` (card): `rgba(16, 24, 40, 0.04) 0px 1px 2px 0px`
- Shadow `inset` (section): `rgba(0, 0, 0, 0.05) 0px 0px 12px 0px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

Most sections remain visually flat against the light canvas. White feature cards and product mockups gain separation through pale borders, restrained hairline shadows, and occasional soft inset shading. Rounded corners soften CTA buttons, cards, and media, while overlapping interface windows and floating callouts create depth without heavy drop shadows.

## Imagery

Product interface imagery is the main visual evidence: meeting transcripts, recordings, action items, and integration screens appear as layered desktop-like UI. The hero combines a large interface capture with a video-call frame and a floating AI-tools card. Logos and app marks add colour in small clusters. Human photography appears within the product mockups, not as a dominant lifestyle campaign; the overall treatment is bright, soft, and lightly framed.

## Components

### Header navigation

A light, horizontal top bar with the Grain mark, compact Inter links, sign-in access, a bordered demo action, and a green primary CTA.

### Primary CTA

Green #009959 fill with white medium-weight Inter text; measured button variants use softly rounded corners and generous horizontal padding.

### Hero product composition

A two-column introduction pairs a large Poppins headline and short copy with overlapping meeting UI, video, and a floating AI-tools card.

### Feature split

A left-aligned heading and compact feature copy share space with a large product interface image; text and media alternate emphasis across sections.

### Capability cards

White rounded cards sit in a four-column overview row, using restrained borders or hairline shadows and concise feature labels.

### Results cards

Three centered metric panels use bold numeric proof, short labels, and quieter explanatory copy on a light background.

### FAQ accordion

A centered section title sits above a single-column list of questions, each with a small green plus indicator and subtle separation.

### Measured component styles

- **Primary button** (“Get started free”): background #009959 · text #ffffff · radius 8px · padding 12px 16px · 500 14px Inter Variablefont Slnt Wght
- **Secondary button** (“Bot-less transcription Grain transcribes”): background #fbfbfb · text #313232 · border 2px solid · radius 12px · padding 0px · 400 16px Inter Variablefont Slnt Wght · shadow rgba(0, 0, 0, 0.04) 0px 4px 8px 0px
- **Link** (“Capture every meeting, everywhere.”): transparent background · text #313232 · radius 24px · padding 40px 24px · 400 16px Inter Variablefont Slnt Wght · shadow rgba(0, 0, 0, 0.04) 0px 4px 8px 0px
- **Card** (“Video recording with bots Get video reco”): background #ffffff · text #141414 · radius 10px · padding 24px · 400 16px Inter Variablefont Slnt Wght
- **Navigation item** (“Grain Homepage Product Use Cases Resourc”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter Variablefont Slnt Wght

## Do

- Use #fafafa as the main canvas.
- Reserve #009959 for primary actions and selective emphasis.
- Pair Poppins display headings with Inter utility text.
- Leave generous breathing room between major blocks.
- Show product interfaces as polished, layered proof.
- Use grey text and hairlines to soften secondary content.

## Don't

- Do not turn every section into a coloured band.
- Do not use green as a large background wash.
- Do not crowd the page with dense text blocks.
- Do not make shadows dark or visually heavy.
- Do not replace product UI with generic lifestyle imagery.
- Do not apply display typography to every paragraph.

## Agent prompt

Build a new page in Grain’s calm, product-led visual style. Use #fafafa as the main canvas, Deep Ink #141414 for primary headings, Slate Ink #313232 and Soft Graphite #707070 for supporting copy, and Grain Green #009959 only for primary actions and selective emphasis. Use Poppins for display headlines and selected headings; use Inter for navigation, body copy, labels, and controls. Keep the content frame measured at 864px max width, with generous section spacing and alternating text-plus-product-interface layouts. Use bright, realistic meeting-product screenshots, small integration logos, softly rounded white cards, quiet Cloud Line #f0f0f0 borders, and restrained hairline shadows. Favor centered intros for overview and FAQ blocks, with left-aligned feature headings. Make the result feel clear, spacious, and credible rather than decorative.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with left-aligned headline and copy beside a layered meeting-product interface. | Primary and secondary CTA, Trust and review proof, Integration logos | Oversized headline, Green keyword highlight, Floating product cards |
| 2 | feature-grid | Centered introduction followed by a four-column capability-card row. | Capability overview, Compliance reassurance | Centered heading, Four white cards, Compact icon-led labels |
| 3 | feature-split | Left-aligned section heading and supporting feature points beside a large product UI image. | Explain capture options, Show product evidence | Feature callout card, Meeting interface screenshot, Two-column composition |
| 4 | feature-split | Feature heading above a broad meeting interface composition with supporting text at the side. | Show context enrichment, Explain transcript value | Layered recording UI, Floating notes card, Short feature descriptions |
| 5 | feature-split | Left-aligned heading with feature copy and supporting product illustrations in a two-column section. | Explain export paths, Present AI destinations | Compact callout cards, Product interface media, Open whitespace |
| 6 | feature-split | Section heading above a two-column feature demonstration with copy and floating collaboration callouts. | Explain sharing, Show team workflows | Feature callout cards, Light product media, Quiet horizontal divider |
| 7 | stats | Centered title over three equal metric cards. | Quantified outcomes, Fast metric scanning | Large numeric values, White cards, Muted supporting details |
| 8 | integrations | Centered heading and description above an integration map with app-logo clusters. | Explore integrations, Show ecosystem breadth | Connected app groups, Logo-led diagram, Centered CTA link |
| 9 | faq | Centered section heading over a wide, single-column accordion list. | Expandable questions, Self-serve product answers | Question rows, Green plus indicators, Subtle separators |
| 10 | cta | Centered CTA messaging over a soft, pale band with angled product imagery at the sides. | Start free, Book a demo, Retention reassurance | Centered heading, Green primary action, Floating media |
| 11 | footer | White multi-column footer with contact and social links, navigation groups, and a narrow legal bar. | Browse site sections, Contact and social links | Four-column link layout, Small logo lockup, Compact legal row |

## Source CSS custom properties (selected)

```css
--text--primary: #141414;
--green-text: #009959;
--text--tertiary: #949494;
--text--new-grey: #313232;
--22-spacer: #00b96c00;
--color: white;
--text--secondary: #545454;
--font-family: "Inter Variablefont Slnt Wght",Arial,sans-serif;
```

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