# Openwavecomp Design System

> High-contrast enterprise utility defined by deep navy surfaces, stark white typography, and strict geometric card structures.

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

## TL;DR
Openwavecomp utilizes a high-contrast "Midnight & Snow" palette, where deep navy (#0b0f24) and pure black (#000000) serve as the primary canvases for white (#ffffff) content. The system relies heavily on the Inter typeface, utilizing its full weight range from 400 to 700 to establish hierarchy without secondary font families. Components are characterized by two distinct geometric extremes: sharp 0px corners for structural sections and soft 9999px pill shapes for interactive CTAs and badges. Visual depth is achieved through subtle 1px borders in light blue (#e3efff) rather than heavy shadows.

## Signature DNA
1. **The Midnight Canvas** (Deep navy #0b0f24 or black #000000 backgrounds paired with white #ffffff text, observed on the Hero and Footer sections across all pages).
2. **Pill-to-Sharp Contrast** (Interactive elements use a 9999px radius, while structural containers and section backgrounds maintain a strict 0px sharp edge).
3. **Achromatic Dominance** (The system is fundamentally monochrome, using grayscale and navy as the primary drivers, with saturated blues like #1e4e9c reserved strictly for text links or small accents).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.white}` | `#ffffff` | Page background, button text, primary body text on dark | 88 | 1.0 | Computed Style |
| `{color.black}` | `#000000` | Primary text on light, dark surface backgrounds | 161 | 0.8 | Computed Style |
| `{color.navy.deep}` | `#0b0f24` | Hero background, footer background, primary headings | 7 | 0.6 | Computed Style |
| `{color.gray.light}` | `#f5f5f5` | Subtle section backgrounds | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.gray.border}` | `#4b5563` | Default borders and secondary text | 32 | 0.8 | Computed Style |
| `{color.blue.pale}` | `#e3efff` | Card borders and decorative hairlines | 18 | 0.8 | Computed Style |
| `{color.blue.brand}` | `#1e4e9c` | Text links and emphasized labels | 7 | 0.6 | Computed Style |
| `{color.blue.sky}` | `#b7daf4` | Decorative section borders | 6 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Inter | 400, 500, 600, 700 | All roles (Display, Heading, Body, UI) | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.xl}` | 55px | 78px | normal | 700 | Hero Display | `h2.text-3xl.sm:text-[55px]` |
| `{type.display.lg}` | 48px | 48px | normal | 700 | Section Headers | `h2.text-4xl.md:text-5xl` |
| `{type.heading.lg}` | 36px | 400px | normal | 700 | Feature Headers | `span.text-3xl.sm:text-4xl` |
| `{type.heading.md}` | 20px | 28px | normal | 700 | Component Titles | `h3.mx-auto.text-center` |
| `{type.body.lg}` | 18px | 28px | normal | 700 | Bold Body / Subheads | `span.font-bold.text-lg` |
| `{type.body.md}` | 16px | 26px | normal | 400 | Default Body | `section.relative.w-full` |
| `{type.body.sm}` | 14px | 20px | normal | 400 | Secondary Body | `p` |
| `{type.caption}` | 12px | 16px | normal | 400 | Metadata / Captions | `p.text-gray-600.text-xs` |

### Principles
1. **Weight-Driven Hierarchy:** Hierarchy is established by jumping from 400 to 700 weight; 500 and 600 are used sparingly for UI labels.
2. **Tight Display Leading:** Large display sizes (48px+) use a 1:1 or near 1:1 line-height ratio for impact.
3. **Achromatic Text:** Text is almost exclusively #ffffff or #000000, with #4b5563 used only for secondary metadata.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 48 |
| `{space.sm}` | 16px | 26 |
| `{space.md}` | 24px | 40 |
| `{space.lg}` | 48px | 10 |
| `{space.xl}` | 80px | 4 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Section containers, primary surfaces | 202 occurrences |
| `{radius.md}` | 8px | Content cards, feature blocks | 46 occurrences |
| `{radius.pill}` | 9999px | Buttons, badges, tags | 21 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.flat}` | none | Primary UI | Default state |
| `{shadow.card}` | 0px 1px 3px rgba(0,0,0,0.1) | Feature cards on light surfaces | 32 occurrences |

## Components

### Tier 1: Foundational

#### Pill Button
**Role:** Primary and Secondary Actions
**Pages observed:** All
**Spec:** Background: transparent or #ffffff | Text: #ffffff or #000000 | Border: 1px #4b5563 | Radius: 9999px | Padding: 8px 12px | Typography: Inter 500 16px
**States observed:** Default | Hover: captured | Active: captured

#### Pill Badge
**Role:** Status indicators and tags
**Pages observed:** All
**Spec:** Background: transparent | Text: #000000 | Border: 1px #4b5563 | Radius: 9999px | Padding: 0px | Typography: Inter 400 16px
**States observed:** Default: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Services and product highlights
**Pages observed:** https://openwavecomp.com
**Spec:** Background: #ffffff | Text: #000000 | Border: 1px #e3efff | Radius: 8px | Padding: 16px | Shadow: none
**States observed:** Default: captured

#### Dark Content Card
**Role:** High-impact feature highlights
**Pages observed:** https://openwavecomp.com
**Spec:** Background: rgba(255, 255, 255, 0.1) | Text: #ffffff | Border: 1px rgba(255, 255, 255, 0.2) | Radius: 20px | Padding: 24px | Shadow: none
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Section Surface
**Role:** Full-width layout containers
**Pages observed:** All
**Spec:** Background: #ffffff or #0b0f24 | Text: variable | Border: 2px #b7daf4 (top/bottom only) | Radius: 0px | Padding: 0px
**States observed:** Default: captured

#### Footer Container
**Role:** Site-wide navigation anchor
**Pages observed:** All
**Spec:** Background: #0b0f24 | Text: #ffffff | Border: none | Radius: 0px | Padding: 64px 0px
**States observed:** Default: captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1280px |
| Section Gutter | 80px |
| Card Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Hero font size reduces to 32px; cards stack vertically |
| Desktop | 1440px | Hero font size 55px; cards use 3-up or 4-up grid |

## Imagery & decoration
The brand uses 3D isometric illustrations for service categories and high-tech photographic overlays for hero backgrounds. Decoration is limited to 1px or 2px borders in light blue (#e3efff) to separate white cards from white backgrounds.

## Do's
- Use Inter 700 for all headers above 20px.
- Apply `{radius.pill}` (9999px) to all interactive elements.
- Maintain a high contrast ratio (21:1) by using white text on navy/black backgrounds.
- Use `{color.blue.pale}` (#e3efff) for card borders to provide subtle definition.
- Keep section backgrounds strictly `{radius.none}` (0px).

## Don'ts
- **Wrong:** Using #3b82f6 (standard blue) for primary buttons. **Right:** Use #0b0f24 or #ffffff. **Reason:** The brand identity is monochrome/navy, not standard SaaS blue.
- Do not use shadows on dark-background components.
- Do not mix font families; stick to Inter for all roles.
- Do not use rounded corners on full-width section containers.
- Do not use saturated accent colors for body text.

## Similar brands
- IBM (Enterprise utility, monochrome focus)
- Vercel (High-contrast, geometric, Inter-driven)
- Palantir (Deep navy/black enterprise aesthetic)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #000000;
  --color-surface-dark: #0b0f24;
  --color-border-subtle: #e3efff;
  --font-main: 'Inter', sans-serif;
  --radius-pill: 9999px;
  --radius-card: 8px;
}
```

## Agent prompt examples
- "Generate a service card with a 1px #e3efff border, 8px corner radius, and Inter 700 heading."
- "Create a hero section with a #0b0f24 background and white Inter 700 text at 55px."
- "Design a primary CTA button using a 9999px pill shape and #ffffff text on a transparent background with a 1px border."

## Known gaps
- Hover states for navigation items were not explicitly captured in the computed style tokens.
- Error and Success semantic colors were not present in the analyzed pages.

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