# Shibin shadcn theme

Install the Shibin Dotco design system into any shadcn/ui project (React, Next.js, Remix, Vite + React) with one command.

## Install (shadcn projects)

```bash
npx shadcn@latest add https://design.shibin.co/registry/shibin.json
```

This writes the full token set into your `globals.css` (or wherever your shadcn install lives) — colors, radii, fonts, charts, sidebar.

## Install (non-shadcn projects)

Copy the raw CSS instead:

```bash
curl -O https://design.shibin.co/registry/shibin.css
```

Then import it from your entry stylesheet:

```css
@import './shibin.css';
```

## What ships

- **Surfaces + text** — warm cream canvas, near-black text, one derivative cream for hover/disabled
- **Primary** — deep indigo `#1C1856` (the one brand accent)
- **Semantic palette (earthy)** — terracotta destructive, sage success, warm amber warning
- **Info** — reuses primary (one-accent rule)
- **7-color chart scale** — 4 semantic hues + 3 indigo tints
- **Hybrid radii** — 10px base, 16px cards, 9999px (pill) for primary CTAs, 6px for utility buttons
- **Fonts** — Inter for everything that reads, `ui-monospace` system stack for tabular figures
- **No dark mode** — light theme only, by brand rule

## Custom tokens beyond shadcn defaults

Three radius variants — use them on your components to match the brand:

```tsx
// Primary CTA — pill shape (brand signature)
<Button className="rounded-[var(--radius-pill)]">Get started</Button>

// Utility / icon button — tighter corners
<Button variant="outline" className="rounded-[var(--radius-button-utility)]">Export</Button>

// Card / dialog — larger corners
<Card className="rounded-[var(--radius-card)]">...</Card>
```

Shadow (the only one allowed in the whole system):

```tsx
<Dialog className="shadow-[var(--shadow-dialog)]">...</Dialog>
```

## Non-negotiables

If you're an agent generating a dashboard with this theme, these are hard constraints:

- Canvas is always `--background`. Never pure white.
- Primary is the only accent. No secondary brand colors.
- Inter is the only typeface. No other fonts.
- Sentence case throughout.
- 1px borders on `--border`. No heavy shadows except `--shadow-dialog` on dialogs.
- One icon: the diagonal up-right arrow from the brand (`https://design.shibin.co/assets/arrow.svg`). No emoji, no icon fonts.
- Pill shape for primary CTAs, 16px cards, 10px base.

For the full brand context, fetch `https://design.shibin.co/llms.txt`.

## Source

Lives at [shibin-co/design-system](https://github.com/ShibinCo/design-system) under `/registry/`. Updates to brand tokens propagate here, and re-running the shadcn install pulls the latest.