darkmatter-design-system
Installation
SKILL.md
Darkmatter Design System
This is darkmatter's design system: a dark-first, terminal/console aesthetic built on Tailwind CSS v4, React 19, and Radix UI. Use it for look, tokens, and component APIs when the app has no other established system. Reusable UI still lives in the repo's own UI package (ADR-0013); do not require @native/ui or any other alias.
Setup — build on the starter
The starter is an example layout, not a required import path.
app/globals.cssimportstailwindcss, then the vendoredtheme.css(which importsnative-tokens.css). This establishes the OKLCH--n-*ramp, the shadcn semantic bridge, and the Tailwind palette overrides. Do not add a second Tailwind theme or re-declare tokens.- Root layout mounts
ThemeProvider(forced dark), loads the fonts (Inter / Space Grotesk / mono numerics), and setsclassName="dark"on<html>. - Import components from this repo's UI package. In the starter that package is vendored as
@native/ui/*; other repos use a different alias. Discover it from workspaces /packages/*/ vendor trees.
To build a screen: add routes/components under the app, import from the UI package, and compose with the system's layout primitives. You do not need to re-create the scaffold, re-wire the provider, or re-import globals.