Skip to content
DesignMunkDesignMunk Submit a site

Arcadia

arcadia.com
Energy management to save money, mitigate risk, and cut carbon.
Climate & Energy Data & Infrastructure Next.js Homepage
Share Visit site
arcadia.com DESKTOP · 1440
Arcadia

AI Breakdown

Design export

# Design brief: the Arcadia design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/10/02143124/arcadia-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/10/02143124/arcadia-com-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/arcadia/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Arcadia: Sage Hero With Framed Dashboard and Neon CTA

## Overview

Enterprise, data-forward, and calm. The interface favors muted sage surfaces (#F3F1EC) with deep forest text (#104336), light-weight headlines, and wide vertical spacing. Use clear hierarchy, restrained color, and minimal shadow; deploy the neon accent only for primary calls to action.

## Page Structure

- Global nav: left-aligned wordmark; four top-level menus; right-aligned utility actions (Sign in as text button, Contact/CTA as filled button). Compact single row.
- Hero: centered large headline and short paragraph over a rounded, softly shaded panel. One prominent primary CTA. A framed application screenshot card sits below the copy inside the same panel.
- Trust/logo strip: single line of client logos beneath the hero, low contrast and tightly spaced.
- KPI row: a row of four large metric blocks (currency, percentage, count, meters), equal widths in a single line.
- Problem statement: text-first section with a medium headline and one to two paragraphs; airy spacing, no imagery.
- "One platform" feature list: section headline followed by a vertical list of three prominent links/cards, each with a bolded label and a one-line descriptor.
- Alternating solution bands: repeating trios ("Enterprise Solutions", "Energy Intelligence", "Arcadia Data Model"), each with headline, paragraph, and a single supporting stat. Even padding with generous white space.
- Press/news: section header with a right-justified "View all", then a vertical list of headline links with dates.
- Final CTA band: concise headline, one sentence, and a primary CTA centered.
- Footer mega-menu: multi-column link lists grouped by Products, Platform, Solutions, Partners, Resources, About; includes an email signup, legal links, and social icon.

## Colors

- Primary (#104336): Deep ink for headlines and core text.
- Secondary (#0aab64): Brand green for highlights, charts, and supportive accents.
- Tertiary (#0fff87): Neon accent reserved for primary CTAs and key emphasis.
- Neutral (#f3f1ec): Warm sage background surface across the page.
- Brand-armor-wash (#040404): Near-black for rare high-contrast needs and overlays.
- Surface ({colors.neutral}): Alias to the page background; use for cards and sections.
- On-surface ({colors.primary}): Alias to text color on surfaces; ensure sufficient contrast.

## Typography

- DM Sans (__DMSans_cff41e): Used for all levels. Tokens specify light (300) for headlines and body, with headline-lg at 56px/1.1, headline-md at 48px/1.1, headline-sm at 20px/1.2, headline-xs at 18px/1.22, and body-md at 16px/1.69. Source type is custom/self-hosted, so agents should not rely on it directly.
- Recommended substitutes (free): Inter (Google) for similar modern proportions; Plus Jakarta Sans (Google) for a clean geometric feel; Work Sans (Google) as a friendly, readable alternative. Match weights closely to the tokens (prefer 300 for headings where available).

## Layout

- Spacing scale drives rhythm: xs 16px for tight in-component gaps; sm 24px for compact section padding; md 40px for standard section gutters; lg 80px for major vertical breaks; xl 110px for hero and CTA bands.
- Content typically center-aligned with comfortable max width; use wide vertical spacing and moderate horizontal gutters. Cards and bands sit on the same neutral surface for continuity.
- Grids: many sections are single-column stacks; use simple rows for logo/KPI strips and equal-width cards when listing links.

## Elevation & Depth

- Shadows are minimal. The only measured elevation is sm: rgba(16,31,30,0.04) 0 -2px 8px, plus rgba(16,31,30,0.1) 0 -16px 40px—use it sparingly on marquee mockups or major cards.
- Most hierarchy comes from typography, spacing, and tonal contrast between #104336 text and #F3F1EC surfaces. Borders are optional and light when needed; avoid heavy outlines.

## Shapes

- 8px radius (rounded.sm) across buttons, cards, screenshot frames, and panels. Corners communicate modern but not playful; keep radii consistent and avoid mixing larger rounds.

## Components

- Button — Primary: background #0FFF87, text #101F1E, height 51px, padding 15px 16px, 8px radius. Use for the main CTA in a section.
- Button — Secondary: text #104336 on transparent or surface background, height 51px, padding 15px 16px, 8px radius. Use for low-emphasis actions.
- Button — Link: text #104336, no radius, inline with copy.
- Card: background #F3F1EC, text #104336, padding 16px, 8px radius. May receive the sm shadow when featured.

### Top Navigation Bar
- Single-row bar with left wordmark, four menu groups, and right utility actions. Link text uses on-surface color #104336; the rightmost action can use Primary or Secondary button tokens depending on emphasis.

### Hero Panel with Screenshot
- Large rounded container using the surface color, centered headline (headline-lg 56px/300), short body, and a Primary button. A wide application screenshot card sits inside, 8px radius with the sm shadow.

### Logo Strip
- A horizontal row of partner/client logos on the neutral surface. Keep logos monochrome or low-saturation and evenly spaced using xs–sm gaps.

### KPI Metrics Row
- Four equal-width stat blocks in one row. Each shows a large figure and a label; use headline-sm (20px) for figures and body-md (16px) for labels, with sm spacing.

### Three-Link Feature List
- Vertical stack of three prominent links/cards under a section headline. Each entry uses bolded link text styled as headline-xs (18px) with a one-line body; apply 8px radii and sm padding if carded.

### Alternating Solution Bands
- Repeating content bands with headline, paragraph, and a single supporting stat. Maintain lg vertical spacing and consistent typographic scale; optional sm shadow on any embedded charts.

### Press List
- Section header with a right-aligned tertiary link ("View all"). Below, a vertical list of article titles as link buttons, each followed by a date in body-md.

### Footer Mega Menu with Newsletter
- Multi-column lists grouped by product areas plus an email field and submit control. Use body-md typography, xs spacing within columns, md between columns, and 8px radii on inputs.

## Do's and Don'ts

- Do reserve #0FFF87 for the single most important CTA in a section; prefer #0AAB64 for minor graphical accents only.
- Do keep headlines light (300) as specified; avoid jumping to heavy weights unless contrast is insufficient.
- Do space sections generously (lg–xl) and keep components on the #F3F1EC surface for continuity.
- Don't introduce additional shadow sizes; stick to the provided sm shadow or none.
- Don't mix corner radii; keep 8px across buttons, cards, inputs, and screenshot frames.
- Don't overuse dark backgrounds; the system is designed for light mode with ink text on sage surfaces.

## Agent Prompt Guide

Quick references
- Text: #104336
- Background: #F3F1EC
- Border: #104336
- Accent/CTA: #0FFF87 (primary), #0AAB64 (supporting accent)

1) Build a centered hero with framed screenshot
- Container background: #F3F1EC; text color #104336.
- Headline: Inter, 56px, 300, line-height 1.1, letter-spacing 0.01em.
- Body: Inter, 16px, 300, line-height 1.69, max-width ~70ch.
- Primary button: 51px height; padding 15px 16px; radius 8px; background #0FFF87; text #101F1E.
- Below copy, place a wide card (radius 8px; background #F3F1EC; sm shadow) to house a product screenshot.

2) Create a KPI row of four metrics
- Grid: single row, four equal columns, gap 24px.
- Each card: background #F3F1EC; radius 8px; no shadow; padding 16px.
- Metric value: Inter 20px, 300; label: Inter 16px, 300.

3) Three-link feature list
- Section heading: Inter 48px, 300.
- Stack three items with 24px gaps. Each item: link styled as Inter 18px, 300; one-line description in 16px, 300.
- Optional leading icon in #0AAB64; keep background #F3F1EC.

4) Alternating solution band
- Vertical padding: 80px.
- Headline: Inter 48px, 300; paragraph: Inter 16px, 300.
- Support stat: Inter 20px, 300.
- Include a Secondary action as text button in #104336; reserve #0FFF87 for a primary action when needed.

5) Footer with newsletter
- Background #F3F1EC; text #104336.
- Multi-column lists using Inter 16px, 300; column gap 40px.
- Email input: radius 8px; height 51px; padding 15px 16px; submit button uses Primary token (#0FFF87).

## Similar Brands

- Watershed: similarly muted, enterprise climate tooling with green accents; Arcadia leans warmer in surface color and uses a brighter CTA.
- Uplight: utility-focused UI with calm palettes and data-first sections; Arcadia's typography is lighter and more editorial.
- Aurora Solar: analytics-heavy energy tooling; Arcadia is less technical in presentation and more executive-facing with larger headings and simplified sections.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #104336;
  --color-secondary: #0aab64;
  --color-tertiary: #0fff87;
  --color-neutral: #f3f1ec;
  --color-brand-armor-wash: #040404;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 56px;
  --text-headline-lg-weight: 300;
  --text-headline-lg-leading: 1.1;
  --text-headline-lg-tracking: 0.01em;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 300;
  --text-headline-md-leading: 1.1;
  --text-headline-md-tracking: 0.01em;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 300;
  --text-headline-sm-leading: 1.2;
  --text-headline-sm-tracking: 0.01em;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 300;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 300;
  --text-body-md-leading: 1.69;
  --font-dmsans-cff41e: "__DMSans_cff41e";

  /* Rounded */
  --radius-sm: 8px;

  /* Spacing */
  --spacing-xs: 16px;
  --spacing-sm: 24px;
  --spacing-md: 40px;
  --spacing-lg: 80px;
  --spacing-xl: 110px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #101f1e;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 15px 16px;
  --button-primary-height: 51px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 15px 16px;
  --button-secondary-height: 51px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #104336;
  --color-secondary: #0aab64;
  --color-tertiary: #0fff87;
  --color-neutral: #f3f1ec;
  --color-brand-armor-wash: #040404;
  --color-surface: #f3f1ec;
  --color-on-surface: #104336;
  --font-headline-lg: "__DMSans_cff41e";
  --font-headline-md: "__DMSans_cff41e";
  --font-headline-sm: "__DMSans_cff41e";
  --font-headline-xs: "__DMSans_cff41e";
  --font-body-md: "__DMSans_cff41e";
  --text-headline-lg: 56px;
  --text-headline-md: 48px;
  --text-headline-sm: 20px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: 0.01em;
  --tracking-headline-md: 0.01em;
  --tracking-headline-sm: 0.01em;
  --font-weight-headline-lg: 300;
  --font-weight-headline-md: 300;
  --font-weight-headline-sm: 300;
  --font-weight-headline-xs: 300;
  --font-weight-body-md: 300;
  --radius-sm: 8px;
  --spacing-xs: 16px;
  --spacing-sm: 24px;
  --spacing-md: 40px;
  --spacing-lg: 80px;
  --spacing-xl: 110px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.063,
                    0.263,
                    0.212
                ],
                "hex": "#104336"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.039,
                    0.671,
                    0.392
                ],
                "hex": "#0aab64"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.059,
                    1,
                    0.529
                ],
                "hex": "#0fff87"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.953,
                    0.945,
                    0.925
                ],
                "hex": "#f3f1ec"
            }
        },
        "brand-armor-wash": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.016,
                    0.016,
                    0.016
                ],
                "hex": "#040404"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.953,
                    0.945,
                    0.925
                ],
                "hex": "#f3f1ec"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.063,
                    0.263,
                    0.212
                ],
                "hex": "#104336"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 110,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__DMSans_cff41e",
                "fontSize": {
                    "value": 56,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": 0.01,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__DMSans_cff41e",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": 0.01,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__DMSans_cff41e",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 300,
                "letterSpacing": {
                    "value": 0.01,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__DMSans_cff41e",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__DMSans_cff41e",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Arcadia**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Climate & Energy →
altergresources.com
AlterG Resources Climate & Energy
AlterG Resources
patch.io
Patch Careers Climate & Energy
Patch Careers
oxide.computer
Oxide Careers Data & Infrastructure
Oxide Careers
quilt.com
Quilt Careers Climate & Energy
Quilt Careers