Layout
Composition principles
Separate official course facts from planning guidance. Keep credits, schedule, prerequisites, and availability close to each course title and expose plan conflicts in context.
Material 3 / Published template
University Course Planning Portal
A student planning portal for comparing courses, reviewing requirements, and assembling a conflict-aware study plan.
Prompt reference v1
Preview
Structure blueprint
Search and filters lead into course results with essential metadata, while a persistent plan panel summarizes selected courses, timing, and unresolved requirements.
Interaction
Behavior and access
Filters are keyboard operable, selected courses remain visible, conflict messages link back to the affected item, and adding a course never implies enrollment.
Implementation
Engineering boundaries
Server services own course availability, prerequisite evaluation, and enrollment state. Use stable course IDs, explicit academic terms, semantic result lists, and responsive navigation patterns.
Design system
Material 3 token ledger
Google's current open design system for adaptive digital products.
Color roles
- model
- role-based color scheme
- requiredRoles
- surface, onSurface, primary, secondary, error
Typography
- approach
- display, headline, title, body, and label roles
- requirements
- responsive hierarchy, legible labels
Spacing
- approach
- adaptive layout rhythm
- baseUnitPx
- 4
Component rules
- touch
- Keep interactive targets large enough for touch input.
- navigation
- Choose navigation patterns according to window size and destination count.
Classification