@thilina-dev/design-system
v0.2.0
Published
A dark, precise React design system — near-black surfaces, one decisive blue, Switzer for everything functional. Personal brand system of thilina.dev; published for the author's own apps, see LICENSE.md.
Maintainers
edward-hydeReadme
@thilina-dev/design-system
A dark, precise React design system. Near-black surfaces, one decisive blue, Switzer for everything functional, a Libre Baskerville italic for emphasis, and JetBrains Mono for code. Built on shadcn / base-ui.
Install
npm install @thilina-dev/design-systemPeer deps: react and react-dom (v19).
Usage
In a Tailwind v4 app (the portfolio, the blog), import the tokens into your globals.css and let your own Tailwind build generate the utilities:
@import "tailwindcss";
@import "@thilina-dev/design-system/tokens.css";
@source "../../node_modules/@thilina-dev/design-system/dist";
@custom-variant dark (&:is(.dark *));Anywhere else, import the compiled stylesheet instead:
import "@thilina-dev/design-system/styles.css"; (tokens, layers, and the
shipped fonts, no Tailwind build needed).
import { Button, Tag } from "@thilina-dev/design-system";
export function Example() {
return (
<div className="dark bg-background text-foreground">
<Tag accent>Available</Tag>
<Button size="lg">Get in touch</Button>
</div>
);
}The stylesheet ships light and dark palettes: light lives on :root, dark
under the .dark class. Toggle .dark on <html> yourself (next-themes in
the portfolio) or pin it for a dark-only app (the blog).
Develop
npm run build # tsup (esm + d.ts) → dist, tailwind → dist/styles.css, fonts → dist/fonts
npm run dev # tsup watchStructure
src/components/ui— primitives (Button, Badge, Card, Input)src/components/ds— design components (CodeBlock, ProjectCard, Tag, Toc, …)src/components/brand— AnimatedLogo, Signature, WorkMarksrc/tokens.css— the token vocabulary (shipped as-is todist/tokens.cssfor Tailwind v4 consumers)src/styles.css— imports the tokens, adds component layers, keyframes, fonts (compiled todist/styles.css)