Status: draft

Wikicasa design system

The tokens, guidelines and components every Wikicasa mockup is built from. Reuse first; anything new is a recorded decision.

Known issues: 5 contrast pairs to fix

These color pairs from today's site fail WCAG AA. Fixing them is the design system's first job.

  • w-gray on w-cultured, secondary text on light sections: 4.27:1 (needs 4.5:1)
  • w-primary on w-lavender, snackbar and alert text: 4.44:1 (needs 4.5:1)
  • w-danger on white, form error messages: 3.30:1 (needs 4.5:1)
  • white on w-danger, danger badges and buttons: 3.30:1 (needs 4.5:1)
  • w-lightgray on white, input and checkbox borders: 1.68:1 (needs 3:1)
See all color pairs →

How the system changes

Everything here comes from layers/core/design-system/. A new or changed token or component goes through /ds-add, which records why in DECISIONS.md. A change to @wikicasa-dev/components itself is a proposal (/new-proposal).