# Shibin Dotco Design System The brand, visual identity, and design rules for **Shibin Dotco**, a personal site and content hub. The primary brand reference lives at **[shibin.co/brand](https://shibin.co/brand)**. This design system is the **extended** portable form: tokens, assets, applied patterns, and a machine-readable brief that any project, deck, or Claude Code skill can consume. Anything layered *on top* of this standard, extra components, voice rules, extended tokens, blog prose styles, lives in `extensions/` and references the core below. The core stays thin and exact. --- ## Index This repo is the portable, deployable form of the system. It lives as a multi-page static site at `design.shibin.co`, one URL you can hand to a project, a collaborator, or an AI agent. ### Site pages | Path | What's on it | | --- | --- | | `index.html` | Landing, hero, quick-start, card grid linking to each section | | `identity.html` | Brand story, positioning, voice & tone, six principles | | `color.html` | Seven tokens, rationale, usage, do/don't | | `typography.html` | Inter scale, Caveat exception, rules | | `iconography.html` | The diagonal arrow, specs, what to avoid | | `components.html` | Pill buttons, cards, labels, accent line, cursor, live | | `patterns.html` | Applied surfaces: dashboard, hero, card grid, email, blog | | `downloads.html` | tokens.css, fonts, icons, wordmark, OG, favicons, README, llms.txt | | `for-agents.html` | How to consume this in Claude Code / AI sessions | ### Files | File | What's in it | | --- | --- | | `README.md` | This file, prose spec mirroring shibin.co/brand | | `llms.txt` | Canonical distilled brief for AI agents (~3KB Markdown) | | `tokens.css` | CSS custom properties (colors, fonts, cursor animation) | | `chrome.css` | Shared layout for the site (header, sidebar, footer, type) | | `assets/` | Diagonal arrow SVG, favicon, headshot sketch, OG card, wordmark | | `fonts/` | Self-hosted Inter variable font (Caveat loads from Google Fonts) | | `SKILL.md` | Manifest for Claude Code / Agent Skills | | `CONTRIBUTING.md` | Rules for extending without breaking the mirror | | `docs/plans/` | Design docs and planning history | | `archive/v1/` | Previous iteration of the design system, kept for reference | --- ## Brand identity > **hey, i'm shibin.** I help Shopify brands grow with AI. Personal brand, not a SaaS product. One person, one tagline, narrow positioning. Warm, confident, unpretentious. --- ## Color palette Seven tokens. That's the whole palette. | Color | Hex | Token | | --- | --- | --- | | Background | `#F8F7F2` | `bg-background` | | Text Primary | `#1A1A1A` | `text-foreground` | | Text Secondary | `#4A4A4A` | `text-text-secondary` | | Text Muted | `#6B6B6B` | `text-text-muted` | | Text Faint | `#9B9B9B` | `text-text-faint` | | Accent | `#1C1856` | `text-accent` / `bg-accent` | | Divider | `#E0DED8` | `border-divider` / `bg-divider` | Warm cream canvas, never pure white. A single deep-indigo accent. Four warm-grey steps for text. One warm divider tone. --- ## Typography - **Inter**, the only typeface for headings, body, nav, labels, buttons. - Headings use weights 500–600 with tight tracking for large text. - Body uses weight 400 at relaxed line-height, in `text-text-secondary` for softer contrast against the warm cream. - **Caveat** (handwritten), reserved exclusively for the homepage greeting `hey, i'm shibin.` Rendered at `text-3xl md:text-4xl` in `text-text-secondary`. Nothing else. --- ## Components ### Pill buttons Three variants, all `rounded-full` with a 1.5px border: 1. **Default**, `border-foreground/15` (15%-opacity border, very subtle), transparent bg, foreground text. 2. **Prominent**, `border-foreground` (100%), transparent bg, foreground text. 3. **Filled**, `bg-accent`, `text-background`. **Hover (Default + Prominent):** fills with `bg-accent`, border goes `accent`, text inverts to `background`. The arrow nudges `translate-x-0.5 -translate-y-0.5`. On the homepage hero CTA, hover also applies a soft indigo shadow, `hover:shadow-[0_2px_8px_rgba(28,24,86,0.2)]`. ### Cards - 1px border (`border-divider`) - `rounded-2xl` (16px) - Generous padding (`p-6`) - **Hover:** `hover:border-text-faint/50`, the border darkens a touch - Optional variant: a 40 × 3px `bg-accent` line above the title ### Section labels `text-xs font-medium uppercase tracking-wider text-text-faint`. Introduce every major section on every page. Live above the heading, never beside it. ### Blinking cursor - 3px wide, 1.1em tall, in `--accent` - `margin-left: 4px`, `top: 0.22em`, `border-radius: 1px` - `animation: blink 1s step-end infinite` (hard on/off, no fade) - CSS only, no JavaScript ### Accent line `w-10 h-[3px] rounded-full bg-accent` (40 × 3px, rounded ends). Placed below every page title. The single color flourish in the system. --- ## Icons **One icon, one style**, the SVG diagonal "up-right" arrow used on every pill button, link, and "Visit"/"Read" affordance. ```svg ``` On hover: a subtle `translate-x-0.5 -translate-y-0.5` nudge. - Never Unicode arrows (`→`) - No icon font (Lucide, Heroicons, Phosphor, etc.) - No emoji - No decorative bullets or symbol characters Canonical file: `assets/arrow.svg`. --- ## Principles Six, straight from the live page: 1. **Sentence case**, all visible text uses sentence case. Not all-lowercase, not Title Case everywhere. Headings, labels, and buttons follow natural English capitalization. 2. **Light theme only**, no dark mode. Warm cream background with near-black text and deep indigo accent. Simple, clean, and intentional. 3. **Inter everywhere**, Inter is the only typeface for headings, body, navigation, labels, and buttons. Caveat is reserved exclusively for the homepage greeting. 4. **Generous whitespace**, sections breathe. Content is capped at 960px. Padding is generous. The layout does the talking. 5. **Minimal and warm**, no gradients, no heavy shadows. Thin borders, rounded corners, and a warm cream palette. The only visual flourish is the deep indigo accent. 6. **Static export**, built with Next.js 16 and exported as static HTML. Deployed on Cloudflare Pages. Fast everywhere. --- ## Tech stack `Next.js 16` · `TypeScript` · `Tailwind CSS v4` · `Static export` · `Cloudflare Pages` Everything is static HTML. --- ## Using this repo **In a new project:** 1. Copy `tokens.css` (and the `fonts/` folder) into your project. 2. Link `tokens.css` from your stylesheet entry point. 3. Copy `assets/arrow.svg` (and any other needed assets) into your `public/` directory. 4. Build against the colors, typography, and components above. **In a Claude Code session:** Load this folder as a skill, `SKILL.md` is already set up for that. Or paste the repo URL into a new chat and ask the agent to import what you need. **From any AI agent that can fetch URLs:** Point it at `https://design.shibin.co/llms.txt`, the canonical ~3KB machine-readable brief. That's the fastest way to hand the full system to an agent in a single fetch. See `for-agents.html` for the long-form version. --- ## Extending The core stays pinned to shibin.co/brand. If you need something that *isn't* on the brand page, an additional component, extra voice rules, blog prose typography, a UI kit for a specific surface, add it under `extensions/`. See `CONTRIBUTING.md`.