--- version: alpha name: "Vite" description: "Vite's site is the open-source equivalent of a venture-backed dev brand — a near-black `#1b1b1f` canvas, a single electric `#646cff` purple paired with a complementary `#41d1ff` cyan that together form the iconic gradient lightning bolt, **Manrope** for display headlines, **Inter** for body, and a code-sample-heavy layout typical of VitePress documentation themes. The visual register is \"the build tool that designed itself\" — confident, minimal, gradient-forward, and unmistakably Evan You-adjacent (sharing chromatic DNA with Vue and Nuxt). The signature gesture is the purple→cyan lightning-bolt mark — one shape that does the entire identity job, the same way Vercel's V-prism or Linear's tilted L do their brands' work in a single glyph." colors: bg: "#1b1b1f" bg-soft: "#161618" bg-elevated: "#202127" surface: "#252529" surface-hover: "#2c2c33" surface-active: "#32323a" surface-deep: "#101013" text: "#ffffffdd" text-strong: "#ffffff" text-muted: "#ebebf599" text-soft: "#ebebf580" text-faint: "#ebebf538" text-on-brand: "#ffffff" brand: "#646cff" brand-hover: "#535bf2" brand-active: "#4b53e1" brand-light: "#747bff" brand-soft: "#1d1f3a" brand-deep: "#3c44d4" on-brand: "#ffffff" accent-cyan: "#41d1ff" accent-purple-deep: "#bd34fe" link: "#646cff" link-hover: "#747bff" border: "#3c3f44" border-strong: "#5a5d62" border-soft: "#2e2e32" border-brand: "#646cff" shadow-color: "rgba(0, 0, 0, 0.40)" shadow-color-md: "rgba(0, 0, 0, 0.50)" shadow-color-lg: "rgba(0, 0, 0, 0.60)" shadow-glow-purple: "rgba(100, 108, 255, 0.25)" success: "#22c55e" warning: "#f59e0b" danger: "#ef4444" info: "#41d1ff" code-bg: "#161618" code-keyword: "#c792ea" code-string: "#c3e88d" code-comment: "#697098" code-number: "#f78c6c" typography: display: fontFamily: "Manrope" fontSize: "64px" lineHeight: 1.65 letterSpacing: "-0.03em" body: fontFamily: "Inter" fontSize: "16px" lineHeight: 1.65 mono: fontFamily: "Fira Code" rounded: button: "8px" card: "12px" pill: "9999px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "32px" xl: "64px" --- ## Overview ## Overview Vite''s marketing surface reads like the build tool decided to design itself, and got it right on the first commit. The canvas is the VitePress default `#1b1b1f` — a near-black with a faint cool tilt that distinguishes it from the truly neutral blacks of Linear or the warm aubergine of Sentry. Over it, headlines hit 64px in **Manrope** at weight 800 with `-0.03em` tracking, and a single electric purple `#646cff` carries every link, every CTA fill, and every inline highlight. The total chromatic budget is two colors plus grayscale — purple and a complementary cyan `#41d1ff` — and the cyan only shows up inside one specific shape: the lightning bolt. The defining visual artifact is the **gradient lightning bolt**. A `#bd34fe → #41d1ff` purple-to-cyan diagonal gradient, clipped to a sharp lightning glyph. It''s the entire brand identity in one shape, the same way the V-prism is for Vercel. Crucially, the gradient lives only in the bolt — never in CTAs, buttons, cards, or text washes. The bolt earns its visibility by being the only gradient on the page, and that scarcity is the whole point. The second signature element is the **mid-pill 20px button radius**. Where Vercel and Linear sit at 6–8px and Sentry runs full pill, Vite parks at exactly 20px — fully rounded but not infinite — matching the VitePress default and creating an instantly-recognisable Vue/Nuxt/Vite ecosystem signature. Hit any landing page in the Evan You family and the button geometry tells you you''re in the right neighborhood. Type is a two-family system: **Manrope** for display headlines (geometric humanist sans by Mikhail Sharanda, free on Google Fonts) and **Inter** for body. Manrope''s slightly larger optical x-height and rounded geometry give Vite headlines a celebratory tone that pure Inter would not — which is why Inter is restricted to the body where its readability discipline shines. Code samples use **Fira Code** with ligatures enabled, the standard for ligature-aware monospace in dev-tool documentation. The page rhythm is restrained. Hero band → feature triplet → "Why Vite" three-column comparison → ecosystem partners (logos for Vue, Nuxt, Solid, Astro, Sveltekit) → community/sponsors → footer. Each band uses 80px vertical rhythm. There are almost no decorative illustrations — the bolt is the only piece of "art" on the page, and it''s sufficient. **Key Characteristics:** - Near-black `#1b1b1f` canvas with cool-violet tilt — VitePress default-theme dark surface. - Single electric purple `#646cff` for links, CTAs, inline highlights, and focus rings. - Cyan `#41d1ff` only appears inside the lightning-bolt gradient — never solo. - The `#bd34fe → #41d1ff` lightning-bolt is the only gradient on the page. - Manrope at 800 weight with `-0.03em` tracking for celebratory display. - Inter for body at ~87% white via `#ffffffdd`. - Fira Code for code samples with ligatures enabled. - VitePress signature 20px mid-pill button radius. - 1152px max content width — the VitePress default. - Cool-grey hairline `#3c3f44` for every divider — never shadows for depth. - 80px vertical rhythm between sections. - Light-mode swap available via VitePress default theme — same tokens, inverted ground. ## Colors ### Primary - **Bg / Canvas** (`#1b1b1f`): The VitePress default dark surface — runs every marketing page. - **Text** (`#ffffffdd`): ~87% white, the VitePress default opacity tier — softens pure white for long-form reading. - **Brand / Primary CTA** (`#646cff`): The Vite electric purple — every link, CTA, brand-critical accent. ### Brand & Dark - **Brand** (`#646cff`): Single-hue brand axis. Reserved for primary CTAs, links, focus rings, inline highlights. - **Brand Hover** (`#535bf2`): Pressed/hover state — slightly deeper purple. - **Brand Active** (`#4b53e1`): Active/focus state. - **Brand Light** (`#747bff`): Lighter variant used in the inverse light theme. - **Brand Soft** (`#1d1f3a`): Tinted brand surface for badges and callouts. - **Brand Deep** (`#3c44d4`): Darkest purple — used for type on `brand-soft`. - **Bg Soft** (`#161618`): Darker tier — code-block ground, footer, nav strip. - **Surface Deep** (`#101013`): Deepest tier — used under code-block highlights. ### Accent The Vite accent system is tightly constrained — there is exactly one color allowed beyond the purple, and it shows up exclusively inside the lightning-bolt gradient. - **Accent Cyan** (`#41d1ff`): The bolt''s terminal stop — never used as a solo color, never as a CTA, never on text. - **Accent Purple Deep** (`#bd34fe`): The bolt''s origin stop — never used outside the gradient. - **Gradient Bolt** (`linear-gradient(120deg, #bd34fe 30%, #41d1ff)`): The signature mark gradient. Diagonal, clipped to the lightning shape only. ### Interactive - **Link** (`#646cff`): Inline body links match brand. Underlined on hover. - **Link Hover** (`#747bff`): Lighter on hover. - **Selected** (`rgba(100, 108, 255, 0.20)`): Selected text background — purple tint at 20% alpha. - **Disabled** (`#ebebf538`): Disabled labels and tertiary fine-print. ### Neutral Scale - **Text Strong** (`#ffffff`): Headline-grade pure white — only at display sizes. - **Text** (`#ffffffdd`): Primary copy at 87% — VitePress default. - **Text Muted** (`#ebebf599`): Body paragraphs at ~60% white-violet. - **Text Soft** (`#ebebf580`): Captions, metadata. - **Text Faint** (`#ebebf538`): Disabled, tertiary fine-print. ### Surface & Borders - **Bg Soft** (`#161618`): Footer, nav strip, code-block ground. - **Bg Elevated** (`#202127`): Raised card surface. - **Surface** (`#252529`): Secondary panel. - **Surface Hover** (`#2c2c33`): Hover state on cards. - **Surface Active** (`#32323a`): Pressed state. - **Border** (`#3c3f44`): Cool-grey hairline divider — the VitePress default. - **Border Strong** (`#5a5d62`): Stronger divider for hover. - **Border Soft** (`#2e2e32`): Softer divider on dark cards. - **Border Brand** (`#646cff`): Focus border on inputs. ### Shadow Colors Vite is shadow-light. Most depth is built from tonal layering on the four-step ladder (`#161618` → `#1b1b1f` → `#202127` → `#252529`); when shadows do appear, they are pure black at low alpha rather than brand-tinted. - **Shadow Color** (`rgba(0, 0, 0, 0.40)`): Ambient shadow on raised cards. - **Shadow Color Md** (`rgba(0, 0, 0, 0.50)`): Standard hover shadow. - **Shadow Color Lg** (`rgba(0, 0, 0, 0.60)`): Modal entrance. - **Shadow Glow Purple** (`rgba(100, 108, 255, 0.25)`): Rare ambient glow on the bolt mark or hero CTA. ### Semantic - **Success** (`#22c55e`): Confirmation toasts, success badges in product mocks. - **Warning** (`#f59e0b`): Caution states. - **Danger** (`#ef4444`): Destructive actions, error chips. - **Info** (`#41d1ff`): Informational notices — the cyan does dual duty here. ## Typography ### Font Family - **Display**: `Manrope, "Inter Variable", Inter, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif`. Manrope at weights 600/700/800 carries every display headline. - **Body**: `Inter, "Inter Variable", -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif`. Inter handles body text at 400/500/600/700. - **Mono**: `"Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`. Fira Code with ligatures (`'liga', 'calt'`) enabled by default — required for the brand''s arrow ligatures (`=>`, `!==`) in code samples. - **OpenType features**: Manrope display sizes use `'ss01'` (alternate 'a' stylistic set) and `'cv11'` (single-storey g) at 64px+ for a slightly more geometric register. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | display-hero | Manrope | 64 | 800 | 1.05 | -0.03em | ss01 | Homepage h1 ("Next Generation Frontend Tooling") | | display-xl | Manrope | 56 | 800 | 1.08 | -0.025em | ss01 | Major section heads | | display-lg | Manrope | 44 | 700 | 1.10 | -0.02em | — | Sub-section heads | | display-md | Manrope | 36 | 700 | 1.15 | -0.015em | — | Feature-band heads | | display-sm | Manrope | 28 | 600 | 1.25 | -0.01em | — | Card titles | | title-lg | Manrope | 24 | 600 | 1.30 | -0.005em | — | Pricing-tier names, large list items | | title-md | Inter | 20 | 600 | 1.35 | 0 | — | Card titles, navigation drawer | | title-sm | Inter | 16 | 600 | 1.40 | 0 | — | Small card titles, list labels | | body-lg | Inter | 18 | 400 | 1.65 | 0 | — | Hero subhead | | body-md | Inter | 16 | 400 | 1.65 | 0 | — | Default running-text | | body-sm | Inter | 14 | 400 | 1.55 | 0 | — | Footer body, fine-print | | caption | Inter | 13 | 500 | 1.40 | 0 | — | Badge labels, captions | | label-uppercase | Fira Code | 12 | 500 | 1.40 | 0.05em | — | Section eyebrows ("WHY VITE", "FEATURES") | | code-md | Fira Code | 14 | 400 | 1.60 | 0 | liga, calt | Code blocks, CLI snippets | | code-sm | Fira Code | 13 | 400 | 1.55 | 0 | liga, calt | Inline code | | code-micro | Fira Code | 11 | 500 | 1.40 | 0 | — | Micro-labels in syntax-highlighted snippets | | button | Inter | 14 | 600 | 1.0 | 0 | — | Standard button labels | | nav-link | Inter | 14 | 500 | 1.40 | 0 | — | Top-nav menu items | ### Principles - **Manrope at 800 carries display weight.** The 800 cut is celebratory — too heavy for body, just right for hero shouting. - **Inter at 400 carries body.** The body weight stays light because the canvas is dark and ~87% white reads softer than pure white at long line-lengths. - **Negative tracking is mandatory at display sizes.** `-0.03em` at 64px, easing to 0 by 16px. - **Body line-height is generous (1.65).** Documentation-tall — Vite is a docs-heavy site and the rhythm reflects it. - **Mono uses Fira Code with ligatures ON.** The brand''s audience expects `=>` and `!==` to render as glyphs, not character sequences. - **Label-uppercase is mono, not body.** The 12px / 0.05em uppercase eyebrow uses Fira Code for a slightly engineering register — distinguishes Vite from Linear/Vercel which use sans uppercase eyebrows. - **Two-family discipline is intentional.** Manrope''s humanist warmth versus Inter''s neutral systemics — never swap. ## Layout ### Spacing System Base unit **4px**. Tokens: `xxs:4 · xs:8 · sm:12 · md:16 · lg:24 · xl:32 · xxl:48 · section:80`. The 80px section padding is the VitePress default and shows up between every band; 24px is the standard card padding. ### Grid & Container Max content width **1152px** centered (the VitePress default). Editorial body uses a 12-column grid; hero often uses a 7/5 split (hero text left, code-window or bolt illustration right). Feature card grids run 3-up at desktop, 2-up at tablet, 1-up at mobile. ### Whitespace Philosophy Vite uses moderate whitespace — generous enough to feel calm, tight enough to keep the documentation scannable. The site is information-dense by default (because it''s docs-led), and the marketing pages inherit that density rather than fighting it. ### Section Cadence Hero band (with bolt mark) → feature triplet (3 columns) → "Why Vite" comparison (text + code-window) → ecosystem partner logos (Vue, Nuxt, Solid, Astro, Svelte) → community/sponsors strip → footer. Each band runs 80px vertical rhythm. There is no light/dark alternation — the entire page is dark-canvas, by design. ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Hamburger nav; hero h1 64→36px; bolt mark scales to 32px; feature grids 1-up; code-window full-bleed with horizontal scroll | | Tablet | 640–1024px | Top nav tightens; feature cards 2-up; hero h1 52px | | Desktop | 1024–1440px | Full top-nav; 3-up feature cards; hero h1 64px | | Wide | > 1440px | Same as desktop with more breathing room; max content stays at 1152px | ### Touch Targets Primary CTA min 40 × 40px (height already 40, padding `0 20px`). Icon-only nav buttons 36 × 36 with adequate hit area. Input height 36px. ### Collapsing Strategy Top nav collapses to hamburger at < 768px. Hero 7/5 grid collapses to single-column. Code-window stacks below text on mobile. Bolt mark scales proportionally — the SVG retains its aspect ratio at every breakpoint. ### Image Behavior Code blocks stay at fixed `code-md` font-size; horizontal scroll on mobile rather than wrapping. Customer/ecosystem logos retain native widths and align to a 32px row height. ### Container Queries Used inside the `card-feature` shell — when the card is narrower than 320px, the feature icon stacks above the title rather than sitting beside it. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, no border | Body sections, top nav, hero text | | 1 — Soft hairline | 1px `#3c3f44` border | Standard feature cards | | 2 — Tonal lift | One step up the surface ladder (`#202127` over `#1b1b1f`) | Raised card on hero band | | 3 — Soft shadow | 1px border + ambient `rgba(0, 0, 0, 0.40)` shadow | Cards on hover | | 4 — Brand glow | 1px border + `glow-purple` shadow | Hero CTA card or bolt mark (rare) | | 5 — Modal | Standard shadow + backdrop dim 70% | Dialogs, search modal | ### Shadow Philosophy Vite is fundamentally **shadow-light**. The four-step tonal ladder (`#161618` → `#1b1b1f` → `#202127` → `#252529`) does most of the elevation work; shadows appear only on hover or modal entrance, and they are pure black at low alpha rather than brand-tinted. The single brand-glow exception is the rare ambient halo on the bolt mark or a featured CTA — and it shows up at most once per page. ## Shapes | Tier | Token | Value | Use | |---|---|---|---| | Micro | micro | 2px | Reserved for syntax-highlight chips | | XS | xs | 4px | Badge accents | | Standard | sm | 6px | Tight inputs, small inline buttons | | Comfortable | md | 8px | Code blocks, dropdowns | | Large | lg | 12px | Content cards, feature cards | | Featured | xl | 20px | The VitePress signature mid-pill button — fully rounded but not infinite | | Pill | pill | 9999px | Badges, version chips | The 20px button radius is the most distinctive shape decision in the entire system — it sits between Vercel''s 6px sharp rectangles and Sentry''s full pill, claiming a middle ground that the Vue/Nuxt/Vite ecosystem now collectively owns. ## Components ### Buttons (4 variants) **`button-primary`** — The signature purple CTA. Background `#646cff`, text `#ffffff`, Inter 14px / 600, padding `0 20px`, height 40px, radius 20px (mid-pill). Hover: `#535bf2` over 100ms; focus ring 2px `rgba(100, 108, 255, 0.50)` with 2px offset. **`button-brand-soft`** — Tinted brand secondary action. Background `#1d1f3a`, text `#747bff`, same shape and padding. Used for "Why Vite" or "Read the docs" beside primary CTAs. **`button-secondary`** — Bordered secondary on dark canvas. Background `#202127`, text `#ffffffdd`, 1px solid `#3c3f44` border, same shape. **`button-ghost`** — Pure text-link button, transparent background, hover lifts to `#202127`. Used for tertiary actions. ### Cards **`card-feature`** — Standard dark feature card. Background `#202127`, radius 12px, padding 24px, 1px solid `#3c3f44` border. No shadow at rest; subtle ambient on hover. **`card-code-window`** — The Fira Code code block. Background `#161618` (deeper than canvas), radius 8px, padding `16px 20px`, syntax highlighting with `code-keyword: #c792ea` (purple), `code-string: #c3e88d` (green), `code-comment: #697098` (muted), `code-number: #f78c6c` (warm orange). Top-right "vite.config.ts" or "main.ts" tab indicator in `code-micro` typography. ### Badges & Pills **`badge-pill`** — Small pill. Background `#202127`, text `#ebebf599`, caption typography, radius 9999. Used for "Beta" / "v5.0" version chips. **`badge-brand`** — Purple-tinted pill. Background `#1d1f3a`, text `#747bff`, label-uppercase typography, radius 9999. Used for "NEW" callouts. ### Inputs / Forms **`text-input`** — Dark text input. Background `#202127`, text `#ffffffdd`, radius 6px, padding `8px 12px`, height 36px, 1px solid `#3c3f44` border. **`text-input-focused`** — 2px `#646cff` core ring with 2px transparent offset. ### Navigation **`top-nav`** — Pinned to top, 64px tall, background `#1b1b1f` (canvas), 1px `#2e2e32` bottom border. Logo + "Vite" wordmark left (with bolt mark gradient), primary horizontal menu (Guide, Config, Plugins, Resources, Blog) center, right-side: GitHub link + version chip + theme toggle. ### Decorative **`bolt-mark`** — The signature lightning-bolt. Background `linear-gradient(120deg, #bd34fe 30%, #41d1ff)`, clipped to a sharp lightning shape via SVG path. Sole gradient surface — appears only as the brand mark, never as a CTA, button, or text wash. **`feature-icon`** — 32px icon in the `#646cff` brand purple, drawn as 2px stroke linework. Sits at the top of every `card-feature`. **`stat-callout`** — Inline stat numbers ("10x faster", "Native ES modules", "0ms HMR"). Display-md typography (36px / 700) in `#ffffff` or `#646cff` with `label-uppercase` qualifier below. ### Easing Curves - **Standard ease**: `cubic-bezier(0.4, 0, 0.2, 1)` — every default transition. - **Emphasized ease**: `cubic-bezier(0.2, 0, 0, 1)` — CTA hover, modal entrances. - **Bounce ease**: `cubic-bezier(0.34, 1.56, 0.64, 1)` — rare playful overshoot on the bolt mark hover. ### Duration Buckets - **Fast (100ms)**: Color transitions, button hover. - **Standard (200ms)**: Card hover lifts, dropdown opens, focus ring fade-in. - **Slow (320ms)**: Modal entrance, page-section reveals. ### Per-Component Micro-States - **Button hover**: Purple CTAs darken `#646cff → #535bf2` over 100ms; 1px translateY lift. - **Card hover**: TranslateY(-2px) over 200ms; ambient shadow appears. - **Bolt mark hover**: The gradient hue-rotates 8° over 600ms with bounce ease — rare playful gesture, on hero only. - **Code-window hover**: No state change; copy-button reveals on hover via opacity 0 → 1 over 200ms. - **Link hover**: Color brightens `#646cff → #747bff` + underline grows from 0 → 100% over 100ms. - **Input focus**: 2px `#646cff` ring expands over 200ms. ### Page Transitions Standard browser navigation. Section-on-scroll reveals are 320ms fade-in-up with 50ms stagger between sibling cards. ### Reduced Motion Honored — `prefers-reduced-motion: reduce` removes the bolt-mark hue-rotate, all translateY transforms become opacity-only, and section-reveal transitions are skipped entirely (content renders in final position immediately). ### Contrast Pairs - **Text on bg**: `#ffffffdd` on `#1b1b1f` = **14.2** — AAA at body sizes. - **Body on bg**: `#ebebf599` on `#1b1b1f` = **9.1** — AAA. - **Muted on bg**: `#ebebf580` on `#1b1b1f` = **5.4** — AA. - **On-brand on brand**: `#ffffff` on `#646cff` = **4.8** — AA at body sizes (large text AAA). - **Brand on bg**: `#646cff` on `#1b1b1f` = **5.0** — AA. ### Focus Indicators 2px solid `#646cff` ring with 2px transparent offset. Visible on every interactive surface (buttons, links, inputs, nav items). ### ARIA Patterns - **Buttons**: Native `