driket

- Share a whole design system (guidelines, design principles, colors schemes, accesibility compliance, components, etc.) as single source of truth accross same brand apps/websites - Kickstart new projects with ready-to-use branded components, styles,

Usage no npm install needed!

<script type="module">
  import driket from 'https://cdn.skypack.dev/driket';
</script>

README

Mandala Design System

  • Share a whole design system (guidelines, design principles, colors schemes, accesibility compliance, components, etc.) as single source of truth accross same brand apps/websites
  • Kickstart new projects with ready-to-use branded components, styles, guidelines, etc.

Packages

mds-core

Base references for:

  • Color palettes (dark/light reference colors, system colors)
  • Fonts (header fonts, text fonts, brand fonts)

mds-react

Library of React components and design tools

  • Dark/light theming
  • Cross platform (mobile/tablet/web/desktop)
  • Accessibility (reduce animation option, high-contrast mode)
  • Generate sketch files for single source of truth

Tooling:

  • Context (Provider/Consumer) for React components
  • Hooks (accessibility media queries, etc.)

mds-doc

Documentation style guide generator (Gatsby)

  • Components showroom with examples
  • Preview components in dark/light mode
  • UI guidelines and principles

mds-starters

Basic minimal app templates

  • Ready-to-use
  • Cross platform: Mobile, Tablet, Desktop
  • Native/Standalone builder (Electron)
  • Opt-in Typescript, prettier, etc.