{
  "slug": "less-generic-shadcn",
  "name": "Less Generic shadcn",
  "tagline": "Keep the components, lose the look. A theme, a typeface and a radius, in that order.",
  "version": "07e55d2",
  "url": "https://dontmakeitugly.com/packs/less-generic-shadcn",
  "markdownUrl": "https://dontmakeitugly.com/packs/less-generic-shadcn.md",
  "designMdUrl": "https://dontmakeitugly.com/packs/less-generic-shadcn/DESIGN.md",
  "files": [
    {
      "path": "DESIGN.md",
      "content": "---\nversion: alpha\nname: Less Generic shadcn\ndescription: 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.\ncolors:\n  background: \"#faf9f7\"\n  foreground: \"#1c1917\"\n  card: \"#ffffff\"\n  card-foreground: \"#1c1917\"\n  muted: \"#f0eee9\"\n  muted-foreground: \"#6b665e\"\n  border: \"#e4e0d8\"\n  input: \"#d3cec4\"\n  ring: \"#b45309\"\n  primary: \"#b45309\"\n  primary-foreground: \"#fffbeb\"\n  secondary: \"#f0eee9\"\n  secondary-foreground: \"#1c1917\"\n  accent: \"#fdf3e1\"\n  accent-foreground: \"#7c3a06\"\n  destructive: \"#b91c1c\"\n  destructive-foreground: \"#fef2f2\"\n  chart-1: \"#b45309\"\n  chart-2: \"#1c1917\"\n  chart-3: \"#9c958a\"\n  chart-4: \"#d3cec4\"\ntypography:\n  display:\n    fontFamily: Bricolage Grotesque\n    fontSize: 40px\n    fontWeight: 600\n    lineHeight: 1.05\n    letterSpacing: -0.025em\n    fontVariation: \"'opsz' 96, 'wdth' 100\"\n  heading:\n    fontFamily: Bricolage Grotesque\n    fontSize: 22px\n    fontWeight: 600\n    lineHeight: 1.25\n    letterSpacing: -0.015em\n  body:\n    fontFamily: Figtree\n    fontSize: 15px\n    fontWeight: 400\n    lineHeight: 1.55\n  small:\n    fontFamily: Figtree\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.5\n  label:\n    fontFamily: Figtree\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 1.4\n  mono:\n    fontFamily: Geist Mono\n    fontSize: 13px\n    fontWeight: 400\n    lineHeight: 1.5\n    fontFeature: \"tnum\"\nrounded:\n  sm: 2px\n  md: 4px\n  lg: 6px\n  xl: 10px\n  full: 9999px\nspacing:\n  base: 4px\n  xs: 4px\n  sm: 8px\n  md: 12px\n  lg: 16px\n  xl: 24px\n  2xl: 32px\n  3xl: 48px\n  gutter: 24px\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.primary-foreground}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.lg}\"\n    height: 36px\n  button-secondary:\n    backgroundColor: \"{colors.secondary}\"\n    textColor: \"{colors.secondary-foreground}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.lg}\"\n    height: 36px\n  button-outline:\n    backgroundColor: \"{colors.card}\"\n    textColor: \"{colors.foreground}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.lg}\"\n    height: 36px\n  card:\n    backgroundColor: \"{colors.card}\"\n    textColor: \"{colors.card-foreground}\"\n    rounded: \"{rounded.xl}\"\n    padding: \"{spacing.xl}\"\n  input:\n    backgroundColor: \"{colors.card}\"\n    textColor: \"{colors.foreground}\"\n    typography: \"{typography.body}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.md}\"\n    height: 36px\n  badge:\n    backgroundColor: \"{colors.accent}\"\n    textColor: \"{colors.accent-foreground}\"\n    typography: \"{typography.small}\"\n    rounded: \"{rounded.sm}\"\n    padding: \"{spacing.xs}\"\n  tabs-trigger:\n    backgroundColor: \"{colors.muted}\"\n    textColor: \"{colors.muted-foreground}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.md}\"\n  tabs-trigger-active:\n    backgroundColor: \"{colors.card}\"\n    textColor: \"{colors.foreground}\"\n---\n\n# Less Generic shadcn\n\n## Overview\n\nshadcn/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.\n\nThe 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.\n\n## Colors\n\nWarm, not cool. Zinc and slate are the tell of a default install; stone is the fix.\n\n- **Background (#faf9f7) and Card (#ffffff):** the page and the panels on it. Warm off-white and white.\n- **Foreground (#1c1917):** text. A warm near-black. Muted foreground (#6b665e) for secondary text and placeholders.\n- **Muted (#f0eee9) and Secondary:** the same stone tint, used for secondary buttons, table headers and disabled surfaces.\n- **Border (#e4e0d8) and Input (#d3cec4):** hairlines and input edges. Input is a step darker so fields read as fields.\n- **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.\n- **Accent (#fdf3e1) with accent-foreground:** hover backgrounds and badges. Amber-tinted, not grey.\n- **Destructive:** red text on a soft red, never a red-filled button by default.\n\nDark mode: derive it from Radix Colors' sand scale so the warmth survives. Not part of this contract yet.\n\n## Typography\n\nTwo faces that are not Inter, plus a mono for numbers.\n\n- **Bricolage Grotesque** for display and headings. Use the optical size axis: large for page titles, standard for card titles. Weight 600, tight tracking.\n- **Figtree** for body, labels, buttons and table text at 15px. It is friendlier than Inter without being cute.\n- **Geist Mono** with tabular figures for numbers in tables, IDs, code and keyboard hints.\n- Load both text faces with `next/font` or Fontsource and set them on `--font-sans` and `--font-heading`. Then remove Inter from the project.\n\n## Layout\n\nshadcn'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.\n\nReduce the default card padding from 24px to 16px on dense screens. Prefer dividers to nested cards.\n\n## Elevation & Depth\n\nFlat 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.\n\n## Shapes\n\nSquarer 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.\n\n## Components\n\n- **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.\n- **Card:** white, border, 10px radius, 24px padding (16px when dense), no shadow. Title in heading typography.\n- **Input and Select:** 36px, input-coloured border, amber ring on focus with a 2px offset. Labels in label typography above.\n- **Badge:** 2px radius, accent background, accent-foreground text, small typography. Outline variant uses border.\n- **Tabs:** muted background list, card-coloured active trigger, label typography. No underline tabs unless the page is a document.\n- **Table:** muted header row with small uppercase-free labels, 40px body rows, numbers right-aligned in mono, borders only between rows.\n- **Dialog and Sheet:** 10px radius, one shadow, 24px padding, title in heading typography.\n- **Toast:** card background, border, no colour fill; destructive variant uses destructive text.\n\n## Do's and Don'ts\n\n- Do use only Bricolage Grotesque, Figtree and Geist Mono. If Inter is still loading, the theme is not applied.\n- Do keep every colour on the shadcn variable names above so components pick them up automatically.\n- 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.\n- Do respect `prefers-reduced-motion` in every Radix animation; the defaults already do if you keep `tailwindcss-animate` behaviour intact.\n- Don't ship the zinc palette, the black primary button or the 0.5rem radius. Those three are the entire \"generic\" look.\n- Don't use gradients, glows or glassmorphism anywhere, including the hero of the marketing page.\n- Don't add a second accent. Amber is the only colour that means \"interactive\".\n- Don't restyle components one by one. Change the tokens; if a component still looks default, the token is wrong.\n",
      "overwrite": "never"
    },
    {
      "path": "dmiu.config.json",
      "content": "{\n  \"pack\": \"less-generic-shadcn\",\n  \"designMd\": \"DESIGN.md\",\n  \"baseUrl\": \"http://localhost:3000\",\n  \"routes\": [\n    \"/\"\n  ],\n  \"viewports\": [\n    {\n      \"width\": 1280,\n      \"height\": 800\n    },\n    {\n      \"width\": 390,\n      \"height\": 844\n    }\n  ],\n  \"tolerance\": {\n    \"color\": 6,\n    \"spacing\": 1\n  },\n  \"forbidGradients\": true,\n  \"ignore\": [],\n  \"baselines\": {\n    \"dir\": \".dmiu/baselines\",\n    \"threshold\": 0.02\n  }\n}\n",
      "overwrite": "never"
    },
    {
      "path": ".dmiu/references/README.md",
      "content": "# Reference screens for Less Generic shadcn\n\nThese are third-party sites we point at, not assets to copy. Take the principle, not the pixels.\n\n## tweakcn\n\nhttps://tweakcn.com\n\nA live shadcn theme editor. See what this pack's tokens do to every component before you commit.\n\nLook at: how radius and one accent change the feel of the same components\n\nPreview: https://dontmakeitugly.com/previews/tweakcn.jpg\n\n## Origin UI\n\nhttps://originui.com\n\nHundreds of components on shadcn conventions that don't look like the docs. What the finished app should feel like.\n\nLook at: warm neutrals, restrained borders, table and form density\n\nPreview: https://dontmakeitugly.com/previews/origin-ui.jpg\n\n## Radix Colors\n\nhttps://www.radix-ui.com/colors\n\nThe colour scales behind good light and dark themes. Where the stone and amber steps come from.\n\nLook at: step 9 for solid colour, step 11 for text, matching dark scales\n\nPreview: https://dontmakeitugly.com/previews/radix-colors.jpg\n",
      "overwrite": "always"
    }
  ],
  "agentsSnippet": "<!-- BEGIN:dontmakeitugly -->\n## Design contract (Less Generic shadcn)\n\nThis project uses a DESIGN.md contract from Don't Make It Ugly. Before writing or changing any UI:\n\n1. Read `DESIGN.md`. Use only its fonts, colours, spacing scale and radii. If something you need isn't there, ask before inventing it.\n2. Read `.dmiu/references/README.md` for the reference screens and what to take from each.\n3. 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.\n4. Never edit `DESIGN.md` to make a check pass. Change the code.\n\nCurated resources for this pack (each page says how an agent can use it):\n\n- tweakcn: https://dontmakeitugly.com/resources/tweakcn.md\n- Radix Colors: https://dontmakeitugly.com/resources/radix-colors.md\n- Origin UI: https://dontmakeitugly.com/resources/origin-ui.md\n- NumberFlow: https://dontmakeitugly.com/resources/number-flow.md\n- shadcn MCP server: https://dontmakeitugly.com/resources/shadcn-mcp.md\n- Typewolf: https://dontmakeitugly.com/resources/typewolf.md\n- Fontsource: https://dontmakeitugly.com/resources/fontsource.md\n- UI Colors: https://dontmakeitugly.com/resources/uicolors.md\n<!-- END:dontmakeitugly -->",
  "references": [
    {
      "resource": "tweakcn",
      "name": "tweakcn",
      "caption": "A live shadcn theme editor. See what this pack's tokens do to every component before you commit.",
      "focus": "how radius and one accent change the feel of the same components",
      "url": "https://tweakcn.com",
      "image": "https://dontmakeitugly.com/previews/tweakcn.jpg"
    },
    {
      "resource": "origin-ui",
      "name": "Origin UI",
      "caption": "Hundreds of components on shadcn conventions that don't look like the docs. What the finished app should feel like.",
      "focus": "warm neutrals, restrained borders, table and form density",
      "url": "https://originui.com",
      "image": "https://dontmakeitugly.com/previews/origin-ui.jpg"
    },
    {
      "resource": "radix-colors",
      "name": "Radix Colors",
      "caption": "The colour scales behind good light and dark themes. Where the stone and amber steps come from.",
      "focus": "step 9 for solid colour, step 11 for text, matching dark scales",
      "url": "https://www.radix-ui.com/colors",
      "image": "https://dontmakeitugly.com/previews/radix-colors.jpg"
    }
  ],
  "resources": [
    {
      "slug": "tweakcn",
      "name": "tweakcn",
      "tagline": "A visual theme editor that makes a shadcn/ui app stop looking like every other shadcn/ui app.",
      "url": "https://tweakcn.com",
      "markdownUrl": "https://dontmakeitugly.com/resources/tweakcn.md",
      "agentPrompt": "Use tweakcn as a design and implementation reference for this project.\n\nWhat it is: A visual theme editor that makes a shadcn/ui app stop looking like every other shadcn/ui app.\n\nWebsite: https://tweakcn.com\nGitHub: https://github.com/jnsahaj/tweakcn\n\nUse it specifically for:\n- restyling shadcn/ui\n- colour themes\n- making an app feel less generic\n\nHow you can access it: Public website, GitHub, Copy/paste, CLI.\nWorks with: React, Tailwind CSS.\nLicense: Apache-2.0. Respect it.\n\nRead the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource."
    },
    {
      "slug": "radix-colors",
      "name": "Radix Colors",
      "tagline": "Colour scales designed for real UI, with light and dark modes that actually match.",
      "url": "https://www.radix-ui.com/colors",
      "markdownUrl": "https://dontmakeitugly.com/resources/radix-colors.md",
      "installCommand": "npm install @radix-ui/colors",
      "agentPrompt": "Use Radix Colors as a design and implementation reference for this project.\n\nWhat it is: Colour scales designed for real UI, with light and dark modes that actually match.\n\nWebsite: https://www.radix-ui.com/colors\nDocumentation: https://www.radix-ui.com/colors/docs/overview/installation\nGitHub: https://github.com/radix-ui/colors\nnpm: https://www.npmjs.com/package/@radix-ui/colors\nInstall: npm install @radix-ui/colors\n\nUse it specifically for:\n- colour systems\n- dark mode\n- accessible palettes\n- design tokens\n\nHow you can access it: Docs, GitHub, npm.\nWorks with: Framework agnostic, Tailwind CSS.\nLicense: MIT. Respect it.\n\nRead the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource."
    },
    {
      "slug": "origin-ui",
      "name": "Origin UI",
      "tagline": "Hundreds of polished, practical components built on shadcn/ui conventions.",
      "url": "https://originui.com",
      "markdownUrl": "https://dontmakeitugly.com/resources/origin-ui.md",
      "agentPrompt": "Use Origin UI as a design and implementation reference for this project.\n\nWhat it is: Hundreds of polished, practical components built on shadcn/ui conventions.\n\nWebsite: https://originui.com\nGitHub: https://github.com/origin-space/originui\n\nUse it specifically for:\n- app interfaces\n- forms and inputs\n- tables\n- settings pages\n\nHow you can access it: Public website, GitHub, CLI, Copy/paste.\nWorks with: React, Next.js, Tailwind CSS.\nLicense: MIT. Respect it.\n\nRead the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource."
    },
    {
      "slug": "number-flow",
      "name": "NumberFlow",
      "tagline": "Animated number transitions that make counters, prices and stats feel expensive.",
      "url": "https://number-flow.barvian.me",
      "markdownUrl": "https://dontmakeitugly.com/resources/number-flow.md",
      "installCommand": "npm install @number-flow/react",
      "agentPrompt": "Use NumberFlow as a design and implementation reference for this project.\n\nWhat it is: Animated number transitions that make counters, prices and stats feel expensive.\n\nWebsite: https://number-flow.barvian.me\nGitHub: https://github.com/barvian/number-flow\nnpm: https://www.npmjs.com/package/@number-flow/react\nInstall: npm install @number-flow/react\n\nUse it specifically for:\n- pricing toggles\n- stat counters\n- dashboards\n- small delightful details\n\nHow you can access it: Docs, GitHub, npm.\nWorks with: React, Vue, Svelte.\nLicense: MIT. Respect it.\n\nRead the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource."
    },
    {
      "slug": "shadcn-mcp",
      "name": "shadcn MCP server",
      "tagline": "Let your agent browse, search and install components from any shadcn registry.",
      "url": "https://ui.shadcn.com/docs/mcp",
      "markdownUrl": "https://dontmakeitugly.com/resources/shadcn-mcp.md",
      "installCommand": "npx shadcn@latest mcp init --client claude",
      "agentPrompt": "Set up and use shadcn MCP server in this project.\n\nWhat it is: Let your agent browse, search and install components from any shadcn registry.\n\nWebsite: https://ui.shadcn.com/docs/mcp\nGitHub: https://github.com/shadcn-ui/ui\nInstall: npx shadcn@latest mcp init --client claude\n\nUse it specifically for:\n- installing components via agent\n- browsing registries\n- shadcn projects\n\nHow you can access it: MCP, CLI, Docs, GitHub.\nWorks with: React, Next.js, Tailwind CSS.\nLicense: MIT. Respect it.\n\nFollow the official setup instructions above. Once available, use it when it is relevant to the task rather than by default, and tell me what it changed."
    },
    {
      "slug": "typewolf",
      "name": "Typewolf",
      "tagline": "What's trending in type, with real sites showing each font in use.",
      "url": "https://www.typewolf.com",
      "markdownUrl": "https://dontmakeitugly.com/resources/typewolf.md",
      "agentPrompt": "Use Typewolf as a visual and design reference for this project.\n\nWhat it is: What's trending in type, with real sites showing each font in use.\n\nWebsite: https://www.typewolf.com\n\nUse it specifically for:\n- choosing typefaces\n- font pairing\n- typography inspiration\n\nHow you can access it: Public website.\n\nStudy the visual direction: typography, spacing, colour, hierarchy and motion. Describe what makes the references work, then apply those principles to this project's existing visual language. Do not copy layouts or assets directly; build something consistent with our own brand and accessibility requirements."
    },
    {
      "slug": "fontsource",
      "name": "Fontsource",
      "tagline": "Self-host any open-source font with an npm install.",
      "url": "https://fontsource.org",
      "markdownUrl": "https://dontmakeitugly.com/resources/fontsource.md",
      "installCommand": "npm install @fontsource-variable/inter",
      "agentPrompt": "Use Fontsource as a design and implementation reference for this project.\n\nWhat it is: Self-host any open-source font with an npm install.\n\nWebsite: https://fontsource.org\nDocumentation: https://fontsource.org/docs/getting-started/introduction\nGitHub: https://github.com/fontsource/fontsource\nInstall: npm install @fontsource-variable/inter\n\nUse it specifically for:\n- self-hosting fonts\n- Vite and Astro projects\n- privacy-conscious sites\n\nHow you can access it: Docs, GitHub, npm.\nWorks with: Astro, Svelte, Vue, React, Framework agnostic.\nLicense: MIT (tooling); fonts keep their own licences. Respect it.\n\nRead the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource."
    },
    {
      "slug": "uicolors",
      "name": "UI Colors",
      "tagline": "Turn one brand colour into a full Tailwind-style shade scale.",
      "url": "https://uicolors.app",
      "markdownUrl": "https://dontmakeitugly.com/resources/uicolors.md",
      "agentPrompt": "Use UI Colors as a design and implementation reference for this project.\n\nWhat it is: Turn one brand colour into a full Tailwind-style shade scale.\n\nWebsite: https://uicolors.app\n\nUse it specifically for:\n- brand colour scales\n- Tailwind palettes\n- quick colour setup\n\nHow you can access it: Public website, Copy/paste.\nWorks with: Tailwind CSS, Framework agnostic.\n\nStudy the relevant design and implementation patterns, but adapt them to this project's existing architecture, visual language, accessibility requirements and conventions. Do not blindly copy the entire resource."
    }
  ],
  "check": {
    "routes": [
      "/"
    ],
    "colorTolerance": 6,
    "spacingTolerance": 1,
    "forbidGradients": true
  }
}