Design system
A shared inventory of colors, typography, components and responsive rules for a consistent experience.
Color guide
Typography guide
Body: 16–17px / 1.8. Hero: 28–44px. Sections: 24–36px. Articles: 26–36px. Use real 400/700 Chinese weights and 400/600/700 Latin weights.
Shape and surface
Inputs use a 12px radius, cards 24px, bands 32px and buttons a pill shape. Glass panels share translucent gradients, backdrop blur, highlighted borders and soft shadows.
Container and layout
The content container is capped at 1120px. Review at 1440×1000, 834×1180 and 390×844, plus 320px. Phone layouts stack; tablet grids adapt to the content.
Section patterns
Home follows the hero, workspace, process, features, integrations, pricing, cases, reviews, FAQ and contact patterns. Subpages share navigation, headings, containers and footer.
Full width bands
Pricing and contact use local image backgrounds, dark overlays and translucent panels. Keep text readable and stack content with smaller gutters on phones.
Motion
Framer Motion handles reveals, floating panels, chart bars, menus, tabs and FAQs. Reduced-motion preferences disable floating, transforms and repeated animations.
Assets and brand
Reference images are stored locally as WebP with provenance in sources.json. Navigation, footer and market links use Weelume assets. MiSans and Poppins are served locally.
Components and interactions
Reuse buttons, headings, case cards, contact blocks, forms and navigation. Tabs support arrow keys; menus support Escape. Demo forms validate locally and report their status explicitly.
