# Keelvar Design System

> High-contrast enterprise procurement interface defined by deep midnight foundations, vibrant grape accents, and soft-radius data cards.

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

## TL;DR
Keelvar utilizes a "Midnight and Grape" palette to signal high-end enterprise intelligence. The system is anchored by a deep near-black foundation `#1c0d59` (Midnight) and energized by a primary brand violet `#7878ff` (Grape). Typography is strictly **Ppmori**, used in weights from 400 to 700, featuring a massive 90px display tier for hero statements. Components favor a soft-industrial aesthetic with 16px to 24px border radii and subtle 1px borders in `#e6e7e4` (Ivory Darker). The layout is characterized by generous whitespace and high-contrast text-on-dark section transitions.

## Signature DNA
1. **The Grape Voltage** (The use of `#7878ff` as both a text accent and a high-confidence hover state for secondary actions across all pages).
2. **Midnight Transitions** (Full-width section blocks using `#1c0d59` or `#100341` to reset the visual rhythm between light-canvas content areas).
3. **Soft-Radius Data Cards** (Consistent 16px and 24px rounding on content containers, often paired with a 1px `#9392fc` border to elevate technical data).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{colors.white}` | `#ffffff` | Page background, primary surface, dark-mode text | 133 | 1 | `--_semantics---background--primary` |
| `{colors.black}` | `#000000` | Primary body text, headings | 197 | 1 | `--_semantics---text--primary` |
| `{colors.ivory-darker}` | `#e6e7e4` | Universal 1px border, divider lines | 31 | 1 | `--_semantics---border--border-primary` |
| `{colors.ivory-lighter}` | `#f9f9f9` | Card backgrounds, subtle section alternates | 17 | 1 | `--new--ivory-lighter` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{colors.grape}` | `#7878ff` | Brand accent, hover states, accent text | 30 | 1 | `--_semantics---text--accent` |
| `{colors.grape-dark}` | `#5a59c5` | Primary button background, active borders | 10 | 1 | `--_semantics---button-color--button-bg-primary` |
| `{colors.midnight}` | `#1c0d59` | Dark section backgrounds, H1 headings | 20 | 1 | `--_semantics---background--card-background-dark` |
| `{colors.midnight-darker}` | `#100341` | Deep footer/alternate section backgrounds | 6 | 1 | `--new--midnight-darker` |
| `{colors.menthol}` | `#d1ff9f` | Pricing highlight text, secondary button text | 29 | 1 | `--menthol` |
| `{colors.tiffany}` | `#2fbcc2` | Decorative button background | 1 | 0.8 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Ppmori | 400, 600, 700 | Primary Brand (Display, Heading, Body) | Inter | Proprietary |
| Universal sans display 300 | 400, 600 | Secondary Heading | Helvetica Neue | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display-huge}` | 90px | 108px | normal | 600 | Homepage hero | `h1.text-size-huge` |
| `{type.display-lg}` | 48px | 57.6px | normal | 600 | Section headers | `h2.text-color-alternate-dark` |
| `{type.display-md}` | 40px | 52px | normal | 400 | Banner headings | `h1.whiteheading` |
| `{type.heading-lg}` | 32px | 38.4px | normal | 600 | Card titles | `div.kai-card` |
| `{type.heading-md}` | 28px | 33.6px | normal | 600 | Sub-section heads | `h2.heading-style-h4` |
| `{type.body-lg}` | 18px | 27px | normal | 400 | Intro paragraphs | `div.text-size-medium` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default running text | `header.home-hero_top` |
| `{type.caption}` | 12px | 18px | normal | 400 | Footer links | `a.footer_link` |

### Principles
1. **Display weight is 600.** While 700 exists, the primary brand voice for large-scale type is the slightly more refined 600 weight.
2. **Line height follows a 1.2x - 1.5x ratio.** Larger display sizes use tighter 1.2x leading (90/108), while body text uses 1.5x (16/24).
3. **Zero letter-spacing.** The system relies on the natural kerning of Ppmori; no tracking overrides are observed in core tokens.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 52 |
| `{space.sm}` | 16px | 60 |
| `{space.md}` | 24px | 7 |
| `{space.lg}` | 32px | 9 |
| `{space.xl}` | 36px | 18 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Footer buttons, sharp sections | 274 occurrences |
| `{radius.sm}` | 10px | Primary CTA buttons | `Rounded Button` component |
| `{radius.md}` | 16px | Standard content cards | 26 occurrences |
| `{radius.lg}` | 24px | Large feature panels | 29 occurrences |
| `{radius.xl}` | 32px | Hero-tier containers | 18 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.card}` | `rgba(16, 3, 65, 0.2) 10px 10px 30px 0px` | Floating feature cards | 9 occurrences |
| `{shadow.glow}` | `rgba(247, 247, 245, 0.5) 5px -5px 20px 0px` | Secondary card depth | 9 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary CTA (Request a Demo, Get Started)
**Pages observed:** https://keelvar.com, https://keelvar.com/pricing
**Spec:** Background: `#5a59c5` / Text: `#ffffff` / Radius: `10px` / Padding: `9px 16px 7px` / Typography: `16px Ppmori`
**States observed:** Default | Hover: `#4d4dcc` | Active: captured

