Design system

New version v0.0.1 🚀

Mishka Chelekom Design System

Welcome to our design system documentation! A design system is a comprehensive collection of reusable components, patterns, and guidelines that ensure consistency and efficiency across your applications. It serves as a single source of truth for developers and designers, providing standardized elements like typography, colors, spacing, and components. Our system emphasizes maintainability, scalability, and a cohesive user experience while reducing development time and technical debt.

Typography of Mishka Chelekom Library

Typography of mishka chelekom library design system offers a comprehensive set of carefully designed text styles, ensuring consistency and readability across your application. From headings to body text, each typography element has been crafted with attention to font size, weight, and spacing. Values are extra_small , small , medium , large , extra_large , double_large , triple_large , and quadruple_large

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Size values of Mishka Chelekom Library

Mishka Chelekom offers predefined size options: extra_small , small , medium , large , extra_large which can be easily applied to components. In some components, we also offer larger sizes, such as double_large , triple_large , and quadruple_large .

These predefined values cover borders, text sizes, border radius, and other properties. For each element, you can refer to the documentation of the desired component to find the correct sizes for each property.

Shadow values of Mishka Chelekom Library

Mishka Chelekom offers predefined size options: extra_small , small , medium , large , extra_large which can be easily applied to components. In some components, we also offer larger sizes, such as double_large , triple_large , and quadruple_large .

Extra small
Small
Medium
Large
Extra large

Font weights of Mishka Chelekom Library

Font weight control in Mishka Chelekom is straightforward - simply add any Tailwind font weight class to your components by using font_weight prop to adjust text thickness. Available classes include font-text-thin, font-light, font-normal, font-medium, font-semibold, font-bold, and font-extrabold.

Thin

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Semibold

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Bold

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

All colors of Mishka Chelekom