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

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 .

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.

All colors of Mishka Chelekom

Headless Components in Mishka Chelekom

Alongside the styled set, Mishka Chelekom ships a full layer of **Phoenix headless components**. Unlike everything else in this design system, a headless component carries no styling of its own - no colors, no spacing, no borders, no opinions. It ships only the semantic markup, complete WAI-ARIA wiring, keyboard and focus behavior, and data-* state. None of the size, color, or variant tokens above apply to it.

Instead, every part of a headless component is exposed through a *_class attribute, so the entire look depends on your own CSS - bring your Tailwind classes, your design tokens, or hand-written styles, and the accessibility and interaction keep working underneath. The behavior is ported from Base UI , and the live example on each headless page is styled with sample classes adapted from Base UI purely for demonstration - you are meant to replace that styling entirely with your own.