# Figma implementation mapping

File: [School System — Reusable UI Kit](https://www.figma.com/design/YrXn1PrgKdd9MgtY1L0R9O).

High-fidelity design context and screenshots were read for Teacher desktop (13:382), Registrar desktop (13:674) and Teacher mobile (13:1990). The native library remains the visual reference; screenshots are not implementation assets.

| Figma component | Application component |
| --- | --- |
| Sidebar 10:2013, Nav Item 10:942, Topbar 10:2732 | components/Shell.tsx |
| Button 5:179, Link 5:643 | Button, ButtonLink and Inertia Link |
| Input / Select / Date Field / Textarea | Field with native labeled controls |
| Card 10:138 | CourseCard |
| Stat Card 10:213 | Stat |
| Data Table 10:610 / Table Row 10:305 | Table, Pagination and Search |
| Alert 11:40, Badge 10:15 | Alert and Badge |
| Dialog 11:235 | Dialog and Confirm with native dialog focus handling |
| Material Card 11:974 | MaterialCard |
| Accordion 10:3046 | Native details/summary with shared accordion styles |
| Spinner / loading states | Button loading state and Inertia navigation status |

The exact Public Sans family is bundled locally from @fontsource/public-sans. resources/css/tokens.css copies the source variable definitions from design/ui-kit/tokens.css. Colors, radii, control dimensions, typography and comfortable spacing follow the kit. Layout uses responsive grids and normal flow in place of fixed absolute coordinates. Counts, labels and subject data come from authorized database records.

Figma-exported SVGs are downloaded into public/icons/figma-*.svg. The UI Icon component maps book, dashboard, clipboard, folder, chart, logout, users, graduation, plus, search, filter, menu, file, warning and ellipsis to these files. Their outline geometry is preserved; CSS masks apply the semantic foreground color at the 24px design slot. Additional controls use exact Lucide sources already saved with the kit and its license. Runtime asset references are local.

Desktop and mobile implementation screenshots are saved alongside this file. The app adds necessary live filters, password management and actual empty states to the reference layouts. Future periods are accessible explicitly; the home view starts with current academic periods.