Styling & Design System

Styling & Design System

Tech Stack

• Tailwind CSS 4 via PostCSS (@tailwindcss/postcss)
• CSS Custom Properties for theme tokens
• cn() utility — clsx + tailwind-merge for className composition

Theme System

Dark mode is the default. Theme is controlled by ThemeProvider and persisted in localStorage.

CSS Variables (app/globals.css)

:root {
  /* Background */
  --background: #09090b;     /* zinc-950 */
  --card-bg: #18181b;        /* zinc-900 */
  --card-bg-hover: #27272a;  /* zinc-800 */

  /* Text */
  --foreground: #fafafa;
  --muted: #a1a1aa;

  /* Borders */
  --border: #27272a;
  --border-subtle: #3f3f46;

  /* Language accent */
  --lang-accent: #3b82f6;    /* Dynamic per language */

  /* Semantics */
  --success: #22c55e;
  --error: #ef4444;
  --warning: #f59e0b;
}

Color System

Framework Colors

Framework	Primary	Background	Border
Native JS	text-yellow-500	bg-yellow-500/10	border-yellow-500/30
React	text-cyan-400	bg-cyan-400/10	border-cyan-400/30
Angular	text-red-500	bg-red-500/10	border-red-500/30
Vue	text-emerald-500	bg-emerald-500/10	border-emerald-500/30

Difficulty Colors

Level	Color
Easy	Green (text-green-400)
Medium	Yellow (text-yellow-400)
Hard	Red (text-red-400)

Grade Badges

S-tier through D-tier grade badges with corresponding colors.

Animations (tailwind.config.ts + globals.css)

Tailwind Animations

• fade — Fade in
• slide — Slide up
• pulse — Pulse glow
• glow — Border glow
• shimmer — Loading shimmer

Quiz Animations (globals.css)

• bounce-in — Answer option entrance
• correct-glow — Green glow on correct answer
• shake — Shake on wrong answer
• confetti — Celebration particles

Visual Effects

Glass Morphism

.glass {
  background: rgba(24, 24, 27, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(63, 63, 70, 0.5);
}

Gradient Text

.gradient-text {
  background: linear-gradient(135deg, var(--lang-accent), #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Noise Overlay

Subtle noise texture applied to backgrounds for depth.

Grid Pattern

CSS grid background pattern for hero sections.

Typography

Font	Usage	Package
Inter	UI text	next/font/google
JetBrains Mono	Code blocks, editor	next/font/google

Responsive Design

• Mobile-first with Tailwind breakpoints (sm:, md:, lg:)
• Navigation bars use horizontal scroll on mobile (overflow-x-auto scrollbar-hide)
• Grid layouts collapse: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
• Playwright E2E tests run on Mobile Chrome and Mobile Safari viewports

Component Patterns

Card Pattern

rounded-2xl border border-zinc-800 bg-zinc-900/50
hover:scale-[1.02] hover:shadow-xl transition-all

Button Pattern

px-4 py-2 rounded-lg font-medium transition-all
bg-{color}/10 text-{color} hover:bg-{color}/20

Badge Pattern

text-xs px-2.5 py-0.5 rounded-full
bg-{color}/20 text-{color} border border-{color}/30