# Wavity Design System

> High-contrast enterprise utility defined by deep cyan primary actions and a structured geometric grid.

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

## TL;DR
Wavity utilizes a "Dark Cyan" (#13639a) as its primary functional anchor, appearing in CTAs, borders, and key surface backgrounds. The system is built on a foundation of neutral grays, specifically Charcoal Gray (#474646) for body text and Dark Slate (#131b1b) for high-contrast headings. Typography is dominated by **Inter Tight** for display and **Inter** for functional UI, creating a clean, modern sans-serif hierarchy. Layouts are characterized by generous 80px section spacing and a mix of sharp and moderately rounded (10px-20px) containers.

## Signature DNA
1. **The Cyan Anchor** (#13639a is used consistently for the most critical path actions and structural borders across all analyzed pages).
2. **Inter Tight Display** (Headlines use Inter Tight at 52px with tight -0.992px tracking, creating a distinct "compressed" professional feel compared to standard Inter).
3. **Geometric Card Shadows** (Cards utilize a specific soft spread shadow `rgba(0, 0, 0, 0.09) 0px 0px 20px 0px` to create depth without heavy borders).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|------|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Page background, button text, knob fills | 60 | 1 | Computed style |
| `{colors.charcoal}` | `#474646` | Primary body text | 130 | 1 | `--charcoal-gray` |
| `{colors.dark-slate}` | `#131b1b` | High-contrast text, primary borders | 53 | 1 | `--dark-slate` |
| `{colors.granite}` | `#616161` | Secondary/deemphasized text | 14 | 1 | `--granite-gray` |
| `{colors.off-white}` | `#f9f9f9` | Subtle section backgrounds | 7 | 1 | `--off-white` |
| `{colors.ice}` | `#f4f7fc` | Surface backgrounds, category blocks | 1 | 1 | `--cc-cookie-category-block-bg` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|------|------|-------------|------------|--------|
| `{colors.primary}` | `#13639a` | Primary CTA background, active borders | 24 | 1 | `--cyan-green` |
| `{colors.deep-navy}` | `#011948` | Dark hero/surface backgrounds | 10 | 0.6 | Computed style |
| `{colors.soft-blue}` | `#c7e1e6` | Decorative text/accents | 2 | 1 | `--soft-blue` (decorative_only) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Inter Tight | 500 | Display & Headings | Inter Tight (Google) | SIL OFL |
| Inter | 400, 500 | Body & UI Labels | Inter (Google) | SIL OFL |
| DM Sans | 400, 500, 600, 700 | Legacy/Secondary Headings | DM Sans (Google) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|------|------|------|------|------|
| `{type.display-xl}` | 52px | 62.4px | -0.992px | 500 | Page Hero (H1) | `h1` |
| `{type.display-lg}` | 40px | 31.2px | normal | 400 | Testimonial Arrows | `div.fda-testimonial-slider-arrow` |
| `{type.heading-lg}` | 36px | 45px | -0.352px | 500 | Section Headers (H2) | `h2` |
| `{type.heading-md}` | 21px | 31.2px | normal | 400 | Landing Hero Subtext | `section.fda-landing-hero` |
| `{type.heading-sm}` | 20px | 30px | 0.208px | 500 | Feature Titles | `div.fda-text-style-h5` |
| `{type.body-lg}` | 18px | 27px | -0.32px | 500 | Descriptive Body | `div.fda-text-style-h6` |
| `{type.body-md}` | 17px | 31.2px | normal | 600 | Button Labels | `a.fda-button` |
| `{type.body-sm}` | 15px | 22.5px | -0.256px | 500 | Menu/UI Text | `div.fda-menu-text` |

### Principles
1. **Tight Display Tracking:** All Inter Tight headings above 30px must use negative letter-spacing (approx -2% of font size).
2. **High Line-Height for Body:** Body text at 17px uses a generous 31.2px line height (1.8x) for maximum readability in enterprise docs.
3. **Weight Consistency:** UI labels and buttons strictly use medium (500) or semi-bold (600) weights; never regular (400).

## Spacing
**Base unit:** 5px (inferred from 10/20/30/80 scale)
| Token | Value | Occurrences |
|------|------|-------------|
| `{space.xs}` | 5px | 6 |
| `{space.sm}` | 10px | 29 |
| `{space.md}` | 20px | 25 |
| `{space.lg}` | 30px | 3 |
| `{space.section}` | 80px | 16 |

## Border radius
| Token | Value | Use | Evidence |
|------|------|------|------|
| `{radius.none}` | 0px | Sharp containers, footer sections | 196 occurrences |
| `{radius.sm}` | 4px | Primary buttons, input fields | `a.fda-button` |
| `{radius.md}` | 10px | Feature cards, small surfaces | `Card (3 occurrences)` |
| `{radius.lg}` | 20px | Testimonial cards, pricing tiers | `Card (5 occurrences)` |
| `{radius.xl}` | 50px | Large decorative panels | 13 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|------|------|------|
| `{shadow.soft}` | `rgba(0, 0, 0, 0.09) 0px 0px 20px 0px` | Feature cards | Card component |
| `{shadow.heavy}` | `rgba(0, 0, 0, 0.25) 0px 1px 4px 0px` | Hovered/Elevated cards | Card component |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.09) 0px 0px 30px 0px` | Pricing/Modal surfaces | Card component |

## Components

### Tier 1: Foundational

#### Primary Action Button
**Role:** Main call-to-action (Schedule Demo, Sign Up)
**Pages observed:** All
**Spec:** Background `{colors.primary}` (#13639a) / Text `{colors.white}` (#ffffff) / Border 1px `{colors.primary}` / Radius 4px / Padding 8px 18px / Typography `{type.body-md}`
**States observed:** Default | Hover: `{colors.black}` (#000000) | Active: Captured

#### Secondary Outline Button
**Role:** Deemphasized actions (Free Trial)
**Pages observed:** All
**Spec:** Background `{colors.white}` (#ffffff) / Text `{colors.primary}` (#13639a) / Border 1px `{colors.primary}` / Radius 4px / Padding 8px 18px / Typography `{type.body-md}`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying platform capabilities
**Pages observed:** Home, About
**Spec:** Background `{colors.white}` (#ffffff) / Text `{colors.charcoal}` (#474646) / Border 1px `rgba(0,0,0,0.2)` / Radius 10px / Padding 20px / Shadow `{shadow.soft}`
**States observed:** Default | Hover: Not captured

#### Testimonial Slider
**Role:** Social proof sections
**Pages observed:** Home, About
**Spec:** Background `{colors.off-white}` (#f9f9f9) / Text `{colors.charcoal}` (#474646) / Radius 20px / Padding 30px / Shadow `{shadow.deep}`
**States observed:** Default | Active: Captured

### Tier 3: Surface-specific

#### Pricing Tier Surface
**Role:** Pricing plan containers
**Pages observed:** Pricing
**Spec:** Background `{colors.white}` (#ffffff) / Border 1px `{colors.dark-slate}` (#131b1b) / Radius 15px / Shadow `{shadow.soft}`
**States observed:** Default | Active: Captured

#### Dark Hero Section
**Role:** High-impact landing areas
**Pages observed:** About
**Spec:** Background `{colors.deep-navy}` (#011948) / Text `{colors.white}` (#ffffff) / Radius 0px / Padding 80px 0px
**States observed:** Default

## Layout
| Property | Value |
|------|------|
| Max Content Width | 1200px |
| Section Gutter | 80px |
| Column Gap | 20px |
| Container Padding | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------|------|------|
| Mobile | 390px | Stacked columns, 100% width buttons, reduced H1 to 32px |
| Desktop | 1440px | 12-column grid, 80px section padding |

## Imagery & decoration
Wavity uses abstract geometric "blocks" in the background of hero sections, often in light gray or white, to suggest modularity. Icons are consistently line-art style using the primary cyan (#13639a) or charcoal (#474646).

## Do's
- Use `#13639a` for all primary interactive elements.
- Apply `-0.992px` letter spacing to all H1 headings.
- Ensure all cards have at least a `10px` border radius.
- Use `80px` vertical padding between major page sections.
- Maintain a line-height of `1.8` for body copy to ensure readability.

## Don'ts
- **Wrong:** Using `#f5715f` (Coral Orange) for a primary button. **Right:** Use `#13639a`. **Reason:** Coral is a decorative token, not a functional primary.
- **Wrong:** Using sharp 0px corners on feature cards. **Right:** Use `10px` or `20px`. **Reason:** Sharp corners are reserved for full-width section containers.
- **Wrong:** Setting H1 text in standard Inter. **Right:** Use Inter Tight. **Reason:** Inter Tight is the designated display face for brand authority.

## Similar brands
- Zendesk (clean enterprise utility)
- Freshworks (cyan-focused SaaS)
- Intercom (modern geometric card systems)

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #13639a;
  --color-charcoal: #474646;
  --color-dark-slate: #131b1b;
  --font-display: 'Inter Tight', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-card: 10px;
  --shadow-soft: 0px 0px 20px 0px rgba(0, 0, 0, 0.09);
}
```

## Known gaps
- Hover states for secondary buttons were not captured in the current crawl.
- Mobile-specific navigation transition was not fully sampled.
- Success and Error semantic colors were not present on the analyzed marketing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|------|------|------|
| Home | https://wavity.ai | 1440px | 2026-06-06 |
| Pricing | https://wavity.ai/pricing | 1440px | 2026-06-06 |
| About | https://wavity.ai/about | 1440px | 2026-06-06 |