StyleKit / Neon Samurai / 霓虹武士風
Japanese bushido aesthetics fused with cyberpunk neon. Katana diagonals. Ink splatter accents. Honor code typography. Crimson blood-red cuts through deep night.
Katana Slash / 刀の斬撃
CSS-only diagonal slash decorations animate across cards on hover. A crimson line cut — like a katana draw — reveals from 0 to full width. Hover each card to feel the strike.
Primary Interaction
The slash reveals on hover — a diagonal crimson line that 'cuts' across the card surface, evoking the swift draw of a katana from its sheath.
Secondary Variant
Violet slash variant for secondary cards. The color shifts while the interaction language — the diagonal cut — remains consistent across the system.
Tertiary Variant
Ice blue slash for tertiary emphasis. Three colors, one gesture. The katana cut as design system token — universal yet unmistakably neon samurai.
Components / 部品
Buttons forged in crimson. Cards cut by diagonal blades. Inputs with glowing border focus states. Every element carries the mark of the warrior.
Primary / 主要
Disabled state / 無効
Primary: crimson fill + ink splatter hover overlay via radial-gradient. Secondary + ghost: transparent fill, colored border + glow on hover. All buttons: font-mono, uppercase, tracked — no rounded corners.
Bushido Code / 武士道
義勇仁礼誠名忠 — The seven pillars of bushido. Each virtue is a law. The design system honors this code: every element earns its place.
Virtue 1 of 7 / 武士道
The bone of the warrior. To decide and act without hesitation. Justice flows from the blade of conviction.
Color System / 色体系
Five colors. One vision. Deep night as foundation — then crimson, violet, ice blue, and gold as the neon signals that cut through darkness.
深夜
Deep Night
#080818
緋色
Crimson
#dc2626
紫炎
Violet
#a020f0
氷蒼
Ice Blue
#38bdf8
黄金
Gold
#fbbf24
Primary Role / 主色
All primary interactions, borders on hover, CTA buttons, accent lines.
Secondary Role / 副色
Section accents, secondary buttons, supporting glows.
Accent Role / 強調色
Kanji decorations, honor marks, sparingly used prestige signals.
Design Law / 掟
The samurai follows a strict code of conduct. The designer follows one too. These are the laws of the Neon Samurai design system.
“The way of the samurai is found in death. The way of the designer is found in purpose. Every pixel must earn its right to exist.”
— 武士道の掟 / Bushido Design Principle