# Earthcam Design System

> Industrial-grade monitoring anchored by deep navy surfaces and high-contrast crimson accents.

**Source:** https://earthcam.net | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Earthcam utilizes a high-contrast industrial palette where deep navy `#003366` and stark white `#ffffff` form the primary structural canvas. The brand's visual energy is concentrated in a signature crimson `#760000` used exclusively for critical headings and semantic emphasis. Typography is functional and utilitarian, relying on Arial for all levels of hierarchy with a heavy emphasis on bold weights (700-900) for section titles. Layouts are dense and grid-heavy, featuring sharp 0px corners for most containers, occasionally softened by 6px or 10px radii for interactive controls.

## Signature DNA
1. **The Crimson Header** (Crimson `#760000` is applied to primary section headers like "The industry leader..." and "Services for Every Industry" across all analyzed pages to command attention against the neutral canvas.)
2. **Industrial Sharpness** (A dominant border-radius of `0px` is applied to cards, hero sections, and navigation containers, reinforcing a professional, construction-adjacent aesthetic.)
3. **Navy Structural Anchors** (Deep navy `#003366` is used for high-importance surfaces, including the "Contact Us" banner and specific UI plates, providing a stable foundation for white text.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and card surfaces | 56 | 1.0 | `--bs-body-bg` |
| `{color.ink.primary}` | `#5a5a5a` | Standard body text and secondary labels | 291 | 0.8 | Computed Style |
| `{color.ink.muted}` | `#666666` | Deemphasized body text | 225 | 0.8 | Computed Style |
| `{color.surface.neutral}` | `#f7f7f7` | Subtle section backgrounds and alternating bands | 3 | 1.0 | `--bs-tertiary-bg` |
| `{color.surface.muted}` | `#e7e7e7` | Secondary background surfaces | 6 | 1.0 | `--bs-secondary-bg-subtle` |
| `{color.ink.emphasis}` | `#000000` | High-contrast text and primary button backgrounds | 14 | 1.0 | `--bs-emphasis-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.accent.crimson}` | `#760000` | Primary brand heading color; semantic emphasis | 28 | 0.8 | Computed Style |
| `{color.accent.navy}` | `#003366` | Primary action surfaces and structural banners | 17 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Arial | 400, 500, 700, 900 | Universal: Headings, Body, UI | Arimo | System |
| Manrope | 700 | Secondary Heading | Manrope (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 36px | 43.2px | normal | 700 | Primary Page Title | `h1.text-center.title` |
| `{text.h2}` | 30px | 36px | normal | 500 | Section Headings | `h2` |
| `{text.h2.heavy}` | 30px | 36px | normal | 900 | Heavy Emphasis | `span.ecBlack` |
| `{text.h3}` | 24px | 28.8px | normal | 500 | Sub-section Headings | `h2` |
| `{text.h5}` | 20px | 24px | normal | 700 | Component Titles | `h5` |
| `{text.body.lg}` | 18px | 27px | normal | 700 | Strong Body / Lead | `span` |
| `{text.body}` | 16px | 24px | normal | 400 | Default Body Text | `div.bodyContainer` |
| `{text.body.sm}` | 14px | 16.8px | normal | 400 | List items / Footer | `li` |
| `{text.caption}` | 12px | 14.4px | normal | 400 | UI Labels / Metadata | `button.btn` |

### Principles
1. **Center-Aligned Authority:** All major brand headings are center-aligned to establish a formal, editorial hierarchy.
2. **Crimson for Hierarchy:** Color is used as a typographic weight; `#760000` is reserved for the highest level of information architecture.
3. **Utilitarian Clarity:** Reliance on Arial across all viewports ensures maximum legibility in technical and industrial contexts.

## Spacing
**Base unit:** 5px (derived from common 10px/15px/20px patterns)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 29 |
| `{space.sm}` | 10px | 125 |
| `{space.md}` | 15px | 100 |
| `{space.lg}` | 20px | 35 |
| `{space.xl}` | 40px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Cards, Sections, Primary Buttons | 577 occurrences |
| `{radius.md}` | 6px | Form inputs, Rounded Buttons | 11 occurrences |
| `{radius.lg}` | 10px | Controls / Interactive plates | 12 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.flat}` | none | Default state for most cards | Component Spec |
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px` | Floating UI elements | 6 occurrences |
| `{shadow.inset}` | `rgba(0, 0, 0, 0.03) 0px -1px 3px 0px inset` | Navy surface depth | 3 occurrences |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global site header
**Pages observed:** 3
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.ink.primary}` (#5a5a5a) / Radius `0px` / Padding `10px 0px` / Typography `{text.body}` (16px)
**States observed:** Default | Hover: Not captured

#### Button
**Role:** Standard UI action
**Pages observed:** 3
**Spec:** Background `transparent` / Text `#cccccc` / Border `transparent` / Radius `0px` / Padding `8px 10px` / Typography `{text.caption}` (12px)
**States observed:** Default | Active: Not captured

