design system

Sematic fluid design

TL;DR Private, Accisible, Sustanable, Secure

Features

  • Sematic HTML
  • classless first
  • Start with as little as 0.5 KB, up to 5 KB
  • Framework agnostic
  • Built to meet WCAG 2.2 AAA, WCAG 3 for colors
  • Right to left support
  • Light and dark mode with all the prefers @media queries
  • Progressive enhancement though lazy loaded customElements

Values

Privacy

- Only collect what you need, when you need it - Encrypt in transit / Encrypt in use / Encrypt at rest - EFF DNT

Accessibility

- WCAG 2.2 AAA / WCAG 3 - rtl lang support (link) - vertical lang support (link) - date formatting

- number formatting

Sustainability

- WSG Draft - Only ship what you need, when you need it

Security

- OSAWP Best practice - ASVS L3 - CSP - TrustedTypes

Gettings started

Install 

  npm i @design-system/style

Import 

  import @design-system/style/all.css

Add into your HTML

CSS rules

  • Use `start` and `end` of `top`, `right`, `bottom`, `left` (https://rtlstyling.com/posts/rtl-styling/#logical-properties-cheat-sheet)
  • don't use `opacity`, will be removed with `prefers-reduced-transparency`
  • don't use `box-shadow` or `text-shadow`, will be removed with `forced-colors` and `inverted-colors`