{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "design-md",
  "title": "DESIGN.md",
  "description": "Cortexcn's design system as a DESIGN.md file for coding agents: the colors, type, square corners, spacing, motion, and component rules, generated from the theme tokens.",
  "files": [
    {
      "path": "src/agents/DESIGN.md",
      "content": "---\nversion: alpha\nname: Cortexcn\ndescription: A square, quiet interface system for React and Tailwind CSS. Neutral surfaces, hairline borders, no rounded corners, and one set of tokens for light and dark mode.\ncolors:\n  background: \"oklch(0.97 0 0)\"\n  background-dark: \"oklch(0.14 0.005 264)\"\n  foreground: \"oklch(0.15 0.004 230)\"\n  foreground-dark: \"oklch(0.987 0.002 197)\"\n  card: \"oklch(1 0 0)\"\n  card-dark: \"oklch(0.17 0.007 271)\"\n  card-foreground: \"oklch(0.15 0.004 230)\"\n  card-foreground-dark: \"oklch(0.987 0.002 197)\"\n  popover: \"oklch(1 0 0)\"\n  popover-dark: \"oklch(0.21 0.006 286)\"\n  popover-foreground: \"oklch(0.15 0.004 230)\"\n  popover-foreground-dark: \"oklch(0.987 0.002 197)\"\n  primary: \"oklch(0.36 0 0)\"\n  primary-dark: \"oklch(0.925 0.005 214)\"\n  primary-foreground: \"oklch(0.94 0 0)\"\n  primary-foreground-dark: \"oklch(0.22 0.008 224)\"\n  secondary: \"oklch(0.98 0.003 286)\"\n  secondary-dark: \"oklch(0.26 0.013 273)\"\n  secondary-foreground: \"oklch(0.21 0.006 286)\"\n  secondary-foreground-dark: \"oklch(0.987 0.002 197)\"\n  muted: \"oklch(0.94 0 0)\"\n  muted-dark: \"oklch(0.3 0.018 276)\"\n  muted-foreground: \"oklch(0.53 0 0)\"\n  muted-foreground-dark: \"oklch(0.62 0.022 270)\"\n  accent: \"oklch(0.94 0 0)\"\n  accent-dark: \"oklch(0.29 0.017 275)\"\n  accent-foreground: \"oklch(0.25 0.04 267)\"\n  accent-foreground-dark: \"oklch(0.987 0.002 197)\"\n  destructive: \"oklch(0.55 0.2 17)\"\n  destructive-dark: \"oklch(0.7 0.19 22)\"\n  border: \"oklch(0.92 0 0)\"\n  border-dark: \"oklch(0.56 0.02 268 / 0.2)\"\n  input: \"oklch(0.96 0 0)\"\n  input-dark: \"oklch(0.47 0.026 266 / 0.2)\"\n  ring: \"oklch(0 0 0)\"\n  ring-dark: \"oklch(0.56 0.021 214)\"\n  chart-1: \"oklch(37.4% 0.01 67.558)\"\n  chart-1-dark: \"oklch(27.4% 0.006 286.033)\"\n  chart-2: \"oklch(55.3% 0.013 58.071)\"\n  chart-2-dark: \"oklch(44.2% 0.017 285.786)\"\n  chart-3: \"oklch(70.9% 0.01 56.259)\"\n  chart-3-dark: \"oklch(55.2% 0.016 285.938)\"\n  chart-4: \"oklch(86.9% 0.005 56.366)\"\n  chart-4-dark: \"oklch(70.5% 0.015 286.067)\"\n  chart-5: \"oklch(97% 0.001 106.424)\"\n  chart-5-dark: \"oklch(87.1% 0.006 286.286)\"\ntypography:\n  display:\n    fontFamily: \"Geist, ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 3rem\n    fontWeight: 600\n    lineHeight: 1.05\n    letterSpacing: -0.025em\n  headline:\n    fontFamily: \"Geist, ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 1.875rem\n    fontWeight: 600\n    lineHeight: 1.2\n    letterSpacing: -0.025em\n  title:\n    fontFamily: \"Geist, ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 1.125rem\n    fontWeight: 600\n    lineHeight: 1.4\n    letterSpacing: -0.01em\n  body-md:\n    fontFamily: \"Geist, ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 1rem\n    fontWeight: 400\n    lineHeight: 1.5\n    letterSpacing: 0em\n  body-sm:\n    fontFamily: \"Geist, ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 0.875rem\n    fontWeight: 400\n    lineHeight: 1.43\n    letterSpacing: 0em\n  label:\n    fontFamily: \"Geist, ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 0.875rem\n    fontWeight: 500\n    lineHeight: 1.43\n    letterSpacing: 0em\n  caption:\n    fontFamily: \"Geist, ui-sans-serif, system-ui, sans-serif\"\n    fontSize: 0.75rem\n    fontWeight: 400\n    lineHeight: 1.33\n    letterSpacing: 0em\n  code:\n    fontFamily: \"Geist Mono, ui-monospace, monospace\"\n    fontSize: 0.8125rem\n    fontWeight: 400\n    lineHeight: 1.6\n    letterSpacing: 0em\nrounded:\n  none: 0px\n  sm: 0px\n  md: 0px\n  lg: 0px\n  xl: 0px\n  full: 9999px\nspacing:\n  xs: 4px\n  sm: 8px\n  md: 12px\n  lg: 16px\n  xl: 24px\n  2xl: 32px\n  3xl: 48px\n  4xl: 64px\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"{colors.primary-foreground}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    height: 36px\n    padding: 10px\n  button-primary-dark:\n    backgroundColor: \"{colors.primary-dark}\"\n    textColor: \"{colors.primary-foreground-dark}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    height: 36px\n    padding: 10px\n  button-secondary:\n    backgroundColor: \"{colors.secondary}\"\n    textColor: \"{colors.secondary-foreground}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    height: 36px\n    padding: 10px\n  button-secondary-dark:\n    backgroundColor: \"{colors.secondary-dark}\"\n    textColor: \"{colors.secondary-foreground-dark}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    height: 36px\n    padding: 10px\n  button-outline:\n    backgroundColor: \"{colors.background}\"\n    textColor: \"{colors.foreground}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    height: 36px\n    padding: 10px\n  button-outline-dark:\n    backgroundColor: \"{colors.background-dark}\"\n    textColor: \"{colors.foreground-dark}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    height: 36px\n    padding: 10px\n  button-ghost:\n    backgroundColor: \"{colors.background}\"\n    textColor: \"{colors.foreground}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    height: 36px\n    padding: 10px\n  button-ghost-dark:\n    backgroundColor: \"{colors.background-dark}\"\n    textColor: \"{colors.foreground-dark}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    height: 36px\n    padding: 10px\n  button-destructive:\n    backgroundColor: \"{colors.background}\"\n    textColor: \"{colors.destructive}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    height: 36px\n    padding: 10px\n  button-destructive-dark:\n    backgroundColor: \"{colors.background-dark}\"\n    textColor: \"{colors.destructive-dark}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    height: 36px\n    padding: 10px\n  input:\n    backgroundColor: \"{colors.background}\"\n    textColor: \"{colors.foreground}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.md}\"\n    height: 36px\n    padding: 10px\n  input-dark:\n    backgroundColor: \"{colors.background-dark}\"\n    textColor: \"{colors.foreground-dark}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.md}\"\n    height: 36px\n    padding: 10px\n  card:\n    backgroundColor: \"{colors.card}\"\n    textColor: \"{colors.card-foreground}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  card-dark:\n    backgroundColor: \"{colors.card-dark}\"\n    textColor: \"{colors.card-foreground-dark}\"\n    rounded: \"{rounded.lg}\"\n    padding: 24px\n  popover:\n    backgroundColor: \"{colors.popover}\"\n    textColor: \"{colors.popover-foreground}\"\n    rounded: \"{rounded.md}\"\n    padding: 4px\n  popover-dark:\n    backgroundColor: \"{colors.popover-dark}\"\n    textColor: \"{colors.popover-foreground-dark}\"\n    rounded: \"{rounded.md}\"\n    padding: 4px\n  menu-item-active:\n    backgroundColor: \"{colors.accent}\"\n    textColor: \"{colors.accent-foreground}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.sm}\"\n    padding: 6px\n  menu-item-active-dark:\n    backgroundColor: \"{colors.accent-dark}\"\n    textColor: \"{colors.accent-foreground-dark}\"\n    typography: \"{typography.body-sm}\"\n    rounded: \"{rounded.sm}\"\n    padding: 6px\n  caption:\n    backgroundColor: \"{colors.background}\"\n    textColor: \"{colors.muted-foreground}\"\n    typography: \"{typography.caption}\"\n  caption-dark:\n    backgroundColor: \"{colors.background-dark}\"\n    textColor: \"{colors.muted-foreground-dark}\"\n    typography: \"{typography.caption}\"\n  skeleton:\n    backgroundColor: \"{colors.muted}\"\n    rounded: \"{rounded.md}\"\n  skeleton-dark:\n    backgroundColor: \"{colors.muted-dark}\"\n    rounded: \"{rounded.md}\"\n  divider:\n    backgroundColor: \"{colors.border}\"\n    height: 1px\n  divider-dark:\n    backgroundColor: \"{colors.border-dark}\"\n    height: 1px\n  switch-track:\n    backgroundColor: \"{colors.input}\"\n    rounded: \"{rounded.full}\"\n    height: 18px\n    width: 32px\n  switch-track-dark:\n    backgroundColor: \"{colors.input-dark}\"\n    rounded: \"{rounded.full}\"\n    height: 18px\n    width: 32px\n  focus-ring:\n    backgroundColor: \"{colors.ring}\"\n    width: 3px\n  focus-ring-dark:\n    backgroundColor: \"{colors.ring-dark}\"\n    width: 3px\n  chart-series-1:\n    backgroundColor: \"{colors.chart-1}\"\n    size: 10px\n  chart-series-1-dark:\n    backgroundColor: \"{colors.chart-1-dark}\"\n    size: 10px\n  chart-series-2:\n    backgroundColor: \"{colors.chart-2}\"\n    size: 10px\n  chart-series-2-dark:\n    backgroundColor: \"{colors.chart-2-dark}\"\n    size: 10px\n  chart-series-3:\n    backgroundColor: \"{colors.chart-3}\"\n    size: 10px\n  chart-series-3-dark:\n    backgroundColor: \"{colors.chart-3-dark}\"\n    size: 10px\n  chart-series-4:\n    backgroundColor: \"{colors.chart-4}\"\n    size: 10px\n  chart-series-4-dark:\n    backgroundColor: \"{colors.chart-4-dark}\"\n    size: 10px\n  chart-series-5:\n    backgroundColor: \"{colors.chart-5}\"\n    size: 10px\n  chart-series-5-dark:\n    backgroundColor: \"{colors.chart-5-dark}\"\n    size: 10px\n---\n\n# Cortexcn\n\n## Overview\n\nCortexcn is a set of React components, page blocks, and charts built with Tailwind CSS and shadcn conventions. The look is square and quiet: neutral surfaces, one-pixel borders, no rounded corners, and color used for meaning rather than decoration. Everything is driven by CSS custom properties, so the same components work in light and dark mode and follow a project's own theme.\n\nThis file is generated from `cortexcn-tokens.css`. The front matter holds the tokens; the sections below explain how to use them. When a request conflicts with these rules, follow the rules and say so.\n\n## Colors\n\nUse colors only through the theme tokens, as Tailwind classes: `bg-background`, `text-foreground`, `bg-card`, `bg-muted`, `text-muted-foreground`, `border-border`, `bg-primary`, `text-primary-foreground`, `bg-destructive`, `ring-ring`, and `fill-chart-1` to `fill-chart-5` for data. Tints are opacity on a token (`bg-primary/10`, `border-border/60`), never a new color.\n\nDark mode is the `.dark` class on an ancestor, usually `<html>`. It swaps every token at once, so components never need their own dark colors. The `-dark` keys in the front matter are the values under `.dark`.\n\n| Token                  | Light                       | Dark                          | Use for                                          |\n| ---------------------- | --------------------------- | ----------------------------- | ------------------------------------------------ |\n| `background`           | `oklch(0.97 0 0)`           | `oklch(0.14 0.005 264)`       | The page.                                        |\n| `foreground`           | `oklch(0.15 0.004 230)`     | `oklch(0.987 0.002 197)`      | Body text and icons on the page.                 |\n| `card`                 | `oklch(1 0 0)`              | `oklch(0.17 0.007 271)`       | Raised surfaces: cards, panels, and code blocks. |\n| `card-foreground`      | `oklch(0.15 0.004 230)`     | `oklch(0.987 0.002 197)`      | Text on cards.                                   |\n| `popover`              | `oklch(1 0 0)`              | `oklch(0.21 0.006 286)`       | Menus, popovers, and tooltips.                   |\n| `popover-foreground`   | `oklch(0.15 0.004 230)`     | `oklch(0.987 0.002 197)`      | Text in menus and popovers.                      |\n| `primary`              | `oklch(0.36 0 0)`           | `oklch(0.925 0.005 214)`      | The main action: primary buttons, active states. |\n| `primary-foreground`   | `oklch(0.94 0 0)`           | `oklch(0.22 0.008 224)`       | Text and icons on primary.                       |\n| `secondary`            | `oklch(0.98 0.003 286)`     | `oklch(0.26 0.013 273)`       | Secondary buttons and quiet fills.               |\n| `secondary-foreground` | `oklch(0.21 0.006 286)`     | `oklch(0.987 0.002 197)`      | Text on secondary.                               |\n| `muted`                | `oklch(0.94 0 0)`           | `oklch(0.3 0.018 276)`        | Subtle fills: hover rows, tracks, skeletons.     |\n| `muted-foreground`     | `oklch(0.53 0 0)`           | `oklch(0.62 0.022 270)`       | Secondary text, captions, placeholders.          |\n| `accent`               | `oklch(0.94 0 0)`           | `oklch(0.29 0.017 275)`       | Hovered and selected items in menus and lists.   |\n| `accent-foreground`    | `oklch(0.25 0.04 267)`      | `oklch(0.987 0.002 197)`      | Text on accent.                                  |\n| `destructive`          | `oklch(0.55 0.2 17)`        | `oklch(0.7 0.19 22)`          | Errors and destructive actions.                  |\n| `border`               | `oklch(0.92 0 0)`           | `oklch(0.56 0.02 268 / 0.2)`  | Hairlines between surfaces, and outlines.        |\n| `input`                | `oklch(0.96 0 0)`           | `oklch(0.47 0.026 266 / 0.2)` | Form control borders and fills.                  |\n| `ring`                 | `oklch(0 0 0)`              | `oklch(0.56 0.021 214)`       | Focus rings.                                     |\n| `chart-1`              | `oklch(37.4% 0.01 67.558)`  | `oklch(27.4% 0.006 286.033)`  | First data series.                               |\n| `chart-2`              | `oklch(55.3% 0.013 58.071)` | `oklch(44.2% 0.017 285.786)`  | Second data series.                              |\n| `chart-3`              | `oklch(70.9% 0.01 56.259)`  | `oklch(55.2% 0.016 285.938)`  | Third data series.                               |\n| `chart-4`              | `oklch(86.9% 0.005 56.366)` | `oklch(70.5% 0.015 286.067)`  | Fourth data series.                              |\n| `chart-5`              | `oklch(97% 0.001 106.424)`  | `oklch(87.1% 0.006 286.286)`  | Fifth data series.                               |\n\nCharts read their own tokens as well (`--chart-grid`, `--chart-crosshair`, `--chart-tooltip-background`, `--legend`, and the `--chart-scale-01` to `--chart-scale-05` sequential scale). They come with the chart registry items and follow the palette above.\n\n## Typography\n\nInterface text uses the project's sans font. Cortexcn's own site sets Geist; any neutral sans works.\n\n- Default control and body size in components is `text-sm` (14px). Long-form text is `text-base` (16px).\n- Labels, buttons, and table headers are `font-medium`. Headings are `font-semibold` with `tracking-tight` and `text-balance`.\n- Secondary text is `text-muted-foreground`, not a lighter weight.\n- Numbers that line up or change, such as stats, prices, and tables, use `tabular-nums`.\n- Code and keyboard keys use the mono font at `text-xs` or `text-sm`.\n\n## Layout\n\nSpacing follows Tailwind's 4px scale. Inside controls the gap is `gap-1.5` (6px); between related items `gap-2` to `gap-4`; between sections `gap-12` to `gap-24`.\n\n- Controls are `h-9` (36px) by default, `h-8` small, `h-10` large, with `px-2.5` padding.\n- Cards and panels use `p-6` (24px), or `p-4` when dense.\n- Page content sits in a centered container with `px-4` on phones and `px-6` or more on wider screens.\n- Lay out with flex and grid gaps, not margins between siblings.\n\n## Elevation & Depth\n\nDepth comes from borders and surface color first. A card is `bg-card` with `border-border` on a `bg-background` page. Shadows are rare and soft (`shadow-xs` on outline buttons, `shadow-sm` on floating elements), and in dark mode the shadow token is transparent, so borders carry the separation.\n\n## Shapes\n\nCorners are square. `--radius` is `0`, and every `rounded-*` utility (`rounded-sm` to `rounded-4xl`) is derived from it, so components written with the radius scale come out square. Use the scale classes, never a hard-coded radius such as `rounded-[12px]`, so a theme can change the radius in one place. `rounded-full` stays round and is for avatars, status dots, and switches.\n\n## Components\n\n- Build from the existing Cortexcn and shadcn components before writing new ones. Keep their `data-slot` attributes; styles and tests rely on them.\n- Compose classes with `cn()` and add variants with `class-variance-authority`, the way `Button` does.\n- Buttons: `default` (primary), `outline`, `secondary`, `ghost`, `destructive` (a tinted fill, not solid red), and `link`. One primary action per view.\n- Inputs: a one-pixel `border-input`, transparent fill, and a visible focus ring.\n- Focus: every interactive element shows `focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50`. Never remove the outline without that replacement.\n- Motion: 100 to 300 ms, easing out, on `transform` and `opacity` where possible. Respect `prefers-reduced-motion` by turning motion off or shortening it.\n- Icons are 16px (`size-4`) in controls and inherit `currentColor`.\n\n## Do's and Don'ts\n\nDo:\n\n- Use the token classes for every color and the radius scale for every corner.\n- Check light and dark mode, keyboard focus, and reduced motion before you finish.\n- Keep one primary action per view and let the rest be `outline` or `ghost`.\n- Separate surfaces with `border-border` and `bg-card` before reaching for a shadow.\n\nDon't:\n\n- Don't write hex, rgb, or oklch values in components, or add per-component dark colors.\n- Don't round corners by hand or mix rounded and square elements.\n- Don't use color alone to carry meaning; pair it with text or an icon.\n- Don't animate layout properties such as width and height when a transform does the job.\n",
      "type": "registry:file",
      "target": "~/DESIGN.md"
    }
  ],
  "categories": ["agents"],
  "type": "registry:item"
}