🚧 This page is a Work in Progress!

Design System @
pankhilmistry.com

The colors, type, layouts, and interaction patterns behind pankhilmistry.com. Built with vanilla HTML, JS, and Tailwind CSS.

Sparkle Color Palettes

Canonical Core system foundation
Contextual Specific to a case study

Sparkle Typography

Plus Jakarta Sans

font-sans
Primary Reading & Display
Display Massive text-[40px] lg:text-[72px]
font-bold tracking-tight
leading-[1.26]
I design digital products.
Display Medium (H1) text-[32px] lg:text-[52px]
font-bold tracking-tight
leading-[1.15] lg:leading-[1.3]
Designing Trust in an Autonomous Sleep System
Section Title (H2) text-[28px] lg:text-[32px]
font-bold leading-[1.3]
The sterile trap of Minimalism
Card Header (H3) text-[18px] lg:text-[24px]
font-bold leading-[1.3]
Intent-driven control
Editorial Blockquote text-[24px] lg:text-[28px]
font-medium leading-[1.4]
What matters most to me in a team is pretty simple: honesty, ownership, and doing the work properly.
Editorial Prose text-[16px] lg:text-[18px]
font-normal
leading-[1.6] lg:leading-[1.8]

I was born in the 90s, an era when cars actually had soul. You got into a vehicle and you felt a mechanical connection. You turned a heavy, tactile dial to blast the AC. You could feel the engine and operate the entire cabin entirely by muscle memory.

Dense UI Body text-[14px] lg:text-[15px]
font-medium leading-[1.6]

A visual representation of the evolving CAMA home surface experience. Users can explicitly choose how they want to rest or sleep using preconfigured bed modes and posture presets.

Display Accent text-interactive-mask
Dynamic emphasis
making messy, complex things easier.

Space Mono

font-mono
Taxonomy, Quotes & Metadata
Metric / Clock text-[24px] lg:text-[32px]
font-bold tracking-tight
--:--:--
Article Blockquote text-[16px] lg:text-[18px]
leading-[1.5] text-butter-100
"The font corrupted the data."
Taxonomy Eyebrow text-[12px] lg:text-[13px]
uppercase tracking-[1px]
📝 Deep Case Study
Micro / Tooltips text-[10px] lg:text-[12px]
uppercase tracking-widest
Canonical Copy Email

Specialty Fonts

Contextual
Gamification & Anchors
Press Start 2P font-pixel
Gamified UI & 404 Errors
404 Press 'R' to Restart
Noto Sans Devanagari font-devanagari
Footer Anchor Quote
कर्मण्येवाधिकारस्ते मा फलेषु कदाचन। मा कर्मफलहेतुर्भूर्मा ते सङ्गोऽस्त्वकर्मणि॥

Sparkle Iconography

Functional
Used for structure, wayfinding, and critical UI actions
Size Fixed pixel dimensions
Avoid Tailwind w/h classes
xs 14px
sm 16px
md 20px
lg 24px
xl 28px
Stroke Library fill="none" stroke="currentColor"
stroke-width="2"
Back / Prev
Next / Article
Chevron R
External
Close
Calendar
Cal Check
Copy
Download
Warning
Chevron Up
Chevron Down
Expand
Collapse
Jump
Duck
Stack
Security
Lightning
Intent
Adaptive
Smart Home
Metrics
Isolated
Autonomy
Tune
Percent
Inspect
Bed
Pre-sleep
Overnight
Post-sleep
Menu
Filled Library External assets or coded SVGs
Solid shapes
Sparkle
Lock
Location
Animated Deck

Sparkle Emojis

Narrative
Used for human-centric context and approachability
Contextual Usage Text-size inheritance (1em)
Flows inline with prose
Inline & Typography
Hi Wave, I’m Pankhil, a
Bengaluru-based Pro...

"You survived the case studies. Your cognitive reward is dodging pixelated rodents Mouse ."

Nano Banana 🍌 Visual explorations...
Bengaluru, India  IN
Section Headers
🌱 DIGITAL GARDEN
🎨 Art & Sketching
🏔️ The Himalayas
Metadata & Pills
📝 DEEP CASE STUDY
📖 Reading
📺 TV
🚀 Zero-G
🧸 Child-safe
Structural Elements Scaled independently
Callouts, cards, and pills
Callouts
🪴 Importantly, these cards progress over time.
Card Anchor
Compass

Context is everything

Principles The Golden Rule

The Rule: If the information dictates strict structure, navigation, or critical UI action (like "Close" or "Download"), use a stroke SVG. If the information describes a feeling, a role, or a human narrative, use an Emoji to soften the tone.

Sparkle Depth & Shadows

Z-Index & Elevation

