---
version: alpha
name: Terra
description: Infrastructure-grade dark minimalism for Europe's energy future — near-black canvas, bold compressed sans headlines, electric multi-stop gradient washes (the "energy" signal), squared-off chrome with near-zero radius, and oversized metric numbers as the hero language.
colors:
  # Canvas + ink
  background: "#0a0c0f"
  surface: "#13161b"
  surface-soft: "#1b1f26"
  ink: "#f4f6f8"
  ink-secondary: "#a3acb8"
  ink-muted: "#6b7480"

  # Light inversion (alternating sections)
  light-bg: "#ffffff"
  light-ink: "#0a0c0f"
  light-surface: "#f4f6f8"

  # Energy gradient stops
  primary: "#3de08a"        # electric green — energy / live signal
  gradient-cyan: "#34d3e0"
  gradient-blue: "#2f6bff"
  gradient-violet: "#7a4bff"
  gradient-lime: "#a8e05a"

  # Borders + lines
  border: "#262b33"
  border-strong: "#363c45"

  # On-color
  on-primary: "#0a0c0f"
  on-ink: "#0a0c0f"

typography:
  display-hero:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -2px
  section-heading:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -1.4px
  sub-heading:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.8px
  metric:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -1.8px
  card-title:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.2px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 26px
  button-primary-hover:
    backgroundColor: "{colors.gradient-lime}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 26px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 26px
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"

  card-metric:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.metric}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 18px 32px
    borderColor: "{colors.border}"

  tab:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
    borderColor: "{colors.border}"
---

# Terra Design System

## Overview

Terra is the visual language of European energy infrastructure rendered as a startup — confident, dark, and engineered. The site builds its identity on a near-black canvas (`{colors.background}`) that reads less like a "dark mode" toggle and more like the deliberate backdrop of a control room or a battery-storage facility at night. Against this near-black, near-white text (`{colors.ink}`) and oversized bold headlines carry the brand's thesis: that the future of the grid is being built now, at scale.

The single most distinctive move is the energy gradient. Electric green (`{colors.primary}`) anchors a multi-stop spectrum that runs through cyan, blue, violet, and lime — deployed as atmospheric gradient washes behind hero content and as the live "charge" signal on interactive chrome. This is color as meaning: the gradient is the visual stand-in for clean electricity moving through the system. Used sparingly against the dark canvas, it reads as luminous rather than decorative.

Typographically, Terra speaks in compressed bold sans (Inter as the closest Google match), with aggressive negative tracking at display sizes (-2px at the hero) that gives headlines an engineered, billboard density. The other typographic protagonist is the metric: enormous numbers (56px, weight 700) like "15 MW" and "30 MWh" are treated as hero content in their own right, because the scale of the infrastructure IS the story.

Chrome is squared off. Border radii stay near zero (`{rounded.sm}` 4px is the workhorse, `{rounded.none}` for full-bleed structural blocks), reinforcing the industrial, built-not-floating character. Separation comes from thin hairline borders (`{colors.border}`) and surface elevation steps, not shadows — depth in a dark system is communicated by lighter surfaces stacking forward.

**Key Characteristics:**
- Near-black control-room canvas (`{colors.background}`) with near-white ink — engineered, not generic dark mode
- The energy gradient: electric green → cyan → blue → violet → lime as atmospheric washes and live signals
- Electric green (`{colors.primary}`) as the single load-bearing accent / CTA color
- Compressed bold Inter headlines with aggressive negative tracking (-2px at hero)
- Oversized metric numbers (56px/700) treated as hero content
- Squared-off chrome — near-zero radius, industrial character
- Hairline borders and surface stacking for depth, not shadows
- Alternating dark / light inverted sections for rhythm

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): The near-black control-room canvas — primary page surface.
- **Surface** (`{colors.surface}`): Cards, panels — one step lighter than the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Raised tiles, badge fills.
- **Ink** (`{colors.ink}`): Near-white primary text and headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled states.

