Decanter
Dev Only

Decanter Design System

Componenti UI atomici — tokens colore, tipografia, spacing.

Colori

navy-900

#043f7d

navy-800

#0a4d8f

navy-700

#1a5ea0

orange-500

#f29603

orange-400

#ffac2e

orange-50

#fff5e6

gray-900

#0f172a

gray-600

#475569

gray-300

#cbd5e1

gray-100

#f1f5f9

success

#16a34a

danger

#dc2626

warning

#d97706

Tipografia — Lato

Display H1 · 40→64px · Black 900 · ls -0.02em

Dai dati alle decisioni.

H2 · 32→48px · Bold 700

Winery Intelligence Platform

H3 · 22→28px · Bold 700

Cinque moduli, un'unica intelligenza

Body Lead · 18→20px · Regular 400 · lh 1.6

Decanter unifica vendite, magazzino, catalogo ed export in un'unica piattaforma AI. Per chi dirige una cantina e vuole smettere di navigare a vista.

Body · 16px · Regular 400

Margini stimati a occhio, decisioni sull'intuito invece che su dati strutturati. Nessuna visibilità reale su costi e redditività per referenza.

Eyebrow · 13px · Bold 700 · uppercase · ls 0.08em

WINERY INTELLIGENCE PLATFORM

Eyebrow

WINERY INTELLIGENCE PLATFORM
IL TUO ADVISOR
FUNZIONALITÀ

Button

Varianti — sfondo bianco

Variante ghost-white — su sfondo navy

Dimensioni

Come link

Esplora la Dashboard → Link ghost

Disabled

Card

Variante default

Card standard

Su sfondo bianco. Bordo grigio, shadow brand, hover con translateY.

Variante highlight

Card evidenziata

Background orange-50. Per card che meritano attenzione speciale.

Variante flat

Card flat

Sfondo grigio-100, nessun shadow. Per content card secondarie.

Card cliccabile

Card link

Intera card cliccabile via prop href. Focus visible accessibile.

Card su sfondo navy

Variante navy

Card su navy

Background semitrasparente bianco. Per sezioni su sfondo navy.

Variante navy

Card su navy

Hover aumenta l'opacità del background bianco.

Badge

↑ +18% YTD ↓ -5.3% Attenzione Neutral Navy Azione AI
Online ↑ +12% Premium

Dimensione sm

↑ +8% ↓ -2% Crescita

KPI Stat

Theme dark (su navy)

€4.2M
Fatturato YTD
+18%
242
Clienti attivi
+31 nuovi
34%
Quota export
+6pp
41.8%
Margine medio
+2.1pp

Theme light (su bianco)

€4.2M
Fatturato YTD
+18%
89K
Export Americas
-25.8%
148K
Bottiglie in stock
6
Agenti attivi

Image Placeholder

Componente temporaneo — sostituire con <Image> di astro:assets quando le foto reali sono disponibili. Mantiene aspect-ratio corretta per evitare CLS.

hero-bg (2400×1600)

module-01-img (800×600)

og-image (1200×630)

Shadow & Radius tokens

shadow-card · rounded-btn

Card base shadow

shadow-card-hover · rounded-card

Card hover shadow

shadow-cta · rounded-btn

CTA button shadow

DecanterCurves

SVG parametrico con blob navy ↔ arancio. Animazione drift lenta (solo se prefers-reduced-motion: no-preference).

variant="hero" — su sfondo navy

WINERY INTELLIGENCE PLATFORM

Dai dati alle decisioni.

variant="cta" — su sfondo arancio

Dai dati alle decisioni.

variant="divider" — transizione sezione