Description
Apply design-system/tokens/shadows.json levels to vault cards, modals, and sticky elements.
Requirements and context
-
No shadow stacking bugs on mobile
-
Dark mode shadow tuning
-
Deliverables must be reviewable in Figma (or equivalent) and traceable to Disciplr-Frontend / design-system/
-
Should respect WCAG 2.1 AA targets for default theme unless explicitly scoped otherwise
Suggested execution
- Fork Disciplr-Org/Disciplr-Frontend and branch:
git checkout -b design/shadows-elevation
- Produce frames + specs (spacing, type, color, motion) before deep UI code changes
- Share a short Loom or PR description with before/after for stakeholder review
Design deliverables
- Elevation scale diagram
- Token usage notes
Handoff
- Link Figma file + node IDs in the PR (or attach exports if Figma is not used)
- Note any updates needed in
design-system/tokens/*.json
Test and review
- Run a design critique (internal) with eng + design
- Validate keyboard + screen reader on affected flows (smoke level)
- Capture screenshots for light mode; note dark mode gaps if applicable
Example commit message
design: shadow and elevation scale
Guidelines
| Item |
Target |
| Figma / specs |
Named layers, intent documented |
| Accessibility |
Focus order, contrast, touch targets (min 44×44 px where applicable) |
| Timeframe |
96 hours from assignment |
Description
Apply
design-system/tokens/shadows.jsonlevels to vault cards, modals, and sticky elements.Requirements and context
No shadow stacking bugs on mobile
Dark mode shadow tuning
Deliverables must be reviewable in Figma (or equivalent) and traceable to
Disciplr-Frontend/design-system/Should respect WCAG 2.1 AA targets for default theme unless explicitly scoped otherwise
Suggested execution
git checkout -b design/shadows-elevationDesign deliverables
Handoff
design-system/tokens/*.jsonTest and review
Example commit message
Guidelines