Design System shibin.co

01 · Foundations

Identity

Shibin Dotco is a personal brand, one person, one narrow position. This page anchors the rest: who I am, what I say, and how I say it.

Who this is

Shibin Dotco is a personal site and content hub, not a SaaS product. The brand belongs to one person. That constraint does the heavy lifting: the voice stays consistent, the positioning stays narrow, and the visual system stays small.

The positioning is specific on purpose. I help Shopify brands grow with AI. Not “AI consulting,” not “growth marketing”, a single sentence that a prospect can repeat back to me.

Tagline

The canonical greeting that opens shibin.co:

hey, i’m shibin. I help Shopify brands grow with AI.

The first half renders in Caveat (handwritten). The second half in Inter. This is the single surface on which Caveat appears.

Voice & tone

Warm, confident, direct. Short sentences that land. Longer ones when the rhythm needs them. First-person when it fits, I write as a person, not as a company.

Do

  • Sentence case everywhere, headings, labels, buttons.
  • First-person: “I use one accent because…”
  • Say the thing. Then stop.
  • Name the reason alongside the rule.

Don’t

  • Title Case. Or ALL CAPS. Or all-lowercase affectation.
  • Corporate “we” when it’s me writing.
  • Hype language: empower, unlock, revolutionize.
  • Emoji, decorative bullets, or sales-deck formatting.

The six principles

Every choice on every page traces back to one of these. They’re short on purpose, the constraint is what keeps the brand recognizable.

01

Sentence case

All visible text uses natural English capitalization. Not all-lowercase, not Title Case. Headings, labels, buttons, sentence case everywhere.

02

Light theme only

Warm cream background with near-black text and a deep indigo accent. No dark mode. The restraint is part of the identity.

03

Inter everywhere

Inter for headings, body, nav, labels, buttons. Caveat reserved exclusively for the homepage greeting. Nothing else.

04

Generous whitespace

Sections breathe. Content caps at 720–960px. Padding is generous. The layout does the talking.

05

Minimal and warm

No gradients. No heavy shadows. Thin borders, rounded corners, warm cream palette. The only flourish is the deep indigo accent.

06

Static export

Built with Next.js and exported as static HTML. Deployed on Cloudflare Pages. Fast everywhere, portable anywhere.