Styling Library Interoperability

To consume design system semantic custom properties in client applications, configure the provided Tailwind theme presets. This maps our custom token variables (such as --radius-lg or --bg-canvas) to standard Tailwind utilities:

// tailwind.config.ts
import type { Config } from "tailwindcss";
import shavinPreset from "@shavin/ui/tailwind-preset";

const config: Config = {
  presets: [shavinPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@shavin/ui/**/*.{js,ts,jsx,tsx}"
  ],
};
export default config;

Our typography primitives look up the global font variables --font-display (default display serif) and --font-body (default body sans-serif). Configure these custom font faces in your Next.js application layout:

// app/layout.tsx
import { Inter, Outfit } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-body" });
const outfit = Outfit({ subsets: ["latin"], variable: "--font-display" });

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${outfit.variable}`}>
      <body>{children}</body>
    </html>
  );
}

When styling modular sections (like custom panels or graphics grids), you can reference our semantic CSS variables in CSS Modules:

Shavin supports custom brand color tokens alongside the DS semantic tokens. You enter raw hex values in a pre-injected CSS file (brand-tokens.css), and a build script (npm run brand:gen) auto-computes a full cluster of WCAG-accessible derived tokens and generates a Tailwind preset automatically — you never touch tailwind.config manually for brand colors.

Automatic setup: Running npx @shavin/cli init scaffolds brand-tokens.css, generates brand-preset.mjs, imports it in your global CSS, merges the preset into your Tailwind config, and wires brand:gen,brand:check, predev, and prebuild scripts into package.json — all automatically. The steps below are only needed for manual setup.

Step 1: Add hex values to the INPUT section of brand-tokens.css:

/* brand-tokens.css — INPUT section (user-editable) */
/* ─── INPUT ─── */
--brand-primary: var(--accent);   /* alias to DS accent */
--brand-coral: #FF6B6B;
--brand-teal: #14B8A6;
/* --brand-gold: #F59E0B; */       /* commented = skipped */

Step 2: Run the generator (also fires automatically via predev and prebuild hooks before every npm run dev and npm run build):

npm run brand:gen     # computes derived tokens + generates brand-preset.mjs
npm run brand:check   # CI check — exits 1 if stale

Step 3 (manual setup only): Merge the generated Tailwind preset alongside the DS preset. If you ran npx @shavin/cli init, this is already done for you:

// tailwind.config.ts
import shavinPreset from "@shavin/ui/tailwind-preset";
import brandPreset from "./brand-preset.mjs";

const config: Config = {
  presets: [shavinPreset, brandPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@shavin/ui/**/*.{js,ts,jsx,tsx}"
  ],
};
export default config;

Now Tailwind utilities like bg-brand-coral, text-brand-coral-contrast, bg-brand-coral-subtle, and border-brand-teal are available — each with light and dark mode variants auto-computed using WCAG luminance math.