# Karnovgroup Design System

> High-contrast legal intelligence anchored by a signature amber primary and a structured, multi-chromatic surface system.

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

## TL;DR
Karnovgroup utilizes a high-utility "monochrome" base that is punctuated by a high-voltage amber primary (`#fed506`). The system is characterized by a "Surface-First" architecture where content is grouped into large, full-width color blocks (Navy, Pale Blue, Cream, Sage) rather than traditional card-based shadows. Typography relies on a dual-font strategy: `karnov_display` for authoritative headings and `roboto` for functional body and UI. The interface is strictly flat, using 0px border radii for most structural elements and a minimal 4px radius for interactive components like buttons and inputs.

## Signature DNA
1. **The Amber Pulse** (The primary action color `#fed506` is used exclusively for high-priority CTAs and brand-critical highlights, creating a 1.4:1 contrast ratio that prioritizes brand recognition over standard accessibility norms on white backgrounds).
2. **Surface Banding** (Content is organized into distinct color-blocked sections—`#00003c`, `#e4eef4`, `#fffbdd`—that span the full viewport width, eliminating the need for elevation shadows).
3. **Sharp Geometry** (A non-negotiable 0px radius on all structural surfaces and containers, contrasted only by a 4px "soft-corner" on interactive buttons).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary background, text on dark surfaces | 51 | 1.0 | `--wp--preset--color--white` |
| `{color.charcoal}` | `#3f403a` | Primary text, borders, secondary button text | 333 | 0.8 | computed_style |
| `{color.black}` | `#333333` | High-contrast button text | 21 | 0.8 | computed_style |
| `{color.gray}` | `#686868` | Muted body text | 18 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#fed506` | Primary CTA background, brand highlights | 15 | 0.8 | computed_style |
| `{color.navy}` | `#00003c` | Deep surface background (Tier 3) | 3 | 0.6 | computed_style |
| `{color.pale-blue}` | `#e4eef4` | Soft surface background (Tier 3) | 3 | 0.6 | computed_style |
| `{color.cream}` | `#fffbdd` | Warm surface background (Tier 3) | 3 | 0.6 | computed_style |
| `{color.sage}` | `#306e5e` | Decorative surface background | 3 | 0.6 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| `karnov_display` | 300, 400, 500 | Headings, Display | Playfair Display | Proprietary |
| `roboto` | 300, 400, 500 | Body, UI, Navigation | Roboto (Google Fonts) | Open Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 50px | 71.42px | normal | 400 | Hero numbers/stats | `span.number` |
| `{type.h1}` | 35px | 38.5px | normal | 500 | Module top titles | `h1.eda-module-top-title` |
| `{type.h2}` | 30px | 33px | 0.8px | 500 | Section headings | `h2.eda-module-title` |
| `{type.h3}` | 27px | 32.4px | normal | 300 | Sub-headings | `p` |
| `{type.body-lg}` | 18px | 25.71px | normal | 400 | List items, intro text | `li` |
| `{type.body}` | 16px | 22.85px | normal | 400 | Default body copy | `header.header` |
| `{type.nav}` | 16px | 22.85px | normal | 500 | Main menu links | `a.main-menu-link` |
| `{type.caption}` | 14px | 20.57px | normal | 400 | Small body/Footer | `p` |

### Principles
1. **Display weight is medium.** `karnov_display` is never used at heavy weights; it relies on size (50px) and line height for impact.
2. **Letter spacing on headings.** H2 elements use a specific `0.8px` tracking to increase legibility in all-caps or title-case scenarios.
3. **Light-weight subheads.** Secondary headings (`{type.h3}`) drop to weight 300 to create a clear hierarchy against weight 500 primary headings.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 15 |
| `{space.sm}` | 15px | 36 |
| `{space.md}` | 30px | 36 |
| `{space.lg}` | 50px | 21 |
| `{space.xl}` | 90px | 18 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Structural containers, surfaces, inputs | 408 occurrences |
| `{radius.interactive}` | 4px | Buttons, specific form elements | 15 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{flat}` | none | All surfaces (Navy, Cream, Blue) | No shadows captured in source |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary call to action
**Pages observed:** All (Home, Pricing, About)
**Spec:** Background: `#fed506` | Text: `#333333` | Radius: `4px` | Padding: `15px 21px` | Typography: `18px Roboto`
**States observed:** Default: Captured | Hover: Not captured | Active: Not captured