### Tier 2: Patterns

#### Rounded Button
**Role:** Secondary call-to-action
**Pages observed:** 3
**Spec:** Background `transparent` / Text `{color.ink.primary}` (#5a5a5a) / Border `{color.ink.primary}` (#5a5a5a) / Radius `6px` / Padding `0px`
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Navy Surface
**Role:** High-impact call-to-action banner
**Pages observed:** 3
**Spec:** Background `{color.accent.navy}` (#003366) / Text `{color.ink.primary}` (#5a5a5a) / Shadow `{shadow.inset}` / Radius `0px`
**States observed:** Default | Active: Not captured

#### Neutral Section
**Role:** Alternating content band
**Pages observed:** 3
**Spec:** Background `{color.surface.neutral}` (#f7f7f7) / Text `{color.ink.muted}` (#666666) / Border `#dddddd` / Padding `30px 0px`
**States observed:** Default

#### Muted Surface
**Role:** Secondary content area
**Pages observed:** 3
**Spec:** Background `{color.surface.muted}` (#e7e7e7) / Text `{color.ink.muted}` (#666666) / Padding `25px 0px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (estimated from 1440px viewports) |
| Section Padding | 40px vertical |
| Grid Gutter | 15px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Grid items stack 1-up; Typography scales to 20px for h4p. |
| Desktop | 1440px | Multi-column grids (up to 6-up for technology cards); Horizontal navigation visible. |

## Imagery & decoration
Earthcam relies heavily on live-feed thumbnails and construction site photography. Decorative elements include a grayscale logo grid for partners and clients. The system avoids soft gradients or organic shapes, preferring rigid rectangular containers.

## Do's
- Use Crimson `#760000` for primary section headings to maintain brand authority.
- Maintain `0px` border radius for all structural content containers and primary buttons.
- Use Navy `#003366` as a background for full-width "Contact" or "Action" banners.
- Set body text to `#5a5a5a` for optimal legibility on white backgrounds.
- Align primary headers to the center of the viewport.

## Don'ts
- **Wrong:** Using `#0d6efd` (Bootstrap Blue) for primary buttons. **Right:** Use `#003366` or `#000000`. **Reason:** Bootstrap defaults conflict with the established industrial navy palette.
- **Wrong:** Applying rounded corners to feature cards. **Right:** Keep radius at `0px`. **Reason:** Sharp corners are a core part of the brand's industrial "Signature DNA".
- **Wrong:** Using Crimson `#760000` for body text. **Right:** Reserve for headings only. **Reason:** Overuse of the accent color diminishes its hierarchical value.

## Similar brands
- Caterpillar (Industrial, high-contrast)
- Hilti (Red/White/Gray industrial palette)
- Autodesk (Technical, utilitarian typography)

## Quick start

### CSS Variables
```css
:root {
  --ec-crimson: #760000;
  --ec-navy: #003366;
  --ec-white: #ffffff;
  --ec-gray-dark: #5a5a5a;
  --ec-gray-light: #f7f7f7;
  --ec-font-main: 'Arial', sans-serif;
  --ec-radius-none: 0px;
  --ec-radius-sm: 6px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-crimson: #760000;
  --color-navy: #003366;
  --color-industrial-gray: #5a5a5a;
  --font-arial: Arial, sans-serif;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Generate a hero section with a center-aligned H1 in #760000 Arial Bold and a sharp-edged CTA button with a #003366 background."
- "Create a 3-column feature grid using white cards with 0px border-radius and 1px #dddddd borders."
- "Design a footer using a #f7f7f7 background and #666666 Arial 14px text for link lists."

## Known gaps
- Hover and focus states for primary navigation were not explicitly captured in the static evidence.
- The exact transition logic for the mobile hamburger menu was not documented.
- Specific success/error messaging colors were not observed in the provided page flows.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://earthcam.net | 1440px | 2026-06-06 |
| Pricing | https://earthcam.net/pricing | 1440px | 2026-06-06 |
| About | https://earthcam.net/about | 1440px | 2026-06-06 |