Design System & Principles

Based on Kole Jain's principles of visual hierarchy, 60-30-10 color balance, and neutral balance.

1. Color Palette (Dark Mode)

We use a deep dark mode to evoke the discipline and strength of the Bushido code, accented with a vibrant red to draw attention to critical elements.

Primary Background (#0a0a0a): Sets the mood, reduces glare.

Secondary Background (#1a1a1a): Used for cards and elevating elements.

Accent Color (#e63946): Used sparingly (10%) for buttons, links, and borders.

2. Typography

Using Inter for clean, modern readability. We establish hierarchy through font weight and size rather than multiple font families.

Heading 1 (800 weight)

Heading 2 (600 weight)

Paragraph text (400 weight). Off-white color to ensure it pops off the dark background without causing eye fatigue.

3. Layout & Micro-interactions

Elements have breathing room (consistent padding). Interactive elements like these cards feature a subtle lift (`translateY(-4px)`) and a faint red glow on hover to provide immediate feedback to the user.