Vite Design System

Overview

Vite's marketing site stakes out the darkest and most theatrically branded position in the build-tool category. Speed as Aesthetic. The 60px APK Protocol headline with -3px letter-spacing, the isometric 3D logo glowing faint lavender against the purple-tinted near-black canvas, the tightly tracked mono labels — every design decision translates "faster than everything" into a visual register. Where Webpack reads like documentation, Parcel reads like a side project, and esbuild has no marketing site at all, Vite presents itself as the category's designed product.

The three-family type architecture is the technical signature. APK Protocol handles the display tier with custom negative tracking; Inter handles all prose and UI labels; KH Teka Mono handles section category labels in uppercase small-caps — an unusual application of monospace that gives the feature sections an engineering-log precision. No other build tool in the measured space uses a custom display typeface with this degree of tracking specificity.

Key Characteristics:

• APK Protocol display type at 60px / -3px tracking — the tightest tracked headline in the developer tools category.
• Soft lavender brand voltage ({colors.primary} — wired as --color-brand, --color-vite) against a purple-tinted near-black canvas.
• {colors.canvas} is #16171d — not neutral near-black but violet-shifted; every surface gets the temperature cast.
• KH Teka Mono used for uppercase section labels (not just code blocks) — an editorial application of mono type in a marketing context.
• 8px dominant radius for cards and inputs; 4px for tighter chips; no pill radius anywhere.
• White text ({colors.ink}) as the near-universal foreground; muted gray ({colors.ink-muted}) for secondary prose.
• Feature sections alternate between pure dark text bands and purple-tinted accent-strip panels.
• Flat elevation: cards use surface color contrast against the canvas rather than shadows.

Colors

Brand

