---
version: alpha
name: "Vite"
website: "https://vitejs.dev"
description: >-
  A next-generation build tool whose marketing site runs a dark purple-black canvas with a soft lavender brand voltage and a custom display typeface named APK Protocol for headings, while Inter carries body copy and KH Teka Mono handles code labels. The above-fold hero pairs a 60px APK Protocol headline with a 3D-rendered isometric Vite logo that glows faint purple at its edges. Feature panels mix code block screenshots with purple gradient accent strips. The identity reads as dark, performant, and slightly cosmic — a build tool that treats speed as aesthetic.

seo:
  title: "Vite Design System for React — lavender on near-black, APK Protocol, 14 components"
  metaDescription: "Vite's marketing design system: APK Protocol display type, soft lavender brand voltage on a purple-tinted near-black canvas, KH Teka Mono for code labels, 8px radius. Tokens for React, Next.js, and AI tools."
  highlights:
    - "APK Protocol as proprietary display — a geometric display sans at 60px / -3px tracking for the hero; no other build tool uses a custom display typeface"
    - "Soft lavender brand voltage — the primary brand color (#b39aff) is a desaturated violet-lavender wired to 31 CSS custom properties including --vp-c-brand, --color-brand, --color-vite; unusually muted for a framework with lightning in its logo"
    - "Purple-tinted near-black canvas — #16171d as the page floor, one shade more violet than the blue-black that Vercel and Linear use; the entire system shifts color temperature toward the purple spectrum"
    - "Three-family type stack — APK Protocol (display), Inter (body and UI), KH Teka Mono (code labels and uppercase caps); each scoped to a distinct surface type"
    - "8px dominant radius — a mid-tier rounding at 15 occurrences, with 4px for tight UI; avoids both the large-pill softness and the sharp zero-radius extremes"
  tags:
    - "Developer Tools & IDEs"
    - "Backend, Database & DevOps"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Vite's marketing site announces its personality through a typographic move most build tools skip. The hero headline — "The Build Tool for the Web" — renders in APK Protocol, a custom geometric display sans, at 60px with -3px letter-spacing so tight the letters nearly touch. Behind the type, an isometric 3D render of the Vite logo glows against the purple-tinted near-black canvas. The overall register is: dark, precise, and slightly theatrical — a tool that benchmarks faster than Webpack by orders of magnitude and is not shy about the flex.

    The chromatic story is a lavender-on-dark tension. The brand voltage is `--color-brand` / `--color-vite` — a soft, desaturated violet-lavender — wired into 31 CSS custom properties and appearing as the primary button background, the hero name gradient, inline code link color, and search highlight. At #b39aff it is notably more muted than the electric purples that competing tools might deploy. Against the `--color-slate` (#16171d) canvas — which sits a step warmer and more violet than the blue-black Vercel uses — the lavender reads as a signature: quiet voltage, maximum heat. The feature section panels alternate between pure dark prose sections and purple-tinted wide bands with code screenshots, a cadence that keeps the lavender from feeling monotonous.

    For React teams adopting Vite's aesthetic, the operative tokens are the canvas color and the typeface split. The near-black floor (#16171d) is distinctive — it shifts every surface toward cooler-warmer purple rather than neutral gray. APK Protocol is proprietary; the closest open substitute is Neue Haas Grotesk or Syne at tight negative tracking. KH Teka Mono for uppercase label caps is the system's most specific move — a mono font used not for code content but for section labels, which is unusual and worth preserving. The 8px radius is the correct default; stay away from the large-pill radii that consumer SaaS favors.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://vitejs.dev"
      title: "Vite — official site"
      description: "Vite's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "vite-brand-color"
      title: "What is Vite's primary brand color and why is it muted lavender instead of bright?"
      answer: "Vite's brand voltage is a soft violet-lavender wired into the CSS as --color-brand, --color-vite, --vp-c-brand, --vp-c-brand-1, --vp-c-brand-2, and --vp-c-brand-3. At 6 total measured frequency occurrences, it appears as a border accent and in gradient nodes. The muted choice — a desaturated lavender rather than an electric violet — is deliberate: on a dark near-black canvas (#16171d), a fully saturated purple would read as neon and cheap. The desaturated version glows faintly, reinforcing the tool's reputation for invisible speed. The white canvas color (#ffffff) is the highest-frequency color on the page at 553 occurrences, primarily text and borders in the documentation sections."
    - id: "vite-typeface"
      title: "What typefaces does Vite use and what are the best substitutes?"
      answer: "Vite runs three families: APK Protocol for display headings (60px h1 at -3px tracking, 48px h2 at -1.2px tracking, 40px h3 at -1px tracking), Inter for body copy and UI labels, and KH Teka Mono for code annotations and uppercase section labels. APK Protocol is a proprietary geometric display sans not available publicly. Substitutes: Neue Haas Grotesk Display or Syne (with manual tight tracking set to -0.05em) for APK Protocol; Inter itself is open-source for the body tier; JetBrains Mono or IBM Plex Mono as KH Teka Mono replacements. The unusual move to use a mono font for uppercase section labels rather than code is worth preserving — it gives the page an engineering-grade precision signal."
    - id: "vite-canvas"
      title: "What makes Vite's dark canvas different from Vercel's or Linear's?"
      answer: "Vite's canvas is #16171d (wired as --color-primary and --vp-c-bg), a near-black with a faint violet-purple tint. Vercel's marketing canvas is #000000 (pure black) or #111111 (neutral near-black). Linear's is #0f0f13 (very slightly blue-violet). Vite's #16171d is warmer and more purple than both — the oklch hue sits at approximately 278 degrees, fully in the purple-blue quadrant. This shift gives every surface on the page — cards, code blocks, nav backgrounds — a slight amethyst warmth that distinguishes the brand at a subperceptual level. It also makes the soft lavender brand accent read as more cohesive rather than contrast-heavy."
    - id: "vite-radius"
      title: "What corner-radius scale does Vite use?"
      answer: "Vite's radius scale is modest and practical: 8px is dominant (15 occurrences), used on cards, the search input, and interactive elements. 4px appears on tighter UI elements (10 occurrences) — nav chips, badges, code inline spans. The CSS custom properties declare --radius-xs (.125rem / 2px), --radius-sm (.25rem / 4px), --radius-md (.375rem / 6px), --radius-lg (.5rem / 8px), --radius-xl (.75rem / 12px). In practice only the 4px and 8px tiers appear in the measured UI. There are no pill or 24px+ radii — the scale stays utilitarian, signaling developer tooling rather than consumer product."
    - id: "vite-compared-to-webpack"
      title: "How does Vite's design system positioning compare to Webpack's?"
      answer: "Webpack's documentation site uses a blue accent on white, with a generic sans-serif (Geist or system font) and no custom display typeface — the identity is purely functional. Vite invests in a custom dark canvas, a proprietary display typeface (APK Protocol), a branded lavender voltage, and 3D-rendered logo art in the hero. The contrast is the whole point: Vite is marketing itself as a generational replacement, not a configuration-compatible update. The design system encodes that ambition — the theatrical dark canvas and tight-tracked display type reads as a new era, which is exactly the positioning Evan You wants."

