Overview
Atman is a production-ready design system built with Web Components (Lit). It works with any framework—React, Vue, Angular, Svelte, or plain HTML—with full TypeScript support, dark mode, and WCAG AA compliance out of the box.
The Challenge
Design systems often lock teams into specific frameworks. When the framework changes, the system breaks. I set out to build a truly portable component library that prioritizes accessibility and developer experience without framework lock-in.
My Role
Design system architecture, component design, TypeScript implementation, Storybook documentation, token system, and project site.
Design Principles
- Essence over excess: Every decision serves a purpose
- Accessible by default: Keyboard navigation, screen readers, focus management, reduced motion
- Light & dark themes: System preference detection + manual toggle
- TypeScript-first: Full IntelliSense for every prop and event
Components Delivered
16 components across four categories:
- Primitives: Button, Badge, Avatar, Icon
- Form Controls: Input, Select, Checkbox, Radio
- Feedback: Alert, Skeleton, Tooltip, Modal
- Layout: Card, Divider, Tabs
Tech Stack
- Lit (Web Components)
- TypeScript
- Storybook 8
- Lucide Icons
- CSS Custom Properties
- Figma Tokens Studio Integration
Results
16
Production-ready Components
300+
Design Tokens
AA
WCAG Compliance
0
Framework Lock-in
Project Gallery