#### Standard Button
**Role:** Secondary actions, navigation links
**Pages observed:** https://keelvar.com
**Spec:** Background: `transparent` / Text: `#000000` / Border: `1px #e6e7e4` / Radius: `0px` / Padding: `16px 0px`
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Benefit and stat display
**Pages observed:** https://keelvar.com
**Spec:** Background: `#ffffff` / Border: `1px #9392fc` / Radius: `24px` / Padding: `16px` / Typography: `32px Ppmori`
**States observed:** Default | Hover: not captured

#### Data Surface
**Role:** Form inputs and small containers
**Pages observed:** https://keelvar.com
**Spec:** Background: `transparent` / Border: `1px #e6e7e4` / Radius: `16px` / Padding: `16px 32px`
**States observed:** Default | Focus: captured

### Tier 3: Surface-specific

#### Midnight Panel
**Role:** High-contrast section transitions
**Pages observed:** https://keelvar.com
**Spec:** Background: `#1c0d59` / Text: `#ffffff` / Radius: `0px` / Padding: `80px 0px`
**States observed:** Default

#### Pricing Card
**Role:** Tiered pricing display
**Pages observed:** https://keelvar.com/pricing
**Spec:** Background: `#f9f9f9` / Border: `1px #e6e7e4` / Radius: `16px` / Padding: `32px`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1280px |
| Section padding (vertical) | 80px - 120px |
| Column gap | 32px |

## Imagery & decoration
Keelvar uses abstract geometric "floating" cards and soft purple gradients to suggest a cloud-based, agentic intelligence. It avoids literal photography of office environments, opting for high-contrast logos of partner brands (Mars, Siemens) in monochrome or brand-blue.

## Do's
- Use `#7878ff` (Grape) for all interactive text accents.
- Apply `{radius.md}` (16px) to all standard white cards.
- Set display headlines to `weight: 600` for a professional enterprise feel.
- Ensure 1px borders use `#e6e7e4` (Ivory Darker) for subtle containment.
- Transition between major page sections using `#1c0d59` (Midnight) backgrounds.

## Don'ts
- **Wrong:** Using `#2fbcc2` (Tiffany) for primary buttons. **Right:** Use `#5a59c5`. **Reason:** Tiffany is a decorative accent, not a primary action color.
- **Wrong:** Applying sharp 0px corners to data cards. **Right:** Use 16px or 24px. **Reason:** Sharp corners are reserved for full-width section containers and specific footer buttons.
- **Wrong:** Using pure white text on light grape backgrounds. **Right:** Ensure contrast meets 4.5:1 or use Midnight text.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-grape: #7878ff;
  --color-grape-dark: #5a59c5;
  --color-midnight: #1c0d59;
  --color-ivory: #f9f9f9;
  --color-border: #e6e7e4;
  --radius-card: 16px;
  --font-main: 'Ppmori', sans-serif;
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "brand": {
      "primary": { "value": "#5a59c5" },
      "accent": { "value": "#7878ff" }
    },
    "neutral": {
      "midnight": { "value": "#1c0d59" },
      "ivory": { "value": "#e6e7e4" }
    }
  }
}
```

## Known gaps
- Hover states for secondary buttons were not captured in the current crawl.
- Mobile-specific typography scaling for the 90px display tier is inferred but not explicitly tokenized in the source.
- Success/Error semantic colors were not present on the analyzed marketing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://keelvar.com | 1440px | 2026-06-06 |
| Pricing | https://keelvar.com/pricing | 1440px | 2026-06-06 |