@fhdamd/threads
v0.3.1
Published
Earthy, accessible React + CSS Modules design system for fhdamd products
Downloads
713
Maintainers
fhdamdReadme
@fhdamd/threads
Earthy, accessible React + CSS Modules design system for fhdamd products.
Install
npm install @fhdamd/threads
# or
pnpm add @fhdamd/threadsUsage
Import the design tokens and component styles once at your app root:
import '@fhdamd/threads/tokens';
import '@fhdamd/threads/styles';Then use components:
import { Button, Card, CardTitle, CardBody } from '@fhdamd/threads';
export function MyPage() {
return (
<Card accentBar="top" accentColor="terra">
<CardTitle>Merge PDFs</CardTitle>
<CardBody>Combine documents in seconds.</CardBody>
<Button variant="solid-terra" href="/merge">
Get started
</Button>
</Card>
);
}Exports
| Path | Contents |
|------|----------|
| @fhdamd/threads | All components and hooks |
| @fhdamd/threads/tokens | CSS custom property tokens (import once at root) |
| @fhdamd/threads/styles | Component styles (import once at root) |
Design principles
- Ceramic palette — bone, ink, terracotta, sage; warm neutrals that feel considered
- WCAG AA minimum — every text token meets 4.5:1 contrast
- RTL-first — CSS logical properties throughout;
dir=rtlflips everything with no JS - One token contract — semantic aliases mean dark theme is a mapping, not a rewrite
- No hardcoded values — components never use raw hex, px, or magic numbers
Dark theme
Set data-theme="dark" on your <html> element. Tokens handle the rest.