# Soveren Design System

> High-contrast technical precision anchored by deep violet accents and geometric grotesque headlines.

**Source:** https://soveren.io | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Soveren utilizes a "Rock" monochromatic foundation of cool grays and deep navies, punctuated by a singular "Sunset" violet (`#6f22e6`) for primary actions. The layout is structured around generous vertical spacing (up to 80px) and a mix of sharp and pill-shaped geometry. Typography is a high-contrast pairing of **Craftwork Grotesk** for tight, technical headlines and **Manrope** for legible, functional body text. The system feels engineered and secure, using subtle shadows and layered white surfaces to create a sense of depth against a light gray (`#eceef3`) background.

## Signature DNA
1. **Geometric Technical Display** (Craftwork Grotesk at weight 600 with aggressive -3px tracking on H1s creates a "stamped" engineering aesthetic. Observed on homepage and about page.)
2. **The Violet Pivot** (A single high-saturation violet `#6f22e6` is the only chromatic voltage in a sea of navy `#232c40` and gray `#eceef3`. Used exclusively for conversion points.)
3. **Pill-Encapsulated Metadata** (Small tags and secondary UI elements are consistently wrapped in 1000px radius pills with light borders `#f5f7f9`, signaling modularity.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas}` | `#eceef3` | Page background and secondary text | 26 | 1 | `--rock--light--50-501` |
| `{color.surface}` | `#ffffff` | Primary card and section backgrounds | 51 | 0.8 | `computed_style` |
| `{color.ink.primary}` | `#232c40` | Primary body text and headings | 104 | 1 | `--rock--light--800` |
| `{color.ink.deep}` | `#141c2c` | Dark section text and backgrounds | 20 | 1 | `--rock--light--900` |
| `{color.border.light}` | `#f5f7f9` | Subtle dividers and button borders | 13 | 1 | `--rock--light--25` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#6f22e6` | Primary CTA background and brand accent | 28 | 1 | `--sunset--light--400` |
| `{color.midnight}` | `#070d19` | Dark mode buttons and footer background | 4 | 1 | `--midnight-black` |
| `{color.ink.muted}` | `#54617b` | Secondary text and labels | 61 | 1 | `--rock--light--500` |
| `{color.accent.blue}` | `#bfd3f6` | Decorative surface backgrounds | 3 | 0.6 | `computed_style` |
| `{color.ink.soft}` | `#6a768f` | Decorative only: low-contrast text | 2 | 1 | `--rock--light--400` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Craftwork Grotesk | 600 | Headlines / Display | Space Grotesk | Commercial |
| Manrope | 400, 500, 600 | Body / UI / Buttons | Manrope (Google) | OFL |
| -apple-system | 100, 300, 400, 700 | System UI / Overlays | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.mega}` | 63px | 72.45px | -3px | 600 | H1 Hero | `h1.heading` |
| `{type.display.md}` | 32px | 40px | -1px | 600 | Section Heads | `div.h4` |
| `{type.title.lg}` | 24px | 36px | normal | 600 | Sub-section labels | `div.lead.title-tag` |
| `{type.title.md}` | 21px | 31.5px | normal | 600 | Small headings | `div.bodytext.h6` |
| `{type.body.lg}` | 20px | 32px | normal | 400 | Lead paragraphs | `div.bodytext` |
| `{type.body.md}` | 18px | 30.6px | normal | 400 | Standard body | `div.smalltext` |
| `{type.nav}` | 16px | 24px | normal | 600 | Navigation links | `a.navlink.w-nav-link` |
| `{type.caption}` | 14px | 20px | normal | 400 | Small UI text | `nav.nav-menu` |

### Principles
1. **Aggressive Display Tracking:** Large headlines (63px) must use -3px letter spacing to achieve the brand's "compressed" technical look.
2. **Functional Body Heights:** Body text (18px-20px) maintains a generous 1.5x to 1.6x line-height ratio for readability.
3. **Weight as Hierarchy:** Manrope shifts from 400 (body) to 600 (interactive) to signal clickability without changing color.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 4px | 33 |
| `{space.sm}` | 8px | 8 |
| `{space.md}` | 16px | 23 |
| `{space.lg}` | 24px | 26 |
| `{space.xl}` | 32px | 23 |
| `{space.section}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Sharp sections | 196 occurrences |
| `{radius.sm}` | 4px | Tooltips / Small cards | `radius: 4px` |
| `{radius.md}` | 12px | Buttons / Inputs | `radius: 12px` |
| `{radius.lg}` | 16px | Content cards | `radius: 16px` |
| `{radius.pill}` | 1000px | Tags / Primary CTAs | `radius: 1000px` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.1) 0px 0px 16px 0px` | Floating UI cards | Card component |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.15) 0px 8px 48px 0px` | Modals / Popovers | Card component |

