SK
Visits ·
/06Colophon · the receipts

How this thing
was built.

Stack, palette, type, easings — the receipts. Less curated than a README, more honest than a tweet.

/01// The build

Figma in one window. Claude Code in the other.

Short loop. Sticky-note in Figma → Tailwind class in Claude Code or Cursor → Vercel preview URL within the hour. Figma is the thinking surface. The repo is the source of truth.

Hardest parts: the canvas' pan/zoom math (you bias zoom against the world transform, not the screen), the Off Hours jackpot reel (slot-machine digits look easy until leading zeros become a layout problem), and the mobile menu's timing curve — 800ms expo-out felt right where 1.0s linear felt slow.

/03// The palette

Eleven tokens. One signature accent.

Every color on the site is one of these eleven, declared once in app/globals.css. Orange #ff7122 carries the weight — highlights, hovers, the script flourishes, the active-nav indicator. Everything else is paper, ink, or a calmer cousin.

paper#fafaf7Default page
paper-2#f3f1ecSurface lift
ink#0c0c0aType · borders
ink-2#1a1a17Card on dark
muted#6a6a64Secondary text
soft#aeada6Faint hairlines
line#e3e1daDividers
orange#ff7122Signature accent
glow#f4d35eLoud surface
violet#312e4aCool accent
cobalt#5c7dffCold accent
/04// The type

Three faces. Each with one job.

Inter does the heavy lifting — display, body, the headline above. JetBrains Mono draws the eyebrows and the tabular numbers. Caveat shows up exactly twice on the whole site, on flourishes that earn it (namaste. on /about, psst — on /off-hours).

InterDisplay + sans bodyMedium · Semibold · Bold
JetBrains MonoEyebrows · numbersMedium · Semibold
CaveatThe script flourishMedium · used sparingly
/05// Motion

Two named curves. Used everywhere.

Motion timing is two cubic-beziers, declared once in globals.css and reused on every entry, every hover, every reveal. The expo-out is the load-bearing one — snap at the start, long settle.

--ease-out-expocubic-bezier(0.16, 1, 0.3, 1)Default. Entries, hovers, reveals, the menu drawer slide-in, the jackpot reel.
--ease-in-out-expocubic-bezier(0.87, 0, 0.13, 1)Symmetric transitions — countdown digit roll, the canvas world's bounded zoom.
/06// A note for fellow designers

Don't copy.
Take inspiration.

If something here gives you an idea, take the idea — build your own version with your colors, your layout, your voice. Don't ship the section order with your name on it. That helps no one, especially not you.

Stuck on something specific — an easing curve, a layout move, a transition that won't behave? Email me. Happy to help fellow designers — I'd rather you ship something that's truly yours than copy this. We've all been the one stuck on a transition at 2am.

/07// Sign-off

Designed and built in Hyderabad, India · 2026.

The repo stays private. The stack's above, the easings are public, the colors are right there in the swatch grid. If something here makes you want to build a better one — that's the point. Email's in the contact block below.

// Let's connect

Have an idea?
Let's build it.

Looking for a Designer + Engineer who can ship? Got a freelance brief? Just want to nerd out about easing curves? My inbox is open.

Shiva Kumar Kummari.

All rights reservedDesigned & built by Shiva© 2026 · Shiva Kumar