Basta Siti Cloni: Design System Variations

Nerd Level: 2/5
Basta Siti Cloni: Design System Variations

Il Problema

Tutti i siti sembrano uguali. Bootstrap, Tailwind, template Copilot: stesso blue gradient, stesso font system, stesso layout centrato. Zero personalità.

Quando fai 5 siti in una settimana e sembrano tutti fratelli gemelli, qualcosa non va.

La Soluzione

Design System Variations: un database di combinazioni alternative per rompere il pattern.

Non più “prendi il template e cambia il logo”. Ma: scegli palette, font, grid, icons - prima di scrivere codice.

Font Combinations (12)

Serif Elegant

  • Crimson Pro (headers) + Work Sans (body)
  • Use case: Corporate, legal, editorial
  • Vibe: Classic ma moderno

Serif Luxury

  • Playfair Display + Source Sans 3
  • Use case: Fashion, lifestyle, portfolio
  • Vibe: Lusso e leggibilità

Sans Modern

  • Space Grotesk + Public Sans
  • Use case: Tech, startups, SaaS
  • Vibe: Geometric tech feel

Sans Friendly

  • Syne + Quicksand
  • Use case: Creative, wellness, kids
  • Vibe: Friendly e arrotondato

Sans Bold

  • Unbounded + Karla
  • Use case: Gaming, music, youth
  • Vibe: Bold geometrico

Mono Tech

  • JetBrains Mono + Nunito
  • Use case: Dev tools, technical docs
  • Vibe: Developer-focused

…e altre 6 combinazioni per coprire ogni business type.

Color Palettes (6 × 2 modes)

Deep Ocean (Tech/SaaS)

Dark:

--bg-primary: #0a1628;
--text-primary: #e8f0ff;
--accent-primary: #00d9ff;

Light:

--bg-primary: #f0f7ff;
--text-primary: #1a2744;
--accent-primary: #0099cc;

Industrial Mono (Manufacturing)

Dark:

--bg-primary: #0f0f0f;
--text-primary: #f0f0f0;
--accent-primary: #ffd700;

Light:

--bg-primary: #fafafa;
--text-primary: #1f1f1f;
--accent-primary: #ffa500;

Cyber Neon (Gaming/Music)

Dark:

--bg-primary: #0d0221;
--text-primary: #f0e7ff;
--accent-primary: #00ff88;
--accent-secondary: #ff00ff;

…e altre 3 palette (Forest Noir, Sunset Vibrant, Earth Warm).

📐 Grid Layout Patterns

Asymmetric Hero

.hero {
  grid-template-columns: 40% 60%; /* non 50/50! */
}

Perché: Rompe la simmetria noiosa, guida l’occhio.

Masonry Cards

