# Shibin Dotco Design System

A one-person personal brand and content hub. The primary brand reference lives at https://shibin.co/brand. This file (https://design.shibin.co/llms.txt) is the distilled, machine-readable form of the extended design system. The source repo is https://github.com/ShibinCo/design-system.

This file is the machine-readable distilled spec. If you are an AI agent producing work that carries the Shibin Dotco brand, treat everything below as hard constraints.

## Identity

- Brand: Shibin Dotco (one person; not a SaaS product)
- Canonical greeting (homepage only): "hey, i'm shibin."
- Positioning / tagline: "I help Shopify brands grow with AI."
- Voice: warm, confident, direct, personal, first-person. Short sentences that land.
- Case: sentence case for every heading, label, button, and nav item.

## Non-negotiables

- **One canvas.** Warm cream `#F8F7F2`. Never pure white. Never any other background on a full page.
- **One accent.** Deep indigo `#1C1856`. No secondary accents. No success/warning/danger color encodings.
- **One typeface.** Inter for everything that reads. Caveat appears exclusively for the homepage greeting "hey, i'm shibin." and nowhere else.
- **Sentence case** throughout.
- **Light theme only.** No dark mode.
- **No gradients.** No heavy shadows. Structure comes from thin 1px borders (`#E0DED8`), 16px rounded corners, and whitespace.
- **Icon library: Lucide** (`lucide.dev`, ISC license, ships with shadcn). Every icon comes from Lucide. Stroke weight 1.5. Default color `currentColor` (inherits). Use `--accent` (indigo) for active/emphasized icons only. Never tint icons in `--destructive`, `--success`, or `--warning` as decoration. Never mix icon libraries. No emoji in UI chrome. No Unicode arrows — use Lucide's `arrow-up-right`. No filled variants as default (outline only). The diagonal up-right arrow is the signature gesture on CTAs + external links, rendered via Lucide's `arrow-up-right`.
- **Accent line.** 40 × 3px, rounded-full, in `--accent`. Appears below every page's h1.
- **Blinking cursor.** 3px wide × 1.1em tall, in `--accent`, `animation: blink 1s step-end infinite`. Used after the word "AI" in the hero subhead on shibin.co. Nowhere else.
- **Pill buttons.** `rounded-full` with a 1.5px border. On hover, fills with `--accent` and inverts text to `--background`; arrow nudges `translate(2px, -2px)`.

## Color tokens

All exposed as CSS custom properties in `tokens.css`.

```
--background:     #F8F7F2   /* warm cream: body + all surfaces */
--foreground:     #1A1A1A   /* near-black: headings, primary text */
--accent:         #1C1856   /* deep indigo: accent line, CTA, cursor */
--text-secondary: #4A4A4A   /* body prose */
--text-muted:     #6B6B6B   /* nav, metadata */
--text-faint:     #9B9B9B   /* labels, captions, quiet affordances */
--divider:        #E0DED8   /* borders: always 1px */
```

Usage:
- `--background` on every full surface.
- `--foreground` on headings + primary UI text.
- `--text-secondary` for body prose.
- `--text-muted` for nav and metadata.
- `--text-faint` for labels, timestamps, captions.
- `--accent` only for the accent line, active states, filled CTAs, and the cursor. Never for page backgrounds or body text.
- `--divider` only for 1px borders.

## Typography

Inter variable font, self-hosted. Caveat loaded from Google Fonts.

Scale:
- Display: 52px · weight 600 · letter-spacing -0.025em · line-height 1.05
- H1 (page title): 40–52px · weight 600 · letter-spacing -0.02em · line-height 1.1
- H2 (section): 22–24px · weight 600 · letter-spacing -0.015em · line-height 1.2
- H3 (subhead): 16–17px · weight 600
- Body large: 18px · weight 400 · line-height 1.65 · color `--text-secondary`
- Body: 16px · weight 400 · line-height 1.75 · color `--text-secondary`
- Small: 13.5px · weight 400 · line-height 1.55
- Label: 11–12px · weight 500 · `text-transform: uppercase` · letter-spacing 0.1–0.12em · color `--text-faint`

Rules:
- Tight tracking on large type, default on body.
- Body in `--text-secondary` for softer contrast against the cream.
- No other typefaces. No Helvetica, no Roboto, no system-font-as-a-feature.

