Purpose
To provide a standardized base sheet of tokens, grids, and component references so designers don’t start from scratch when building a new platform UI.
Table – Platform UI Starter Sheet
| Category | Field | Web (Desktop/Laptop) | Mobile App | Dashboard (Web App) |
| Grid System | Columns | 12 | 4 | 12 |
| Gutter | 24px | 16px | 24px | |
| Container Width | 1140px | Fluid (100%) | 1280px (wide) | |
| Typography | Base Font | Inter Regular, 16px | Inter Regular, 16px | Inter Regular, 14px |
| Headings | H1: 32px, H2: 24px | H1: 28px, H2: 20px | H1: 28px, H2: 22px | |
| Body Text | 16px, 24px line height | 16px, 24px line height | 14px, 20px line height | |
| Spacing | Base Unit | 8px grid | 8px grid | 8px grid |
| Section Gap | 64px | 40px | 48px | |
| Navigation | Pattern | Top nav bar + footer | Bottom nav (≤5 items) | Left sidebar + top bar |
| Primary CTA | Style | Filled Button, Color-Primary | Full-width Button | Filled Button, docked in toolbar |
| States | Required | Default, Hover, Active, Disabled, Error, Success | Default, Active, Disabled, Error, Success | Default, Hover, Active, Disabled, Error, Success, Empty |
| Examples to Include | Sample Screens | Landing Page, About Page | Onboarding, Home, Profile | Dashboard Home, Table View, Reports |
Usage Notes
- Keep this sheet in every new project Figma file → acts as a quick reference.
- Update the sheet only when tokens/system rules change (not per project).
- Use this sheet as a kickoff checklist before designing actual UI screens.