# Openn Design System

> A corporate blue anchor on a clean white canvas, defined by heavy Nunito display weights and structured Roboto body grids.

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

## TL;DR
Openn utilizes a high-contrast monochrome foundation of deep grey `#404041` and pure white `#ffffff`, punctuated by a primary brand blue `#004e85` (`--openn-blue`). The typographic system pairs the rounded, friendly geometry of **Nunito** for high-impact display and numeric counters (weight 800) with the functional clarity of **Roboto** for all UI and body elements. Layouts are strictly sectioned with generous vertical breathing room (up to 100px), using subtle 4px border radii and light 9px elevation shadows to define interactive surfaces without breaking the flat, professional aesthetic.

## Signature DNA
1. **Heavy Rounded Display** (Nunito at weight 800 is used for primary data visualization and hero counters, creating a friendly but authoritative focal point. Observed on https://openn.com)
2. **The Openn Blue Anchor** (The specific `#004e85` blue is the exclusive driver for primary actions and deep-section backgrounds, providing the only consistent chromatic weight. Observed on https://openn.com)
3. **Soft-Box Elevation** (Interactive cards use a specific `rgba(0, 0, 0, 0.1) 0px 5px 9px` shadow against white backgrounds to signal depth. Observed on https://openn.com)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--white` | `#ffffff` | Page background, button text, card surfaces | 61 | 1 | Computed |
| `--openn-grey` | `#404041` | Primary text, dark surface backgrounds | 64 | 1 | CSS Variable |
| `--openn-grey-90` | `#535354` | Secondary body text | 103 | 1 | CSS Variable |
| `foundation-border` | `#c4ccd5` | Input borders, subtle dividers | 5 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--openn-blue` | `#004e85` | Primary CTA background, deep section headers | 147 | 1 | CSS Variable |
| `--openn-secondary-blue`| `#009ebb` | Accent badges, secondary highlights | 3 | 1 | CSS Variable |
| `accent-surface` | `#33719d` | Feature card backgrounds | 18 | 0.8 | Computed |
| `accent-border` | `#6695b6` | Decorative borders | 18 | 0.8 | Computed |
| `accent-warm` | `#f5d476` | Pricing/Status highlights (decorative_only) | 3 | 0.6 | Computed |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--green` | `#28a745` | Success states (declared) |
| `--red` | `#dc3545` | Error states (declared) |
| `--yellow` | `#ffc107` | Warning states (declared) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Nunito | 700, 800 | Display, Data, Counters | Nunito (Google Fonts) | SIL OFL |
| Roboto | 300, 400, 500, 700 | Body, UI, Headings | Roboto (Google Fonts) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-mega` | 56px | 61.6px | normal | 800 | Numeric counters | `span.numericcounter-value` |
| `heading-lg` | 29px | 33.4px | normal | 700 | Section titles | `h2` |
| `heading-md` | 21px | 25.5px | normal | 500 | Subsection heads | `h3:nth-of-type(1)` |
| `subheading` | 18px | 21.6px | normal | 700 | Feature labels | `h3` |
| `body-lg` | 16px | 23.9px | normal | 300 | Testimonials | `div.testimonial-content` |
| `body-md` | 16px | 17.1px | normal | 500 | Button labels | `button.btn` |
| `body-sm` | 14px | 24px | normal | 400 | Descriptions | `div.description` |
| `caption` | 11px | 18.6px | normal | 700 | Image captions | `div.media-img-text` |

### Principles
1. **Numeric Emphasis:** Use Nunito 800 for any data-driven storytelling or large counters.
2. **Lightweight Prose:** Long-form body text (testimonials) uses Roboto 300 to maintain an airy feel despite dark text colors.
3. **High-Tracking Labels:** Specific counter labels use 3px letter spacing to differentiate from standard UI text.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `space-xs` | 4px | 3 |
| `space-sm` | 10px | 56 |
| `space-md` | 20px | 67 |
| `space-lg` | 40px | 19 |
| `space-xl` | 80px | 18 |
| `space-section`| 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-sharp` | 0px | Section containers | 157 occurrences |
| `radius-sm` | 4px | Buttons, Inputs, Cards | 81 occurrences |
| `radius-full` | 50% | Icon backdrops, Avatars | 47 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | Default state | Standard |
| `elevated` | `rgba(0, 0, 0, 0.1) 0px 5px 9px 0px` | Hoverable cards, Floating buttons | 12 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** https://openn.com
**Spec:** Background: `#004e85` / Text: `#ffffff` / Border: 1px `#004e85` / Radius: 4px / Padding: 11px 25px / Typography: Roboto 11px (700)
**States observed:** Default | Hover: captured | Focus: not captured

#### Text Input
**Role:** Form collection
**Pages observed:** https://openn.com
**Spec:** Background: `#fdfefe` / Text: `#535354` / Border: 1px `#c4ccd5` / Radius: 4px / Padding: 10px 20px / Typography: Roboto 14.4px
**States observed:** Default | Focus: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Content grouping
**Pages observed:** https://openn.com
**Spec:** Background: `#33719d` / Text: `#ffffff` / Border: none / Radius: 4px / Padding: 40px 43px 80px / Typography: Roboto 16px
**States observed:** Default | Hover: not captured

#### Testimonial Card
**Role:** Social proof
**Pages observed:** https://openn.com
**Spec:** Background: `#fdfefe` / Text: `#404041` / Border: none / Radius: 4px / Shadow: `0px 5px 9px rgba(0,0,0,0.1)` / Typography: Roboto 16px (300)
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific
#### Status Badge
**Role:** Property status indicator
**Pages observed:** https://openn.com
**Spec:** Background: `#009ebb` / Text: `#ffffff` / Radius: 0px / Padding: 4px 10px / Typography: Roboto 11px (700)
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1140px (standard container) |
| Section Gap | 100px |
| Grid | 12-column bootstrap-style |

## Imagery & decoration
- **Iconography:** Uses circular backdrops (`rgba(0, 78, 133, 0.05)`) for feature icons.
- **Photography:** Real estate focused, high-brightness, often used as full-width hero backgrounds with a blue overlay.
- **Avoids:** Hard drop shadows, gradients on buttons, and serif typefaces.

## Do's
- Use `#004e85` for all primary "Book Demo" or "Sign Up" actions.
- Pair Nunito 800 with Roboto 400 for data visualization.
- Maintain exactly 100px vertical padding between major homepage sections.
- Apply a 4px radius to all interactive card elements.
- Use `#535354` for long-form descriptive text to reduce visual vibration.

## Don'ts
- **Wrong:** Using `#007bff` (standard blue) for buttons. **Right:** Use `--openn-blue` (`#004e85`). **Reason:** Brand consistency.
- **Wrong:** Setting display headers in Roboto. **Right:** Use Nunito 700/800. **Reason:** Nunito is the designated display face.
- **Wrong:** Applying shadows to section containers. **Right:** Keep sections flat; only elevate cards.
- **Wrong:** Using sub-brand colors like `--openn-secondary-green` for primary parent CTAs.

## Similar brands
- REA Group (Realestate.com.au)
- Domain
- CoreLogic
- PEXA

## Quick start

```css
/* CSS Custom Properties */
:root {
  --openn-blue: #004e85;
  --openn-grey: #404041;
  --openn-grey-90: #535354;
  --white: #ffffff;
  --radius-sm: 4px;
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 5px 9px 0px;
}
```

## Known gaps
- Mobile-specific typography scaling for the 56px display token was not fully captured.
- Hover states for secondary blue buttons were not explicitly defined in the CSS variables.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Main Homepage | https://openn.com | 1440x900 | 2026-06-06 |