Structural
Media, overlays, and glowing states
Heavy Elevation shadow-2xl
Images & Video Containers
Media Container
Medium Elevation shadow-xl
Tooltips, Primary Buttons & Cards
More about Pankhil
Glassmorphic Depth blur(8px) saturate(180%)
inset 0 1px 1px 0 rgba(w/15%)
0 20px 44px -12px rgba(b/70%)
FROSTED GLASS ✨ DEPTH EFFECTS 🌊 FROSTED GLASS ✨ DEPTH EFFECTS 🌊
Emanating Glow shadow-[0_0_8px_rgba(...)]
Active Status Indicators
Active State
Live Demo

Sparkle Buttons & Triggers

Primary Actions

Conversion
High-weight business drivers
Standard Primary bg-butter-50 hover:bg-butter-100
text-cod-gray
Contextual Primary Dynamic Footer Inverse
Inherits Case Study Theme
Get in touch

Secondary & Routing

Navigation
Editorial flow without conversion competition
Secondary Ghost border-butter-50
hover fill pseudo-element
Read more
Wayfinding Links text-[14px] uppercase
text-chicago-500 hover:text-butter-50
Animated SVG arrow
Back Let's Build Something

Contextual & Utility

Functional
Modals, links, and clipboard logic
Local Triggers bg-chicago-800 rounded-full
External URL vs Modal
Multiplier
Clipboard Utilities Compact Icon vs Pill
Relies on JS state logic

Brand & Specialty Triggers

Bespoke
Animated SVG paths and gamified states
Global Navigation Glassmorphic contexts
Liquid SVG Fill
Dynamic Theme Inheritance
Footer Brand Anchor SVG stroke-dashoffset
Hover redraw logic
The Easter Egg Triggers global theme shift
and particle generation
Coldplay Parachutes

Sparkle Bento Layouts

Structural Patterns

Layouts
Grids, accordions, and masonry
Asymmetrical Grid grid-cols-2
col-span-2 & col-span-1
Homepage Architecture
Flex Accordion flex-row
flex-1 to flex-[4] transition
About Page Photos
Masonry Flow columns-2 lg:columns-3
break-inside-avoid
Lab Page Architecture

Sparkle Cards

Interactive Cards

Components
Project gateways
Project & Media Mixed media containers
Split & Stacked layouts
1. Full-Width (Image Top)
Hero Media Container
📝 DEEP CASE STUDY

Scaling Insurance Coverage Management

2. Full-Width (Image Left or Right)

Project Hero Thumb

📝 DEEP CASE STUDY

Designing Insurance for Employers, Employees, and Ops

4. Half-Width Grid (Image Top)
App UI
🚨 MINI CASE STUDY Locked Case Study

Home as a Progressive Experience

Hardware Mockup
🚨 MINI CASE STUDY Locked Case Study

Designing Safe & Intuitive Controls

Editorial & Inline Cards

Components
Metrics, Narrative, & Process Lists
Metrics & Stats Large typography
Horizontal strips & Grids
Horizontal Impact Strip
+26% Attachment Increase
~9% Revenue Uplift
45% Less Manual Effort
Standard Metric Grid
~45% reduction in manual effort
~57% on basic plans, limiting coverage
Feature & Narrative Icon/Emoji anchors
Centered or Left-aligned
Top-Aligned (Emoji/Icon)
🧠

Product thinker

Shaping scope, sequencing, and trade-offs with the founder.

Intent-driven

Users explicitly choose how they want to rest or sleep.

Left-Aligned Inline
📍

Location-based

Assign plans based on country requirements.

Safety vs Calm

Controls must be accessible without feeling dangerous.

Sequential & Process Numbered steps
Phased approach logic
Standard Step
01

Not Applied

No insurance selected

02

Ongoing

Under processing with partner

Phased Approach
/01

Fix data accuracy issues

Improving Data Reliability
/02

Enable self-serve actions

Introducing User Control
List & Editorial Bulleted dense data
Split quote blocks
Bulleted Summary
Operational Impact
  • 45% reduction in operational overhead
  • Significant drop in manual requests and support load
Split Editorial (List + Quote)
My Focus Was On:
  • Identifying high-impact points across the benefits lifecycle
  • Structuring a solution that could scale without increasing complexity

"The challenge wasn't just designing better flows. It was deciding what to unlock first without destabilizing the system."

Sparkle Data Display

Tables

Metrics
Structured comparison and impact data
Standard Table With super-header
3-Column Layout
Impact Overview
System Shift Impact Reach
Self-serve platform for members Reduced operational dependency 45% reduction in manual effort
Plan upgrades & out-of-pocket purchases Revenue growth ~1,850 previously uninsured members
Headless Table No super-header
2-Column Layout
Decision Purpose
Flexible Coverage Configuration System Enable multiple coverage combinations and plan tiers to match real-world needs across geographies
Insurance Settings Dashboard Centralize insurance configuration with country-specific defaults, cost controls, and global visibility

Sparkle Overlays & Modals

System Contexts

Focus & Gates
Focus, intercepts, and media layers
Contents

Title

Subtitle