COMIC
STYLE
DESIGN KIT
Every element hand-inked. Every shadow hard-offset. Every word shouted in caps.
PANEL LAYOUTS
Comic grid — thick borders, variable sizes, storytelling composition
COMPONENTS
Interactive demo — click the tabs below
Button Variants — Heavy Ink Press Interaction
COLOR PALETTE
Four pillars of comic-book color — flat, bold, unmistakable
Danger Red
#ff3333
Action Yellow
#ffcc00
Hero Blue
#3366ff
Victory Green
#33cc33
Paper White — Background
#fffef8
DESIGN RULES
The laws of comic-style — violate them at your peril
- ✓border-4 border-black on every element
- ✓Hard offset shadows: shadow-[4px_4px_0_#000]
- ✓ALL-CAPS font-black uppercase always
- ✓ease-out or linear transitions only
- ✓Halftone radial-gradient dot backgrounds
- ✗rounded-* (speech bubbles use rounded-2xl only)
- ✗shadow-sm or any soft/blurred shadows
- ✗Gradients — use flat primary fills
- ✗ease-in-out timing functions
- ✗Serif or thin-weight fonts
DISPLAY
KAPOW!
Arial Black, 40px+, ALL-CAPS
HEADING
HERO TITLE
font-black, tracking-wider
CAPTION
Panel caption text...
font-black, tracking-widest, 14px
INTERACTIONS
Hover every card — feel the ink snap to life
POP-ART EXPLOSION
scale-110 rotate(-3deg) on hover
HALFTONE REVEAL
Dot overlay fades in on hover
HEAVY INK PRESS
Shadow collapses on active
BADGE POP
scale-0 to scale-100 badge reveal