[X]
UI Components
[X]
Component Categories
[X]
Colour Scales
[X]
Breakpoints
Design System
[Description of the design tokens and visual patterns that ensure consistency across the platform.]
Brand Colours
Primary
#153141
Teal
#2A5D71
Accent
#F5C518
Background
#F2F4F5
Semantic Colours
Success
#166534
Warning
#92400E
Error
#DC2626
Info
#1E40AF
Typography
Display / Headings
Bricolage Grotesque
600 weight • 1.2 line height
Body / UI
Plus Jakarta Sans
400-600 weight • 1.5 line height
Monospace / Code
SF Mono / Fira Code
400 weight • 1.4 line height
Spacing Scale
4px
8px
16px
24px
32px
48px
Border Radius
4px
8px
12px
16px
Full
Elevation / Shadows
sm
md
lg
xl
Component Library
[Description of the reusable UI components organised by category. Each component includes variants for different states and contexts.]
Core Components ([X])
Primary
Secondary
Buttons
6 variants • 4 sizes
Text Inputs
5 variants • with validation
Complete
Pending
New
Badges
8 variants • 2 sizes
JS
Avatars
3 sizes • image + initials
Layout Components ([X])
Cards
4 variants • with headers
Modals
3 sizes • with overlay
Name
Status
Item 1
Active
Item 2
Pending
Tables
Sortable • filterable
Tab 1
Tab 2
Tab 3
Tabs
Horizontal • vertical
Feedback Components ([X])
Progress Bars
Linear • circular
Success message
Alerts
4 types • dismissible
Toast notification
Toasts
4 types • auto-dismiss
Spinners
3 sizes • inline + overlay
Data Display ([X])
87%
Overall Score
Metric Cards
With trends • sparklines
Charts
Bar • line • radar
7.5
Score Visualisations
Sten • percentile • radar
Completed
In Progress
Not Started
Status Indicators
Dots • badges • icons
[Domain-Specific] Components ([X])
1
2
3
4
Question Navigator
Grid • list views
12:45
Timer
Countdown • warnings
Answer Options
Single • multi • Likert
Proctoring Widget
Camera • status • flags
Responsive Design
[Description of breakpoints and responsive behaviour for consistent experience across devices.]
| Breakpoint | Width | Target Devices | Layout |
|---|---|---|---|
| Mobile | < 640px |
Smartphones | Single column, stacked navigation |
| Tablet | 640px - 1024px |
Tablets, small laptops | Two column, collapsible sidebar |
| Desktop | 1024px - 1280px |
Laptops, desktops | Full layout, persistent sidebar |
| Wide | > 1280px |
Large monitors | Max-width container, centred |
[Special Considerations]
[Add any special responsive design considerations or constraints for your project. Remove this section if not applicable.]