Design System
Brand
The visual identity and design guidelines that shape everything on this site. A reference for consistency.
Color Palette
Background
bg-background
Text Primary
text-foreground
Text Secondary
text-text-secondary
Text Muted
text-text-muted
Text Faint
text-text-faint
Accent
text-accent / bg-accent
Divider
border-divider / bg-divider
Typography
Inter · Headings
The quick brown fox
Inter is used for all headings. Weights 500 and 600, with tight tracking for large text. Clean, modern, and highly legible.
Inter · Body text
Body text is also set in Inter at weight 400. It uses relaxed line-height for comfortable reading, with the secondary color (#4A4A4A) for softer contrast against the warm cream background.
Caveat · Handwritten greeting only
hey, i'm shibin.
Caveat adds warmth. Used only for the homepage greeting. Nothing else. Keeps the personality focused and intentional.
Components
Pill buttons
Pill buttons use rounded-full with a 1.5px border. On hover, the button fills with the accent color (#1C1856) and text inverts to the background color. SVG arrows, never Unicode entities.
Cards
Card title
Label
1px border, rounded-2xl corners, generous padding.
With accent
A 3px accent bar in deep indigo adds color without visual weight.
Section labels
This Is A Section Label
Section labels use text-xs, font-medium, uppercase, tracking-wider, and text-text-faint. They introduce every major section on every page.
Blinking cursor
I help Shopify brands grow with AI
A 3px-wide blinking cursor in the accent color (#1C1856) follows the “AI” subheading on the homepage. CSS animation, step-end timing, no JavaScript.
Accent line
Deep indigo #1C1856
A single accent color. 3px height, rounded ends, placed below page titles to add color without weight. One color system, one accent.
Principles
Sentence case
All visible text uses sentence case. Not all-lowercase, not Title Case everywhere. Headings, labels, and buttons follow natural English capitalization.
Light theme only
No dark mode. Warm cream background with near-black text and deep indigo accent. Simple, clean, and intentional.
Inter everywhere
Inter is the only typeface for headings, body, navigation, labels, and buttons. Caveat is reserved exclusively for the homepage greeting.
Generous whitespace
Sections breathe. Content is capped at 960px. Padding is generous. The layout does the talking.
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.
Static export
Built with Next.js 16 and exported as static HTML. Deployed on Cloudflare Pages. Fast everywhere.
Tech Stack