Design & Technical Specs

Dokumentasi lengkap website portofolio dengan tema Biru Minimalis + White Background. Dibuat dengan prinsip simplicity, performance, dan modern best practices.

Typography

Inter (System + Google Fonts) - Typography system yang sempurna untuk readability.

Line-height: 1.7 (optimal reading)
Responsive typography: clamp() + rem
5 weights: 300, 400, 500, 600, 700
Letter-spacing & kerning optimized

Color System

Blue 50-900 + Neutral Grays - Semantic color palette yang konsisten.

Primary: Blue 500-700
Background: White + Blue 50
Borders: Blue 100 / Gray 100
Shadows: Multi-layer subtle

Layout System

CSS Grid + Flexbox - Responsive layout yang robust.

Max-width: 1100px (comfortable reading)
8px spacing system
Mobile-first breakpoints
Container queries ready

Performance

Ultra Optimized - Speed tanpa kompromi.

Bundle size: ~12KB gzipped
Loading: <600ms
60fps GPU animations
Zero layout shift (CLS=0)

🎨 Color Palette

Tailwind-inspired semantic colors untuk konsistensi sempurna

Blue 900
#1e3a8a

Blue 700
#1d4ed8

Blue 500
#3b82f6

Blue 100
#dbeafe

White
#ffffff

🔤 Typography Scale

Inter font family dengan perfect hierarchy dan spacing

300 - Light

The quick brown fox jumps over the lazy dog. Perfect readability untuk body text.

400 - Regular

The quick brown fox jumps over the lazy dog. Default body text weight.

500 - Medium

The quick brown fox jumps over the lazy dog. Medium weight untuk subtle emphasis.

600 - SemiBold

The quick brown fox jumps over the lazy dog. Semi-bold untuk headings & buttons.

700 - Bold

The quick brown fox jumps over the lazy dog. Bold untuk hero text & emphasis.

Asisten Website