Essence over excess.
A lean, accessible, and modern Design System built with Web Components.
Built for the modern web
Every decision serves a purpose. Nothing more, nothing less.
Accessible by Default
WCAG AA compliant. Keyboard navigation, screen reader support, focus management, and reduced motion built into every component.
Framework-Agnostic
Built with Web Components using Lit. Works with React, Vue, Angular, Svelte, or plain HTML. No vendor lock-in.
Light & Dark Themes
Complete dark mode support via CSS Custom Properties. Toggle with a single attribute. Respects system preferences automatically.
TypeScript First
Full TypeScript support with exported types, interfaces, and IntelliSense for every component property and event.
Design Tokens
300+ CSS Custom Properties for colors, spacing, typography, shadows, and more. Figma Tokens Studio integration included.
Lightweight
Only two runtime dependencies: Lit and Lucide icons. No bloated framework overhead. Fast load times, small bundle size.
16 Essential Components
Every component you need. Nothing you don't.
Button
Badge
Avatar
Icon
Input
Select
Checkbox
Radio
Alert
Skeleton
Tooltip
Card
Cards can be elevated, clickable, and customized.
Divider
Modal & Tabs
This is an Atman modal dialog.
Get started in seconds
Install, import, and start building.
npm install atman-ds<script type="module">
import 'atman-ds';
</script>
<atman-button variant="primary">Click me</atman-button>
<atman-input
label="Email"
type="email"
placeholder="you@example.com"
></atman-input>
<atman-card elevated>
<h3 slot="header">Card Title</h3>
<p>Your content here.</p>
</atman-card>