Introduction
This design system is built to create consistent, scalable UIs for modern web applications. It provides a set of reusable components, guidelines, and tokens to streamline development across platforms.
Getting Started
To use this design system, install the package via npm and import components as needed.
npm install @eliomomiaia/design-system
import Button from '@eliomomiaia/design-system/components/Button'
Components
Button
Primary action elements with different styles for distinct use cases.
Card
Card Title
A simple content container component.
Input Field
Theming
Customize the design system through CSS variables and theming files. Below is an basic structure:
:root {
--color-primary: #6366f1;
--color-secondary: #9333ea;
--border-radius: 0.5rem;
--font-size-base: 16px;
}
Color Palette
Accessibility
The design system follows AA and AAA accessibility standards through semantic HTML, contrast checks, and keyboard navigation support.
Text Contrast
Minimum contrast ratio of 4.5:1 for normal text and 3:1 for UI component text.
Keyboard Navigation
All interactive components are navigable using the Tab key and can be operated via keyboard.
Contributing
We welcome contributions from the community! To start, fork the repository on GitHub and send us a pull request.