.cards {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card:nth-child(3n) {
  grid-row: span 2; /* alcuni card doppia altezza */
}

Perché: Visual interest, Pinterest-style.

.layout {
  grid-template-columns: 240px 1fr; /* sidebar LEFT */
}

Perché: 99% dei siti hanno sidebar a destra. Inverti.

…e altri 3 pattern (Swiss Grid, Magazine Layout, Diagonal Split).

Icon Libraries Alternative

Lucide

  • Fork moderno di Feather Icons
  • CDN ready, minimal lineare
  • Best Font Awesome alternative

Phosphor

  • 6 weights (thin → bold)
  • Versatile, geometric

Tabler

  • 4700+ icone
  • Clean, professional

Iconoir

  • Open source, elegant minimal

Heroicons

  • By Tailwind team (ma standalone!)
  • Solid + outline variants

Remix Icon

  • 2800+ icone
  • Business-friendly

Iconify

  • Meta-soluzione: 200k+ icone, tutte le librarie in un CDN

Implementation: Site Generator Agent

Ho creato tools/agents/site_generator.py che:

  1. Input: Business type, mood, pages
  2. Logic: Match type → palette/fonts, mood → icons
  3. Output: HTML/CSS completo con design system selezionato
python site_generator.py \
  --type tech \
  --mood minimal \
  --pages "home,about,contact" \
  --output /tmp/mysite

Risultato:

  • Font: Space Grotesk + Public Sans
  • Palette: Deep Ocean
  • Icons: Lucide
  • Layout: Asymmetric hero

Nessun template Copilot. Ogni sito è distintivo.

Case Study: Eltelec.it

Business: Installazioni antenne e telecomunicazioni

Before:

  • Generic blue gradient (#2563eb → #1e40af)
  • System fonts (Arial, Roboto)
  • Centered layout
  • No icons
  • Zero personalità

After (Design System):

  • Palette: Industrial Mono (gold #ffa500 accents)
  • Fonts: Space Grotesk + Public Sans
  • Icons: Lucide (antenna, wifi, network, cable)
  • Layout: Asymmetric hero 40/60
  • Images: AI-generated photorealistic (antenna install, fiber cables)

Risultato: Sito professionale, distintivo, credibile. Non sembra fatto con template.

Workflow Proposto

Vecchio Workflow

  1. Apri template Tailwind
  2. Cambia colori (magari)
  3. Cambia logo
  4. Ship

Problema: Tutti i siti sembrano Tailwind.

Nuovo Workflow

  1. Match business type → palette candidate (Deep Ocean? Industrial? Cyber?)
  2. Match mood → font combo (Serif? Sans? Mono?)
  3. Select icons → library appropriata
  4. Choose layout pattern → asymmetric? masonry? swiss?
  5. Generate images → AI con prompt specifici business
  6. Write code con design system selezionato

Risultato: Ogni sito ha identità visiva unica.

Tools Created

  1. design-system-variations.md: Database completo (fonts, palettes, grids, icons)
  2. site_generator.py: Agent per generazione siti con design system
  3. image_generator.py: Agent per AI image generation (Gemini 2.5 Flash Image)

Tutti in brain/tools/agents/.

Overfitting Visivo

Questo problema non è solo del web design. È overfitting.

In machine learning, l’overfitting succede quando un modello memorizza i dati di training invece di generalizzare. Risultato: funziona perfettamente sui dati visti, fallisce su tutto il resto.

Nel design web: Usi sempre lo stesso template Bootstrap → tutti i tuoi siti sono identici → zero flessibilità quando serve qualcosa di diverso.

Nel cervello umano: C’è una teoria affascinante che i sogni servono esattamente a questo: prevenire che il cervello “overfitti” sulla routine quotidiana. Sogniamo cose assurde per forzare il cervello a generalizzare invece di memorizzare pattern rigidi.

Design system variations = sogni del web design. Aggiungono variabilità per prevenire la monotonia visiva, forzano creatività invece di default patterns.

Non è solo estetica. È anti-overfitting applicato al design.

Lesson Learned

Don’t default to Copilot templates.

Quando generi un sito:

  1. Pensa al business type
  2. Scegli design system appropriato
  3. Genera immagini custom
  4. Poi scrivi HTML/CSS

Il codice è facile. Il design è la differenza tra “sito generico #47” e “sito memorabile”.

📈 Next Steps

  • Espandere palette database (più colori: viola, teal, etc)
  • Aggiungere dark mode switcher automatico
  • Integrare image generation direttamente in site_generator
  • Template library per layout patterns
  • A/B testing framework per palette effectiveness

Ma il punto chiave è: stop ai siti cloni. Ogni business merita un’identità visiva unica.

Tools: Python, OpenRouter API, Gemini 2.5 Flash Image Cost: ~$0.046 per image, $0 per agent usage Time: 10 min per sito completo (vs 2h manuale)

Il futuro del web design non è “usa template X”. È “genera design system appropriato per business Y”.

Created: 2025-11-06 Updated: 2025-11-06 Author: Giobi + Anacleto