• Primary ({colors.primary} — #b39aff): frequency 6. Used as border (3), text (3). The soft lavender brand voltage wired to --color-brand, --color-vite, --vp-c-brand-1, --vp-home-hero-name-color. Appears in hero name gradient, inline code links, and search highlights. Desaturated by design — full saturation would read as neon on the dark canvas.
• Secondary ({colors.secondary} — #370a7f): frequency 3. Used as background (3). Deep purple for gradient node backgrounds behind feature panels.

Text

• Ink ({colors.ink} — #ffffff): frequency 553. Used as text (303), border (246), background (4). The dominant foreground across every tier; pure white on the near-black canvas.
• Ink Muted ({colors.ink-muted} — #98989f): frequency 40. Used as text (20), background (1), border (19). Secondary prose color for body paragraphs and code block annotations.
• Ink Faint ({colors.ink-faint} — #867e8e): frequency 75. Used as text (38), border (37). Muted violet-gray for section label text and lower-hierarchy prose.

Canvas & Surface

• Canvas ({colors.canvas} — #16171d): frequency 11. Used as background (9). The page floor — a violet-shifted near-black, wired as --color-primary, --vp-c-bg, and --vp-nav-bg-color.
• Surface-1 ({colors.surface-1} — #14121a): frequency 11. Used as background (9). Slightly darker than canvas; code blocks, the sidebar, nav and search backgrounds. Wired as --color-slate, --vp-c-bg-elv.
• Surface-2 ({colors.surface-2} — #3b3440): frequency 57. Used as border (57). Secondary elevated surface for alt buttons and hover states. Wired as --color-nickel, --vp-button-alt-bg.

Hairlines

• Hairline ({colors.hairline} — #3b3440): frequency 57 (border). The dominant border tone, a deep purple-gray.
• Hairline Inner ({colors.hairline-inner} — #2e2e32): frequency 1. Used as border (1). Tighter divider for code tabs and sidebar borders; wired as --vp-c-divider.

Typography

Font Families

Three dedicated families, each with a distinct role:

APK Protocol — custom geometric display sans. Used exclusively for headings (h1, h2, h3, h5, h6) with aggressive negative tracking at the large sizes (-3px at 60px, -1.2px at 48px, -1px at 40px).

Inter — open-source neutral grotesque. Used for all body copy, nav links, button text, form labels. Falls back to sans-serif. The stable, high-legibility reading voice.

KH Teka Mono — custom monospace. Used for two distinct purposes: (1) code annotation spans in the live code examples, and (2) section category labels in uppercase at 12px with 0.3px letter-spacing. The second use is rare and signals brand personality.

Hierarchy

Substitutes

APK Protocol: substitute Neue Haas Grotesk Display or Syne, applying manual tracking of -0.05em at the 48-60px sizes. KH Teka Mono: substitute JetBrains Mono or IBM Plex Mono; apply the same uppercase transformation with letter-spacing 0.3px for section labels.

Layout

Spacing System

• Base unit: 4px.
• Section padding (vertical): 80px top and bottom for major sections; 112px for the hero band.
• Card padding: 28px vertical / 32px horizontal ({spacing.2xl} × {spacing.3xl}).
• Nav height: 82px, declared as --vp-nav-height.
• Layout max-width: 90rem (~1440px), declared as --vp-layout-max-width.

Grid & Container

• Hero: full-bleed dark canvas with the 3D Vite logo centered right and the headline + CTA stack left-aligned.
• Sponsor strip: horizontal scrolling logos (Nuxt, Svelte, Astro, Storybook, Nx, Cloudflare, Shopify, etc.) in white monochrome.
• Feature panels: alternating two-column layouts with code screenshots in dark surface tiles.
• Quote/testimonial row: single-column quotes from framework authors (Ryan Carniato, Fred K. Schott, Sebastien Chopin).
• Framework adoption row: logos of frameworks built on Vite at page bottom.

Rhythm

The page alternates between full-width dark text-and-prose bands ("Redefining developer experience," "A shared foundation to build upon") and narrower two-column feature panels with code screenshots. No band uses a tinted background — all editorial sections sit on the same canvas color. Accent strips use the secondary purple (#370a7f) behind specific feature code panels.

Elevation

Shadow-free. The dark canvas makes traditional drop shadows invisible — the system uses surface color contrast alone. {colors.surface-1} (#14121a) is slightly darker than {colors.canvas} (#16171d), so code blocks and the sidebar recede slightly rather than lifting. This is a reversed elevation model: instead of cards floating above the floor, code panels sink below it. Cards ({colors.surface-1}) at 28-32px padding sit on canvas, distinguished by surface contrast alone. The CSS shadow variables (--vp-shadow-1 through --vp-shadow-4) are declared but their oklch contrast against the near-black canvas is minimal.

Shapes

The radius scale is minimal and utilitarian:

• {rounded.none} 0px — hero text, editorial prose sections, most layout containers.
• {rounded.sm} 4px — code block corners, compact badge chips, inner elements (10 occurrences).
• {rounded.md} 8px — cards, search input, primary buttons, feature panels (15 occurrences — the dominant tier).

There is no 12px, 16px, or 24px tier. No pill. The system stays deliberately understated on corners to keep the engineering-grade signal intact.

Components

button-primary — Soft lavender {colors.primary} fill, dark canvas text ({colors.canvas}), {rounded.md} 8px radius, 8-16px padding. The search button on the nav is captured here; the hero CTA "Get Started" uses the same treatment.

button-secondary — {colors.surface-2} fill, white text, 8px radius. Used for the "Why Vite?" secondary CTA in the hero.

top-nav — Canvas (#16171d) fill, 82px height, 20-28px padding. Houses the Vite wordmark, nav links (Guide, Config, Plugins, Resources, Team, Blog), GitHub icon, and search button.

nav-link — Transparent, white text, APK Protocol 16px / weight 400, 8-12px padding. No hover background captured in the measured surface.

hero-heading — White text, APK Protocol 60px / weight 500, -3px letter-spacing. "The Build Tool for the Web."

section-heading — White text, APK Protocol 48px / weight 500, -1.2px tracking. "Redefining developer experience," "A shared foundation to build upon."

body-paragraph — White text, Inter 18px / weight 400. Hero sub-copy and feature prose.

body-paragraph-muted — Ink-muted (#98989f) text, Inter 16px / weight 400. Secondary prose in feature descriptions.

card — Surface-1 fill, white text, Inter 16px, 8px radius, 28-32px padding. Feature section cards and quote panels.

text-input — Surface-1 fill, ink-muted text, Inter 14px, 8px radius. The search input in the nav.

code-block — Surface-1 fill, white text, KH Teka Mono 14px, 4px radius, 20px padding. Feature code screenshots and inline snippets.

section-label — Ink-faint (#867e8e) text, KH Teka Mono 12px uppercase with 0.3px spacing. Used for category labels above feature panels like "PLUGIN SYSTEM" and "FULLY TYPED API."

footer — Surface-1 fill, ink-muted text, Inter 14px, 40-32px padding.

Do's and Don'ts

Do apply aggressive negative tracking to APK Protocol at large sizes. The -3px tracking on the 60px h1 is not accidental — it defines the tight, high-precision character of the display tier. At 60px without tracking, the headline reads as generic. The tracking is the brand.

Do use {colors.primary} (the soft lavender) at low frequency. It appears in 6 measured uses — the hero name gradient, inline code link text, and search highlight. Deploying it on card backgrounds or section fills would make it feel like a generic purple brand instead of a restrained voltage.

Do use KH Teka Mono (or its substitute) for uppercase section category labels. The application of mono type to non-code marketing labels is the system's most specific and unusual design move. It signals "this tool understands the terminal" without requiring you to put terminal UI on the marketing page.

Do keep the canvas at #16171d. The violet shift is the system's temperature — cooler than neutral, warmer than true black. Changing it to #000000 loses the amethyst warmth; changing it to a Catppuccin-dark near-black or a deeper violet-black makes the page feel like a theme instead of a product.

Don't add a pill radius. The system tops out at 8px ({rounded.md}). The decision to avoid capsule-shaped buttons distinguishes Vite from SolidJS (24px pill) and consumer products generally — it signals utility, not consumer-friendly softness.

Don't use the brand lavender as a background fill for sections. The {colors.primary} (#b39aff) reads correctly as a text accent and link color on dark; as a section fill it turns into a lavender gradient that reads as decorative rather than functional.

Don't introduce a warm-toned accent alongside the lavender. The entire palette is cool-purple-shifted — the canvas, the hairlines, the brand. Introducing amber, orange, or green would break the single-temperature identity and make the page look like a generic multi-color SaaS.

Don't use Inter for headings. APK Protocol is the display voice; Inter is the reading voice. Swapping them — even temporarily in a prototype — collapses the three-family tension that makes the page feel engineered rather than assembled.

Known Gaps

• Brand CTA button: the extracted primary button is the nav search control, not the hero "Get Started" CTA; the hero button tokens are inferred from CSS variables rather than a direct measurement.
• Hero gradient: the #370a7f accent strip backgrounds in feature panels suggest gradient values, but exact direction and stop positions are not captured.
• Logo glow effect: the Vite 3D logo above the fold appears to have a faint lavender glow/bloom; the glow radius, opacity, and animation timing are not in the extracted tokens.
• Light mode: Vite docs ship a light mode (white canvas, dark ink, lavender accent), but the marketing homepage is dark-only and that is what this file captures.
• Scroll animation: feature cards appear to animate in on scroll; timing and easing curves are not captured.
• Sponsor logos: the sponsor strip renders logos in white monochrome at varying sizes; the exact opacity and sizing rules are not extracted.
• Plugin ecosystem pages: the plugins directory at vitejs.dev/plugins uses a slightly distinct layout system not covered here.