## The arrow (the only icon)

Canonical markup:

```
<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
  <path d="M4 12L12 4M12 4H5M12 4V11"
        stroke="currentColor" stroke-width="1.5"
        stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```

- File: `assets/arrow.svg`
- Default size: 14×14 (inline), 12×12 (small)
- Color: `currentColor`
- Hover: `transform: translate(2px, -2px)` with 200ms ease

## Components

### Pill buttons
- Shape: `border-radius: 999px` (`rounded-full`)
- Border: 1.5px solid
- Padding: 9–10px × 18–20px
- Font: 14px · weight 500
- Variants:
  - Default: `border: rgba(26,26,26,0.15)`, transparent bg, foreground text
  - Prominent: `border: --foreground`, transparent bg, foreground text
  - Filled: `bg: --accent`, `border: --accent`, `color: --background`
- Hover (Default + Prominent): fills with `--accent`, text inverts to `--background`, arrow nudges

### Cards
- Border: 1px solid `--divider`
- Radius: 16px (`rounded-2xl`)
- Padding: 24px
- Hover: border darkens to `rgba(155, 155, 155, 0.55)`
- Optional: 40×3 accent line above the card title

### Section labels
- 11–12px · weight 500 · uppercase · letter-spacing 0.1–0.12em
- Color: `--text-faint`
- Always above the heading, never beside it

### Accent line
- 40 × 3px, `border-radius: 999px`, `background: --accent`
- Sits 24px below the h1 on every page

### Blinking cursor
- `display: inline-block`
- Width 3px · height 1.1em
- `background: --accent`
- `margin-left: 4px` · `top: 0.22em` · `border-radius: 1px`
- `animation: blink 1s step-end infinite`

```
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
```

## Layout

- Content max-width: 720px (default), 960px (wide), 1080px (x-wide for patterns/components)
- Desktop grid: fixed header (64px) + sticky left sidebar (260px) + main
- Generous vertical rhythm: 48–72px between major sections
- Mobile: sidebar collapses to a horizontal band above the content

## Six principles

1. **Sentence case.** Natural English capitalization everywhere.
2. **Light theme only.** Warm cream, near-black, one accent.
3. **Inter everywhere.** Caveat for one greeting.
4. **Generous whitespace.** Content caps at 720–960px; sections breathe.
5. **Minimal and warm.** No gradients, no heavy shadows. Thin borders. The only flourish is `--accent`.
6. **Static export.** Next.js → static HTML → Cloudflare Pages.

## Tech context

- Production site: Next.js 16 + TypeScript + Tailwind CSS v4, static export, deployed on Cloudflare Pages.
- This portable mirror is pure static HTML with a single shared `chrome.css`.
- Drop `tokens.css` + the `fonts/` folder into any project to inherit the system.

## Shadcn theme (for dashboards and React projects)

The full system is packaged as an installable shadcn/ui theme. In any React / Next.js / Remix / Vite + React project with shadcn configured:

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

This writes every brand token, semantic color, chart color, radius variant, and sidebar var into the project's stylesheet. Light theme only; no dark mode. Primary CTAs use the pill radius (`--radius-pill`), cards use `--radius-card` (16px), and utility buttons use `--radius-button-utility` (6px).

Non-shadcn React or vanilla projects can grab `https://design.shibin.co/registry/shibin.css` and `@import` it.

## Resources (URLs are relative to the site root)

- `/`: site index + quick start
- `/identity.html`: brand story, voice, principles
- `/color.html`: the seven tokens with rationale + do/don't
- `/typography.html`: full type scale
- `/iconography.html`: the arrow, rules
- `/components.html`: live component specs
- `/patterns.html`: applied examples (dashboard, hero, grid, email, blog)
- `/shadcn.html`: shadcn theme install + docs
- `/downloads.html`: all assets
- `/for-agents.html`: human-readable version of this file
- `/tokens.css`: CSS variables + fonts + cursor animation
- `/registry/shibin.json`: shadcn registry item
- `/registry/shibin.css`: raw CSS drop-in
- `/registry/README.md`: install guide
- `/README.md`: full prose spec
- `/SKILL.md`: Claude Code skill manifest
- `/assets/arrow.svg`: canonical icon
- `/assets/logo-shibin.svg`: wordmark