| name | website-launchpad-design-system |
| description | Website design system and development specification for website-launchpad. Trigger when the user asks to build, add, or modify any page, landing page, component, or section in this project. Also trigger for requests like "create a new page", "build a section", "match the site style", or "stay consistent with the existing design".
|
Website Launchpad Design System
Stack: Next.js 16 · React 18 · Tailwind CSS v3 · pnpm
All styles must use Tailwind utility classes. Inline style is forbidden (except for dynamic values).
Icons: Header dropdown/menu icons use header-icons. All other page/section/content icons use lucide-react.
Links: Within website-launchpad project, internal hrefs use relative paths (e.g. /tidb/). For pages generated outside website-launchpad, all internal hrefs must use full domain https://www.pingcap.com/....
Before writing any code, read the relevant sub-files based on your task.
File Index
| File | Contents | When to Read |
|---|
tokens.md | Color / Typography / Spacing tokens + Tailwind config + globals.css | Required before any dev task |
components.md | Navbar · PrimaryButton · SecondaryButton · FeatureCard · SectionHeader full implementations | When writing or modifying components |
layout.md | Page structure · Hero · Container · Responsive grid · Copy guidelines | When building pages or sections |
rules.md | Quality checklist · Full list of forbidden patterns | Review before outputting code |
Brand Principles
Professional, modern, restrained. Dark Hero alternating with light content sections, generous whitespace, Mono typeface for technical credibility.
Critical Prohibitions (Quick Reference)
❌ Hardcoded color values → Use Token class names (bg-brand-red-primary, etc.)
❌ Gradient on Hero base → bg-bg-primary (pure black only)
✅ Hero default → Image-right layout (left copy+CTA, right heroImage — defaults to Graphic-1-Dk.png)
✅ Hero centered mode → No eyebrow by default
✅ Hero bg image → No overlay layer by default
❌ font-semibold → font-bold (no 600-weight file on CDN)
❌ next/font/google → globals.css @font-face + CDN
❌ PrimaryButton missing relative / overflow-hidden / z-10 layer structure
❌ className concatenation outside cn()
❌ Relative href in non-website-launchpad projects → https://www.pingcap.com/tidb/
✅ Header nav dropdown icons → header-icons
✅ Non-header icons → lucide-react
