Purpose
To define typography styles (fonts, sizes, line heights) and layout grids (columns, gutters, containers) that form the foundation of all UI design.
Table 1 – Typography System
| Style | Font Family | Size | Weight | Line Height | Usage Example |
| H1 | Inter / SemiBold | 32px | 600 | 40px | Page headlines, hero sections |
| H2 | Inter / SemiBold | 24px | 600 | 32px | Section headers |
| H3 | Inter / Medium | 20px | 500 | 28px | Sub-headers, card titles |
| Body-Base | Inter / Regular | 16px | 400 | 24px | Standard text paragraphs |
| Body-Small | Inter / Regular | 14px | 400 | 20px | Secondary text, helper copy |
| Caption | Inter / Regular | 12px | 400 | 16px | Labels, annotations |
| Button-Text | Inter / Medium | 16px | 500 | 20px | Primary/secondary buttons |
| Link | Inter / Medium | 16px | 500 | 20px | Inline links, navigation items |
Table 2 – Layout Grid System
| Screen Type | Grid Columns | Gutter Width | Container Width | Notes |
| Desktop (≥1440px) | 12 | 24px | 1140px | Central container with wide margins |
| Laptop (≥1024px) | 12 | 20px | 960px | Flexible layouts for dashboards |
| Tablet (≥768px) | 8 | 20px | 720px | Compact layouts, maintain readability |
| Mobile (≤375px) | 4 | 16px | Fluid (100%) | Stack content vertically |
Table 3 – Alignment & Spacing
| Element | Rule | Example |
| Section Spacing | 64px between sections (desktop), 40px (mobile) | Between hero & features section |
| Component Spacing | 24px between components | Card to card, form fields |
| Inside Blocks | 16px padding | Inside cards, modals |
| Navigation | Always aligned to grid start | Sidebar in dashboards |
| Responsive Breaks | Elements reflow at defined breakpoints | 3 cards → 2 (tablet) → 1 (mobile) |
Usage Notes
- Apply these styles consistently in Figma using text + grid styles.
- Do not create arbitrary sizes; always stick to defined tokens.
- Use rem/em equivalents in dev handoff (for scalability).
- Update this sheet only when system-wide changes are required.