Design system
The visual system behind Shibin Dotco.
A precise, monochrome reference for the personal site and the work around it. For the short version, start at shibin.co/brand. Use this extended guide for tokens, type, components, patterns, and implementation notes.
02
Drop it into a project
Start with tokens.css. It loads the same variable General Sans face as shibin.co and defines the shared palette and type roles.
Foundations
01 · Foundations
Identity
The story, positioning, voice, and seven principles that anchor everything.
02 · Foundations
Color
Seven neutral tokens: white, graphite, three text steps, and a thin divider.
03 · Foundations
Typography
General Sans for the interface. Manrope only for quiet editorial metadata.
04 · Foundations
Iconography
Restrained Lucide outline icons, with the up-right arrow as the signature gesture.
05 · Foundations
Motion
Short, purposeful transitions with a complete reduced-motion path.
06 · Foundations
HyperFrames
Motion compositions that inherit the same type, spacing, and monochrome palette.
Library
Code
09 · Code
Shadcn theme
A portable shadcn/ui theme mapped to the same neutral tokens and type roles.
10 · Code
Shadcn components
Reference compositions for common interface states, without adding a second visual language.
11 · Code
Build a dashboard
Paste-ready brief for agents. Prompt template, pattern checklist, example prompts.
Resources