Section 2
Global Design System
Brand colors, typography, cards, badges, spacing, and motion — the single visual contract used across every module.
- For
- Development
- Product
- Quality Control
Brand colors
Purple (authority), orange (urgency), neutral canvas — the disciplined palette.
Typography system
Font families, type scale, clamp() responsive heads, and Arabic adjustments.
Button system
Primary, outline, ghost, sizes, and disabled states.
Card system
Canonical cards per module — extracted, deduplicated, reusable everywhere.
Badge system
Status badges, featured, sponsored, verified — color and rules.
Section spacing
cal-section rhythm, responsive overrides, mobile-tight policy.
Image ratios
16:9 hero, 4:3 cards, 1:1 portraits — modern aspect-ratio CSS.
Border radius rules
Sharp rounded-md everywhere — no rounded-xl, no rounded-2xl, no rounded-3xl.
Motion rules
Subtle hover transforms, reduced-motion respect, and animation budget.
Responsive rules
Mobile-first defaults, breakpoint policy, and the global CSS guards.
Module identity rules
Each module keeps its own functional identity; Founder Files sets the maturity bar.