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
General Sans · Headings
The quick brown fox
General Sans uses a 560 weight for headings, with tighter tracking at larger sizes. Clear, confident, and still human.
General Sans · Body text
Body text uses General Sans at weights 400 and 500 with relaxed line-height. The secondary gray keeps longer passages softer against the white background.
Manrope · Editorial metadata
Case studies · May 2026 · 2 min read
Manrope is used sparingly for quiet article metadata. General Sans remains the voice everywhere else.
Components
Text links
Primary navigation actions read as quiet text links with a thin underline. Filled controls are reserved for forms where a button needs to look unmistakably actionable.
Cards
Card title
Label
1px border, restrained 8px corners, generous padding.
With accent
A short graphite rule adds emphasis without introducing color.
Section labels
This is a section label
Section labels use small General Sans, medium weight, sentence case, and subtle positive tracking.
Blinking cursor
I help Shopify brands grow with AI
A 3px-wide blinking cursor in graphite follows the “AI” subheading on the homepage. CSS animation, step-end timing, no JavaScript.
Accent line
Graphite #18181B
A short graphite rule can separate a page title from its supporting copy without turning into decoration.
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. A clean white background, charcoal text, and quiet neutral grays keep the site simple and direct.
General Sans first
General Sans is used for headings, body, navigation, labels, and buttons. Manrope is reserved for small editorial metadata such as article dates and breadcrumbs.
Generous whitespace
Sections breathe. Content is capped between 960px and 1040px. Padding is generous. The layout does the talking.
Minimal and warm
No gradients or heavy shadows. Thin gray borders, restrained corners, black-and-white imagery, and real wordmarks keep it personal rather than product-like.
Static export
Built with Next.js 16 and exported as static HTML. Deployed on Cloudflare Pages. Fast everywhere.
Tech Stack