### Energy Gradient
- **Primary / Electric Green** (`{colors.primary}`): The live "charge" accent — CTAs, active states, key signals.
- **Gradient Cyan** (`{colors.gradient-cyan}`): Gradient mid-stop.
- **Gradient Blue** (`{colors.gradient-blue}`): Gradient mid-stop.
- **Gradient Violet** (`{colors.gradient-violet}`): Gradient cool end.
- **Gradient Lime** (`{colors.gradient-lime}`): Warm green stop / primary hover.

### Light Inversion
- **Light Bg** (`{colors.light-bg}`): Inverted (white) sections.
- **Light Ink** (`{colors.light-ink}`): Text on inverted sections.
- **Light Surface** (`{colors.light-surface}`): Subtle tint on inverted sections.

### Borders
- **Border** (`{colors.border}`): Hairline separators, card outlines.
- **Border Strong** (`{colors.border-strong}`): Emphasized outlines, secondary buttons, inputs.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Arial, sans-serif`
- Inter stands in for the brand's geometric grotesque — tight, neutral, engineered.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.metric}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 64px hero — billboard thesis statements |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, card group headings |
| `metric` | Oversized statistics (15 MW, 30 MWh) as hero content |
| `card-title` | Feature / portfolio cards |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `button-ui` | Buttons, nav, tabs |
| `eyebrow` | Uppercase-tracked section labels |
| `caption` | Metadata, footnotes |

### Principles
- **Compression at scale**: Display headlines use aggressive negative tracking (-2px at 64px) for engineered density; tracking relaxes to 0 at body sizes.
- **Numbers as headlines**: Metrics are sized like display type — the magnitude of the infrastructure is the message.
- **Weight discipline**: 700 for headlines/metrics, 600 for UI/sub-heads, 400 for body. No light weights — the brand is confident, not delicate.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.4xl}`–`{spacing.5xl}`) for the generous section rhythm typical of marketing infrastructure sites.

### Grid & Container
- Max content width: approximately 1280px
- Hero: left- or center-aligned headline over a gradient wash
- Feature / portfolio: 2–3 column grids of bordered cards
- Metric bands: horizontal rows of oversized numbers
- Full-bleed gradient and imagery sections at section boundaries

### Whitespace Philosophy
- **Generous vertical rhythm**: Large padding between sections (`{spacing.4xl}`+) lets the dark canvas breathe.
- **Dark / light alternation**: Inverted white sections punctuate the dark flow for emphasis and contrast.
- **Squared structure**: Near-zero radius and edge-to-edge blocks reinforce the built, industrial feel.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | Canvas, no border | Page background |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, dividers |
| Surface lift (Level 2) | `{colors.surface}` over canvas | Panels, tiles |
| Raised (Level 3) | `{colors.surface-soft}` + `{colors.border-strong}` | Featured tiles, badges |
| Glow (Accent) | Gradient / `{colors.primary}` halo | Live signals, hero washes |
| Focus | `1px solid {colors.primary}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: In a near-black system, depth comes from lighter surfaces stacking toward the viewer and from hairline borders — not drop shadows. The only "glow" in the system is the energy gradient itself, used as an atmospheric backdrop behind hero content.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed structural blocks |
| `xs` | 2px | Inline tags, tiny chips |
| `sm` | 4px | Buttons, inputs, tabs — the workhorse |
| `md` | 6px | Small containers |
| `lg` | 8px | Cards, panels |
| `xl` | 16px | Large feature containers |
| `pill` | 9999px | Eyebrow badges, status pills |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card-metric}`).

### Buttons
- **`button-primary`** — Electric green fill, dark text, 4px radius. The single load-bearing CTA.
- **`button-secondary`** — Surface fill with `{colors.border-strong}` outline, near-white text.

