---
name: shibin-dotco-design
description: Use this skill for any Shibin Dotco design work, generating interfaces, mocks, landing pages, or brand assets. Mirrors https://shibin.co/brand as the canonical standard.
user-invocable: true
---

Start by reading `README.md`, the full brand standard, mirrored from https://shibin.co/brand. If you only need a distilled, machine-readable brief, read `llms.txt` instead.

Key files:
- `README.md`, the full prose spec
- `llms.txt`, canonical ~3KB brief for agents (the fastest single-fetch input)
- `tokens.css`, CSS variables; drop into any project to inherit palette, fonts, and the cursor animation
- `chrome.css`, shared layout for the multi-page guidelines site (header, sidebar, footer)
- `index.html`, entry page for the design-system site (deployed at `design.shibin.co`)
- `identity.html`, `color.html`, `typography.html`, `iconography.html`, foundations
- `components.html`, `patterns.html`, library (live specs + applied surfaces)
- `downloads.html`, `for-agents.html`, resources
- `assets/arrow.svg`, the one icon in the brand (diagonal, up-right)
- `assets/`, favicon, headshot-sketch, OG card, wordmark
- `fonts/`, self-hosted Inter variable font
- `extensions/` (if present), anything layered on top of the brand-page core
- `archive/v1/`, previous version, kept for reference

## Non-negotiable (from shibin.co/brand)

- **One canvas:** warm cream `#F8F7F2`. Never pure white.
- **One accent:** deep indigo `#1C1856`. No other accents, ever.
- **One typeface:** Inter everywhere. Caveat reserved exclusively for the homepage greeting `hey, i'm shibin.`
- **Sentence case** throughout.
- **Light theme only.** No dark mode.
- **No gradients, no heavy shadows.** Thin 1px borders, `rounded-2xl` cards, pill buttons with 1.5px borders.
- **One icon:** the diagonal SVG arrow in `assets/arrow.svg`. Never Unicode `→`. No icon font. No emoji.
- **Accent line:** 40 × 3px rounded-full below every page title.
- **Blinking cursor:** 3px wide indigo, step-end timing, after "AI" in the homepage subhead.

## When invoked without specific guidance

Ask what the user wants to build, then produce it as static HTML (for throwaway prototypes / mocks / slides) or production code (for real site work). Always link `tokens.css`, always use the diagonal arrow, always sentence case.

If a request needs something outside the core (e.g. blog prose styles, extra components), check `extensions/` first. If it's not there, flag the missing piece before fabricating one.