# Hypertry Design System

> A high-contrast nautical interface pairing deep navy foundations with vibrant cyan-to-azure interactive layers.

**Source:** [https://hypertry.com](https://hypertry.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Hypertry utilizes a "monochrome-plus" system where a deep achromatic base of white (#ffffff) and dark navy (#0e0c26) is punctuated by a dual-tone cyan primary palette. The brand relies on **Heebo** for all typographic hierarchy, utilizing heavy weights (700-900) for display and headings to create a sense of structural density. Interactive elements are strictly defined by two primary tokens: a medium azure (#3c9bc6) for secondary actions and a bright cyan (#52c4db) for primary CTAs. Layouts are characterized by sharp-edged sections alternating between white and navy, with 5px rounded corners reserved specifically for cards and buttons.

## Signature DNA
1. **The Navy Anchor** (The use of `#0e0c26` as a full-width section background to create high-contrast "dark mode" bands between white content areas, observed on the homepage and pricing pages.)
2. **Heebo Heavyweight** (The consistent application of weight 900 for headings and brand identifiers, creating a bold, industrial aesthetic.)
3. **Cyan-Azure Split** (The intentional use of two distinct blue-family colors—`#52c4db` for "Primary/New" actions and `#3c9bc6` for "Secondary/Pricing" actions.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Primary canvas, text on dark, button text | 73 | 1 | `--white` |
| `{colors.navy}` | `#0e0c26` | Section backgrounds, primary accent text | 24 | 1 | `--color5` |
| `{colors.gray-text}` | `#666666` | Default body copy, secondary button text | 114 | 0.8 | Computed |
| `{colors.light-bg}` | `#f8f9fa` | Subtle section backgrounds, card surfaces | 3 | 1 | `--light` |
| `{colors.dark-text}` | `#212529` | High-emphasis body text, UI labels | 12 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.azure}` | `#3c9bc6` | Secondary CTAs, pricing cards, active links | 39 | 1 | `--color2` |
| `{colors.cyan}` | `#52c4db` | Primary CTAs, hero buttons, highlights | 26 | 1 | `--color1` |
| `{colors.slate}` | `#263a5b` | Decorative text, sub-headers | 9 | 0.6 | Computed |
| `{colors.muted-blue}` | `#8a98ac` | De-emphasized labels, icons | 4 | 0.6 | Computed |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{colors.success}` | `#28a745` | Positive indicators |
| `{colors.error}` | `#dc3545` | Validation and error states |
| `{colors.warning}` | `#ffc107` | Cautionary alerts |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Heebo | 400, 500, 600, 700, 900 | All headings, UI, and body | Heebo (Google Fonts) | OFL |
| Arial | 700 | Legacy body fallback | Sans-serif | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 42px | 48px | normal | 900 | Hero/404 headers | `div.text404` |
| `{type.h1}` | 24px | 36px | normal | 900 | App name / Main titles | `span#app_name` |
| `{type.h2}` | 22px | 26.4px | normal | 900 | Section headers | `h4` |
| `{type.h3}` | 20px | 24px | normal | 600 | Card titles | `h5.homecolor` |
| `{type.subheading}` | 18px | 21.12px | normal | 600 | Muted sub-headers | `h5.card-title.text-muted` |
| `{type.body-lg}` | 18px | 17.6px | normal | 900 | Blog titles | `p.blog-title` |
| `{type.body}` | 16px | 20px | normal | 400 | Standard body | `i.flag.flag-icon-gb` |
| `{type.body-sm}` | 14px | 21.24px | normal | 400 | Nav, descriptions | `div#navbarResponsive` |
| `{type.label}` | 13px | 19.2px | normal | 500 | UI metadata | `div.billing` |

### Principles
1. **Heavyweight Priority:** Use weight 900 for all primary brand moments and section titles.
2. **Tight Display Leading:** Display sizes (42px+) use a line-height ratio of ~1.14 to maintain visual density.
3. **Standardized Body:** Body text at 14px uses a generous 1.5x line-height (21.24px) for readability against white backgrounds.

## Spacing
**Base unit:** 5px (derived from common padding/margin increments)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 9 |
| `{space.sm}` | 10px | 19 |
| `{space.md}` | 15px | 17 |
| `{space.lg}` | 20px | 25 |
| `{space.xl}` | 30px | 6 |
| `{space.xxl}` | 40px | 5 |
| `{space.section}` | 128px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers, footer | 223 occurrences |
| `{radius.input}` | 3px | Form fields, small buttons | 16 occurrences |
| `{radius.card}` | 5px | Pricing cards, primary CTAs | 15 occurrences |
| `{radius.control}` | 8px | Interactive UI modules | 5 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.deep}` | `rgb(0, 0, 0) 0px 0px 15px 0px` | Hovered cards, social icons | 5 occurrences |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.3) 0px 0px 15px 0px` | Floating UI elements | 3 occurrences |