### Pills & Badges
- **`badge`** — Surface-soft fill, electric-green eyebrow text, hairline border, full pill.

### Cards
- **`card`** — Surface over canvas, hairline border, 8px radius.
- **`card-metric`** — Same chrome with an oversized 56px metric number as the focal content.

### Inputs
- **`input`** — Surface fill, strong border. Focus swaps the border to electric green.

### Navigation
- **`nav-bar`** — Near-black sticky header, hairline bottom border, electric-green pill CTA right-aligned.

### Tabs
- **`tab`** — Surface fill, muted text when inactive; active tab takes electric-green text and border.

### Distinctive Components
- **Energy Gradient Wash**: Multi-stop gradient (green → cyan → blue → violet → lime) as an atmospheric backdrop behind hero and section dividers.
- **Metric Band**: Horizontal row of oversized statistics — the scale of the infrastructure as a layout primitive.

## Do's and Don'ts

### Do
- Use the near-black `{colors.background}` as the default canvas
- Reserve electric green (`{colors.primary}`) for CTAs, active states, and live signals
- Deploy the gradient as atmospheric washes, not solid fills
- Size key metrics like display headlines (56px, weight 700)
- Keep chrome squared off — `{rounded.sm}` is the maximum for buttons/inputs
- Build depth from surface stacking and hairline borders

### Don't
- Don't use heavy drop shadows for depth — surfaces and borders carry it
- Don't apply the gradient to body text or small UI — it's atmospheric only
- Don't use pill radius on buttons — pills are for eyebrow badges
- Don't introduce light font weights — the brand is confident
- Don't let electric green become a decorative fill across large areas — it's a signal

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked metrics, hamburger nav |
| Tablet | 600–991px | 2-column grids, reduced hero size |
| Desktop | 992–1280px | Full multi-column layout |
| Large | >1280px | Centered, max content width |

### Collapsing Strategy
- Hero: 64px → scales down, maintains negative tracking proportionally
- Metric bands: horizontal row → stacked, but numbers stay oversized
- Navigation: horizontal links + CTA → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Gradient washes: simplify on mobile to preserve performance

### Image Behavior
- Full-bleed photography (facilities, landscapes) maintains edge-to-edge treatment
- Gradient backdrops soften on mobile
- Portfolio imagery keeps consistent squared corners

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: near-black `{colors.background}`
- Heading text: near-white `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Primary CTA: electric green `{colors.primary}`, dark text
- Border: hairline `{colors.border}`
- Focus ring: electric green `{colors.primary}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}` with a soft multi-stop gradient wash (green→cyan→blue→violet). Headline 64px Inter weight 700, line-height 1.02, letter-spacing -2px, color `{colors.ink}`. Subtitle 18px weight 400, `{colors.ink-secondary}`. Electric-green CTA (`{colors.primary}`, dark text, 4px radius, 14px 26px padding)."
- "Build a metric card: `{colors.surface}` fill, 1px `{colors.border}`, 8px radius, 32px padding. Big number 56px Inter weight 700 letter-spacing -1.8px in `{colors.ink}`; label below 13px in `{colors.ink-secondary}`."
- "Design an eyebrow badge: `{colors.surface-soft}` fill, `{colors.primary}` text, 13px weight 600 letter-spacing 1.2px, full pill, hairline border."
- "Create a dark sticky nav: `{colors.background}`, hairline bottom border, 15px Inter weight 600 links in `{colors.ink}`, electric-green pill CTA right."

### Iteration Guide
1. Default to the near-black canvas — this is a dark-first system
2. Electric green is a signal, never a wallpaper — CTAs and live states only
3. The gradient is atmospheric backdrop, never applied to text or small UI
4. Keep radius near zero (4px workhorse) for the industrial character
5. Treat big numbers as headlines — metrics are hero content
6. Depth = lighter surfaces + hairline borders, not shadows

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Terra. Brand names and trademarks belong to their respective owners.