# Viteplus Design System

> A high-contrast, precision-tooled developer interface anchored by electric purple and monospace technical data.

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

## TL;DR
Viteplus operates as a utilitarian, developer-focused environment built on a stark monochrome foundation (`#ffffff` to `#16171d`). The system relies on an electric purple (`#4f30e8`) as its sole structural accent, reserving other chromatic moments (`#32f3e9`, `#22ff73`) strictly for syntax highlighting and terminal-like data visualization. Typography pairs the workhorse Inter with the expressive, tightly tracked APK Protocol for display, while KH Teka Mono pervasively signals technical content. The UI geometry is sharp and flat, favoring 0px to 8px radii and hairline borders over deep elevation.

## Signature DNA
1. **Electric Purple Anchor:** The brand relies almost entirely on `#4f30e8` (`--vp-c-brand-1`) to guide the user's eye, applying it to primary buttons, active states, and interactive text, contrasting sharply against the grayscale canvas.
2. **Tightly Tracked Display:** APK Protocol is deployed at large scales (up to 60px) with aggressive negative letter-spacing (-3px), creating a dense, engineered typographic texture for marketing headlines.
3. **Pervasive Monospace:** KH Teka Mono is used extensively at 14px and 16px for code blocks, inline code, and terminal outputs, reinforcing the product's identity as a developer tool.

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| (None) | N/A | N/A | N/A | N/A |

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-white` | `#ffffff` | Surface bg, button bg, text | 122 | 1.0 | `css_variable` |
| `--color-grey` | `#867e8e` | Button text, surface bg, text | 93 | 1.0 | `css_variable` |
| `--color-primary` | `#16171d` | Text, button text, surface bg | 83 | 1.0 | `css_variable` |
| `--vp-c-text-2` | `#67676c` | Muted text, code block text | 30 | 1.0 | `css_variable` |
| `--vp-c-black` | `#000000` | Text, button text | 18 | 1.0 | `css_variable` |
| `--color-stroke` | `#e5e4e7` | Border, divider | 11 | 1.0 | `css_variable` |
| `--color-nickel` | `#3b3440` | Text, border | 10 | 1.0 | `css_variable` |
| `--color-slate` | `#14121a` | Surface bg | 10 | 1.0 | `css_variable` |
| `--vp-c-bg-alt` | `#f6f6f7` | Button bg, code block bg | 3 | 1.0 | `css_variable` |
| `--vp-c-border` | `#c2c2c4` | Border | 2 | 1.0 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-wine` | `#140033` | Surface bg, text | 13 | 1.0 | `css_variable` |
| `--color-aqua` | `#32f3e9` | Text | 8 | 1.0 | `css_variable` |
| `--vp-c-brand-1` | `#4f30e8` | Text, border, primary bg | 6 | 1.0 | `css_variable` |
| `--color-zest` | `#22ff73` | Text | 5 | 1.0 | `css_variable` |
| `--color-vite` | `#b39aff` | Text, surface bg (decorative_only) | 2 | 1.0 | `css_variable` |
| `--vp-c-gray-soft` | `#8e96aa` | Button bg, info block bg | 2 | 1.0 | `css_variable` |

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 400, 500, 600, 700 | Body, UI text | Inter | OFL |
| APK Protocol | 400, 500, 700 | Display, headings | Space Grotesk | Unknown |
| KH Teka Mono | 400 | Code, terminal data | JetBrains Mono | Unknown |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `--text-display-lg` | 64px | 64px | normal | 600 | Display | `p.code` |
| `--text-display-md` | 60px | 67.2px | -3px | 500 | Hero h1 | `h1.text-center.text-primary` |
| `--text-display-sm` | 48px | 48px | -1.2px | 500 | Section h2 | `h2.text-white` |
| `--text-heading-xl` | 40px | 53.3px | -1px | 500 | Section h3 | `h3` |
| `--text-heading-lg` | 30px | 36px | normal | 500 | Card h4 | `h4` |
| `--text-heading-md` | 24px | 28px | normal | 500 | Sub-section h5 | `h5` |
| `--text-heading-sm` | 20px | 28px | normal | 500 | Small titles | `p.text-primary.font-medium` |
| `--text-body-lg` | 18px | 28px | normal | 400 | Lead paragraph | `p.self-stretch.text-center` |
| `--text-body` | 16px | 22.4px | normal | 400 | Default body | `div.marketing-layout` |
| `--text-code` | 16px | 24px | normal | 400 | Inline code | `code` |
| `--text-body-sm` | 14px | 24px | normal | 400 | Terminal output | `span.terminal-tone-base` |
| `--text-caption` | 12px | 16px | 0.3px | 400 | Muted labels | `span.text-grey.text-xs` |

### Principles
1. **Aggressive tracking on display:** APK Protocol requires tight negative tracking (-1px to -3px) at sizes 40px and above to achieve the brand's engineered look.
2. **Monospace for data:** KH Teka Mono is strictly reserved for code blocks, terminal outputs, and technical annotations.
3. **High-contrast body:** Inter at 16px/400 is the workhorse, relying on high contrast (`#16171d` on `#ffffff`) rather than heavy weights for legibility.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `--space-2` | 2px | 23 |
| `--space-4` | 4px | 26 |
| `--space-6` | 6px | 31 |
| `--space-8` | 8px | 24 |
| `--space-10` | 10px | 9 |
| `--space-12` | 12px | 23 |
| `--space-16` | 16px | 18 |
| `--space-20` | 20px | 12 |
| `--space-24` | 24px | 8 |
| `--space-32` | 32px | 24 |
| `--space-40` | 40px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `--radius-none` | 0px | Panels, navigation, footer | 304 occurrences |
| `--radius-sm` | 4px | Inputs, small buttons | 45 occurrences |
| `--radius-md` | 6px | Inputs | 6 occurrences |
| `--radius-lg` | 8px | Controls, standard cards | 11 occurrences |
| `--radius-xl` | 12px | Large controls | 6 occurrences |
| `--radius-full` | 50px | Pill buttons, badges | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `--shadow-sm` | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px` | Subtle interactive elements | 2 occurrences |
| `--shadow-md` | `rgba(0, 0, 0, 0.1) 0px 12px 32px 0px, rgba(0, 0, 0, 0.08) 0px 2px 6px 0px` | Elevated cards, modals | 2 occurrences |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global top-level routing.
**Pages observed:** https://viteplus.dev, https://viteplus.dev/pricing, https://viteplus.dev/about
**Spec:** Background `#ffffff` / Text `#16171d` / Border `#e5e4e7` / Radius 0px / Padding 20px 24px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

