---
name: Less Generic shadcn
slug: less-generic-shadcn
url: "https://dontmakeitugly.com/packs/less-generic-shadcn"
install: npx dontmakeitugly init less-generic-shadcn
designMd: "https://dontmakeitugly.com/packs/less-generic-shadcn/DESIGN.md"
manifest: "https://dontmakeitugly.com/packs/less-generic-shadcn.json"
audience: builder
stack:
  - react
  - nextjs
  - tailwind
resources:
  - tweakcn
  - radix-colors
  - origin-ui
  - number-flow
  - shadcn-mcp
  - typewolf
  - fontsource
  - uicolors
createdAt: "2026-09-04"
---

# Less Generic shadcn

Keep the components, lose the look. A theme, a typeface and a radius, in that order.

- Audience: For people who ship
- Stack: React, Next.js, Tailwind CSS
- Install: `npx dontmakeitugly init less-generic-shadcn`

## What this pack is

A contract for shadcn/ui projects that keeps the component library and replaces the three things that make it recognisable: the zinc greys become warm stone, the black button becomes amber, the 0.5rem radius becomes 0.25rem, and Inter is swapped for Bricolage Grotesque and Figtree. The token names match shadcn's CSS variables so the whole app changes at once.

## How to use it

Install the pack, paste the colours into globals.css and load the fonts. Then use tweakcn to preview and adjust, Radix Colors for a matching dark mode, and Origin UI for the components shadcn doesn't ship. The check will tell you if Inter or a zinc grey is still leaking through.

## What `init` puts in your repo

- `DESIGN.md`: the visual contract below. Tokens in the front matter, reasoning in the prose.
- `dmiu.config.json`: which routes the design check screenshots and how strict it is.
- `.dmiu/references/README.md`: the reference screens and what to take from each.
- A block in `AGENTS.md` (and `CLAUDE.md` if you have one) telling the agent to read the contract first and run the check before finishing.

## Reference screens

