I help Shopify brands grow with AI

This is the extended visual reference for everything I build. For the essentials, start at shibin.co/brand. This page is the longer form: tokens, components, and the patterns they assemble into.

Read the system

Start with Identity and move through Foundations. Ten minutes, cover to cover.

Drop it into a project

Copy tokens.css and fonts/. Everything else composes from there.

Hand it to an agent

Share this URL or load the folder as a skill. See For agents.

Foundations

01 · Foundations

Identity

The story, positioning, voice, and six principles that anchor everything.

02 · Foundations

Color

Seven tokens. One accent. No gradients. The palette is warm by design.

03 · Foundations

Typography

Inter everywhere. Caveat for exactly one greeting. Nothing else.

04 · Foundations

Iconography

One icon. One style. A diagonal arrow that nudges on hover.

Library

05 · Library

Components

Pill buttons, cards, section labels, the cursor, the accent line.

06 · Library

Patterns

The system in use. Dashboard, landing hero, card grid, email, blog spread.

Code

07 · Code

Shadcn theme

Installable shadcn/ui theme. One command, full brand on any React project.

Resources

08 · Resources

Downloads

tokens.css, Inter, arrow.svg, wordmark, OG card, favicons, README.

09 · Resources

For agents

How to consume this system in a Claude Code or AI agent session.