Style Templates

5 distinct visual styles for the Design-Code Course. Each template demonstrates the same content (Module 02: Design Principles) with different aesthetics.

Interactive Showcase

ALL

Style Switcher

All 5 styles in one page. Click numbered buttons (1-5) in the corner to instantly switch between styles. Perfect for comparing and choosing.

Live Switch All Styles

Individual Style Templates

01

Modern Minimal

Clean, spacious, professional. Inter font, subtle blue accents, generous white space, light background. Best for: corporate, professional, educational.

Minimal Clean
02

Bold Editorial

Magazine-inspired, high contrast. Playfair Display serif, dramatic shadows, pull quotes, cream background. Best for: content-heavy, storytelling.

Editorial Bold
03

Soft Gradient

Warm and approachable. Plus Jakarta Sans, purple/pink gradients, rounded corners, soft shadows, glassmorphism. Best for: modern apps, friendly brands.

Gradient Soft
04

Dark Tech

Developer-focused, terminal-inspired. JetBrains Mono, neon cyan/green accents, dark backgrounds, code blocks. Best for: dev tools, technical docs.

Dark Mode Tech
05

Playful Creative

Fun and energetic. Nunito + Caveat handwritten, vibrant colors, comic-style shadows, dashed borders, rotated elements. Best for: kids, creative, casual.

Playful Creative

New Module 02 Prototypes

A

Swiss International

Grid-based, asymmetric layouts, strong typography. Black/white/red palette with Helvetica-style fonts. Inspired by Muller-Brockmann.

Swiss Grid
B

Brutalist Raw

High contrast, visible structure, raw HTML aesthetic. Yellow/black/blue with monospace fonts. Inspired by Yale School of Art.

Brutalist Raw
C

Organic Natural

Warm earth tones, flowing shapes, rounded corners. Cream/olive/terracotta with Fraunces serif. Inspired by Kinfolk, Aesop.

Organic Warm

Quick Comparison

Style Font Background Accent Vibe
01 Minimal Inter White Blue Professional, Clean
02 Editorial Playfair Display Cream Red Bold, Magazine
03 Gradient Plus Jakarta Sans Gradient Purple Warm, Friendly
04 Dark Tech JetBrains Mono Dark Cyan Developer, Terminal
05 Playful Nunito + Caveat Cream Multi Fun, Creative
Based on Module 02: Design Principles
All templates demonstrate the same content structure: hero, principle cards, comparison table, interactive tabs, and key takeaways. This allows direct comparison of how each style presents identical information.
Files:
style-showcase.html - Combined switcher
style-01-modern-minimal.html
style-02-bold-editorial.html
style-03-soft-gradient.html
style-04-dark-tech.html
style-05-playful-creative.html
module02-style-a-swiss.html - Swiss International
module02-style-b-brutalist.html - Brutalist Raw
module02-style-c-organic.html - Organic Natural