https://github.com/khao-ui-tools/khao-malet

A Design System
https://github.com/khao-ui-tools/khao-malet

css design-system

Last synced: about 4 hours ago
JSON representation

A Design System

• Host: GitHub
• URL: https://github.com/khao-ui-tools/khao-malet
• Owner: Khao-UI-Tools
• License: isc
• Created: 2024-08-12T03:43:49.000Z (3 months ago)
• Default Branch: master
• Last Pushed: 2024-10-24T10:05:52.000Z (15 days ago)
• Last Synced: 2024-10-25T15:57:41.274Z (14 days ago)
• Topics: css, design-system
• Language: MDX
• Homepage: https://www.npmjs.com/package/@der-reiskoch/khao-malet
• Size: 319 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Khao Malet Design System

![Khao Malet](https://bilder.koch-reis.de/logo/khao-malet.jpg "Khao Malet")

## About the Name

"Malet Khao" (เมล็ดข้าว) is Thai and means "grain(s) of rice". As this design system is the base of my component library [Khao UI](https://github.com/Der-Reiskoch/khao-ui) i used the thai name in reverse order.

## System

Visually, the Khao Malet system follows the current design of [Der Reiskoch](https://www.der-reiskoch.de/).  

The design system is based on [Material 3](https://m3.material.io/).

### Design tokens

Token naming is based on [Material Web](https://material-web.dev/).

All tokens are prefixed with `--khao-` to prevent naming overlaps with host applications such as the marketing website.

### Types of tokens

- Reference tokens

  - prefixed with `--khao-ref-`

  - only assigned to system tokens, never used in components directly

- System tokens

  - prefixed with `--khao-sys-`

- Component tokens

  - prefixed with `--khao--`, e.g. `--khao-button-`

Read more about [types of tokens](https://m3.material.io/foundations/design-tokens/how-to-read-tokens).