Basic card
A flexible surface for future product content.
Cards contain presentation only and carry no business logic.
SMART CAMPUS
Smart Campus Management System
Phase 02 · UI Design System
Frontend StatusRunning
Backend StatusChecking...
Colors
Semantic tokens keep product surfaces consistent and ready for future theming.
Primary
--primaryAccent
--accentSuccess
--successWarning
--warningError
--errorInfo
--infoNeutral
--neutralTypography
A practical hierarchy for dense academic and administrative interfaces.
Display
Campus overview
Heading 1
Heading one
Heading 2
Heading two
Heading 3
Heading three
Heading 4
Heading four
Body large
Clear information for every campus role.
Body
English and 日本語 remain easy to read.
Small · Label · Caption
Supporting details and metadata
Buttons
Form controls
Badges
DefaultActivePendingLateSubmitted
Avatars
Cards
Information density
24Sample records
Table
The container scrolls horizontally when content exceeds the viewport.
| Name | Role | Status | Actions |
|---|---|---|---|
Yuki Tanaka | Student | Active | |
Ken Sato | Teacher | Active | |
Aiko Mori | Admin | Pending |
Dialog, dropdown, and toast
Loading, empty, and error states
Loading records...
No items yet
New items will appear here when they are available.
Unable to load data
Check your connection and try again.
Small Medium Large