Skip to content

Radii and borders: chips, buttons, modals, inputs #46

@1nonlypiece

Description

@1nonlypiece

Description

Standardize border radius using design-system/tokens/borders.json for pill CTA, cards, fields.

Requirements and context

  • Consistent corner language

  • Alignment with wallet provider widgets if embedded

  • 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/border-radius-consistency
  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

  • Radius ramp spec
  • Screenshot audit

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: border radius and border tokens

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 programdesign-systemTokens, components, DS packageuiUI implementation

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions