# Ovas.nl Design System

> Functional blue accents on a high-contrast grayscale foundation, utilizing wide-tracking sans-serifs for a professional administrative utility feel.

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

## TL;DR
Ovas.nl utilizes a "Utility Blue" (`#0095d7`) as its primary interactive signal against a stark white background (`#ffffff`) and deep charcoal footer (`#3a3a3a`). The system relies on a mix of Roboto for structural headings and Verdana for high-legibility body content. Buttons are characterized by a generous 25px corner radius, creating a "pill" aesthetic that contrasts with the otherwise sharp-edged, modular layout. Navigation and secondary UI elements use a gray scale ranging from `#dddddd` borders to `#8b9093` labels, maintaining a clean, business-oriented interface.

## Signature DNA
1. **The Utility Pill** (A consistent 25px radius applied to primary CTAs in `#0095d7`, creating the only soft geometry in a grid-heavy layout. Observed on all analyzed pages.)
2. **Administrative Typography** (The pairing of Roboto headings with Verdana body text at 14px, prioritizing screen legibility over stylistic flair. Evidence: `article#post-2`.)
3. **High-Contrast Footers** (A hard transition from white canvas to a `#3a3a3a` charcoal footer containing multi-column navigation and social proof. Evidence: `footer` on all pages.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background and primary surface | 66 | 1 | `--wp--preset--color--white` |
| `{color.ink}` | `#3a3a3a` | Primary body text and footer background | 69 | 0.8 | Computed style |
| `{color.ink.strong}` | `#000000` | Headings and high-emphasis text | 14 | 1 | `--ast-global-color-8` |
| `{color.border}` | `#dddddd` | Form borders and structural dividers | 42 | 1 | `--ast-border-color` |
| `{color.surface.muted}` | `#424242` | Alternate section backgrounds | 17 | 1 | `--ast-global-color-alternate-background` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#0095d7` | Primary CTA background, links, and icons | 31 | 1 | `--ast-global-color-0` |
| `{color.decorative}` | `#039f66` | Decorative green (low usage) | 1 | 1 | `--ast-global-color-secondary` |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{color.success}` | `#039f66` | Confirmation/Secondary signals |
| `{color.error}` | `#d3242c` | Error/Alert states (declared token) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|------------|
| Roboto | 400, 700 | Headings and Display | Roboto (Google Fonts) | Apache 2.0 |
| Verdana | 400, 700 | Body, Buttons, Navigation | Noto Sans | System Default |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 40px | 56px | normal | 400 | Page titles | `h1.page-title` |
| `{text.h2}` | 30px | 39px | normal | 700 | Section heads | `strong:nth-of-type(1)` |
| `{text.h2.light}` | 30px | 39px | normal | 400 | Sub-section heads | `h2.wp-block-heading` |
| `{text.h3}` | 21px | 39px | normal | 700 | Component titles | `div.page-sub-title` |
| `{text.h4}` | 20px | 26px | normal | 400 | Widget titles | `h2.widget-title` |
| `{text.body}` | 14px | 26px | normal | 400 | Default body | `article#post-2` |
| `{text.button}` | 14px | 20.58px | normal | 700 | CTA labels | `div.ast-button` |
| `{text.nav}` | 14px | 56px | normal | 400 | Header menu | `a.menu-link` |

### Principles
1. **Legibility First:** Body text never drops below 14px Verdana for maximum clarity in administrative tasks.
2. **Heading Weight Contrast:** Structural headings alternate between 700 (bold) for emphasis and 400 (regular) for secondary information.
3. **Vertical Rhythm:** Line heights for body text are generous (approx 1.8x font size) to prevent eye fatigue in long lists.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 5 |
| `{space.sm}` | 12px | 4 |
| `{space.md}` | 20px | 11 |
| `{space.lg}` | 24px | 6 |
| `{space.xl}` | 34px | 13 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Layout containers, sections | 219 occurrences |
| `{radius.input}` | 2px | Form fields | `Text Input` component |
| `{radius.pill}` | 25px | Primary Buttons | `Rounded Button` component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site actions (e.g., "Probeer nu", "Meer info")
**Pages observed:** All
**Spec:** 
- Background: `{color.primary}` (#0095d7)
- Text: `{color.canvas}` (#ffffff)
- Radius: `{radius.pill}` (25px)
- Padding: 8px 15px
- Typography: `{text.button}` (14px/700)
**States observed:** Default | Hover: Not captured

#### Text Input
**Role:** Search and form entry
**Pages observed:** pricing, about
**Spec:** 
- Background: #fafafa
- Border: 1px `{color.border}` (#dddddd)
- Radius: `{radius.input}` (2px)
- Padding: 12px 15px
- Typography: 14px Verdana

### Tier 2: Patterns

#### Surface (Dark Footer)
**Role:** Global site footer
**Pages observed:** All
**Spec:** 
- Background: `{color.ink}` (#3a3a3a)
- Text: `{color.canvas}` (#ffffff)
- Padding: 70px 0px
- Typography: 14px Verdana

#### Surface (Alternate Band)
**Role:** Section differentiation
**Pages observed:** home
**Spec:** 
- Background: `{color.surface.muted}` (#424242)
- Text: `{color.canvas}` (#ffffff)
- Radius: `{radius.none}` (0px)

### Tier 3: Surface-specific

#### Breadcrumb Trail
**Role:** Page hierarchy navigation
**Pages observed:** about
**Spec:** 
- Typography: 14px Verdana
- Line-height: 19.6px
- Text: `{color.primary}` (#0095d7) for links

#### Site Logo Container
**Role:** Brand identity placement
**Pages observed:** All
**Spec:** 
- Height: 56px (derived from line-height)
- Vertical alignment: Middle

## Layout
| Property | Value |
|------|-------|
| Max-width | 1200px (approx) |
| Header Height | 56px |
| Section Padding | 70px (vertical) |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | < 921px | Navigation collapses to hamburger menu; button font size reduces to 13px. |
| Desktop | > 921px | Horizontal menu visible; 56px header height. |

## Imagery & decoration
- **Iconography:** Uses circular blue icons (`#0095d7`) with white glyphs for feature lists.
- **Photography:** Features professional, high-key office and administrative imagery with soft focus backgrounds.
- **Dividers:** Simple 1px horizontal lines in `#dddddd`.

## Do's
- Use `#0095d7` for all primary user intents and interactive links.
- Set body copy in 14px Verdana with a line-height of 26px for legibility.
- Apply a 25px border radius to all primary action buttons.
- Use `#3a3a3a` for large footer surfaces to anchor the page.
- Maintain sharp 0px corners for all structural section containers.

## Don'ts
- **Wrong:** Using `#039f66` (Green) for primary CTAs. **Right:** Use `#0095d7`. **Reason:** Green is a decorative/secondary signal and lacks the brand's primary interactive weight.
- **Wrong:** Setting display headings in Verdana. **Right:** Use Roboto. **Reason:** Roboto is the designated heading font for structural hierarchy.
- **Wrong:** Using soft shadows on cards. **Right:** Use 1px borders in `#dddddd`. **Reason:** The system is "flat" and relies on borders rather than elevation.

## Similar brands
- Exact Online
- AFAS Software
- Visma
- Moneybird

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #0095d7;
  --color-canvas: #ffffff;
  --color-ink: #3a3a3a;
  --color-border: #dddddd;
  --font-heading: 'Roboto', sans-serif;
  --font-body: 'Verdana', sans-serif;
  --radius-pill: 25px;
  --radius-input: 2px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #0095d7;
  --color-ink: #3a3a3a;
  --font-roboto: "Roboto";
  --font-verdana: "Verdana";
  --radius-pill: 25px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using #0095d7 background, white 14px Verdana bold text, and a 25px border radius."
- "Create a content section with a #ffffff background, a 30px Roboto bold heading in #000000, and 14px Verdana body text in #3a3a3a."
- "Design a footer component with a #3a3a3a background and three columns of white text links using 14px Verdana."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Mobile breakpoint specific spacing values (padding/margin) were not fully quantified.
- Shadow tokens were not present in the CSS variable evidence, suggesting a flat design preference.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|-------------|--------------|
| Homepage | https://ovas.nl | Desktop 1440 | 2026-06-06 |
| Pricing | https://ovas.nl/pricing | Desktop 1440 | 2026-06-06 |
| About | https://ovas.nl/about | Desktop 1440 | 2026-06-06 |