#### Footer
**Role:** Global bottom-level routing and legal.
**Pages observed:** https://viteplus.dev/pricing, https://viteplus.dev/about
**Spec:** Background `#ffffff` / Text `#000000` / Border `#e2e2e3` / Radius 0px / Padding 32px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

### Tier 2: Patterns

#### Rounded Button (Solid)
**Role:** Secondary actions and utility triggers.
**Pages observed:** https://viteplus.dev, https://viteplus.dev/pricing, https://viteplus.dev/about
**Spec:** Background `#f6f6f7` / Text `#867e8e` / Border `#867e8e` (0px width) / Radius 8px / Padding 8px 12px / Typography 14px / Shadow none
**States observed:** Default | Disabled: not captured

#### Rounded Button (Outline)
**Role:** Tertiary actions.
**Pages observed:** https://viteplus.dev/pricing, https://viteplus.dev/about
**Spec:** Background `rgba(142, 150, 170, 0.14)` / Text `#000000` / Border `#c2c2c4` (1px width) / Radius 11px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

### Tier 3: Surface-specific

#### Elevated Card
**Role:** Feature highlights and pricing tiers.
**Pages observed:** https://viteplus.dev/pricing, https://viteplus.dev/about
**Spec:** Background `#ffffff` / Text `#4f30e8` / Border `#4f30e8` (0px width) / Radius 8px / Padding 8px 16px / Typography 12px / Shadow `rgba(0, 0, 0, 0.1) 0px 12px 32px 0px, rgba(0, 0, 0, 0.08) 0px 2px 6px 0px`
**States observed:** Default | Disabled: not captured

#### Outlined Surface
**Role:** Container for grouped content or code snippets.
**Pages observed:** https://viteplus.dev/pricing, https://viteplus.dev/about
**Spec:** Background transparent / Text `#4f30e8` / Border `#4f30e8` (1px width) / Radius 16px / Padding 3px 16px / Typography 14px / Shadow none
**States observed:** Default | Disabled: not captured

## Layout
Not captured in source.

## Responsive
Not captured in source.

## Imagery & decoration
Viteplus avoids photographic imagery entirely. Decoration is limited to terminal-style syntax highlighting (using `#32f3e9` and `#22ff73`) and subtle gradient meshes behind hero sections that incorporate the primary `#4f30e8` and accent `#140033`. The aesthetic is strictly code-first.

## Do's
* Use `#4f30e8` (`--vp-c-brand-1`) for all primary interactive elements and active states.
* Apply negative letter-spacing (-1px to -3px) to APK Protocol at sizes 40px and above.
* Use KH Teka Mono for any data, code, or terminal-related strings.
* Keep border radii tight (0px, 4px, 8px) to maintain a technical, precision feel.
* Rely on hairline borders (`#e5e4e7` or `#c2c2c4`) rather than shadows to separate layout regions.

## Don't
* **Don't** use `#b39aff` for text or interactive elements; it is tagged as decorative only.
* **Don't** apply positive letter-spacing to APK Protocol headlines.
* **Don't** mistake a sub-brand accent color for the Viteplus parent primary (`#4f30e8`).
* **Don't** use heavy dropshadows on foundational layout elements like the navigation or footer.

## Similar brands
* Vercel
* Supabase
* Linear
* Tailwind Labs

## Quick start

```css
:root {
  --color-white: #ffffff;
  --color-primary: #16171d;
  --color-grey: #867e8e;
  --color-stroke: #e5e4e7;
  --vp-c-brand-1: #4f30e8;
  --color-wine: #140033;
  --color-aqua: #32f3e9;
  --color-zest: #22ff73;
  --vp-c-bg-alt: #f6f6f7;
  
  --font-body: 'Inter', sans-serif;
  --font-display: 'APK Protocol', sans-serif;
  --font-mono: 'KH Teka Mono', monospace;
}
```

## Agent prompt examples
1. "Create a Viteplus feature card. Use a `#ffffff` background with an 8px radius. The title should be 24px APK Protocol. Include a code snippet block using KH Teka Mono on a `#f6f6f7` background."
2. "Build a Viteplus top navigation bar. It needs a `#ffffff` background, a 1px bottom border using `#e5e4e7`, and navigation links in 16px Inter using `#16171d`."
3. "Generate a hero section for Viteplus. The main headline should be 60px APK Protocol with -3px letter spacing. Add a primary CTA button using `#4f30e8` background and `#ffffff` text."

## Known gaps
Semantic colors (success, warning, error) were not explicitly captured in the evidence payload. Layout grid definitions and specific responsive breakpoint behaviors were also not captured in the source data.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://viteplus.dev | Desktop | 2026-06-06T05:00:26.196Z |
| Pricing | https://viteplus.dev/pricing | Desktop | 2026-06-06T05:00:26.196Z |
| About | https://viteplus.dev/about | Desktop | 2026-06-06T05:00:26.196Z |