website-launchpad-design-system

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