# Ovationsgroup Design System

> High-contrast enterprise technology canvas anchored by deep slate-blue ink and a high-voltage crimson accent.

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

## TL;DR
Ovationsgroup utilizes a clean, high-contrast "monochrome-plus" aesthetic. The interface is built on a pure white canvas (`#ffffff`) with primary text and navigation elements rendered in a deep slate-blue (`#223344`). Brand "voltage" is injected through a single high-saturation crimson (`#ce1943`) used for primary CTAs, active borders, and emphasis in headlines. Typography is exclusively Montserrat, leveraging extreme weight shifts from 400 (body) to 700/900 (display) to create hierarchy. Layouts are spacious, utilizing a 20px border radius on cards to soften the enterprise-grade density.

## Signature DNA
1. **The Crimson Pivot** (The use of `#ce1943` as a surgical strike color for both interactive states and semantic emphasis within black/blue headlines).
2. **Montserrat Weight Extremes** (Pairing 700-weight display type at 58px with 400-weight body text at 17px to establish authority).
3. **Softened Enterprise Geometry** (The consistent application of `{radius.card}` (20px) on content containers to differentiate from sharp-edged legacy tech competitors).

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text | 42 | 1.0 | Computed Style |
| `{color.ink}` | `#223344` | Primary body text, card titles | 35 | 0.8 | Computed Style |
| `{color.black}` | `#000000` | Deep backgrounds, footer text | 10 | 1.0 | Computed Style |
| `{color.surface-soft}` | `#eef0f1` | Section backgrounds, code blocks | 7 | 1.0 | `--evo_boxcolor_1` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#ce1943` | Primary CTA bg, active borders, emphasis | 30 | 0.8 | Computed Style |
| `{color.link}` | `#2970e1` | Secondary links, inline actions | 19 | 0.8 | Computed Style |
| `{color.muted}` | `#7b7992` | De-emphasized metadata, captions | 7 | 0.6 | Computed Style |

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Montserrat | 400, 500, 600, 700, 900 | Display, Heading, Body | Montserrat (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 58px | 80px | 2px | 700 | Hero headlines | `div.rs_splitted_chars` |
| `{type.display-lg}` | 55px | 25px | 2px | 600 | Slider sub-heads | `rs-layer` |
| `{type.display-md}` | 40px | 52px | normal | 600 | Section headers | `span.premium-dual-header` |
| `{type.heading-sm}` | 25px | 30px | normal | 400 | Animated headlines | `h3.elementor-headline` |
| `{type.body-lg}` | 17px | 27.2px | normal | 400 | Default body text | `article#post-3448` |
| `{type.subheading}` | 16px | 20.8px | normal | 700 | Tab titles | `h3.bdt-interactive-tabs-title` |
| `{type.body-sm}` | 15px | 15px | normal | 400 | Button labels | `span.ee-button-link` |
| `{type.caption}` | 11px | 27.2px | normal | 500 | Tab sub-titles | `div.bdt-interactive-tabs-sub-title` |

### Principles
1. **Display Tracking:** Large display type (50px+) uses a wide +2px letter spacing to maintain legibility and premium feel.
2. **Dual-Tone Headers:** Headlines often mix `{color.ink}` and `{color.primary}` to highlight key value propositions.
3. **Weight Contrast:** Bold 700-weight is reserved for structural labels and display, while 400-weight carries all narrative prose.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 12px | 18 |
| `{space.sm}` | 20px | 17 |
| `{space.md}` | 24px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 101 occurrences |
| `{radius.sm}` | 3px | Form inputs | 9 occurrences |
| `{radius.md}` | 6px | Buttons, small surfaces | 8 occurrences |
| `{radius.card}` | 20px | Feature cards | 9 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | Standard cards and surfaces | `shadow: none` observed on all components |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site CTAs (Read More, Accept)
**Pages observed:** https://ovationsgroup.com
**Spec:** Background `{color.primary}` (#ce1943) / Text `{color.white}` (#ffffff) / Radius 6px / Padding 20px / Typography `{type.body-sm}`
**States observed:** Default | Hover: Not captured

#### Surface Bordered
**Role:** Interactive containers, cookie notices
**Pages observed:** https://ovationsgroup.com
**Spec:** Background transparent / Border 1px `{color.primary}` (#ce1943) / Radius 6px / Padding 20px

### Tier 2: Patterns

#### Value Proposition Card
**Role:** Displaying core service offerings
**Pages observed:** https://ovationsgroup.com
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.ink}` (#223344) / Radius 20px / Padding 20px / Border 0px

#### Interactive Tab
**Role:** Content switching
**Pages observed:** https://ovationsgroup.com
**Spec:** Typography Title `{type.subheading}` (16px/700) / Subtitle `{type.caption}` (11px/500)

### Tier 3: Surface-specific

#### Cookie Banner
**Role:** Compliance overlay
**Pages observed:** https://ovationsgroup.com
**Spec:** Background `#444444` / Text `{color.white}` / Primary Button `{color.primary}`

#### Hero Slider
**Role:** Main landing messaging
**Pages observed:** https://ovationsgroup.com
**Spec:** Typography `{type.display-xl}` / Background Image with network graph overlay

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1140px (inferred from standard container) |
| Grid | 12-column desktop |
| Section Padding | 80px - 100px vertical |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Value Prop cards stack 1-up; Typography scales down. |

## Imagery & decoration
- **Network Graphs:** Uses thin-line geometric nodes and connections as a watermark background.
- **Iconography:** Uses solid-fill icons in `{color.muted}` or `{color.primary}`.
- **Avoids:** Drop shadows, heavy gradients, and rounded "pill" buttons.

## Do's
- Use `{color.primary}` (#ce1943) for the most important word in a headline.
- Apply `{radius.card}` (20px) to all white content cards.
- Maintain a minimum of 2px letter spacing on any type over 50px.
- Use Montserrat 700 for all navigation and structural labels.
- Ensure buttons have at least 20px horizontal padding.

## Don'ts
- **Wrong:** Using `#046bd2` (Sub-brand Blue) as the primary CTA color. **Right:** Use `#ce1943`. **Reason:** Parent brand identity is anchored in crimson, not blue.
- **Wrong:** Applying drop shadows to cards. **Right:** Use 1px borders or flat surfaces. **Reason:** The system is strictly flat.
- **Wrong:** Mixing serif fonts with Montserrat. **Right:** Use Montserrat for all roles.
- Do not use sharp 0px corners for interactive elements; use `{radius.md}` (6px).
- Do not use `#000000` for body text; use `{color.ink}` (#223344).

## Similar brands
- IBM (Enterprise blue/white/high-contrast)
- Red Hat (Crimson accent on monochrome)
- Atlassian (Typography-heavy enterprise layout)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --ovations-primary: #ce1943;
  --ovations-ink: #223344;
  --ovations-white: #ffffff;
  --ovations-surface-soft: #eef0f1;
  --ovations-radius-card: 20px;
  --ovations-font-main: 'Montserrat', sans-serif;
}
```

## Agent prompt examples
- "Generate a service card using Montserrat, a white background, a 20px border radius, and a crimson (#ce1943) icon."
- "Create a hero section with a 58px Montserrat Bold headline where the key verb is colored #ce1943 and letter spacing is 2px."
- "Design a primary button with a 6px radius, #ce1943 background, and white Montserrat 15px text."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Shadow tokens are missing as the system appears to favor flat design or 1px borders.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Main Homepage | https://ovationsgroup.com | Desktop 1440px | 2026-06-06 |
| Mobile Homepage | https://ovationsgroup.com | Mobile 390px | 2026-06-06 |