Skip to content

Elevation and shadows: cards, modals, sticky header #45

@1nonlypiece

Description

@1nonlypiece

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

  1. Fork Disciplr-Org/Disciplr-Frontend and branch: git checkout -b design/shadows-elevation
  2. Produce frames + specs (spacing, type, color, motion) before deep UI code changes
  3. 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

  1. Run a design critique (internal) with eng + design
  2. Validate keyboard + screen reader on affected flows (smoke level)
  3. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Stellar WaveIssues in the Stellar wave programdesignProduct / visual designdesign-systemTokens, components, DS package

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions