Ordini in produzione
18
+3 questa settimanaDesign system · uso interno
Hundreded Studio
Componenti base e token del design system. Tutto quello che vedi qui usa solo i token di styles/tokens.css: per cambiare un colore o una misura si modifica lì, non nei componenti. Gli stati con * sono forzati per documentarli: per vederli dal vivo passa col mouse o usa Tab sugli esempi "Default".
Tipografia
Ruoli presi dalla specifica del brand: interlinea e tracking sono esatti, le dimensioni sono adattate allo schermo. Hundreded Grotesk solo per Display e Heading, nella forma base. Helvetica Neue LT STD per tutto il resto.
Ruoli tipografici (classi type-*)
Platino
Display ·
type-displayHundreded Grotesk Regular · 56px (guideline 90pt) · interlinea 0.9 · tracking −0.01em
Titolo di pagina, momenti display
Frame
Heading / Titolo ·
type-headingHundreded Grotesk Regular · 48px (72-80pt) · interlinea 1 · tracking −0.02em
Titoli di sezione statici
Richiede attenzione
Titolo di blocco ·
type-block-titleHundreded Grotesk Regular · 24px · interlinea 1 · tracking −0.01em · tondo, non maiuscolo
Solo il titolo (h2) dei blocchi principali di una pagina. Eccezione a "Grotesk solo display": pochi titoli statici, mai pixelati
Per chi ha ottenuto il platino
Sottotitolo ·
type-subtitleHN 65 Medium · 24px (24-36pt) · interlinea 1.1 · tracking −0.005em
Valori KPI nelle card. Ammesso accanto a Corpo e Label: ruolo distinto, dimensione diversa
La galleria dei trophy hunters
Section label ·
type-section-labelHN 75 Bold · 14px · interlinea 1.2 · tracking 0.1em · maiuscolo
Sopratitoli, "Studio" accanto al wordmark
Ordini recenti
Label / Titoletto ·
type-labelHN 75 Bold · 14px (14-16pt) · interlinea 1.2 · tracking 0.05em · maiuscolo
Bottoni, label dei campi, titoletti di card (h3) e modali
Leggibilità prima di tutto: questo è il testo di ogni giorno.
Corpo del testo ·
type-bodyHN 55 Roman · 16px (12-16pt) · interlinea 1.2 · tracking 0
Testo, voci di menu, valori nei campi, righe di tabella
Aggiornato oggi alle 10:24 · visibile solo al team
Didascalia ·
type-captionHN 55 Roman · 14px (guideline 8pt, alzato per leggibilità) · interlinea 1.2 · tracking 0
Aiuti ed errori sotto i campi, metadati, intestazioni di tabella, badge
Pesi disponibili (campionario, non una composizione)
HN 25 UltraLight — Leggibilità prima di tutto. Corsivo.
HN 45 Light — Leggibilità prima di tutto. Corsivo.
HN 55 Roman — Leggibilità prima di tutto. Corsivo.
HN 65 Medium — Leggibilità prima di tutto. Corsivo.
HN 75 Bold — Leggibilità prima di tutto. Corsivo.
Regola dei pesi: salta sempre almeno un grado
Colori
Regola 60/30/10: superfici scure dominanti, grigi per la struttura, Earned Green raro. Un solo elemento verde pieno per vista: quello che crea (es. Nuovo task). Gli stati selezionati (segmenti, pillole, tab, card) usano il contorno chiaro --border-strong, mai il verde.
Palette di marca (manuale)
Midnight Black
Earned Green
White
Steel Grey
Platinum Grey
Silver Grey
Superfici, veli e stati
page
raised
overlay
hover (velo)
selected (velo)
accent
success
warning
danger
info
Testo (contrasto misurato su card)
- fg — Aa testo di esempio17.3:1 su card
- fg-secondary — Aa testo di esempio6.6:1 su card
- fg-muted — Aa testo di esempio5.4:1 su card
- fg-disabled — Aa testo di esempio2.4:1 · solo disabilitato
- danger-fg — Aa testo di esempio6.5:1 su card
- accent — Aa testo di esempio13:1 su card · raro
Bordi e focus
- line-subtledivisori leggeri
- linedivisori
- line-inputbordo campi ≥ 3:1
- focusanello di focus
Spazi, raggi, elevazione, movimento
Spaziature a passi di 4px. Raggi: i figli derivano il raggio dal genitore (raggio − padding), mai copiato. Profondità con un solo anello chiaro, non ombre impilate. Animazioni solo su transform e opacity.
Spaziatura (scala 4px)
- --space-14px
- --space-28px
- --space-312px
- --space-416px
- --space-624px
- --space-832px
- --space-1248px
- --space-1664px
Raggi
- --radius-sm · 4pxminimo dei raggi derivati, badge
- --radius-md · 8pxbottoni, input, voci di menu
- --radius-lg · 12pxcard, modali, drawer
- --radius-fullindicatori tondi, filtri cliccabili a pillola
Elevazione (anello translucido) · tre livelli: pagina, blocco, elemento annidato
Blocco · bg-raised + shadow-raised (12px)
Elemento annidato · bg-inset + shadow-inset (8px)
shadow-raised
shadow-raised-hover
Movimento
- --duration-fast · 120mshover e press (bottoni, voci di menu)
- --duration-base · 180msdropdown e popover
- --duration-slow · 250msmodali e drawer
- --ease-outcurva di uscita morbida, per tutte le entrate
- Con "riduci movimento" attivo nel sistema, tutte le animazioni diventano istantanee.
Breakpoint
Fasce di larghezza, non modelli di dispositivo. Mobile-first: si scrive prima lo stile per lo schermo stretto, poi si allarga con sm: md: lg: xl: (mai max-*). I valori stanno in un solo posto, il blocco @theme static di styles/tokens.css (--breakpoint-*): da lì nascono le classi responsive e le variabili che il JavaScript legge (Sidebar, questa pagina). Si verifica a 375, 768, 1024 e 1440px.
Fascia attuale (dal vivo, solo CSS: ridimensiona la finestra)
MobileMobile / tablet strettoTabletDesktop standardDesktop largo
Larghezza della finestra: sotto …Larghezza della finestra: da …, sotto …Larghezza della finestra: da …, sotto …Larghezza della finestra: da …, sotto …Larghezza della finestra: da …
| Token | Valore | Classe | Sotto la soglia |
|---|---|---|---|
--breakpoint-sm | … | sm: | mobile |
--breakpoint-md | … | md: | mobile / tablet stretto |
--breakpoint-lg | … | lg: | tablet |
--breakpoint-xl | … | xl: | desktop standard (sopra: desktop largo) |
Icone
Set Uxercon, stile Line: 3039 icone in 37 categorie (public/icons/<categoria>/). Si usano con <Icon name="log-out-01" />. Se lo stesso nome esiste in più categorie (67 casi, es. plus) si scrive con la categoria davanti: <Icon name="user-interface/plus" />; la forma categoria/nome è ammessa per tutte. Il nome è controllato (sbagliato o ambiguo non compila) e il colore è quello del testo intorno. Decorative di default; con label diventano un'immagine con nome per gli screen reader. In alto contrasto di Windows prendono il colore di sistema del testo.
Taglie (token --icon-size-*)
- sm · 16px · defaultaccanto al testo, bottoni, menu, campi
- md · 20pxicona da sola in una barra o intestazione
- lg · 24pxmisura nativa: stati vuoti, griglie
Colore ereditato dal testo (currentColor)
- fg-muted · informativo (metadati, aiuti)
- fg · interattivo (bottoni, voci di menu)
- accent · raro, solo il traguardo
- con label: lo screen reader legge "Bloccato"
Croci piccole per disegno: plus e xmark a md (20px)
In Uxercon il + e la × occupano 10 e 9 unità della griglia da 24, le altre icone 16-22. Nei bottoni si usano a 20px, così hanno la stessa presenza delle altre a 16px (qui: + a 16 e 20px, × a 16 e 20px, cestino a 16px).
Tutte le icone · cerca o apri una categoria
Cerca per nome (in inglese) o per categoria. Clic su un'icona per copiarne il nome.
3039 icone in 37 categorie. Apri una categoria o cerca per nome.
Accessibility & Security70 icone
Alerts, Spinner & Toggle108 icone
Alphabet78 icone
Arrows100 icone
Automotive50 icone
Building100 icone
Chart & Graphs100 icone
Clothing & Fashion50 icone
Communication70 icone
Date & Time100 icone
Design & Editor100 icone
Development65 icone
Device & Electronic100 icone
Education65 icone
Emojis62 icone
File & Folder101 icone
Film & Video87 icone
Finance & Payment100 icone
Household & Interiors100 icone
Image & Photos64 icone
Layout100 icone
Map & Navigation70 icone
Mathematics65 icone
Medicine & Health100 icone
Music & Audio70 icone
Numbers80 icone
Shapes44 icone
Shopping & Ecommerce75 icone
Social Media & Brand100 icone
Sport & Fitness70 icone
Technology50 icone
Transportation50 icone
Travel & Hotel80 icone
User Interface170 icone
User & People100 icone
Weather65 icone
Web3 & Blockchain80 icone
Input
Label sempre visibile e collegata (cliccandola si entra nel campo), in ruolo Label. Valore a 16px in ruolo Corpo; aiuto ed errore in ruolo Didascalia. Il bordo è un bordo vero, con contrasto ≥ 3:1. Gli errori compaiono quando lasci il campo, subito sotto. L'icona iniziale sta sopra il campo: cliccarla equivale a cliccare l'input.
Default
Con testo di aiuto
Lo trovi nel profilo PlayStation.
Obbligatorio
Compilato
Focus*
Errore
L'email deve avere la forma nome@dominio.it.
Errore + aiuto (prima l'errore)
Il PSN ID ha almeno 3 caratteri.
Lo trovi nel profilo PlayStation.
Disabilitato
Data (selettore di sistema)
Facoltativa.
Con icona (ricerca)
Prova dal vivo: validazione al blur e al salvataggio
Card
Superficie bg-raised, raggio 12px, anello translucido: è il secondo livello (blocco) sopra la pagina. Il titolo di un blocco principale (CardHeader as=h2) è in ruolo Titolo di blocco; i titoletti (h3/h4) in ruolo Label. Gli elementi annidati (righe di avviso, task) sono il terzo livello: velo bg-inset, contorno interno shadow-inset e raggio 8px, perché stanno a 12px o più dal bordo e si leggono come oggetti indipendenti. Se tutta la card è cliccabile, in hover l'anello si schiarisce; il click lo fa un solo link interno esteso su tutta la superficie. CardHeader mette titolo e azioni sulla stessa riga, alta 32px.
Hover*
Anello chiaro
shadow-raised-hover, senza animazione.
Padding sm (8px)
Come funziona il raggio derivato
Due curve concentriche sembrano parallele solo se il raggio interno è più piccolo di quello esterno esattamente dello spazio che le separa. Per questo un riquadro dentro una card da 12px con 8px di padding ha raggio 4px. Se il padding supera il raggio (16px su 12px), il risultato sarebbe zero o negativo: si usa il minimo, 4px.
<div className={cardInnerRadius}> → rounded-(--radius-inner)
Ordini recenti
- #1042Elden Ring · platinoSpedito
- #1043Astro Bot · platinoIn produzione
- #1044Bloodborne · platinoFile da approvare
Richiede attenzione
- #1042Elden Ring · platinoSpedito
- #1043Astro Bot · platinoIn produzione
Badge
Per stati e tag, non cliccabili. Rettangolo con raggio 4px, testo in ruolo Didascalia (55 Roman, tondo) su sfondo tinto del colore dello stato: lo stato si legge senza “urlare”. La forma a pillola è riservata ai filtri cliccabili. Testo sempre presente (il colore non è l'unica informazione), contrasto AA su ogni superficie. Accent solo per il traguardo più importante, e mai accanto a un altro verde pieno.
Su card
BozzaPlatinoCompletatoIn attesaBloccatoIn lavorazione
Su overlay (modali, drawer)
Modal e Drawer
Elemento nativo <dialog>: focus intrappolato dentro, Esc chiude, il focus torna al bottone di partenza. Titolo in ruolo Label/Titoletto, testo in ruolo Corpo. Se c'è un campo da compilare, il focus parte da lì (non su touch). I form usano un vero <form>: Invio salva. Entrata e uscita in 250ms solo su opacity e transform. Sotto i 640px la modale occupa tutto lo schermo, senza angoli arrotondati; il drawer resta laterale a ogni misura. Piè: azioni principali a destra (un solo verde pieno, quello che conferma); l'azione distruttiva (prop destructiveAction) sta sulla stessa riga, a sinistra e staccata almeno 16px, rosso tinto: cestino + testo da 640px, solo cestino quadrato sotto (nome completo in aria-label e tooltip). Se il piè è stretto le azioni principali riducono il margine interno da 16 a 8px invece di andare a capo. Con la tastiera aperta sul telefono il piè sale sopra i tasti.
Apri per provare (anche da tastiera)
Select
Menu a tendina NATIVO (<select>) con l'aspetto dei campi: stessa altezza, bordo, focus e correzione ottica di Input. Su telefono apre il selettore del sistema. Per le date si usa Input con type="date", anch'esso nativo.
Default · errore
Scegli uno stato.
Tab e filtri
Livello 3 della navigazione: viste e filtri dentro la pagina. Una sola fermata del Tab per gruppo; dentro si usano le frecce, Home e Fine. Tab: barretta che scivola sotto la scheda attiva (180ms, solo transform). Scelta a segmenti: cursore rialzato dietro l'opzione scelta, con il contorno chiaro --border-strong. Filtri a pillola (unico uso ammesso della pillola): la scelta ha il contorno chiaro e la spunta, mai il verde.
Tabs (es. colonne della board su telefono)
Pannello «Da fare»: qui andrebbe la colonna. Prova le frecce sinistra e destra.
Pannello «In corso»: qui andrebbe la colonna. Prova le frecce sinistra e destra.
Pannello «Fatto»: qui andrebbe la colonna. Prova le frecce sinistra e destra.
SegmentedControl e ChipGroup (filtri della board)
Persona
Modulo
Breadcrumb (barra in alto della shell)
KPI, caricamento, vuoto, errore
KPI: etichetta (Label), valore (Sottotitolo, cifre a larghezza fissa), una riga di contesto. Cliccabile solo se la pagina di destinazione esiste: allora compare la freccia e tutta la card è un link. Gli skeleton hanno le stesse misure dello stato pieno e pulsano solo in opacity. Stati vuoti: una frase, una riga di spiegazione, un'azione se serve.
Entrate del mese
4.280 €
+12% rispetto a ottobre
4
2 scaduti, 1 oggi
Tutto in ordine.
Nessun avviso da Finance, Produzione, Community e task.
Non riesco a caricare questa sezione.
Riprova tra un momento. Il resto della pagina funziona.
Task
Card della board: modulo in alto, maniglia (col mouse compare al passaggio) e menu ⋯ a destra, titolo, scadenza e persona. Scadenza leggibile da icona e parola: scaduto (rosso, orologio urgente), oggi (giallo), poi neutro. Durante il trascinamento al posto della card resta un segnaposto tratteggiato; la copia sollevata si alza di poco e si inclina di 1°.
Card · segnaposto durante il trascinamento · copia sollevata
- ProduzioneScadenza: Scaduto da 3 giorni
- CommunityScadenza: 15 nov
- ProduzioneScadenza: Scaduto da 3 giorni
- ProduzioneScadenza: 10 nov
Scadenze (rispetto a mercoledì 11 novembre)
- ScadutoScadenza: Scaduto da 3 giorni
- IeriScadenza: Scaduto ieri
- OggiScadenza: Oggi
- DomaniScadenza: Domani
- Più avantiScadenza: 20 nov
- Task fattoScadenza: 8 nov
Persona (Avatar)
Titolo pixel
Regola delle Panoramiche di modulo: titolo in Hundreded Grotesk maiuscolo con DUE lettere nel glifo pixelato (feature OpenType cvNN), una per metà parola. Componente ModuleTitle; lettere per modulo in MODULE_PIXEL_LETTERS. I sottomoduli (es. Task) restano in Helvetica, senza pixel. Per togliere i pixel ovunque: PIXEL_MODULE_TITLES = false in components/ui/module-title.tsx.
DASHBOARD (S + O, in uso) · FINANCE, PRODUZIONE, COMMUNITY (proposte, non ancora in uso)