- [tweakcn](https://tweakcn.com): A live shadcn theme editor. See what this pack's tokens do to every component before you commit. Look at: how radius and one accent change the feel of the same components. Preview: https://dontmakeitugly.com/previews/tweakcn.jpg
- [Origin UI](https://originui.com): Hundreds of components on shadcn conventions that don't look like the docs. What the finished app should feel like. Look at: warm neutrals, restrained borders, table and form density. Preview: https://dontmakeitugly.com/previews/origin-ui.jpg
- [Radix Colors](https://www.radix-ui.com/colors): The colour scales behind good light and dark themes. Where the stone and amber steps come from. Look at: step 9 for solid colour, step 11 for text, matching dark scales. Preview: https://dontmakeitugly.com/previews/radix-colors.jpg

## Resources, in order

1. [tweakcn](https://dontmakeitugly.com/resources/tweakcn.md) — A visual theme editor that makes a shadcn/ui app stop looking like every other shadcn/ui app.
   Agent: Good.
2. [Radix Colors](https://dontmakeitugly.com/resources/radix-colors.md) — Colour scales designed for real UI, with light and dark modes that actually match.
   Agent: Excellent. Install: `npm install @radix-ui/colors`
3. [Origin UI](https://dontmakeitugly.com/resources/origin-ui.md) — Hundreds of polished, practical components built on shadcn/ui conventions.
   Agent: Excellent.
4. [NumberFlow](https://dontmakeitugly.com/resources/number-flow.md) — Animated number transitions that make counters, prices and stats feel expensive.
   Agent: Excellent. Install: `npm install @number-flow/react`
5. [shadcn MCP server](https://dontmakeitugly.com/resources/shadcn-mcp.md) — Let your agent browse, search and install components from any shadcn registry.
   Agent: Excellent. Install: `npx shadcn@latest mcp init --client claude`
6. [Typewolf](https://dontmakeitugly.com/resources/typewolf.md) — What's trending in type, with real sites showing each font in use.
   Agent: Limited.
7. [Fontsource](https://dontmakeitugly.com/resources/fontsource.md) — Self-host any open-source font with an npm install.
   Agent: Excellent. Install: `npm install @fontsource-variable/inter`
8. [UI Colors](https://dontmakeitugly.com/resources/uicolors.md) — Turn one brand colour into a full Tailwind-style shade scale.
   Agent: Good.

## Related collections

- [Make your shadcn app look less generic](https://dontmakeitugly.com/collections/less-generic-shadcn.md)

## The contract (DESIGN.md)

```markdown
---
version: alpha
name: Less Generic shadcn
description: A theme that un-defaults shadcn/ui. Warm stone neutrals, an amber accent, two typefaces that are not Inter, and a radius nobody else uses.
colors:
  background: "#faf9f7"
  foreground: "#1c1917"
  card: "#ffffff"
  card-foreground: "#1c1917"
  muted: "#f0eee9"
  muted-foreground: "#6b665e"
  border: "#e4e0d8"
  input: "#d3cec4"
  ring: "#b45309"
  primary: "#b45309"
  primary-foreground: "#fffbeb"
  secondary: "#f0eee9"
  secondary-foreground: "#1c1917"
  accent: "#fdf3e1"
  accent-foreground: "#7c3a06"
  destructive: "#b91c1c"
  destructive-foreground: "#fef2f2"
  chart-1: "#b45309"
  chart-2: "#1c1917"
  chart-3: "#9c958a"
  chart-4: "#d3cec4"
typography:
  display:
    fontFamily: Bricolage Grotesque
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.025em
    fontVariation: "'opsz' 96, 'wdth' 100"
  heading:
    fontFamily: Bricolage Grotesque
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.015em
  body:
    fontFamily: Figtree
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
  small:
    fontFamily: Figtree
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Figtree
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
  mono:
    fontFamily: Geist Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    fontFeature: "tnum"
rounded:
  sm: 2px
  md: 4px
  lg: 6px
  xl: 10px
  full: 9999px
spacing:
  base: 4px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  gutter: 24px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
    height: 36px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
    height: 36px
  button-outline:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
    height: 36px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.xl}"
    padding: "{spacing.xl}"
  input:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
    height: 36px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.small}"
    rounded: "{rounded.sm}"
    padding: "{spacing.xs}"
  tabs-trigger:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  tabs-trigger-active:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
---

# Less Generic shadcn

## Overview

shadcn/ui is a great foundation and a terrible finished look, because every agent-built app ships with the same radius, the same zinc greys and the same Inter. This contract keeps the components and changes everything that makes them recognisable: warm stone neutrals instead of cool zinc, an amber accent instead of black-on-white, a squarer 4px radius, and a display face with some character.

The token names match shadcn's CSS variables on purpose. Paste the colours into `globals.css`, set `--radius: 0.25rem`, load the fonts, and the whole component library changes at once.

## Colors

Warm, not cool. Zinc and slate are the tell of a default install; stone is the fix.

- **Background (#faf9f7) and Card (#ffffff):** the page and the panels on it. Warm off-white and white.
- **Foreground (#1c1917):** text. A warm near-black. Muted foreground (#6b665e) for secondary text and placeholders.
- **Muted (#f0eee9) and Secondary:** the same stone tint, used for secondary buttons, table headers and disabled surfaces.
- **Border (#e4e0d8) and Input (#d3cec4):** hairlines and input edges. Input is a step darker so fields read as fields.
- **Primary (#b45309):** amber. The primary button, the focus ring, active states, the first chart series. It replaces shadcn's black primary; black buttons are the other tell.
- **Accent (#fdf3e1) with accent-foreground:** hover backgrounds and badges. Amber-tinted, not grey.
- **Destructive:** red text on a soft red, never a red-filled button by default.

Dark mode: derive it from Radix Colors' sand scale so the warmth survives. Not part of this contract yet.

## Typography

Two faces that are not Inter, plus a mono for numbers.

- **Bricolage Grotesque** for display and headings. Use the optical size axis: large for page titles, standard for card titles. Weight 600, tight tracking.
- **Figtree** for body, labels, buttons and table text at 15px. It is friendlier than Inter without being cute.
- **Geist Mono** with tabular figures for numbers in tables, IDs, code and keyboard hints.
- Load both text faces with `next/font` or Fontsource and set them on `--font-sans` and `--font-heading`. Then remove Inter from the project.

## Layout

shadcn's spacing conventions on a 4px base: 8 inside controls, 12 and 16 inside cards and forms, 24 between groups, 32 and 48 between sections. Container 1200px with 24px gutters. Sidebars 256px.

Reduce the default card padding from 24px to 16px on dense screens. Prefer dividers to nested cards.

## Elevation & Depth

Flat by default. Cards are card-on-background with a border and no shadow (remove `shadow-sm` from the Card component). Popovers, dropdowns and dialogs keep one soft shadow. No gradients and no glow; the amber accent is the only warmth the page needs.

## Shapes

Squarer than the default. `--radius` is 0.25rem: 2px on badges, 4px on buttons and inputs, 6px on tabs and menus, 10px on cards and dialogs. Fully rounded only for avatars and switches. The default 0.5 to 0.625rem radius is one of the strongest "this is shadcn" signals; changing it is the cheapest win in this file.

## Components

- **Button:** 36px tall. Default variant is amber with cream text. Secondary is stone. Outline is card with a border. Ghost has an accent hover. Never a black button.
- **Card:** white, border, 10px radius, 24px padding (16px when dense), no shadow. Title in heading typography.
- **Input and Select:** 36px, input-coloured border, amber ring on focus with a 2px offset. Labels in label typography above.
- **Badge:** 2px radius, accent background, accent-foreground text, small typography. Outline variant uses border.
- **Tabs:** muted background list, card-coloured active trigger, label typography. No underline tabs unless the page is a document.
- **Table:** muted header row with small uppercase-free labels, 40px body rows, numbers right-aligned in mono, borders only between rows.
- **Dialog and Sheet:** 10px radius, one shadow, 24px padding, title in heading typography.
- **Toast:** card background, border, no colour fill; destructive variant uses destructive text.

## Do's and Don'ts

- Do use only Bricolage Grotesque, Figtree and Geist Mono. If Inter is still loading, the theme is not applied.
- Do keep every colour on the shadcn variable names above so components pick them up automatically.
- Do keep contrast at WCAG AA: amber on cream for buttons passes; amber text on white does not below 18px, so use accent-foreground for small amber text.
- Do respect `prefers-reduced-motion` in every Radix animation; the defaults already do if you keep `tailwindcss-animate` behaviour intact.
- Don't ship the zinc palette, the black primary button or the 0.5rem radius. Those three are the entire "generic" look.
- Don't use gradients, glows or glassmorphism anywhere, including the hero of the marketing page.
- Don't add a second accent. Amber is the only colour that means "interactive".
- Don't restyle components one by one. Change the tokens; if a component still looks default, the token is wrong.
```

## Agent instructions (added to AGENTS.md)

```markdown
<!-- BEGIN:dontmakeitugly -->
## Design contract (Less Generic shadcn)

This project uses a DESIGN.md contract from Don't Make It Ugly. Before writing or changing any UI:

1. Read `DESIGN.md`. Use only its fonts, colours, spacing scale and radii. If something you need isn't there, ask before inventing it.
2. Read `.dmiu/references/README.md` for the reference screens and what to take from each.
3. When you finish a UI change, start the dev server and run `npx dontmakeitugly check`. Read `.dmiu/report.md` and fix every error before you say you're done.
4. Never edit `DESIGN.md` to make a check pass. Change the code.

Curated resources for this pack (each page says how an agent can use it):

- tweakcn: https://dontmakeitugly.com/resources/tweakcn.md
- Radix Colors: https://dontmakeitugly.com/resources/radix-colors.md
- Origin UI: https://dontmakeitugly.com/resources/origin-ui.md
- NumberFlow: https://dontmakeitugly.com/resources/number-flow.md
- shadcn MCP server: https://dontmakeitugly.com/resources/shadcn-mcp.md
- Typewolf: https://dontmakeitugly.com/resources/typewolf.md
- Fontsource: https://dontmakeitugly.com/resources/fontsource.md
- UI Colors: https://dontmakeitugly.com/resources/uicolors.md
<!-- END:dontmakeitugly -->
```

## The check

After building, run `npx dontmakeitugly check` with the dev server running. It screenshots / at desktop and mobile widths and fails on fonts outside the contract, colours off the palette (tolerance 6), WCAG AA contrast failures, purple/blue gradients, animation that ignores reduced motion, and screenshot drift. The report lands in `.dmiu/report.md`.