# Design Reference - Eco
> Architectural tech blueprint. Polished surfaces and precise typography overlay an expansive, slightly muted cityscape.

## Source
- Original site: https://eco.com
- Captured: 2026-04-11T16:17:41.349Z

## Tags
- gradient-accent
- high-contrast
- minimalist
- typographic-heavy
- dark-mode-sections
- clean
- professional
- tech-focused
- monochromatic-base
- large-typography

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| White Smoke | `#ffffff` | neutral | Primary page background, text on dark backgrounds, active states. |
| Off-White Mist | `#efefef` | neutral | Secondary backgrounds, subtly lifted UI elements, button fills. |
| Midnight Ink | `#0f111a` | neutral | Primary text on light backgrounds, dark mode backgrounds. |
| Dark Charcoal | `#000000` | neutral | Deepest dark backgrounds, strong text contrast. |
| Near Black | `#141414` | neutral | Subtle background depth in dark sections. |
| Light Steel | `#aeaeae` | neutral | Subtle text emphasis, inactive states, borders in light themes. |
| Graphite Grey | `#2a2a2a` | neutral | Button backgrounds, dark neutral elements. |
| Mid Grey | `#222222` | neutral | Text on very light backgrounds, subtle borders. |
| Pale Ash | `#a0a0a0` | neutral | Muted headings, secondary text, placeholders. |
| Skybound Gradient | `#1c53bd` | brand | Highlight elements, interactive indicators, brand-specific imagery – draws attention and signifies modernity. |
| Cloud Grey | `#a6b8d1` | accent | Subtle interactive link color, non-critical emphasis – a soft, cool blue-gray that hints at interaction without aggressive saturation. |

## Typography
- role: Primary display and heading font, used for impactful statements. The tight letter-spacing at larger sizes gives it a contemporary and precise feel.; sizes: 14px, 16px, 24px, 40px, 84px, 90px, 96px; family: Interdisplay; weight: 400; lineHeight: 0.90, 0.95, 1.06, 1.20, 1.43, 1.50; substitute: Inter; letterSpacing: -0.0400em, -0.0300em, -0.0200em, -0.0100em, 0.0180em
- role: Secondary display and heading font, also used for navigation and important interactive elements. Its strong presence at larger scales complements Interdisplay.; sizes: 16px, 48px, 84px, 96px; family: Roobert; weight: 400; lineHeight: 0.95, 1.06, 1.20, 1.33; substitute: Montserrat; letterSpacing: -0.0400em, -0.0300em, -0.0200em, -0.0100em
- role: Standard body text and links. Slightly tighter letter-spacing ensures readability and a modern appearance.; sizes: 14px, 16px, 22px; family: Inter; weight: 400; lineHeight: 1.00, 1.20, 1.50; substitute: Inter; letterSpacing: -0.0200em, -0.0100em
- role: Used for code snippets, secondary labels, and data points, providing a technical contrast to the primary sans-serifs.; sizes: 14px, 16px; family: Fragmentmono; weight: 400; lineHeight: 1.00, 1.50, 1.71; substitute: Space Mono; letterSpacing: -0.0100em
- role: Specialized monospaced text, likely for unique technical labels or data. Its tight letter-spacing reinforces a precise data-driven feel.; sizes: 14px; family: Aeonik Mono; weight: 400; lineHeight: 1.10; substitute: IBM Plex Mono; letterSpacing: -0.0400em

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "large": "128px",
      "inputs": "8px",
      "buttons": "8px",
      "default": "8px"
    },
    "elementGap": "8px",
    "sectionGap": "48px",
    "cardPadding": "0px"
  },
  "radius": {
    "large": "128px",
    "inputs": "8px",
    "buttons": "8px",
    "default": "8px"
  }
}
```

## Component Patterns
- name: CTA Button Group
- name: Feature Stat Block
- name: Feature Cards Row
- name: Primary Filled Button; role: Main call to action for interactive steps.
- name: Secondary Filled Button; role: Alternative call to action, less prominent than primary.
- name: Text Link Button; role: Minimalistic interactive elements, inline with text.
- name: Input Field; role: Data entry fields across the application.
- name: Navigation Link; role: Primary navigation items in headers and footers.
- name: Hero Headline; role: Largest, most prominent text on key landing sections.
- name: Subheadline / Body Intro; role: Supportive text for headlines or section introductions.

## Do
- Do use `Roobert` with `96px` size and `-0.0400em` letter spacing for hero headlines to maintain visual impact and precision.
- Do apply `8px` border-radius uniformly to all interactive elements like buttons and input fields.
- Do leverage the `Skybound Gradient` (`linear-gradient(90deg, rgb(28, 83, 189) 71%, rgb(83, 173, 254))`) only for key calls-to-action or distinct visual indicators.
- Do use `48px` as the standard `sectionGap` to ensure consistent vertical rhythm between major content blocks.
- Do prioritize `Midnight Ink (#0f111a)` for text on light backgrounds and `White Smoke (#ffffff)` for text on dark backgrounds for accessibility and brand consistency.
- Do use `Fragmentmono` for all technical code-like text or data displays, ensuring it is `14px` with a `1.00` line-height.
- Do align major content centrally within `pageMaxWidth` when an explicit max-width is later established, or maintain a full-bleed layout as seen in initial hero sections.

## Don't
- Don't use `Skybound Gradient` merely for decorative purposes; reserve it for functional or brand-critical highlights.
- Don't introduce additional border-radius values beyond `8px`, `12px`, and `128px` to preserve the established shape vocabulary.
- Don't deviate from the specified tight letter-spacing for `Interdisplay` and `Roobert` at larger sizes; it is a signature trait.
- Don't use highly saturated colors for backgrounds or large areas; maintain the largely achromatic base palette.
- Don't apply `box-shadow` for elevation on cards or containers; the system relies on background color shifts for depth.
- Don't use `Off-White Mist (#efefef)` for primary text, as it's intended for secondary backgrounds and subtle lifts, not high-contrast text.
- Don't introduce new font families; the current selection (Interdisplay, Roobert, Inter, Fragmentmono, Aeonik Mono) is curated for purpose.