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

# Arva · Design System

> Regenerative agriculture, presented with quiet editorial confidence.

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

Arva pairs cinematic farm imagery and refined serif headlines with a restrained palette of evergreen, warm ivory, and pale blue. The homepage moves from a media-led hero through benefits, impact, partner stories, news, and a direct conversion path.

## North star

Let cinematic agricultural imagery and light editorial typography lead, while evergreen actions and softly tinted content bands keep the page grounded and legible.

## Overview

The visual identity balances agricultural credibility with an editorial, premium feel. White is the main canvas, giving generous breathing room to the long-form page; deep evergreen (#07503f) anchors inverse content, calls to action, and the newsletter/footer, while warm ivory (#f1efdf), pale blue (#d7e6f5), and powder blue (#b2cee7) distinguish cards and section bands. Acid lime (#e8fe85) is a small, high-contrast accent for the announcement strip and impact badges rather than a dominant surface. Large, light Reckless-style serif headlines create a calm editorial voice against compact, neutral Inter interface text. The opening hero uses full-bleed field video with white centered type and pill actions. Below, paired image-and-copy cards, measured statistics, partner testimonials, and a three-column news feed keep content varied without losing structure. Rounded corners and soft boundaries temper the modular grid; generous vertical intervals preserve a spacious, unhurried rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas and frequent light text on evergreen buttons and dark media. |
| Field Evergreen | `#07503f` | `--color-field-evergreen` | brand | Brand anchor for the inverse newsletter and footer, company CTA, and selected dark feature panels. |
| Charcoal Ink | `#353535` | `--color-charcoal-ink` | neutral | Main text and navigation color on light backgrounds; also used for editorial links. |
| Harvest Ivory | `#f1efdf` | `--color-harvest-ivory` | surface | Warm background for news and company-benefit cards, softening the otherwise white page. |
| Sky Wash | `#d7e6f5` | `--color-sky-wash` | surface | Pale blue testimonial-card surface; a quiet cool contrast to field greens. |
| Citrus Signal | `#e8fe85` | `--color-citrus-signal` | accent | Small announcement and impact-badge highlight, plus an occasional highlighted link. |
| Powder Blue | `#b2cee7` | `--color-powder-blue` | surface | Blue CTA section band and occasional farmer-facing button surface. |
| Soft Cloud | `#f6f6f6` | `--color-soft-cloud` | surface | Light neutral treatment on location selector buttons and select card details. |
| Sage Mist | `#e4ebcf` | `--color-sage-mist` | surface | Muted green-tinted card surface, used as a supporting agricultural color. |
| Pale Sage | `#c3cda7` | `--color-pale-sage` | semantic | Limited footer and button text or input accent, not a dominant page surface. |
| Eucalyptus Line | `#83a89f` | `--color-eucalyptus-line` | semantic | Fine border and divider color, most evident in the footer. |
| Glacier Sage | `#b5cbc6` | `--color-glacier-sage` | semantic | Subtle supporting footer text or small interface detail. |
| Slate Gray | `#696969` | `--color-slate-gray` | neutral | Secondary text on pale controls such as the country selector. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f1efdf` (Harvest Ivory) · `--color-surface-2` → `#07503f` (Field Evergreen) · `--color-surface-3` → `#d7e6f5` (Sky Wash) · `--color-surface-4` → `#b2cee7` (Powder Blue) · `--color-text` → `#353535` (Charcoal Ink) · `--color-text-muted` → `#07503f` (Field Evergreen) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#83a89f` (Eucalyptus Line) · `--color-accent` → `#07503f` (Field Evergreen) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#353535` | `#ffffff` | 12.27:1 | AAA |
| `#353535` | `#f1efdf` | 10.6:1 | AAA |
| `#353535` | `#07503f` | 1.3:1 | fail |
| `#353535` | `#d7e6f5` | 9.65:1 | AAA |
| `#07503f` | `#ffffff` | 9.42:1 | AAA |
| `#07503f` | `#f1efdf` | 8.15:1 | AAA |
| `#07503f` | `#d7e6f5` | 7.42:1 | AAA |
| `#ffffff` | `#f1efdf` | 1.16:1 | fail |
| `#ffffff` | `#07503f` | 9.42:1 | AAA |
| `#ffffff` | `#d7e6f5` | 1.27:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 300, 700, 600, 500, 200, 100 | Body copy, navigation, buttons, and editorial link text. | Inter |
| Reckless | `--font-reckless` | webfont | 300, 500 | Editorial serif display and headline styling. | Instrument Serif |
| RecklessLight | `--font-display` | webfont | 300, 100 | Large display and page headings. | Instrument Serif |
| Helvetica | `--font-helvetica` | system | 300, 700 | Occasional legacy form and interface fallback. | Arial |
| RecklessMedium | `--font-recklessmedium` | webfont | 400 | Small instances of stronger editorial serif emphasis. | Instrument Serif |
| FKGrotesk | `--font-fkgrotesk` | webfont | 300 | Compact uppercase badge labels. | Inter |

- **Inter:** Primary sans; mostly regular or light weights, sentence case in copy and uppercase for selected calls to action.
- **Reckless:** Webfont serif with light-to-medium weight; use for expressive, calm headline contrast.
- **RecklessLight:** Very light serif headline treatment, with generous line spacing and no measured letter spacing.
- **Helvetica:** Limited use; light or bold system sans, not the defining page voice.
- **RecklessMedium:** Medium serif variant; keep restrained and subordinate to the lighter display style.
- **FKGrotesk:** Light grotesk treatment for short uppercase labels and impact markers.

### Type scale — Perfect Fifth (ratio ≈ 1.468, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 65px | 100 | 1.06 | 0 | — | RecklessLight | Oversized editorial hero headline over the opening field video. |
| h1 | 40px | 300 | 1.22 | 0 | — | RecklessLight | Primary page or major section heading. |
| h2 | 25px | 300 | 1.22 | 0 | — | RecklessLight | Section headings such as partner stories and latest news. |
| h3 | 24px | 300 | 1.22 | 0 | — | RecklessLight | Subheads for feature cards and supporting content. |
| body | 14px | 400 | 1.47 | 0 | — | Inter | Explanatory copy, benefit descriptions, and news summaries. |
| caption | 13px | 300 | 1.5 | 0 | — | Inter | Compact secondary details and image-related supporting text. |
| button | 14.5px | 400 | normal | 0 | — | Inter | Pill CTA labels and other action text. |
| nav | 15px | 400 | 1.1 | 0 | — | Inter | Top-level navigation links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 6, 8, 10, 12, 15, 17, 20, 24, 27, 30, 36, 37, 40, 48 px.
- Section rhythm 140px · element gap 20px · card padding — · max content width 1320px.

The desktop page uses a spacious central content frame capped at 1320px, with media-led sections sometimes extending nearly edge to edge. The hero centers its headline and actions over video; subsequent content alternates image-and-copy feature cards, broad impact content, centered testimonial and news headings, and a full-width CTA band. The benefits area uses paired columns, while impact metrics and news are arranged in multi-column groupings. Section gaps are notably generous; internal elements remain compact, giving the long page an unhurried editorial rhythm rather than a dense dashboard feel.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `15px` · badge `9999px` · nav `9999px` · link `26px` · xs `13px` · sm `15px` · md `26px` · lg `30px` · pill `9999px`
- Shadow `sm` (footer): `rgb(128, 128, 128) 0px 0px 5px 0px`
- Shadow `hairline` (button): `rgb(0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.4s ease` on interactive elements.

The page is mostly flat, relying on background bands, whitespace, and rounded card edges rather than strong shadows. Borders are restrained and hairline-like; the measured eucalyptus border appears in footer details. A small footer shadow is an exception, while pill buttons and cards remain visually simple and cleanly layered.

## Imagery

Real agricultural photography and video define the page: broad aerial field views in the hero, farmers and crops in feature cards, and partner portraits or landscapes in testimonials. Images are rectangular with rounded corners and appear naturally lit rather than heavily stylized. The map graphic is a supporting explanatory illustration; image-derived dark greens in the hero are photographic content, not extra brand palette colors.

## Components

### Announcement strip

A narrow lime-highlighted message bar sits above navigation, with dark green text and an emphasized inline link.

### Hero navigation

Transparent navigation overlays the field video, with links arranged around the centered Arva mark and a light pill contact action.

### Pill CTA

Rounded action controls use evergreen with white text for company actions; the farmer-facing action can use a pale blue fill.

### Benefit cards

Rounded image and copy panels alternate agricultural photography with dark evergreen or warm ivory feature content.

### Impact badges

Compact uppercase labels use the lime accent or a subdued pale surface above impact and global-connection content.

### Testimonial cards

Partner stories use pale blue or ivory panels, combining concise copy and attribution with partner photography or landscape imagery.

### News cards

The warm ivory news section presents a three-column feed with press labels, dates, headlines, summaries, and a quiet view-more action.

### Newsletter form

A dark evergreen footer-area panel pairs concise newsletter messaging with rounded input controls and a submit action.

### Measured component styles

- **Primary button** (“I’M A COMPANY”): background #07503f · text #ffffff · border 1px solid · radius 110px · padding 6px 30px · 400 15px Inter · uppercase
- **Secondary button** (“Canada”): background #f6f6f6 · text #696969 · radius 100px · padding 10px 30px · 400 14.45px Inter
- **Link** (“Puro.earth Launches Environmental Attrib”): transparent background · text #353535 · radius 0px · padding 0px · 300 17px Inter
- **Input**: transparent background · text #c3cda7 · border 1px solid #ffffff · radius 33px · padding 12px 10px · 400 17px helvetica
- **Card** (“Yvette Fetterly, Managing Partner Buckey”): background #d7e6f5 · text #212529 · radius 15px · padding 0px · 300 17px Inter
- **Badge** (“IMPACT SINCE 2023”): background #e8fe85 · text #212529 · radius 18.546px · padding 7px 20px · 300 15px FKGrotesk · uppercase
- **Navigation item** (“For Farmers”): transparent background · text #353535 · radius 0px · padding 0px · 300 17px Inter

## Do

- Use white as the default canvas and reserve tinted backgrounds for distinct content bands.
- Set major headlines in a light editorial serif and supporting interface copy in Inter.
- Use #07503f for important actions and dark inverse sections.
- Keep #e8fe85 to small announcement, badge, or inline highlight moments.
- Pair farm photography with concise, clearly grouped explanatory copy.
- Use rounded cards and pill actions to soften the modular layout.
- Preserve generous gaps between major sections.

## Don't

- Do not turn lime into a large background or dominant brand color.
- Do not replace agricultural photography with generic corporate stock imagery.
- Do not use heavy shadows, dense borders, or sharp card geometry.
- Do not crowd the hero with extra copy or competing actions.
- Do not set long body paragraphs in the display serif.
- Do not introduce gradients or unsupported palette colors.
- Do not compress the page into a dense dashboard grid.

## Agent prompt

Build a new Arva-style page with a spacious white canvas, agricultural credibility, and a calm editorial voice. Use Gallery White (#ffffff) as the base, Field Evergreen (#07503f) for primary actions and inverse panels, Harvest Ivory (#f1efdf) and Sky Wash (#d7e6f5) for softly differentiated cards, and reserve Citrus Signal (#e8fe85) for small highlights. Set large headings in a light Reckless-like serif and interface/body copy in Inter. Lead with authentic field photography or video, then organize content into rounded image-and-copy cards, measurable impact, partner stories, and a clear CTA. Keep section transitions generous and layouts simple, centered, and responsive. Prefer flat surfaces and subtle boundaries over shadows. Use concise copy, pill-shaped actions, and strong contrast over media; avoid adding colors or decorative effects not supported by the palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed field video framed by a rounded media container; overlay navigation, centered headline, pill actions, and a bottom scroll cue. | transparent navigation, dual audience CTAs, scroll cue | white serif headline, darkened farm video, pill buttons, lime announcement strip |
| 2 | feature-grid | Two-column modular card grid pairing farmer and company benefits with agricultural photos and concise copy. | audience-specific benefits, scannable supporting points | rounded cards, evergreen and ivory panels, farm photography, small line icons |
| 3 | stats | Open, broad section with impact metrics and a global-connections content area using text beside a map. | impact proof points, country selector controls | lime and pale badges, large metrics, map illustration, airy white canvas |
| 4 | testimonials | Centered heading above paired testimonial cards, followed by compact carousel controls. | partner social proof, carousel navigation | pale blue and ivory cards, rounded corners, portrait and landscape photos |
| 5 | content-feed | Warm ivory band with centered heading and a three-column news feed, followed by a centered view-more action. | press content discovery, view more | ivory background, date and press labels, editorial headlines, rounded media |
| 6 | cta | Single-column full-width pale blue band with centered heading and a prominent partnership action. | conversion CTA | powder-blue surface, centered serif heading, evergreen pill action |
| 7 | newsletter | Single-column dark evergreen newsletter section with form controls and concise consent copy. | email signup, marketing consent | evergreen background, rounded input, light text and controls |
| 8 | footer | Evergreen footer arranged across multiple columns for brand statement, address, contact, and social links. | contact discovery, social navigation | white and muted text, small divider details, brand mark and link groups |

## Source CSS custom properties (selected)

```css
--primary: #007bff;
--secondary: #6c757d;
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--hsf-default-row__horizontal-spacing: 30px;
--hsf-default-row__vertical-spacing: 20px;
--hsf-default-module__vertical-spacing: 10px;
--hsf-default-button__font-family: Helvetica;
--hsf-default-button__font-size: 1em;
--hsf-default-button__color: rgba(255, 255, 255, 1);
--hsf-default-button__background-color: rgba(255, 92, 53, 1);
--hsf-default-button__background-image: none;
--hsf-default-button__border-radius: 3px;
--hsf-default-button__border-width: 0px 0px 0px 0px;
--hsf-default-button__border-style: none;
--hsf-default-button__border-color: initial;
--hsf-default-button__box-shadow: none;
--hsf-default-button__font-weight: 700;
--hsf-default-richtext__font-family: Helvetica;
--hsf-default-richtext__font-size: 1em;
--hsf-default-richtext__color: rgb(33, 45, 58);
--hsf-default-heading__font-family: Helvetica;
--hsf-default-heading__color: rgb(33, 45, 58);
--hsf-default-heading__text-shadow: none;
--hsf-default-background__padding: 40px;
--hsf-default-background__border-style: none;
--hsf-default-background__border-color: rgba(255, 255, 255, 1);
--hsf-default-background__border-radius: 0px;
--hsf-default-background__border-width: 1px 1px 1px 1px;
--hsf-default-progressbar-text__font-family: Helvetica;
--hsf-default-progressbar-text__font-size: 1em;
--hsf-default-progressbar-text__color: rgb(33, 45, 58);
--hsf-default-progressbar-progressLine__background-color: rgba(1, 129, 132, 1);
--hsf-default-progressbar-progressLine__background-image: none;
--hsf-default-progressbar-progressLine__border-color: rgb(149, 148, 148);
--hsf-default-progressbar-progressLine__border-style: none;
--hsf-default-progressbar-progressLine__border-width: 0px 0px 0px 0px;
--hsf-default-progressbar-trackLine__background-color: rgba(217, 217, 217, 1);
--hsf-default-erroralert__font-family: Helvetica;
--hsf-default-erroralert__font-size: 1em;
--hsf-default-erroralert__color: rgb(229, 21, 32);
```

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