Building a Design System with Tailwind
Every great interface starts with a system. Not a component library, a vocabulary. Colors, spacing, typography, motion. When these decisions are made intentionally and documented clearly, design becomes a language rather than a series of one-off choices.
Why Studio Ghibli?
I wanted my portfolio to feel warm, hand-crafted, and alive. Not the cold, dark, neon-soaked aesthetic that dominates developer portfolios. I looked at Miyazaki films and thought: what if a website felt like walking through a Ghibli meadow?
Defining the Palette
I started with five core colors, each chosen for emotional resonance:
| Color | Hex | Feeling |
|---|---|---|
| Cream | #FFF8E7 | Warmth, openness, like sunlit paper |
| Sage | #8A9A5B | Nature, growth, gentle confidence |
| Forest | #314F3D | Depth, grounding, quiet strength |
| Coral | #F0A3B0 | Playfulness, softness, a blush |
| Amber | #F4D03F | Magic, warmth, a sprinkle of wonder |
The key constraint: never use raw hex in components. Everything goes through Tailwind classes. This forces consistency and makes the system composable.
Typography as Character
I chose three fonts that each tell a story:
- Zen Maru Gothic for headings, rounded, friendly, storybook energy
- Nunito for body text, warm, readable, approachable
- JetBrains Mono for code, clean, technical, a quiet counterpoint
The contrast between the rounded display font and the technical mono font creates that Ghibli-meets-modern tension I was after.
Motion as Atmosphere
CSS animations set the mood. Gentle floating elements, slow drifts, soft fades. Nothing bouncy. Nothing aggressive. The timing rule: 0.4s–1.2s ease-in-out. Like leaves falling, not balls bouncing.
/* The Ghibli easing curve */
--ease-ghibli: cubic-bezier(0.34, 1.56, 0.64, 1);Reusable Patterns
I extracted patterns into CSS classes and Tailwind utilities:
.ghibli-card, frosted glass with subtle borders.ghibli-btn, rounded, warm, inviting.section-container, consistent padding and spacing.ghibli-divider, a gentle separator that breathes
The Result
A design system that doesn’t just look cohesive, it feels cohesive. Every page, every component, every animation carries the same warmth. That’s the goal of a design system: not rigidity, but resonance.