# Ozmo Design System

> A clean, achromatic foundation anchored by slate grays and sharp geometry, punctuated by high-contrast blue utility actions.

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

## TL;DR
Ozmo utilizes a monochrome-first philosophy where the primary interface is constructed from a scale of grays (#464a4c, #5a626a) against a pure white (#ffffff) canvas. The system relies on "Neutral Regular" typography at a signature light weight (300) for headlines to create an air of technical precision. While the core brand is achromatic, a vivid "Signal Blue" (#007aff) is reserved strictly for high-priority utility actions like "Request a demo" or "View open positions." Structural elements favor either absolute sharp corners (0px) for layout sections or extremely soft, pill-like radii (46px) for interactive components and content cards.

## Signature DNA
1. **The 300-Weight Serif-less Display** (Neutral Regular at weight 300 is used for all major section headings and hero subtitles, providing a lightweight, architectural feel that avoids the "heavy" look of traditional enterprise software.)
2. **Achromatic Hierarchy** (The interface is 90% grayscale, using #464a4c for primary text and #5a626a for secondary surfaces, ensuring that the blue #007aff accent carries maximum functional weight when it appears.)
3. **Bimodal Radii** (The system ignores mid-range rounding. Elements are either strictly square (0px) for structural containers or aggressively rounded (46px) for buttons and feature cards.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| Ozmo (Parent) | #464a4c | Achromatic shapes | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | #ffffff | Page background, button text, card borders | 23 | 1.0 | `--wp--preset--color--white` |
| `{color.slate-dark}` | #464a4c | Primary body text, heading color | 38 | 0.8 | computed_style |
| `{color.slate-mid}` | #5a626a | Secondary text, card backgrounds, button backgrounds | 7 | 0.6 | computed_style |
| `{color.black}` | #000000 | Absolute black for deep contrast | 1 | 1.0 | `--wp--preset--color--black` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.blue-action}` | #007aff | Primary CTA background, text links, active states | 23 | 0.8 | computed_style |
| `{color.cyan-blue}` | #0693e3 | Decorative/Sub-brand potential | 1 | 0.5 | `--wp--preset--color--vivid-cyan-blue` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Neutral Regular | 300, 400 | Headings, Hero subtitles | Inter Light | Proprietary |
| Neutral Standard | 400 | Body copy, Hero wrapper | Inter Regular | Proprietary |
| Neutral Medium | 500 | Subheadings (H4) | Inter Medium | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 32px | 40px | normal | 300 | Hero subtitles | `h3.hero-subtitle` |
| `{type.h3}` | 28px | 35px | normal | 300 | Section headings | `h3` |
| `{type.h4}` | 18px | 22.5px | normal | 500 | Component subheads | `h4` |
| `{type.body}` | 16px | 24px | normal | 400 | Default body text | `div.hero-wrapper` |
| `{type.body-sm}` | 14px | 21px | normal | 400 | Card descriptions | `div` |
| `{type.button}` | 16px | 24px | normal | 500 | CTA labels | `a.button` |
| `{type.caption}` | 12px | 18px | normal | 400 | Small annotations | `span` |
| `{type.nav}` | 15px | 20px | normal | 400 | Top navigation | `nav a` |

### Principles
1. **Lightweight Headings:** Always use weight 300 for H3 and above to maintain the "Neutral" brand aesthetic.
2. **Standard Body:** Running text must use Neutral Standard at 16px for optimal legibility against white backgrounds.
3. **Achromatic Text:** Use #464a4c for all primary text; never use pure black #000000 for long-form reading.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 21 |
| `{space.sm}` | 16px | 22 |
| `{space.md}` | 24px | 18 |
| `{space.lg}` | 64px | 3 |
| `{space.section}` | 96px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Layout sections, structural containers | 71 occurrences |
| `{radius.pill}` | 46px | Buttons, feature cards, interactive panels | 10 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.none}` | none | Default surface state | 2 occurrences |
| `{shadow.flat}` | rgba(0, 0, 0, 0) 0px 0px 3px 0px | Default button state | 5 occurrences |
| `{shadow.raised}` | rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.2) 0px 1px 2px 0px | Content cards | 5 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary CTAs
**Pages observed:** https://ozmo.com
**Spec:** Background: #007aff (or transparent) / Text: #ffffff / Border: 3px / Radius: 46px / Padding: 2px / Typography: 16px Neutral Standard
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Captured | Disabled: Not captured

### Tier 2: Patterns

#### Content Card
**Role:** Feature highlights and vertical-specific links
**Pages observed:** https://ozmo.com
**Spec:** Background: #5a626a / Text: #ffffff / Border: #ffffff (0px) / Radius: 46px / Padding: 16px 20px / Typography: 14px Neutral Regular / Shadow: `{shadow.raised}`
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Section Surface
**Role:** Major page divisions
**Pages observed:** https://ozmo.com
**Spec:** Background: #ffffff / Text: #464a4c / Border: 0px / Radius: 0px / Padding: 96px 0px / Typography: 16px Neutral Standard
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (estimated) |
| Section Padding (Vertical) | 96px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | Multi-column grids for "results that matter" section |
| Mobile | 390px | Single column stack; navigation collapses to hamburger |

## Imagery & decoration
Ozmo uses clean, technical line-art illustrations with a limited palette of teal, green, and gray. Backgrounds often feature subtle geometric "shape backgrounds" (e.g., `div.hero-wrapper.shape-background`) to break up white space without adding photographic noise.

## Do's
- Use #464a4c for all primary headings.
- Set H3 headings to weight 300.
- Apply 46px radius to all interactive cards.
- Use 96px vertical padding for major section transitions.
- Reserve #007aff strictly for functional buttons.

## Don'ts
- **Wrong:** Using #0693e3 (Vivid Cyan Blue) as the primary button color. **Right:** Use #007aff. **Reason:** #007aff is the validated primary utility color; other blues are sub-brand or legacy tokens.
- Do not use mid-range border radii like 4px or 8px; stick to 0px or 46px.
- Do not use bold (700) weights for display headings.
- Do not place #464a4c text on #5a626a backgrounds (insufficient contrast).

## Similar brands
- Stripe (for technical cleanliness)
- Zendesk (for customer service focus)
- Intercom (for UI-centric illustration style)

## Quick start

```css
/* CSS Variables */
:root {
  --ozmo-white: #ffffff;
  --ozmo-slate-dark: #464a4c;
  --ozmo-slate-mid: #5a626a;
  --ozmo-blue-action: #007aff;
  --ozmo-radius-pill: 46px;
  --ozmo-font-display: "Neutral Regular", sans-serif;
  --ozmo-font-body: "Neutral Standard", sans-serif;
}
```

## Agent prompt examples
- "Create a feature card using #5a626a background, white text, and a 46px border radius."
- "Style an H3 heading using Neutral Regular at 28px with a font-weight of 300 and color #464a4c."
- "Generate a primary CTA button with #007aff background, 46px radius, and 16px Neutral Standard text."

## Known gaps
- Hover and focus states for buttons were not captured in the static evidence.
- Success/Error semantic colors were not present on the analyzed marketing pages.
- Mobile-specific font size adjustments (fluid type) were not explicitly tokenized.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://ozmo.com | 1440x900 | 2026-06-06T05:15:27Z |
| Mobile Home | https://ozmo.com | 390x844 | 2026-06-06T05:15:27Z |