Thick ink outlines. Flat saturated fills. Hard offset shadows. Zero gradients. The aesthetic of classic anime cels made into UI.
Thick outlines, flat fills, hard shadows — every component drawn with anime ink.
Primary Buttons
Ghost & Disabled
Size Scale
Interaction tokens
shadow-[3px_3px_0_#1a1a2e] hover:shadow-[5px_5px_0_#1a1a2e] active:translate-x-[2px] active:translate-y-[2px] active:shadow-noneSix flat colors drawn straight from the anime cel paint box. No gradients, no blends.
Ink Black
Primary
Paper White
Background
Anime Red
Accent
Sky Blue
Cool
Vivid Green
Success
Sun Yellow
Highlight
Rule: Always Flat!
These six colors are always used as pure flat fills — never as gradient stops or with opacity blending. The ink outline does all the separation work.
Bold headings rooted in manga lettering. Clean body text for readability.
Heading Scale
H1 Heading
text-5xl font-black + ink shadowH2 Heading
text-3xl font-black accent colorH3 Heading
text-2xl font-black ink blackH4 Heading
text-xl font-blackBody & UI Text
Body text uses font-bold for consistent ink weight. Cel shading is a style that thrives on confident, readable lettering — no thin strokes allowed.
text-base font-boldSupporting text is muted but still bold. Opacity 60% on ink black, never thin font-weight.
text-sm font-bold opacity-60Caption Label — Scene 1 Take 3
text-xs font-black uppercase tracking-widest“I will surpass my limits!”
— Dramatic Protagonist
The laws of the cel-shading dojo. Follow them and your UI will look like a Ghibli cut sheet.
Correct: Hard Offset Shadow
box-shadow: 4px 4px 0 #1a1a2eWrong: Soft Blur Shadow
box-shadow: 0 8px 24px rgba(..., 0.5) — WRONGEvery cel-shading element follows four fundamental laws — master these and you master the style.
Every element gets a 3px solid #1a1a2e border. No exceptions. This is the ink that defines the world.
Hard offset drop shadow — 3-5px shift, zero blur. Creates dimension without softness.
Pure flat color. No gradient, no blur, no texture. One color per region, drawn like paint from a tube.
Buttons compress on click — translate +2px to match shadow offset, shadow disappears. Pure physical feel.
Diagonal lines radiating from a focal point — the signature manga action element.
Focal: (50, 50) — 24 lines
Focal: (0, 100) — 16 lines
Focal: (100, 0) — 20 lines
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
<g opacity={0.08} stroke="#1a1a2e" fill="none">
{lines.map((l, i) => (
<line
key={i}
x1={focalX} y1={focalY}
x2={l.farX} y2={l.farY}
strokeWidth={i % 3 === 0 ? "0.5" : "0.25"}
/>
))}
</g>
</svg>Section layouts modeled after manga panel grids. Thick borders divide content zones.
The
Hero Arrives!
Status
!
Alert!
This is the way!
★
Victory!