06 · Library
Patterns
The system, assembled. Not a component inventory, these are complete surfaces you’ll reach for when building dashboards, pages, emails, or posts. Read them as reference, copy them as a starting point.
Dashboard fragment
Three metric tiles, one title bar. Tabular figures, plain-English direction in muted text, no color-coded up/down arrows. Suitable for internal tools and status pages.
This week
Active projects
12
+2 since last week
Newsletter subs
1,248
+24 last 7 days
MRR
$8,400
Flat
Used in: internal tools, project dashboards, status pages.
Landing hero
The canonical shibin.co homepage opening, Caveat greeting, Inter headline with the indigo cursor after “AI”, accent line, two pill CTAs. Caveat is reserved for this single surface.
hey, i’m shibin.
I help Shopify brands
grow with AI
I build AI agents, write a newsletter for Shopify operators, and ship a handful of small internal tools. This site is where all of it lives.
Used in: shibin.co homepage. The only surface where Caveat is allowed.
Project grid
Three project tiles. Each card opens with a 32×3 accent line, a tiny category label, a title, and a two-line description. Hover darkens the border. Ideal for portfolio pages and project indices.
AI · Shopify
Shopify AI Hub
A living index of AI tooling built for Shopify operators. Weekly updates.
Newsletter
Field notes
Short letters to operators on what’s working with AI in commerce. 1,248 readers.
Tools
Internal ops deck
A small set of utilities I use to keep client work moving without context loss.
Used in: homepage featured work, project indices, archive pages.
Outbound comms, newsletter issues, client notes, personal replies. Same typography system, slightly narrower body, no accent line. The subject carries the weight.
Shibin Dotco <hi@shibin.co>
A small note on the one-accent rule
Quick thought this week. A lot of the work I see ships with three or four “accents”, a brand color, a success green, a warning amber, a danger red. Each one demands attention, and none of them are special anymore.
The move that’s worked for me, across every surface I build, is exactly one. One color that signals “this matters.” Everything else, status, state, emphasis, uses type weight, borders, and whitespace instead.
Shibin
Used in: newsletter issues, client updates, transactional emails.
Blog spread
Article opening. Label, h1, date and read time, accent line, body. A drop cap on the first paragraph is the one small editorial flourish, optional, used when the piece warrants it.
Essay · Craft
The one-accent rule
Most design systems I admire in passing, I stop admiring the moment I read them end-to-end. The first page is restrained, a single accent, a careful grid, a paragraph about intention. The fourth page contains a swatch labeled “secondary-accent-2,” and by the eighth you’re looking at thirty tokens dressed up as a system.
The rule I hold to is simple: one accent, one typeface, one icon, one greeting, one canvas. Not because fewer tokens is virtuous on its own, it isn’t, but because the constraint forces every decision to earn its place. You can’t hide a weak surface behind a second color when there isn’t one.
This essay is the version of that rule I hand to agents and collaborators, so nothing I build has to re-learn it.
Used in: long-form posts, essays, case studies.