# Easternpeak Design System

> High-contrast enterprise technology canvas anchored by deep navy foundations and vibrant "Success Green" accents.

**Source:** https://easternpeak.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Easternpeak utilizes a high-contrast monochrome base of white (#ffffff) and deep navy (#002236) to establish enterprise authority. The system’s energy is derived from a specific "Success Green" (#1dba42 / #33b44a) used exclusively for primary actions and highlighting key transformation metrics. Typography is strictly Montserrat, ranging from ultra-heavy 800-weight display headers to light 300-weight body copy, creating a dramatic hierarchy. Layouts favor sharp 0px corners for containers, punctuated by rare 10px or pill-shaped controls, reinforcing a precise, engineering-led aesthetic.

## Signature DNA
1. **The "Success" Highlight** (Vibrant green #33b44a is used as a text-level highlight within navy or white headlines to emphasize positive outcomes like "NOW" or "SAFE").
2. **Heavy-Weight Display** (Montserrat at weight 800 is the primary voice for all impact data and section headers, often paired with generous line heights exceeding 70px for display sizes).
3. **Sharp Enterprise Containers** (Cards and sections maintain a 0px border radius, creating a rigid, professional grid that only breaks for interactive buttons or circular icons).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background and card surface | 66 | 0.8 | computed_style |
| `{color.ink}` | `#000000` | Primary text and button labels | 37 | 0.8 | computed_style |
| `{color.navy}` | `#002236` | Deep surface backgrounds and primary headings | 51 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.green.primary}` | `#1dba42` | Primary CTA background | 4 | 0.6 | computed_style |
| `{color.green.text}` | `#33b44a` | Success highlights and inline emphasis | 37 | 0.8 | computed_style |
| `{color.border.muted}` | `#2a3347` | Subtle dividers on dark surfaces | 6 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 300, 400, 600, 700, 800 | Universal (Heading, Body, UI) | Montserrat (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 53px | 79.86px | normal | 800 | Impact metrics | `p.impact-data` |
| `{type.display.lg}` | 53px | 71.77px | normal | 800 | Hero H1 | `h1` |
| `{type.display.md}` | 46px | 54.14px | normal | 800 | Section headers | `h2.tl__title` |
| `{type.heading.md}` | 34px | 49.30px | normal | 800 | Sub-section titles | `h3.h4` |
| `{type.heading.sm}` | 23px | 30.27px | normal | 800 | Blog/News titles | `a.news-blog__item-title` |
| `{type.body.bold}` | 19px | 21.72px | normal | 700 | UI labels / Spans | `span` |
| `{type.body.md}` | 17px | 27.20px | normal | 400 | Standard prose | `p` |
| `{type.body.light}` | 17px | 27.20px | normal | 300 | De-emphasized prose | `p` |
| `{type.body.sm}` | 15px | 24.63px | normal | 400 | Footer/Review links | `a.reviews__item-link` |

### Principles
1. **Weight as Hierarchy:** Use weight 800 for any text representing a "result" or "title"; use weight 400 or 300 for descriptive context.
2. **Chromatic Emphasis:** Saturated green (#33b44a) is applied to single words within a sentence to draw the eye to value propositions.
3. **Tight Tracking:** All Montserrat instances use "normal" letter spacing, relying on heavy weights rather than tracking for impact.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 6 |
| `{space.sm}` | 16px | 6 |
| `{space.md}` | 32px | 6 |
| `{space.lg}` | 60px | 7 |
| `{space.xl}` | 118px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default for cards, buttons, and sections | 167 occurrences |
| `{radius.md}` | 10px | Interactive cards / Hover states | `radius: 10px` |
| `{radius.full}` | 100px | Circular icons / Avatars | `radius: 100%` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | Standard section containers | `shadow: none` |
| Raised | rgba(0, 0, 0, 0.15) -0.1px 4px 24.1px 4.9px | Featured cards (Success Stories) | `shadow: rgba(0,0,0,0.15)...` |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site conversion (Get in Touch)
**Pages observed:** https://easternpeak.com
**Spec:** Background `{color.green.primary}` (#1dba42) / Text `{color.ink}` (#000000) / Radius 0px / Typography Montserrat 700 17px
**States observed:** Default: captured | Hover: not captured

#### Navigation Link
**Role:** Header menu items
**Pages observed:** https://easternpeak.com
**Spec:** Background transparent / Text `{color.canvas}` (#ffffff) / Typography Montserrat 400 17px
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Service offerings (Augment, Build, Transform)
**Pages observed:** https://easternpeak.com
**Spec:** Background `{color.canvas}` (#ffffff) / Border 1px `{color.navy}` (#002236) / Radius 0px / Padding 32px
**States observed:** Default: captured | Hover: not captured

#### News Card
**Role:** Blog and insight previews
**Pages observed:** https://easternpeak.com
**Spec:** Background `{color.canvas}` (#ffffff) / Radius 10px / Shadow `{elevation.raised}` / Typography Montserrat 800 23px
**States observed:** Default: captured | Hover: not captured

### Tier 3: Surface-specific

#### Impact Counter
**Role:** Displaying company statistics
**Pages observed:** https://easternpeak.com
**Spec:** Text `{color.green.text}` (#33b44a) / Typography Montserrat 800 53px / Border-left 2px `{color.navy}` (#002236)
**States observed:** Default: captured

#### Review Surface
**Role:** Client testimonials on dark navy
**Pages observed:** https://easternpeak.com
**Spec:** Background `{color.navy}` (#002236) / Text `{color.canvas}` (#ffffff) / Padding 118px (bottom)
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding (Vertical) | 118px |
| Grid Gap | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked cards, reduced display type to ~34px, center-aligned impact metrics |
| Desktop | 1440px | 3-up card grids, 118px vertical section spacing |

## Imagery & decoration
- **Architectural Photography:** High-angle shots of glass skyscrapers in cool blue tones.
- **Green Accents:** Horizontal rules and "Learn More" arrows use #33b44a.
- **Grayscale Logos:** Partner logos are strictly grayscale to maintain monochrome authority.

## Do's
- Use Montserrat 800 for all numerical data and primary headers.
- Highlight exactly one "power word" per headline using #33b44a.
- Maintain 0px border radius for all primary structural containers.
- Use deep navy (#002236) for high-contrast section transitions.
- Ensure "Learn More" links always include the green right-arrow icon.

## Don'ts
- **Wrong:** Using #33b44a for large blocks of body text. **Right:** Use #000000 or #ffffff. **Reason:** Legibility and brand intent (green is for emphasis only).
- **Wrong:** Applying rounded corners to primary CTA buttons. **Right:** Keep them 0px sharp. **Reason:** Consistency with the "Sharp Enterprise" DNA.
- **Wrong:** Mixing serif fonts into the system. **Right:** Use Montserrat for all roles. **Reason:** Easternpeak is a single-typeface brand.
- **Wrong:** Using sub-brand colors (if any existed) as the primary background. **Right:** Use #ffffff or #002236.

## Similar brands
- IBM (Achromatic foundation, specific accent color)
- McKinsey & Company (High-contrast enterprise navy/white)
- Infosys (Technical, grid-heavy layout)

## Quick start

### CSS Custom Properties
```css
:root {
  --ep-color-canvas: #ffffff;
  --ep-color-navy: #002236;
  --ep-color-green-primary: #1dba42;
  --ep-color-green-text: #33b44a;
  --ep-color-ink: #000000;
  --ep-font-main: 'Montserrat', sans-serif;
  --ep-radius-sharp: 0px;
  --ep-shadow-raised: -0.1px 4px 24.1px 4.9px rgba(0, 0, 0, 0.15);
}
```

### Tailwind v4
```javascript
@theme {
  --color-canvas: #ffffff;
  --color-navy: #002236;
  --color-green-primary: #1dba42;
  --color-green-text: #33b44a;
  --font-montserrat: 'Montserrat';
  --shadow-raised: -0.1px 4px 24.1px 4.9px rgba(0, 0, 0, 0.15);
}
```

## Agent prompt examples
- "Create a hero section for Easternpeak using Montserrat 800 for the headline, a white background, and a single word highlighted in #33b44a."
- "Design a 3-column grid of cards with 0px border radius, a 1px #002236 border, and a #1dba42 primary button at the bottom."
- "Generate a statistics section with large #33b44a numbers at 53px weight 800, each with a 2px navy left-border."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Form input styles and validation states (Error/Success) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://easternpeak.com | 1440x900 | 2026-06-06 |
| Mobile Home | https://easternpeak.com | 390x844 | 2026-06-06 |