theme

Theme: admin

A token preset for admin panels and SaaS back offices: warm linen canvas, paper cards, an ink primary button, terracotta reserved for brand and focus, and a dense radius. Light and dark.

npx shadcn add @damon/theme-admin

Without the @damon alias: npx shadcn add https://damon-ui.pages.dev/r/theme-admin.json · raw markdown

Preview

background
card
primary
secondary
muted
accent
brand
surface-1
surface-inverse
destructive
success
warning
info

PaidOverduePendingDraft

Ship it once.

text-display scales from 2rem to 3.5rem with the viewport.

Writes CSS variables into your globals.css (:root, .dark and @theme inline), including the sidebar-* set used by shadcn's Sidebar. No component files.

When to use

Internal tools, dashboards, CMS and ops consoles: screens where people scan records and act quickly.
With @damon/data-table, @damon/status-badge, @damon/notice and shadcn's Sidebar. All of them read these tokens.
When you want structure from surfaces and borders rather than colour: canvas, then card, then rule lines, then accent.

When NOT to use

Public marketing pages. Use @damon/theme-marketing.
When the product already has a brand palette for its app UI. Copy just the status tokens instead.

API

Notable values (light / dark):

Token	Light	Dark	Use
`--background`	`#f2f0e9` linen	`#171916`	App canvas
`--card`	`#fffef9` paper	`#1f221e`	Working surfaces, tables, forms
`--primary`	`#262923` ink	`#ecebe4`	Primary button: ink, not colour
`--brand`	`#b6472a` terracotta	`#e0896f`	Selected state, priority markers, `bg-brand` badges
`--ring`	`#9e3d25`	`#e0896f`	Focus ring
`--border` / `--input`	`#d8d5ca` / `#b9b6ab`	`#343832` / `#4a4e46`	Rule lines / control borders
`--success` `--warning` `--info`	`#356646` `#7d5214` `#2f6273`	`#8cc79f` `#e2b866` `#8cc0d0`	Status tones, tuned for the warm canvas
`--sidebar*`	`#e9e7df`	`#1b1d1a`	shadcn Sidebar
`--radius`	`0.5rem`		Dense controls

The preset also defines --surface-1, --surface-2, --surface-inverse and --brand-2, so marketing blocks still render inside the admin.

Minimal example

npx shadcn add @damon/theme-admin

<div className="rounded-lg border bg-card p-4">
  <h2 className="text-sm font-semibold">Orders</h2>
  <p className="text-sm text-muted-foreground">12 waiting for proof approval</p>
</div>

Real example

Admin page: canvas, header, one card per region, status read from tokens.

<main className="mx-auto max-w-6xl space-y-4 p-4">
  <PageHeader title="Orders" description="Production queue" actions={<Button>New order</Button>} />
  <section className="rounded-lg border bg-card">
    <DataTable columns={columns} rows={orders} />
  </section>
  <p className="text-sm">
    <span className="rounded-full bg-success/10 px-2 py-0.5 text-success">Shipped</span>
  </p>
</main>

Use the system font stack the original design used, in app/layout.tsx or globals.css:

@theme inline {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Constraints

Every text pairing passes WCAG AA (4.5:1) in light and dark (tests/lib/tokens.test.ts).
Terracotta is for emphasis only. Don't use it for large fills, and don't use it to make up for weak grouping.
Primary buttons are ink. A coloured primary reads as marketing in an admin.
Fonts and base font size are not part of the preset. The source design used 13px body text and system UI fonts.
Installing a theme overwrites the same variables already in globals.css. Commit before you run it.