# Prezent Design System

> Deep navy corporate precision meets light-weight editorial typography, anchored by high-contrast white surfaces and technical blue accents.

**Source:** https://prezent.ai | **Captured:** 2026-06-06
**Brand layer:** parent | **Related brands:** None

## TL;DR
Prezent utilizes a "Deep Blue" foundation (#01213c) to establish a professional, enterprise-grade atmosphere. The system is characterized by a sophisticated typographic pairing: Luxoragrotesk at a signature weight of 300 for display headlines and Helixa for functional UI and body text. Visual depth is achieved through generous whitespace, 16px to 20px card radii, and a specific shadow pattern (rgba(206, 217, 213, 0.5)) that creates a soft, lifted effect on light canvases. Accent colors like Mid Blue (#00b5e2) and Bright Blue (#21a7e0) are used sparingly for interactive highlights and borders.

## Signature DNA
1. **Luxoragrotesk 300 Display** (The primary brand identifier, used for large-scale hero headlines at 56px and 44px to create an editorial, high-end feel. Observed on Homepage and Pricing.)
2. **Deep Blue Immersion** (The use of #01213c as both a background for high-impact sections and a primary text color for maximum contrast against white. Observed across all analyzed pages.)
3. **Soft-Lift Elevation** (A distinct shadow strategy using a desaturated teal-tinted shadow `rgba(206, 217, 213, 0.5)` to separate white cards from the background. Observed on Homepage and About.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color--deep-blue` | `#01213c` | Primary text, button backgrounds, dark section surfaces | 231 | 1 | Computed Style |
| `--bg-colors--background-dark` | `#043561` | Secondary dark surface, primary blue background | 44 | 1 | CSS Variable |
| `--color--grey-dark` | `#4a4a4a` | Default body text, secondary UI labels | 580 | 1 | CSS Variable |
| `--color--white-10` | `#ffffff` | Page canvas, card surfaces, button text on dark | 545 | 1 | CSS Variable |
| `--color--grey-light` | `#dadada` | Borders, disabled states, subtle dividers | 37 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color--light-blue-second` | `#a2c1d7` | Card borders, subtle decorative strokes | 36 | 1 | CSS Variable |
| `--color--mid-blue` | `#00b5e2` | Text accents, active icons, interactive borders | 20 | 1 | CSS Variable |
| `--color--bright-blue` | `#21a7e0` | Decorative surfaces, secondary accents | 3 | 1 | Computed Style |
| `--color--light-green` | `#93ffa2` | Decorative only (Pricing badges) | 6 | 1 | Computed Style |
| `--color--soft-yellow` | `#ffd769` | Decorative only | 1 | 1 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Luxoragrotesk | 300, 400, 500 | Display, Headings | Montserrat (Light) | Custom/Licensed |
| Helixa | 400, 600, 700 | Body, UI, Buttons | Inter | Custom/Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 56px | 61.6px | normal | 300 | Hero H1 | `h2:nth-of-type(1)` |
| `{type.display.lg}` | 44px | 52.8px | normal | 300 | Section Headlines | `h2.h2-style` |
| `{type.heading.md}` | 32px | 48px | normal | 300 | Sub-section headers | `p.paragraph-213.stats` |
| `{type.heading.sm}` | 24px | 33.6px | normal | 400 | Card titles | `div.h3-style` |
| `{type.subheading}` | 19px | 24.96px | normal | 400 | Feature labels | `h3.h4-style` |
| `{type.body.lg}` | 18px | 28.8px | normal | 400 | Intro paragraphs | `div.paragraph-l.home` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Standard body text | `section.section` |
| `{type.button}` | 16px | 25.6px | normal | 700 | Primary CTA | `a.button.is-prime` |
| `{type.caption}` | 14px | 21.6px | normal | 400 | List items, small text | `li.list-item-2` |

### Principles
1. **Lightweight Authority:** Headlines must use Luxoragrotesk at weight 300. Bold weights are reserved for specific UI emphasis within body text.
2. **High-Contrast Readability:** Dark text (#01213c or #4a4a4a) is strictly paired with white backgrounds (#ffffff) for a minimum 16:1 contrast ratio.
3. **Tight Display Leading:** Display sizes (44px+) utilize a tight line-height ratio of approximately 1.2x to maintain visual density.

## Spacing
**Base unit:** 4px (Inferred from common multiples)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 37 |
| `{space.sm}` | 16px | 110 |
| `{space.md}` | 24px | 137 |
| `{space.lg}` | 32px | 27 |
| `{space.xl}` | 44px | 32 |
| `{space.section}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sm}` | 8px | Form controls | Observed on Pricing |
| `{radius.md}` | 16px | Standard content cards | 117 occurrences |
| `{radius.lg}` | 20px | Large feature cards | 41 occurrences |
| `{radius.pill}` | 96px | Buttons, primary tags | 38 occurrences |
| `{radius.full}` | 200px | Large panels, circular UI | 61 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | 0px | Default page sections | Universal |
| Raised | `rgba(0, 0, 0, 0.1) 0px 2px 14px 0px` | Subtle UI elements | Pricing page |
| Lifted | `rgba(206, 217, 213, 0.5) 0px 20px 36px 0px` | Primary feature cards | 23 occurrences |
| Floating | `rgba(0, 0, 0, 0.08) 0px 20px 36.8px 0px` | Hovered/Active cards | 7 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call-to-action
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#01213c` | Text: `#ffffff` | Radius: `96px` | Padding: `10px 32px` | Typography: Helixa 700 (16px)
**States observed:** Default: Captured | Hover: Not captured | Active: Not captured

#### Rounded Button (Secondary)
**Role:** Alternative action or ghost button
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` | Text: `#01213c` | Radius: `96px` | Padding: `10px 32px` | Typography: Helixa 700 (16px)
**States observed:** Default: Captured | Hover: Not captured | Active: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Content grouping for benefits or features
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: `#ffffff` | Text: `#4a4a4a` | Radius: `16px` | Shadow: `rgba(206, 217, 213, 0.5) 0px 20px 36px 0px` | Padding: `25px`
**States observed:** Default: Captured | Hover: Not captured

#### Bordered Card (Dark Mode)
**Role:** Content on dark blue backgrounds
**Pages observed:** Homepage, Pricing
**Spec:** Background: `rgba(255, 255, 255, 0.1)` | Text: `#ffffff` | Border: `1px solid #a2c1d7` | Radius: `16px` | Padding: `61.6px 20px 44px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Pricing Tier Panel
**Role:** Pricing plan containers
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` | Text: `#4a4a4a` | Radius: `20px` | Padding: `24px 16px` | Border: `0px`
**States observed:** Default: Captured

#### Navigation Surface
**Role:** Header and footer containers
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: `rgba(0, 0, 0, 0)` | Text: `#ffffff` | Radius: `200px` | Padding: `4.96px 24px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (Inferred) |
| Section Vertical Padding | 80px |
| Card Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked card layouts, display type reduced to ~32px |
| Desktop | 1440px | Multi-column grids (3-up or 4-up), full display type (56px) |

## Imagery & decoration
Prezent uses high-quality professional photography and abstract geometric shapes (circles and rounded panels) as decorative background elements. It avoids heavy gradients, preferring solid color blocks of #01213c or #043561 to define section boundaries.

## Do's
- Use Luxoragrotesk 300 for all H1 and H2 headlines.
- Apply the teal-tinted shadow `rgba(206, 217, 213, 0.5)` to primary white cards.
- Maintain a 24px gap between grid items.
- Use #01213c for primary buttons on light backgrounds.
- Ensure all body text is at least 16px for legibility.

## Don'ts
- Do not use Luxoragrotesk in weights heavier than 500 for display.
- Do not use #00b5e2 (Mid Blue) as a primary button background; it is an accent color only.
- Do not use sharp corners (0px radius) for interactive components; use at least 8px.
- Do not place #4a4a4a text on #01213c backgrounds; use #ffffff for contrast.
- Do not mix multiple shadow styles within the same section.

## Similar brands
- Salesforce (Corporate blue foundation)
- IBM (Technical typography and grid precision)
- McKinsey (Editorial display type and high-contrast layouts)

## Quick start

### CSS Variables
```css
:root {
  --color-deep-blue: #01213c;
  --color-primary-blue: #043561;
  --color-mid-blue: #00b5e2;
  --color-grey-dark: #4a4a4a;
  --color-white: #ffffff;
  --radius-card: 16px;
  --radius-pill: 96px;
  --shadow-lifted: 0px 20px 36px 0px rgba(206, 217, 213, 0.5);
}
```

### Style Dictionary
```json
{
  "color": {
    "brand": {
      "primary": { "value": "#01213c" },
      "secondary": { "value": "#043561" },
      "accent": { "value": "#00b5e2" }
    }
  },
  "font": {
    "family": {
      "display": { "value": "Luxoragrotesk" },
      "body": { "value": "Helixa" }
    }
  }
}
```

## Agent prompt examples
- "Create a feature card using a white background, a 16px border radius, and the Prezent lifted shadow (rgba(206, 217, 213, 0.5))."
- "Generate a hero section with a #01213c background and a headline in Luxoragrotesk weight 300 at 56px."
- "Design a primary button with a #01213c background, white text, and a 96px pill radius."

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the source evidence.
- Mobile-specific navigation transitions were not analyzed.
- Detailed form validation UI (success/error) was missing from the captured pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://prezent.ai | 1440px | 2026-06-06 |
| Pricing | https://prezent.ai/pricing | 1440px | 2026-06-06 |
| About | https://prezent.ai/about | 1440px | 2026-06-06 |