## Components

### Tier 1: Foundational

#### Surface
**Role:** Base layout container
**Pages observed:** All
**Spec:** Background `{colors.white}` (#ffffff) | Text `{colors.gray-text}` (#666666) | Radius `{radius.sharp}` (0px) | Padding `{space.md}` (15px)
**States observed:** Default: captured

#### Rounded Button
**Role:** Primary action trigger
**Pages observed:** pricing, about
**Spec:** Background `{colors.cyan}` (#00c4dc) | Text `{colors.white}` (#ffffff) | Radius `{radius.card}` (5px) | Padding 20px 26px | Typography `{type.h1}` (24px)
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Pricing Card
**Role:** Plan selection container
**Pages observed:** pricing, about
**Spec:** Background `{colors.azure}` (#3c9bc6) | Text `{colors.white}` (#ffffff) | Radius `{radius.card}` (5px) | Padding 6px 12px | Typography 14px
**States observed:** Default: captured

#### Social Icon Plate
**Role:** Social media links
**Pages observed:** homepage
**Spec:** Background `{colors.white}` (#ffffff) | Border 1px `{colors.muted-blue}` | Shadow `{shadow.deep}` | Radius `{radius.card}` (5px)
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Dark Section Band
**Role:** High-contrast content separation
**Pages observed:** homepage
**Spec:** Background `{colors.navy}` (#0e0c26) | Text `{colors.white}` (#ffffff) | Radius `{radius.sharp}` (0px)
**States observed:** Default: captured

#### Blog Entry Card
**Role:** Content preview
**Pages observed:** homepage
**Spec:** Background `{colors.white}` (#ffffff) | Text `{colors.gray-text}` (#666666) | Radius `{radius.input}` (3px) | Shadow `{shadow.soft}`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1140px |
| Section Padding | 128px (vertical) |
| Column Gap | 30px |

## Do's
- Use **Heebo 900** for all section titles to maintain brand weight.
- Apply `#0e0c26` for full-width background bands to break up long white pages.
- Reserve `#52c4db` (Cyan) for the most critical "Start" or "Home" actions.
- Use `#3c9bc6` (Azure) for secondary "Pricing" or "Learn More" actions.
- Maintain a **5px border radius** on all content cards and primary buttons.

## Don'ts
- **Don't** use `#3c9bc6` (Azure) for primary "Try for Free" buttons; use Cyan.
- **Don't** use rounded corners on section backgrounds; these must remain sharp (0px).
- **Don't** use light gray text on navy backgrounds; always use white (#ffffff) for contrast.
- **Wrong:** Using `#007bff` (Standard Blue) for buttons. **Right:** Use `#3c9bc6`. **Reason:** Standard blue is a system fallback, not a brand token.
- **Wrong:** Setting display headers to weight 400. **Right:** Use weight 900. **Reason:** Brand identity relies on heavy typographic density.

## Quick start

### CSS Variables
```css
:root {
  --hypertry-navy: #0e0c26;
  --hypertry-azure: #3c9bc6;
  --hypertry-cyan: #52c4db;
  --hypertry-white: #ffffff;
  --hypertry-gray: #666666;
  --hypertry-radius-card: 5px;
  --hypertry-font-main: 'Heebo', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-navy: #0e0c26;
  --color-azure: #3c9bc6;
  --color-cyan: #52c4db;
  --font-heebo: "Heebo", sans-serif;
  --radius-card: 5px;
  --shadow-deep: 0 0 15px 0 rgb(0, 0, 0);
}
```

## Known Gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific navigation transitions (hamburger menu behavior) were not fully documented.
- Form validation error messaging components were not present in the analyzed pages.