## Components
### Tier 1: Foundational
#### Primary Violet Button
**Role:** Main conversion action (e.g., "Get a demo")
**Pages observed:** https://soveren.io, https://soveren.io/about
**Spec:** Background: `#6f22e6` / Text: `#f5f7f9` / Radius: `12px` / Padding: `12px 32px 16px` / Typography: Manrope 16px (500)
**States observed:** Default: Captured | Hover: Not captured

#### Dark Button
**Role:** Secondary high-contrast action
**Pages observed:** https://soveren.io, https://soveren.io/about
**Spec:** Background: `#070d19` / Text: `#ffffff` / Radius: `12px` / Padding: `12px 24px 14px` / Typography: Manrope 16px (600)
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns
#### Metadata Pill Tag
**Role:** Categorization (e.g., "DSPM", "DDR")
**Pages observed:** https://soveren.io, https://soveren.io/about
**Spec:** Background: `transparent` / Text: `#232c40` / Border: 1px `#f5f7f9` / Radius: `1000px` / Padding: `0px` / Typography: Manrope 14px (400)
**States observed:** Default: Captured

#### Text Input
**Role:** Form fields
**Pages observed:** https://soveren.io, https://soveren.io/about
**Spec:** Background: `#131a28` / Text: `#232c40` / Border: 1px `transparent` / Radius: `12px` / Padding: `15px 24px 19px`
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Content Card
**Role:** Feature highlights
**Pages observed:** https://soveren.io, https://soveren.io/about
**Spec:** Background: `#ffffff` / Text: `#232c40` / Radius: `16px` / Padding: `32px 0px 0px` / Shadow: `none`
**States observed:** Default: Captured

#### Elevated Card
**Role:** Overlays and tooltips
**Pages observed:** https://soveren.io, https://soveren.io/about
**Spec:** Background: `#ffffff` / Text: `#000000` / Radius: `4px` / Shadow: `rgba(0, 0, 0, 0.15) 0px 8px 48px 0px`
**States observed:** Default: Captured

## Layout
| Property | Value |
| :--- | :--- |
| Section Padding | 80px vertical |
| Content Max-Width | Not explicitly captured (fluid) |
| Grid Gap | 24px - 32px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 16px; H1 font-size scales down. |

## Imagery & decoration
Soveren uses high-fidelity product dashboard screenshots with rounded corners (`16px`) and subtle drop shadows. Decorative elements include soft, blurred violet and blue gradients used as background "blooms" behind technical content.

## Do's
- Use `#6f22e6` exclusively for primary conversion buttons.
- Apply `-3px` letter spacing to Craftwork Grotesk headlines at sizes above 60px.
- Use `1000px` (pill) radius for tags and metadata labels.
- Maintain `80px` vertical spacing between major content sections.
- Pair `#232c40` text with `#eceef3` backgrounds for secondary sections.

## Don'ts
- Do not use `#6f22e6` for body text; use `#232c40` for primary readability.
- Do not use sharp corners (0px) for interactive buttons; use `12px` or `1000px`.
- Do not use the primary violet for background surfaces; it is reserved for actions.
- Do not mix Craftwork Grotesk with Manrope in the same text block; keep Craftwork for display only.
- Do not use pure black `#000000` for text; use the brand navy `#232c40`.

## Similar brands
- Snyk (Technical security, high-contrast typography)
- Vanta (Compliance-focused, clean card-based UI)
- Wiz (Security platform, violet/navy color palette)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #6f22e6;
  --color-ink: #232c40;
  --color-canvas: #eceef3;
  --color-surface: #ffffff;
  --font-display: "Craftwork Grotesk", sans-serif;
  --font-body: "Manrope", sans-serif;
  --radius-md: 12px;
  --radius-pill: 1000px;
}
```

## Agent prompt examples
- "Generate a feature card using a white background, 16px border radius, and a Craftwork Grotesk H4 heading in #232c40 with -1px letter spacing."
- "Create a primary CTA button with a violet #6f22e6 background, 12px border radius, and Manrope 16px medium text."
- "Design a metadata tag as a pill with a 1px #f5f7f9 border and #232c40 text at 14px."

## Known gaps
- Hover and active states for buttons were not explicitly captured in the static evidence.
- Mobile-specific typography scale for intermediate sizes (H2-H4) was not fully mapped.
- Exact container max-width for desktop layouts was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://soveren.io | 1440px / 390px | 2026-06-06 |
| About | https://soveren.io/about | 1440px | 2026-06-06 |