# Agencyhype Design System

> High-contrast SaaS marketing aesthetic defined by deep nautical blues, electric cyan accents, and bold geometric Futura headlines.

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

## TL;DR
Agencyhype utilizes a "monochrome-plus" system where a white foundation (#ffffff) is punctuated by a sophisticated range of blues, from deep navy (#083b5e) to vibrant cyan (#008bc6). The system's high-voltage energy comes from a signature yellow accent (#f5eb48) used sparingly for high-conversion CTAs. Typography is a disciplined pairing of **Futura PT** for authoritative, geometric headings and **Adelle Sans** for highly legible, professional body text. Layouts rely on generous vertical spacing (up to 80px) and soft-edged cards (10px–15px radii) that float on subtle, large-spread shadows.

## Signature DNA
1. **The "Hype" Yellow CTA** (#f5eb48): A high-contrast yellow pill used exclusively for primary conversion points, often set against dark blue or white backgrounds to maximize visual saliency.
2. **Geometric Display Hierarchy**: Massive 130px Futura PT headlines with aggressive negative letter-spacing (-3.9px) create a "poster-like" editorial feel for hero sections.
3. **Layered Depth**: Use of soft, low-opacity shadows (rgba(0,0,0,0.15)) with large blurs (up to 20px) to separate white content cards from the background without using heavy borders.

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Primary canvas, card backgrounds, button text | 84 | 1.0 | Computed Style |
| `{color.black}` | `#000000` | Primary text, deep shadows | 1 | 1.0 | CSS Variable |
| `{color.gray.600}` | `#666666` | Muted body text, secondary descriptions | 11 | 0.8 | Computed Style |
| `{color.gray.300}` | `#c4c4c4` | Decorative surface backgrounds | 7 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.navy}` | `#083b5e` | Primary headings, button text, icon strokes | 108 | 0.8 | Computed Style |
| `{color.cyan}` | `#008bc6` | Secondary headings, links, interactive text | 80 | 0.8 | Computed Style |
| `{color.sky}` | `#83d5f8` | Borders, soft surface backgrounds | 24 | 0.8 | Computed Style |
| `{color.yellow}` | `#f5eb48` | **Primary CTA background**, highlight text | 3 | 0.6 | Computed Style |
| `{color.ice}` | `#e5f2fa` | Section alternating backgrounds, card fills | 9 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Futura PT | 400, 700 | Headings, Display, Buttons | Jost | Licensed |
| Adelle Sans | 400, 500, 600, 700 | Body, UI Labels, Navigation | Montserrat | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 130px | 130px | -3.9px | 700 | Hero H1 | `h1` |
| `{type.display.lg}` | 40px | 48px | normal | 700 | Section H2 | `h2` |
| `{type.heading.md}` | 32px | 38.4px | normal | 700 | Feature titles | `h3` |
| `{type.heading.sm}` | 24px | 36px | normal | 700 | Bold paragraph leads | `strong` |
| `{type.body.lg}` | 18px | 27px | normal | 400 | Main article text | `article p` |
| `{type.body.md}` | 16px | 26px | normal | 400 | Navigation, footer links | `a` |
| `{type.button}` | 16px | 27.2px | normal | 700 | CTA Labels | `a.et_pb_button` |
| `{type.caption}` | 14px | 21px | normal | 400 | Metadata, info text | `div.info` |

### Principles
1. **Display Tightness**: Headlines above 40px must use negative letter-spacing to maintain geometric tension.
2. **Body Breath**: Adelle Sans body text uses a 1.5x line-height (27px on 18px base) to ensure readability in long-form marketing copy.
3. **Weight Contrast**: Skip weights in hierarchy (e.g., pair 700 display with 400 body) to create clear visual anchors.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 22 |
| `{space.sm}` | 10px | 78 |
| `{space.md}` | 20px | 19 |
| `{space.lg}` | 30px | 26 |
| `{space.xl}` | 80px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default sections, sharp containers | 244 occurrences |
| `{radius.sm}` | 10px | Feature cards, small buttons | `Card` component |
| `{radius.md}` | 15px | Testimonial cards | `Card` component |
| `{radius.full}` | 30px+ | Primary pill buttons | `Rounded Button` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.soft}` | `0px 8px 16px rgba(0,0,0,0.15)` | Floating buttons | Rounded Button |
| `{shadow.deep}` | `0px 8px 20px rgba(0,0,0,0.15)` | Content cards | Surface component |
| `{shadow.mega}` | `0px 11.6px 23.3px rgba(0,0,0,0.15)` | Featured case studies | Card component |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** https://agencyhype.com
**Spec:** Background `{color.white}` (#ffffff) | Text `{color.cyan}` (#008bc6) | Radius 30px | Padding 10px 45px | Shadow `{shadow.soft}`
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Content Card
**Role:** Service and feature highlights
**Pages observed:** https://agencyhype.com
**Spec:** Background `{color.ice}` (#e5f2fa) | Text `{color.navy}` (#083b5e) | Radius 10px | Padding 15px | Typography `{type.body.lg}`
**States observed:** Default: captured

#### Case Study Card
**Role:** Portfolio and Work showcase
**Pages observed:** https://agencyhype.com
**Spec:** Background `{color.white}` (#ffffff) | Radius 15px | Padding 20px | Shadow `{shadow.mega}`
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Info Badge
**Role:** Metadata and tags (e.g., "CRO", "Design")
**Pages observed:** https://agencyhype.com
**Spec:** Background `{color.sky}` (#83d5f8) | Text `{color.navy}` (#083b5e) | Typography `{type.caption}`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px |
| Section Padding | 80px (vertical) |
| Grid Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | H1 scales to ~60px; 3-column grids collapse to 1-column stack. |

## Imagery & decoration
- **Iconography**: Uses thin-stroke blue icons with circular enclosures.
- **Graphic Motif**: Dotted grid patterns (cyan) used as background textures in hero sections.
- **Avoids**: Heavy drop shadows with high opacity; saturated reds or greens.

## Do's
- Use **Futura PT 700** for all primary headlines.
- Apply **#f5eb48 (Yellow)** only to the most critical "Book Consultation" or "Get Recommendations" buttons.
- Ensure cards have a minimum radius of **10px**.
- Use **#e5f2fa (Ice Blue)** for alternating background sections to maintain brand rhythm.
- Keep letter-spacing on H1 at **-3.9px** for that signature "Hype" look.

## Don'ts
- **Wrong:** Using #007bff (Standard Blue) as the primary brand blue. **Right:** Use #083b5e (Navy) or #008bc6 (Cyan). **Reason:** Standard blue is a generic browser default; Agencyhype uses a custom nautical palette.
- Do not use sharp corners (0px) for interactive cards or buttons.
- Do not use Adelle Sans for display headlines; it is reserved for body and UI.
- Avoid using the Yellow accent for text longer than 3 words.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-navy: #083b5e;
  --color-cyan: #008bc6;
  --color-yellow: #f5eb48;
  --color-ice: #e5f2fa;
  --font-display: "Futura PT", sans-serif;
  --font-body: "Adelle Sans", sans-serif;
  --radius-card: 10px;
  --shadow-soft: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
}
```

## Agent prompt examples
- "Generate a marketing hero section using Futura PT Bold for the headline with -3% tracking and a primary pill button in #f5eb48 yellow."
- "Create a 3-column feature grid where each card has a #e5f2fa background, 10px border-radius, and 18px Adelle Sans body text."
- "Design a testimonial block with a 15px rounded white card sitting on a 20px blur shadow (rgba 0,0,0,0.15)."

## Known gaps
- Hover and Active states for the yellow primary CTA were not explicitly captured in the token data.
- Specific mobile-only typography tokens were inferred from visual scaling rather than direct computed style evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://agencyhype.com | 1440px | 2026-06-06 |
| Mobile View | https://agencyhype.com | 390px | 2026-06-06 |