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

# Arcadia · Design System

> Calm enterprise design, grounded in energy data

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

Arcadia pairs warm off-white space and dark evergreen panels with a restrained, vivid green CTA. Light sans-serif headlines, product dashboards, and layered data illustrations make a complex enterprise energy platform feel clear and approachable.

## North star

Use warm open space to clarify the story, deep green to anchor enterprise content, and spring green only to signal action.

## Overview

The visual system balances a warm, paper-like canvas (#f3f1ec) with deep evergreen surfaces, giving the page a calm enterprise character rather than a high-gloss tech aesthetic. DM Sans carries nearly all text: headlines are large, light, and open, while navigation and body copy stay compact and readable. The centered hero places its message over a pale, atmospheric gradient and a broad product dashboard, then transitions into a dark-green metrics band and a photo-led feature. Product areas use spacious, editorial compositions with detailed 3D data illustrations; purple appears sparingly within those visuals and select labels, not as a primary brand surface. Bright spring green is reserved for high-value actions and small highlights. Cards and controls use restrained rounded corners, while the footer reverses the palette into a dense, dark navigation field. Overall spacing is comfortable, with distinct section changes and clear hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Pampus Canvas | `#f3f1ec` | `--color-pampus-canvas` | brand | Warm page canvas across navigation, content sections, and footer transitions. |
| Night Evergreen | `#101f1e` | `--color-night-evergreen` | surface | Deep inverse surface for the footer, dark controls, and high-contrast interface details. |
| Misty Sage | `#afc4bf` | `--color-misty-sage` | brand | Soft sage tone in hero and product-area gradients, supporting the muted atmospheric palette. |
| Forest Depth | `#0b2c24` | `--color-forest-depth` | surface | Large dark-green band behind enterprise metrics and energy-complexity content. |
| Slate Moss | `#535e5d` | `--color-slate-moss` | neutral | Muted body copy and secondary text against the light canvas. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Dashboard panels, news cards, and form surfaces within the otherwise warm palette. |
| Spring Signal | `#0fff87` | `--color-spring-signal` | accent | Primary demo and submit actions, plus small interface highlights. |
| True Ink | `#000000` | `--color-true-ink` | semantic | Dark headline and foreground text, especially prominent in the hero. |
| Deep Teal | `#104336` | `--color-deep-teal` | brand | Text and foreground color on bright green buttons, plus selected dark-green component details. |
| Graphite Moss | `#333f3e` | `--color-graphite-moss` | neutral | Fine footer dividers and subdued structural borders. |
| Warm Stone | `#61605e` | `--color-warm-stone` | surface | Secondary inverse section surface, used as a quieter dark neutral. |
| Pale Eucalyptus | `#c5d4cf` | `--color-pale-eucalyptus` | brand | Intermediate stop in atmospheric background gradients and pale product-area transitions. |
| Soft Putty | `#e2ddd7` | `--color-soft-putty` | neutral | Warm intermediate gradient tone, not a dominant standalone interface surface. |
| Quiet Pewter | `#848a89` | `--color-quiet-pewter` | neutral | Low-emphasis footer and control details. |
| Signal Violet | `#7c18d3` | `--color-signal-violet` | accent | Small labels and data-illustration details; secondary to the green brand accent. |
| Forest Teal | `#335e52` | `--color-forest-teal` | semantic | Subtle green detail in interface and illustrative elements, not a dominant page color. |

### Semantic aliases

`--color-canvas` → `#f3f1ec` (Pampus Canvas) · `--color-surface` → `#0b2c24` (Forest Depth) · `--color-surface-2` → `#101f1e` (Night Evergreen) · `--color-surface-3` → `#ffffff` (Clean White) · `--color-surface-4` → `#61605e` (Warm Stone) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#535e5d` (Slate Moss) · `--color-text-subtle` → `#f3f1ec` (Pampus Canvas) · `--color-border` → `#333f3e` (Graphite Moss) · `--color-accent` → `#0fff87` (Spring Signal) · `--color-accent-2` → `#7c18d3` (Signal Violet) · `--color-on-accent` → `#104336` (Deep Teal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f3f1ec` | 18.6:1 | AAA |
| `#000000` | `#0b2c24` | 1.4:1 | fail |
| `#000000` | `#101f1e` | 1.24:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#535e5d` | `#f3f1ec` | 5.95:1 | AA |
| `#535e5d` | `#0b2c24` | 2.23:1 | fail |
| `#535e5d` | `#101f1e` | 2.53:1 | fail |
| `#535e5d` | `#ffffff` | 6.72:1 | AA |
| `#f3f1ec` | `#0b2c24` | 13.29:1 | AAA |
| `#f3f1ec` | `#101f1e` | 15.04:1 | AAA |

### Gradients

- `linear-gradient(rgb(175, 196, 191) -7.7%, rgb(197, 212, 207) 12%, rgb(226, 221, 215) 35%, rgb(241, 238, 233) 55%, rgb(243, 241, 236))`
- `linear-gradient(212.12deg, rgb(175, 196, 191) 14.83%, rgb(232, 231, 245) 52.99%, rgb(241, 238, 233) 79.47%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __DMSans_cff41e | `--font-body` | webfont | 400, 500, 300, 700, 600 | All page typography: display and section headlines, body copy, navigation, buttons, labels, and footer links. | DM Sans |

- **__DMSans_cff41e:** Use light weights for large headlines, regular body and navigation, and bold uppercase eyebrows; keep tracking subtly open on headings.

### Type scale — Perfect Fourth (ratio ≈ 1.328, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 300 | 1.1 | 0.01em | — | __DMSans_cff41e | Large promotional or section-level display headlines. |
| h1 | 48px | 300 | 1.1 | 0.01em | — | __DMSans_cff41e | Primary hero headline. |
| h2 | 36px | 300 | 1.2 | 0.01em | — | __DMSans_cff41e | Major section headings and feature titles. |
| h3 | 24px | 400 | 1.2 | 0.01em | — | __DMSans_cff41e | Product cards and secondary feature headings. |
| body | 18px | 400 | 1.5 | 0 | — | __DMSans_cff41e | Hero descriptions, explanatory copy, and feature paragraphs. |
| caption | 16px | 400 | 1.5 | 0 | — | __DMSans_cff41e | Compact supporting copy and card details. |
| button | 18px | 500 | 1 | -0.02em | — | __DMSans_cff41e | Primary and secondary action labels. |
| nav | 16px | 400 | 1.5 | 0 | — | __DMSans_cff41e | Header navigation and footer navigation links. |
| eyebrow | 14px | 700 | 1 | 0.07em | uppercase | __DMSans_cff41e | Uppercase section labels and product-category markers. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 14, 16, 20, 24, 32, 40, 48, 58, 64, 88 px.
- Section rhythm 40px · element gap 24px · card padding 24px · max content width —.

The page uses a broad, centered content frame with generous side margins and mostly left-aligned sections; the hero is centered and the footer expands into multiple link columns. Content alternates between full-width color bands, multi-column metrics or cards, and split text-and-image features. A comfortable spacing rhythm separates sections, while cards keep consistent internal padding. The long product story is editorial and vertically stacked rather than compressed into a dense dashboard grid. Keep the layout responsive, preserving clear hierarchy and breathing room.

## Shape & elevation

- Radius: button `8px` · input `2px` · card `16px` · media `8px` · xs `8px` · sm `16px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.22, 1, 0.36, 1)` on interactive elements.

The page is mostly flat, with color bands and whitespace doing the work of separating content rather than heavy shadows. White cards sit cleanly on the warm canvas, with softly rounded corners; controls use restrained borders and modest radii. Product dashboards and 3D illustrations create depth through their own layering, not through a site-wide shadow system.

## Imagery

The hero features a large product dashboard over a pale, softly blended gradient. A photographic energy-related image appears within a dark feature band, while the extended platform story uses layered 3D data and infrastructure illustrations with light materials and occasional violet details. News cards are mostly typographic, and the closing CTA uses a wide landscape photograph with a dark overlay for legibility.

## Components

### Primary CTA

Bright #0fff87 button with dark-green text, bold label, and rounded corners; used for demo and submit actions.

### Header navigation

Compact horizontal header on the warm canvas, with evergreen links, dropdown indicators, outlined sign-in, and filled contact action.

### Hero dashboard

Centered headline and supporting copy sit above a dark request-demo control and a large white product dashboard on a pale gradient.

### Metrics band

Deep-green full-width section with a light heading and four horizontally arranged business metrics separated by fine green rules.

### Feature cards

Three dark-green product cards with concise descriptions, compact icon tiles, and directional cues.

### News cards

Six white editorial cards in a three-column layout, pairing publication identity with headline and small date text.

### Footer

Dark inverse surface with grouped link columns, newsletter email field, green submit button, and subdued legal links.

### Measured component styles

- **Primary button** (“Request demo”): background #0fff87 · text #104336 · radius 8px · padding 0px 16px · 700 16px __DMSans_cff41e
- **Secondary button** (“Contact us”): background #104336 · text #ffffff · radius 8px · padding 0px 24px · 700 16px __DMSans_cff41e
- **Link** (“Utility Expense Management”): transparent background · text #f9f3e8 · radius 0px · padding 0px · 400 10px __DMSans_cff41e
- **Input**: background #ffffff · text #101f1e · border 1px solid #0d1f1d · radius 2px · padding 0px 16px · 700 16px __DMSans_cff41e
- **Card** (“What I keep hearing from Fortune 500 CEO”): background #ffffff · text #f9f3e8 · radius 16px · padding 24px · 400 10px __DMSans_cff41e
- **Navigation item** (“Utility Expense Management”): transparent background · text #f9f3e8 · radius 0px · padding 0px · 400 16px __DMSans_cff41e

## Do

- Use the warm canvas as the default background.
- Reserve deep green for major emphasis bands and the footer.
- Keep large headlines light-weight and generously spaced.
- Use spring green sparingly for clear, high-priority actions.
- Make product imagery and data illustrations substantial and legible.
- Separate content with whitespace and broad section transitions.

## Don't

- Do not make every section dark or high contrast.
- Do not use violet as a dominant interface color.
- Avoid dense, tightly packed copy and controls.
- Avoid heavy shadows or ornamental borders.
- Do not use loud gradients outside atmospheric backgrounds.
- Do not let product mockups obscure page hierarchy.

## Agent prompt

Build a new Arcadia-style enterprise energy page with a calm, editorial SaaS feel. Use Pampus Canvas (#f3f1ec) as the main background, Night Evergreen (#101f1e) and Forest Depth (#0b2c24) for deliberate dark sections, and Spring Signal (#0fff87) only for primary actions. Set typography in DM Sans, using light, open display headlines and readable regular body text. Create a clear centered hero, then vary the page with metrics, split features, and spacious cards. Use pale gradients and substantial dashboard or layered data illustration imagery to explain the product; keep violet details confined to artwork or small labels. Prefer flat surfaces, restrained rounded corners, and comfortable whitespace. Ensure responsive layouts preserve the same strong contrast, hierarchy, and calm pacing.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy over a pale gradient, with a dashboard extending beneath the CTA. | primary demo action, product preview | soft gradient, centered type, dark button |
| 2 | logo-cloud | A short trust statement above a wide row of customer logos. | social proof | logo row, light canvas |
| 3 | stats | Dark-green band with introductory text and four metrics in columns. | proof through metrics | inverse surface, column metrics, thin separators |
| 4 | feature-split | Left-aligned text paired with a large energy-related photograph. | problem framing | dark section, split composition, large image |
| 5 | feature-grid | Section heading and short introduction above three product cards. | product discovery, category links | three-column cards, icon tiles, dark green |
| 6 | product-showcase | Long editorial product narrative with large layered illustrations and adjacent text blocks. | progressive product explanation | 3D data illustration, soft gradient, alternating text and visual |
| 7 | content-feed | Section title and view-all action above six cards in three columns. | browse articles, view all | white cards, publication labels, date captions |
| 8 | cta | Wide image panel with left-aligned copy and a bright demo action. | contact conversion | photo background, dark overlay, green CTA |
| 9 | footer | Dark five-column navigation area followed by newsletter signup and legal links. | site navigation, email signup | inverse surface, link columns, newsletter form |

## Source CSS custom properties (selected)

```css
--color-black: #101f1e;
--color-black60: rgba(16,31,30,.6);
--color-black50: rgba(16,31,30,.5);
--color-black20: rgba(16,31,30,.2);
--color-black10: rgba(16,31,30,.1);
--color-black05: rgba(11,31,28,.05);
--color-white: #fff;
--color-gray: #798281;
--color-darkGray: #535e5d;
--color-pampus: #f3f1ec;
--color-pampus-light: #f8f7f4;
--color-midGreen: #004d42;
--color-eveningSea90: rgba(0,64,55,.9);
--color-eveningSea80: rgba(0,64,55,.8);
--color-eveningSea70: rgba(0,64,55,.7);
--color-eveningSea60: rgba(0,64,55,.6);
--color-eveningSea20: rgba(0,64,55,.2);
--color-eveningSea08: rgba(0,64,55,.08);
--color-eveningSea05: rgba(0,64,55,.05);
--color-lightGreen: #4e6c67;
--color-cream90: hsla(45,22%,96%,.9);
--color-cream80: hsla(45,22%,96%,.8);
--color-cream70: hsla(45,22%,96%,.7);
--color-cream60: hsla(45,22%,96%,.6);
--color-cream50: hsla(45,22%,96%,.5);
--color-cream20: hsla(45,22%,96%,.2);
--color-cream15: hsla(45,22%,96%,.15);
--color-cream05: hsla(45,22%,96%,.05);
--color-offCream: #fffaf0;
--color-springGreen: #0fff87;
--color-springGreen-dark: #0cc769;
--color-eveningSea: #104336;
--color-eveningSea-dark: #0b2c24;
--color-eveningSea-mid: #4c7c6f;
--color-eveningSea-light: #afc4bf;
--color-cream: #f9f3e8;
--color-viking: #5cc4dc;
--color-viking-light: #d5f0f6;
--color-lime: #c4ff45;
--color-lime-hover: #afdf3e;
```

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