# Owox Design System

> A structured, data-centric canvas where warm neutrals meet high-contrast functional color to transform complex data into actionable narratives.

**Source:** https://owox.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Owox utilizes a "Warm Monochrome" foundation, primarily relying on a sophisticated palette of off-whites and warm grays (`#f5f2ed`, `#e8e3dc`) to create a legible, data-heavy environment. The system injects high-voltage functional colors—specifically Owox Blue (`#1e88e5`), Green (`#49bc4e`), and Pink (`#ab47bc`)—to categorize different user personas and data roles. Typography is anchored by **Roboto** for its technical clarity, paired with **Space Mono** for metadata and "overhead" labels, signaling the platform's analytical roots. Components favor a low-elevation, flat aesthetic with tight 4px radii, ensuring the focus remains on the information architecture rather than decorative depth.

## Signature DNA
1. **Persona-Based Chromatic Coding** (Owox Blue for Reporting, Green for Senior Analysts, and Pink for Enterprise tiers are used consistently across the homepage and pricing to segment complex service offerings.)
2. **Warm-Neutral Scaffolding** (The use of `#f5f2ed` (Owox Warm) as a section background instead of pure white reduces eye strain for data-heavy tasks while providing a distinct "paper-like" professional feel.)
3. **Technical Metadata Styling** (Space Mono is used for "eyebrow" text and technical labels, creating a visual distinction between human-readable copy and system-generated metadata.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color--owoxwhite` | `#ffffff` | Primary surface and text on dark | 62 | 1 | Computed |
| `--owoxwarm` | `#f5f2ed` | Primary section background | 53 | 1 | `--owoxwarm` |
| `--warmwhite` | `#faf8f5` | Card surfaces / secondary background | 50 | 1 | `--warmwhite` |
| `--owarm-20` | `#e8e3dc` | Border and subtle dividers | 55 | 1 | `--owarm-20` |
| `--textnearblack` | `#1a1a1a` | Primary heading and body text | 115 | 1 | `--textnearblack` |
| `--color--owoxblack` | `#333333` | Secondary text and UI borders | 168 | 1 | `--color--owoxblack` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color--owoxblue` | `#1e88e5` | Primary CTA, Reporting persona accent | 163 | 1 | `--color--owoxblue` |
| `--color--owoxgreen` | `#49bc4e` | Success states, Senior Analyst accent | 134 | 1 | `--color--owoxgreen` |
| `--color--owoxpink` | `#ab47bc` | Enterprise persona accent | 14 | 1 | `--color--owoxpink` |
| `--color--owoxred` | `#f44336` | Danger states, "Without System" labels | 36 | 1 | `--color--owoxred` |
| `--color--owoxyellow` | `#ffc107` | Ratings and decorative highlights | 2 | 0.8 | Decorative Only |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `--_theme---success` | `#49bc4e` | Positive metrics, "With Owox" indicators |
| `--_theme---danger` | `#f44336` | Error states, "Without Owox" indicators |
| `--_theme---warning` | `#ffc107` | Cautionary notes (decorative) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Roboto | 400, 500, 600, 700, 800 | All headings and primary body | Roboto (Google Fonts) | Apache 2.0 |
| Space Mono | 400, 500, 600, 700 | Metadata, eyebrows, pricing labels | Space Mono (Google Fonts) | OFL |
| system-ui | 400, 500 | Fallback body | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `display-hero` | 72px | 77.76px | -2.16px | 700 | Main Hero H1 | `h1.v1-hero-cells-title` |
| `display-section` | 48px | 52.8px | -1.2px | 700 | Section Titles | `h2.v1-h2-title` |
| `heading-md` | 36px | 43.2px | -0.9px | 700 | Feature Split Titles | `h2.v1-feature-split-title` |
| `heading-sm` | 24px | 28.8px | -0.48px | 700 | Comparison Titles | `h3.v1-compare-ba-col-title` |
| `body-lg` | 18px | 27.9px | normal | 400 | Hero Subtitles | `p.v1-hero-cells-subtitle` |
| `body-md` | 16px | 24.8px | normal | 400 | Default Body Text | `div.v2-navbar` |
| `mono-label` | 14px | 21.7px | 1.12px | 500 | Footer Column Titles | `h4.v1-footer-col-title` |
| `caption-sm` | 12px | 18.6px | 1.2px | 400 | Eyebrow Labels | `div.v1-eyebrow-dot-main` |

### Principles
1. **Tight Display Tracking:** As font size increases, letter spacing decreases significantly (from normal at 18px to -2.16px at 72px) to maintain visual density.
2. **Mono for Context:** Space Mono is reserved for text that sits "above" the narrative—eyebrows, technical tags, and pricing units.
3. **Bold Hierarchy:** Headings are almost exclusively weight 700, creating a stark contrast against weight 400 body text.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `--space-xs` | 8px | 40 |
| `--space-sm` | 12px | 65 |
| `--space-md` | 16px | 58 |
| `--space-lg` | 24px | 39 |
| `--space-xl` | 32px | 20 |
| `--space-section` | 80px | 20 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `--radius-sharp` | 0px | Section containers, large panels | 758 occurrences |
| `--radius-sm` | 4px | Standard cards, primary buttons | 54 occurrences |
| `--radius-md` | 12px | Feature cards, pricing containers | 35 occurrences |
| `--radius-pill` | 9999px | Status badges, tags | 17 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `flat` | none | Standard sections and cards | `Surface` component |
| `raised` | `0px 2px 5px 0px rgba(0, 0, 0, 0.08)` | Interactive cards / Pricing cards | `Card` component |
| `floating` | `0px 20px 40px -10px rgba(0, 0, 0, 0.08)` | High-impact hero elements | Shadow evidence |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Get Started, Try Free)
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#1e88e5` | Text: `#ffffff` | Radius: `4px` | Padding: `12px 24px` | Typography: Roboto 500 (16px)
**States observed:** Default | Hover: `#39a2ff` | Active: Captured