#### Navigation
**Role:** Global site header
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#3f403a` | Radius: `0px` | Typography: `16px Roboto (500)`
**States observed:** Default: Captured | Active: Captured (Swedish active toggle)

### Tier 3: Surface-specific

#### Dark Surface (Navy)
**Role:** High-contrast content section
**Pages observed:** Home, Pricing
**Spec:** Background: `#00003c` | Text: `#ffffff` | Padding: `50px 43px 49px` | Radius: `0px`

#### Soft Surface (Pale Blue)
**Role:** Secondary content section
**Pages observed:** Home, About
**Spec:** Background: `#e4eef4` | Text: `#3f403a` | Padding: `50px 43px 49px` | Radius: `0px`

#### Warm Surface (Cream)
**Role:** Tertiary content section
**Pages observed:** Home, Pricing
**Spec:** Background: `#fffbdd` | Text: `#3f403a` | Padding: `50px 43px 49px` | Radius: `0px`

#### Brand Surface (Amber)
**Role:** Highlighted content section or cookie banner
**Pages observed:** Home
**Spec:** Background: `#fed506` | Text: `#333333` | Radius: `0px`

## Layout
| Property | Value |
|------|-------|
| Section Padding (Vertical) | 90px |
| Content Padding (Horizontal) | 43px |
| Max Width | Not captured in source |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Surface blocks stack vertically; navigation collapses to menu. |

## Imagery & decoration
The brand uses high-contrast photography with yellow/amber overlays or physical yellow elements (e.g., yellow stairs) to reinforce the brand color. It avoids soft gradients or rounded imagery.

## Do's
- Use `#fed506` for primary buttons only.
- Maintain a strict `0px` radius for all section backgrounds.
- Pair `karnov_display` (500) with `roboto` (300) for sub-headings.
- Use full-width color bands (`#00003c`, `#e4eef4`) to separate content.
- Ensure all text on Navy surfaces is pure `#ffffff`.

## Don'ts
- **Wrong:** Using `#fed506` for body text. **Right:** Use `#3f403a`. **Reason:** Accessibility and brand hierarchy.
- **Wrong:** Applying shadows to cards. **Right:** Use flat color backgrounds. **Reason:** The system is strictly flat.
- **Wrong:** Using rounded corners on section dividers. **Right:** Keep all structural edges at `0px`.
- **Wrong:** Using sub-brand colors (e.g., vivid red `#cf2e2e`) as the primary action color. **Right:** Always use the parent amber `#fed506`.

## Similar brands
- Reuters (Legal/Professional)
- Wolters Kluwer
- LexisNexis
- Financial Times

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #fed506;
  --color-navy: #00003c;
  --color-text: #3f403a;
  --font-display: 'karnov_display', serif;
  --font-body: 'roboto', sans-serif;
  --radius-interactive: 4px;
  --radius-flat: 0px;
}
```

## Agent prompt examples
- "Create a primary button using `#fed506` background, `#333333` text, and a `4px` border radius."
- "Design a content section with a `#00003c` background, white text, and `90px` vertical padding."
- "Generate a heading using `karnov_display` at `30px` with `0.8px` letter spacing."

## Known gaps
- Hover and active states for buttons were not captured in the source.
- Max-width for the main container was not explicitly declared in tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|----------|--------------|
| Home | https://karnovgroup.com | 1440px | 2026-06-06 |
| Pricing | https://karnovgroup.com/pricing | 1440px | 2026-06-06 |
| About | https://karnovgroup.com/about | 1440px | 2026-06-06 |