mockups:
  - "marketing-hero"
  - "code-editor-ide"

colors:
  primary: "#b39aff"
  secondary: "#370a7f"
  ink: "#ffffff"
  ink-muted: "#98989f"
  ink-faint: "#867e8e"
  canvas: "#16171d"
  surface-1: "#14121a"
  surface-2: "#3b3440"
  hairline: "#3b3440"
  hairline-inner: "#2e2e32"

typography:
  display-xl:
    fontFamily: "\"APK Protocol\", sans-serif"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 67.2px
    letterSpacing: "-3px"
  display-lg:
    fontFamily: "\"APK Protocol\", sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 48px
    letterSpacing: "-1.2px"
  display-md:
    fontFamily: "\"APK Protocol\", sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 53.3px
    letterSpacing: "-1px"
  heading-lg:
    fontFamily: "\"APK Protocol\", sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 28px
    letterSpacing: 0
  heading-md:
    fontFamily: "\"APK Protocol\", sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 28px
    letterSpacing: 0
  body-lg:
    fontFamily: "Inter, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0
  body-md:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "Inter, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  label-md:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 22.4px
    letterSpacing: 0
  mono-label:
    fontFamily: "\"KH Teka Mono\", monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: "0.3px"
  mono-md:
    fontFamily: "\"KH Teka Mono\", monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "4px"
  md: "8px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "20px"
  xl: "24px"
  2xl: "32px"
  3xl: "40px"
  4xl: "64px"
  5xl: "80px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "38px"
  button-secondary:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "38px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "20px 28px"
    height: "82px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "8px 12px"
    height: "40px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    padding: "0px"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
    padding: "0px"
  card:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "28px 32px"
  text-input:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "8px 12px"
    height: "38px"
  code-block:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-md}"
    rounded: "{rounded.sm}"
    padding: "20px"
  section-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink-faint}"
    typography: "{typography.mono-label}"
    padding: "0px"
  footer:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    padding: "40px 32px"
---

## 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

| Token | Size | Weight | Line Height | Tracking | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 60px | 500 | 67.2px | -3px | Hero h1 |
| `{typography.display-lg}` | 48px | 500 | 48px | -1.2px | Section h2 |
| `{typography.display-md}` | 40px | 500 | 53.3px | -1px | Sub-section h3 |
| `{typography.heading-lg}` | 24px | 500 | 28px | 0 | h5 feature titles |
| `{typography.heading-md}` | 20px | 500 | 28px | 0 | h6 minor titles |
| `{typography.body-lg}` | 18px | 400 | 28px | 0 | Primary prose |
| `{typography.body-md}` | 16px | 400 | 24px | 0 | UI labels, nav |
| `{typography.body-sm}` | 14px | 400 | 20px | 0 | Secondary prose |
| `{typography.label-md}` | 16px | 500 | 22.4px | 0 | Bold nav links |
| `{typography.mono-label}` | 12px | 400 | 16px | 0.3px | Uppercase section labels |
| `{typography.mono-md}` | 14px | 400 | 20px | 0 | Code content |

### 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.