#### Secondary Warm Button
**Role:** Alternative actions on warm backgrounds
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#efebe5` | Text: `#1a1a1a` | Border: `1px solid rgba(0, 0, 0, 0.1)` | Radius: `4px` | Padding: `12px 24px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits or persona details
**Pages observed:** Homepage
**Spec:** Background: `#efebe5` | Border: `1px solid rgba(0, 0, 0, 0.08)` | Radius: `12px` | Padding: `32px`
**States observed:** Default

#### Pricing Tier Card
**Role:** Displaying subscription options
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` | Border: `1px solid #e8e3dc` | Radius: `6px` | Shadow: `0px 2px 5px 0px rgba(0, 0, 0, 0.08)`
**States observed:** Default

### Tier 3: Surface-specific

#### Persona Badge
**Role:** Categorizing content by user role (Reporting, Analyst, Enterprise)
**Pages observed:** Homepage
**Spec:** Background: Variable (`#c9e3f9`, `#d4efd5`, `#ebd3ef`) | Text: Variable | Radius: `9999px` | Typography: Space Mono 500 (12px)
**States observed:** Default

#### Comparison Table Row
**Role:** Feature-by-feature breakdown
**Pages observed:** Pricing
**Spec:** Background: `#f5f2ed` | Border-bottom: `1px solid #e8e3dc` | Padding: `12px 16px` | Typography: Roboto 400 (14.4px)
**States observed:** Default | Hover: Not captured

## Layout
| Property | Value |
|------|-------|
| Max-width | 1200px |
| Section Padding | 80px (Vertical) |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; 3-column grids stack to 1-column. |
| Desktop | 1440px | Full horizontal navigation; multi-column feature splits. |

## Imagery & decoration
Owox uses high-fidelity product screenshots with annotated green arrows (`#49bc4e`) to demonstrate UI value. Decorative elements are minimal, limited to small circular "dot" accents in persona colors and subtle 1px borders. Avoids heavy gradients or illustrative icons; prefers functional, data-representative graphics.

## Do's
- Use `#f5f2ed` (Owox Warm) for large section backgrounds to maintain brand warmth.
- Apply Space Mono for all "overhead" or metadata labels to signal technical precision.
- Use negative letter-spacing on headings larger than 24px (up to -2.16px).
- Maintain a 4px or 6px border radius for primary interactive elements.
- Use persona-specific colors (`#1e88e5`, `#49bc4e`, `#ab47bc`) to segment user-specific content.

## Don'ts
- **Wrong:** Using `#1e88e5` (Owox Blue) for success messages. **Right:** Use `#49bc4e` (Owox Green). **Reason:** Blue is a persona/action color; Green is the semantic success token.
- **Wrong:** Using pure white (`#ffffff`) for all section backgrounds. **Right:** Alternate with `#f5f2ed`. **Reason:** The warm neutral is a core brand identifier.
- **Wrong:** Applying heavy drop shadows to standard cards. **Right:** Use 1px borders or the subtle `0px 2px 5px` shadow.
- **Wrong:** Setting display headings in Space Mono. **Right:** Use Roboto 700. **Reason:** Space Mono is for metadata, not primary narrative.
- **Wrong:** Mixing radii (e.g., a 20px radius button next to a 4px card).

## Similar brands
- **Segment:** Clean, data-focused, uses color to categorize complex flows.
- **Fivetran:** Technical, high-contrast, utilizes blue/green accents against neutral grounds.
- **Looker:** Heavy focus on data legibility and structured information hierarchy.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --owox-blue: #1e88e5;
  --owox-green: #49bc4e;
  --owox-pink: #ab47bc;
  --owox-warm: #f5f2ed;
  --owox-black: #1a1a1a;
  --font-main: 'Roboto', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --radius-base: 4px;
}
```

## Agent prompt examples
- "Create a pricing card using Owox Blue for the CTA, a white background, and a 1px border in #e8e3dc. Use Roboto for the price and Space Mono for the 'most popular' eyebrow."
- "Generate a feature section with a background of #f5f2ed. Include a 3-column grid of cards with a 12px radius and Roboto 700 headings."
- "Design a persona badge for 'Enterprise' using #ab47bc as the accent color and Space Mono for the text."

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the source.
- Specific mobile-only component variants (beyond standard stacking) were not observed.
- Form validation states (error/warning text styles) were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-----|----------|--------------|
| Homepage | https://owox.com | 1440px | 2026-06-06 |
| Pricing | https://owox.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://owox.com | 390px | 2026-06-06 |