linkr design system

Design tokens and base styles for linkr.js apps, built for Tailwind CSS v4 and its CSS-first @theme API.

Usage

In a Vite app that uses Tailwind v4:

1. Install

   pnpm add linkr-design-system tailwindcss @tailwindcss/vite

2. Vite config — add the Tailwind plugin:

   import tailwindcss from "@tailwindcss/vite";
   export default defineConfig({
     plugins: [react(), tailwindcss()],
   });

3. App CSS (e.g. src/index.css):

   @import "tailwindcss";
   @import "linkr-design-system/theme";
   @import "linkr-design-system/base";

4. Import CSS in your entry (e.g. main.tsx):

   import "./index.css";

Tokens

Defined in @theme (see src/theme.css):

| Category | Tokens | |-----------|--------| | Colors | primary-50…950, neutral-50…950, success-*, warning-*, error-*, info-* | | Typography | font-sans (DM Sans), font-mono (JetBrains Mono) | | Radius | radius-sm, radius-md, radius-lg, radius-xl, radius-2xl, radius-full | | Shadows | shadow-xs … shadow-xl | | Easing | ease-out-expo, ease-in-out-smooth |

Use in HTML with Tailwind utilities, e.g. bg-primary-500, text-neutral-600, rounded-lg, shadow-md, font-sans.

Base layer

linkr-design-system/base adds:

• Body typography and colors
• :focus-visible ring (primary)
• ::selection styling
• Heading scale (h1–h3)
• Link and code defaults

Exports

• linkr-design-system/theme — only @theme { ... } (if you want to compose your own base)
• linkr-design-system/base — base layer only
• linkr-design-system — theme + base (single import)