workbuddy_skills/open-design/design-systems/stripe/DESIGN-it.md

Design System Inspired by Stripe

Category: Fintech & Cripto Infrastruttura di pagamento. Gradienti viola caratteristici, eleganza con peso 300.

1. Tema Visivo e Atmosfera

Il sito web di Stripe è il punto di riferimento nel design fintech — un sistema che riesce a sembrare allo stesso tempo tecnico e lussuoso, preciso e caldo. La pagina si apre su una tela bianca pulita (#ffffff) con intestazioni blu navy profondi (#061b31) e un viola caratteristico (#533afd) che funge sia da ancoraggio del brand sia da accento interattivo. Non è il viola freddo e clinico del software enterprise; è un violetto ricco e saturo che trasmette sicurezza e qualità premium. L'impressione complessiva è quella di un istituto finanziario ridisegnato da una fonderia tipografica di livello mondiale.

Il font variabile personalizzato sohne-var è l'elemento distintivo dell'identità visiva di Stripe. Ogni elemento testuale abilita il set stilistico OpenType "ss01", che modifica le forme dei caratteri per un aspetto decisamente geometrico e moderno. Alle dimensioni display (48px–56px), sohne-var viene usato con peso 300 — un peso straordinariamente leggero per i titoli, che crea un'autorevolezza eterea, quasi sussurrata. È l'opposto della convenzione "titolo hero in grassetto"; i titoli di Stripe sembrano non aver bisogno di urlare. La spaziatura negativa tra le lettere (-1,4px a 56px, -0,96px a 48px) comprime il testo in blocchi densi e ingegnerizzati. Alle dimensioni più piccole, il sistema usa anch'esso peso 300 con tracking proporzionalmente ridotto, e numerali tabulari tramite "tnum" per la visualizzazione di dati finanziari.

Ciò che distingue davvero Stripe è il suo sistema di ombre. Anziché l'approccio piatto o a singolo strato della maggior parte dei siti, Stripe usa ombre multistrato con tonalità blu: la caratteristica rgba(50,50,93,0.25) combinata con rgba(0,0,0,0.1) crea ombre con una profondità fresca, quasi atmosferica — come se gli elementi fluttuassero in un cielo al crepuscolo. La sfumatura blu-grigia del colore d'ombra primario (50,50,93) è direttamente collegata alla palette navy-viola del brand, rendendo persino l'elevazione coerente con il marchio.

Caratteristiche Principali:

• sohne-var con OpenType "ss01" su tutti i testi — un set stilistico personalizzato che definisce le lettere del brand
• Peso 300 come peso caratteristico dei titoli — leggero, sicuro, anticonvenzionale
• Spaziatura negativa tra le lettere alle dimensioni display (-1,4px a 56px, rilassamento progressivo verso il basso)
• Ombre multistrato con tonalità blu usando rgba(50,50,93,0.25) — elevazione che sembra colorata dal brand
• Intestazioni blu navy profondo (#061b31) invece del nero — caldo, premium, di livello finanziario
• Border-radius conservativo (4px–8px) — niente a pillola, niente di brusco
• Accenti rubino (#ea2261) e magenta (#f96bee) per elementi di gradiente e decorativi
• SourceCodePro come font monospazio complementare per codice ed etichette tecniche

2. Palette Colori e Ruoli

Primari

• Viola Stripe (#533afd): Colore brand primario, sfondi CTA, testo link, highlight interattivi. Un blu-violetto saturo che fa da ancoraggio all'intero sistema.
• Blu Navy Profondo (#061b31): --hds-color-heading-solid. Colore primario delle intestazioni. Non nero, non grigio — un blu molto scuro che aggiunge calore e profondità al testo.
• Bianco Puro (#ffffff): Sfondo pagina, superfici delle card, testo dei pulsanti su sfondi scuri.

Brand e Scuro

• Brand Scuro (#1c1e54): --hds-color-util-brand-900. Indaco profondo per sezioni scure, sfondi footer e momenti di immersione nel brand.
• Navy Scuro (#0d253d): --hds-color-core-neutral-975. Il neutro più scuro — quasi nero con una sfumatura blu per la massima profondità senza durezza.

Colori Accento

• Rubino (#ea2261): --hds-color-accentColorMode-ruby-icon-solid. Rosa-rosso caldo per icone, avvisi ed elementi accento.
• Magenta (#f96bee): --hds-color-accentColorMode-magenta-icon-gradientMiddle. Rosa-viola vivace per gradienti e highlight decorativi.
• Magenta Chiaro (#ffd7ef): --hds-color-util-accent-magenta-100. Superficie tinta per card e badge a tema magenta.

Interattivi

• Viola Primario (#533afd): Colore link primario, stati attivi, elementi selezionati.
• Viola Hover (#4434d4): Viola più scuro per gli stati hover degli elementi primari.
• Viola Profondo (#2e2b8c): --hds-color-button-ui-iconHover. Viola scuro per gli stati hover delle icone.
• Viola Chiaro (#b9b9f9): --hds-color-action-bg-subduedHover. Lavanda tenue per sfondi hover attenuati.
• Viola Medio (#665efd): --hds-color-input-selector-text-range. Colore del selettore range e highlight degli input.

Scala Neutri

• Intestazione (#061b31): Intestazioni principali, testo nav, etichette in evidenza.
• Etichetta (#273951): --hds-color-input-text-label. Etichette form, intestazioni secondarie.
• Corpo (#64748d): Testo secondario, descrizioni, didascalie.
• Verde Successo (#15be53): Badge di stato, indicatori di successo (con alpha 0,2–0,4 per sfondi/bordi).
• Testo Successo (#108c3d): Colore del testo dei badge di successo.
• Limone (#9b6829): --hds-color-core-lemon-500. Accento di avviso e highlight.

Superfici e Bordi

• Bordo Predefinito (#e5edf5): Colore bordo standard per card, divisori e contenitori.
• Bordo Viola (#b9b9f9): Bordi degli stati attivi/selezionati su pulsanti e input.
• Bordo Viola Tenue (#d6d9fc): Bordi con sfumatura viola tenue per elementi secondari.
• Bordo Magenta (#ffd7ef): Bordi con sfumatura rosa per elementi a tema magenta.
• Bordo Tratteggiato (#362baa): Bordi tratteggiati per zone di rilascio ed elementi segnaposto.

Colori Ombra

• Ombra Blu (rgba(50,50,93,0.25)): Il caratteristico — colore d'ombra primario con sfumatura blu.
• Ombra Blu Scuro (rgba(3,3,39,0.25)): Ombra blu più profonda per elementi elevati.
• Ombra Nera (rgba(0,0,0,0.1)): Strato d'ombra secondario per il rinforzo della profondità.
• Ombra Ambiente (rgba(23,23,23,0.08)): Ombra ambiente tenue per un'elevazione sottile.
• Ombra Morbida (rgba(23,23,23,0.06)): Ombra ambiente minima per un sollevamento leggero.

3. Regole Tipografiche

Famiglia di Font

• Primario: sohne-var, con fallback: SF Pro Display
• Monospazio: SourceCodePro, con fallback: SFMono-Regular
• Funzionalità OpenType: "ss01" abilitato globalmente su tutto il testo sohne-var; "tnum" per numeri tabulari su dati finanziari e didascalie.

Gerarchia

Ruolo	Font	Dimensione	Peso	Altezza Riga	Spaziatura Lettere	Funzionalità	Note
Display Hero	sohne-var	56px (3.50rem)	300	1.03 (stretto)	-1.4px	ss01	Dimensione massima, autorevolezza sussurrata
Display Grande	sohne-var	48px (3.00rem)	300	1.15 (stretto)	-0.96px	ss01	Titoli hero secondari
Intestazione Sezione	sohne-var	32px (2.00rem)	300	1.10 (stretto)	-0.64px	ss01	Titoli di sezione delle funzionalità
Sottotitolo Grande	sohne-var	26px (1.63rem)	300	1.12 (stretto)	-0.26px	ss01	Intestazioni card, sottosezioni
Sottotitolo	sohne-var	22px (1.38rem)	300	1.10 (stretto)	-0.22px	ss01	Intestazioni sezione più piccole
Corpo Grande	sohne-var	18px (1.13rem)	300	1.40	normale	ss01	Descrizioni funzionalità, testo introduttivo
Corpo	sohne-var	16px (1.00rem)	300-400	1.40	normale	ss01	Testo di lettura standard
Pulsante	sohne-var	16px (1.00rem)	400	1.00 (stretto)	normale	ss01	Testo pulsante primario
Pulsante Piccolo	sohne-var	14px (0.88rem)	400	1.00 (stretto)	normale	ss01	Pulsanti secondari/compatti
Link	sohne-var	14px (0.88rem)	400	1.00 (stretto)	normale	ss01	Link di navigazione
Didascalia	sohne-var	13px (0.81rem)	400	normale	normale	ss01	Etichette piccole, metadati
Didascalia Piccola	sohne-var	12px (0.75rem)	300-400	1.33-1.45	normale	ss01	Caratteri fini, timestamp
Didascalia Tabulare	sohne-var	12px (0.75rem)	300-400	1.33	-0.36px	tnum	Dati finanziari, numeri
Micro	sohne-var	10px (0.63rem)	300	1.15 (stretto)	0.1px	ss01	Etichette minuscole, marcatori asse
Micro Tabulare	sohne-var	10px (0.63rem)	300	1.15 (stretto)	-0.3px	tnum	Dati grafico, numeri piccoli
Nano	sohne-var	8px (0.50rem)	300	1.07 (stretto)	normale	ss01	Etichette più piccole
Corpo Codice	SourceCodePro	12px (0.75rem)	500	2.00 (rilassato)	normale	--	Blocchi di codice, sintassi
Codice Grassetto	SourceCodePro	12px (0.75rem)	700	2.00 (rilassato)	normale	--	Codice in grassetto, parole chiave
Etichetta Codice	SourceCodePro	12px (0.75rem)	500	2.00 (rilassato)	normale	maiuscolo	Etichette tecniche
Codice Micro	SourceCodePro	9px (0.56rem)	500	1.00 (stretto)	normale	ss01	Annotazioni codice minuscole

Principi

• Il peso leggero come firma: Il peso 300 alle dimensioni display è la scelta tipografica più distintiva di Stripe. Dove altri usano 600–700 per attirare l'attenzione, Stripe usa la leggerezza come lusso — il testo è così sicuro di sé da non aver bisogno del peso per essere autorevole.
• ss01 ovunque: Il set stilistico "ss01" è irrinunciabile. Modifica glifi specifici (probabilmente forme alternate di a, g, l) per creare un aspetto più geometrico e contemporaneo su tutto il testo sohne-var.
• Due modalità OpenType: "ss01" per il testo display/corpo, "tnum" per i numerali tabulari nei dati finanziari. Non si sovrappongono mai — un numero in un paragrafo usa ss01, un numero in una tabella dati usa tnum.
• Tracking progressivo: La spaziatura tra le lettere si stringe proporzionalmente con la dimensione: -1,4px a 56px, -0,96px a 48px, -0,64px a 32px, -0,26px a 26px, normale a 16px e sotto.
• Semplicità a due pesi: Principalmente 300 (corpo e intestazioni) e 400 (UI/pulsanti). Nessun grassetto (700) nel font primario — SourceCodePro usa 500/700 per il contrasto nel codice.

4. Stili dei Componenti

Pulsanti

Viola Primario

• Sfondo: #533afd
• Testo: #ffffff
• Padding: 8px 16px
• Radius: 4px
• Font: 16px sohne-var peso 400, "ss01"
• Hover: sfondo #4434d4
• Uso: CTA primario ("Inizia ora", "Contatta le vendite")

Ghost / Delineato

• Sfondo: trasparente
• Testo: #533afd
• Padding: 8px 16px
• Radius: 4px
• Bordo: 1px solid #b9b9f9
• Font: 16px sohne-var peso 400, "ss01"
• Hover: lo sfondo passa a rgba(83,58,253,0.05)
• Uso: Azioni secondarie

Info Trasparente

• Sfondo: trasparente
• Testo: #2874ad
• Padding: 8px 16px
• Radius: 4px
• Bordo: 1px solid rgba(43,145,223,0.2)
• Uso: Azioni terziarie/di livello informativo

Ghost Neutro

• Sfondo: trasparente (rgba(255,255,255,0))
• Testo: rgba(16,16,16,0.3)
• Padding: 8px 16px
• Radius: 4px
• Contorno: 1px solid rgb(212,222,233)
• Uso: Azioni disabilitate o attenuate

Card e Contenitori

• Sfondo: #ffffff
• Bordo: 1px solid #e5edf5 (standard) o 1px solid #061b31 (accento scuro)
• Radius: 4px (stretto), 5px (standard), 6px (comodo), 8px (in evidenza)
• Ombra (standard): rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px
• Ombra (ambiente): rgba(23,23,23,0.08) 0px 15px 35px 0px
• Hover: l'ombra si intensifica, aggiungendo spesso lo strato con tonalità blu

Badge / Tag / Pillole

Pillola Neutra

• Sfondo: #ffffff
• Testo: #000000
• Padding: 0px 6px
• Radius: 4px
• Bordo: 1px solid #f6f9fc
• Font: 11px peso 400

Badge Successo

• Sfondo: rgba(21,190,83,0.2)
• Testo: #108c3d
• Padding: 1px 6px
• Radius: 4px
• Bordo: 1px solid rgba(21,190,83,0.4)
• Font: 10px peso 300

Input e Form

• Bordo: 1px solid #e5edf5
• Radius: 4px
• Focus: 1px solid #533afd o anello viola
• Etichetta: #273951, 14px sohne-var
• Testo: #061b31
• Segnaposto: #64748d

Navigazione

• Navigazione orizzontale pulita su bianco, sticky con sfondo sfocato
• Logotipo del brand allineato a sinistra
• Link: sohne-var 14px peso 400, testo #061b31 con "ss01"
• Radius: 6px sul contenitore nav
• CTA: pulsante viola allineato a destra ("Accedi", "Inizia ora")
• Mobile: toggle hamburger con radius 6px

Elementi Decorativi

Bordi Tratteggiati

• 1px dashed #362baa (viola) per zone segnaposto/di rilascio
• 1px dashed #ffd7ef (magenta) per bordi decorativi a tema magenta

Accenti Gradiente

• Gradienti da rubino a magenta (#ea2261 a #f96bee) per decorazioni hero
• Le sezioni brand scure usano sfondi #1c1e54 con testo bianco

5. Principi di Layout

Sistema di Spaziatura

• Unità base: 8px
• Scala: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px
• Notevole: la scala è densa nell'estremità piccola (ogni 2px da 4 a 12), riflettendo l'UI orientata alla precisione di Stripe per i dati finanziari

Griglia e Contenitore

• Larghezza massima del contenuto: circa 1080px
• Hero: colonna singola centrata con padding generoso, titoli leggeri
• Sezioni funzionalità: griglie a 2–3 colonne per le card delle funzionalità
• Sezioni scure a larghezza piena con sfondo #1c1e54 per l'immersione nel brand
• Anteprime di codice/dashboard come card contenute con ombre a tonalità blu

Filosofia degli Spazi Bianchi

• Spaziatura di precisione: A differenza della vastità vuota dei sistemi minimalisti, Stripe usa uno spazio bianco misurato e intenzionale. Ogni gap è una scelta tipografica deliberata.
• Dati densi, chrome generoso: Le visualizzazioni di dati finanziari (tabelle, grafici) sono confezionate strettamente, ma il chrome dell'interfaccia intorno a esse è spaziato generosamente. Questo crea una sensazione di densità controllata — come un foglio di calcolo ben organizzato in una bella cornice.
• Ritmo delle sezioni: Le sezioni bianche si alternano a sezioni brand scure (#1c1e54), creando una cadenza drammatica chiaro/scuro che previene la monotonia senza introdurre colori arbitrari.

Scala del Border-Radius

• Micro (1px): Elementi a grana fine, arrotondamento sottile
• Standard (4px): Pulsanti, input, badge, card — il cavallo di battaglia
• Comodo (5px): Contenitori card standard
• Rilassato (6px): Navigazione, elementi interattivi più grandi
• Grande (8px): Card in evidenza, elementi hero
• Composto: 0px 0px 6px 6px per contenitori arrotondati in basso (pannelli tab, piè di pagina dropdown)

6. Profondità ed Elevazione

Livello	Trattamento	Uso
Piatto (Livello 0)	Nessuna ombra	Sfondo pagina, testo inline
Ambiente (Livello 1)	rgba(23,23,23,0.06) 0px 3px 6px	Sollevamento sottile delle card, suggerimenti hover
Standard (Livello 2)	rgba(23,23,23,0.08) 0px 15px 35px	Card standard, pannelli di contenuto
Elevato (Livello 3)	rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px	Card in evidenza, dropdown, popover
Profondo (Livello 4)	rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px	Modali, pannelli fluttuanti
Anello (Accessibilità)	contorno 2px solid #533afd	Anello di focus da tastiera

Filosofia delle Ombre: Il sistema di ombre di Stripe è costruito su un principio di profondità cromatica. Dove la maggior parte dei sistemi di design usa ombre grigio neutro o nero, il colore d'ombra primario di Stripe (rgba(50,50,93,0.25)) è un blu-grigio profondo che riecheggia la palette navy del brand. Questo crea ombre che non aggiungono solo profondità — aggiungono atmosfera al brand. L'approccio multistrato abbina questa ombra con tonalità blu a uno strato secondario nero puro (rgba(0,0,0,0.1)) con un offset diverso, creando una profondità simile al parallasse dove l'ombra brandizzata è più lontana dall'elemento e l'ombra neutra è più vicina. I valori di spread negativi (-30px, -18px) assicurano che le ombre non si estendano oltre l'impronta dell'elemento in orizzontale, mantenendo l'elevazione verticale e controllata.

Profondità Decorativa

• Le sezioni brand scure (#1c1e54) creano profondità immersiva attraverso il contrasto del colore di sfondo
• Sovrapposizioni di gradiente con transizioni da rubino a magenta per decorazioni hero
• Colore ombra rgba(0,55,112,0.08) (--hds-color-shadow-sm-top) per ombre sul bordo superiore degli elementi sticky

7. Da Fare e Da Evitare

Da Fare

• Usa sohne-var con "ss01" su ogni elemento di testo — il set stilistico È il brand
• Usa il peso 300 per tutti i titoli e il testo corpo — la leggerezza è la firma
• Applica ombre con tonalità blu (rgba(50,50,93,0.25)) per tutti gli elementi elevati
• Usa #061b31 (blu navy profondo) per le intestazioni invece di #000000 — il calore conta
• Mantieni il border-radius tra 4px e 8px — l'arrotondamento conservativo è intenzionale
• Usa "tnum" per qualsiasi visualizzazione di numeri tabulari/finanziari
• Stratifica le ombre: blu con tonalità lontano + neutro vicino per la profondità parallasse
• Usa il viola #533afd come colore interattivo/CTA primario

Da Evitare

• Non usare il peso 600–700 per i titoli sohne-var — il peso 300 è la voce del brand
• Non usare border-radius grandi (12px+, forme a pillola) su card o pulsanti — Stripe è conservativo
• Non usare ombre grigio neutro — usa sempre la tonalità blu (rgba(50,50,93,...))
• Non saltare "ss01" su nessun testo sohne-var — i glifi alternativi definiscono la personalità
• Non usare il nero puro (#000000) per le intestazioni — usa sempre #061b31 blu navy profondo
• Non usare colori accento caldi (arancione, giallo) per gli elementi interattivi — il viola è primario
• Non applicare spaziatura positiva tra le lettere alle dimensioni display — Stripe usa il tracking stretto
• Non usare gli accenti magenta/rubino per pulsanti o link — sono solo decorativi/per gradienti

8. Comportamento Responsivo

Breakpoint

Nome	Larghezza	Modifiche Principali
Mobile	<640px	Colonna singola, dimensioni titoli ridotte, card impilate
Tablet	640-1024px	Griglie a 2 colonne, padding moderato
Desktop	1024-1280px	Layout completo, griglie funzionalità a 3 colonne
Desktop Grande	>1280px	Contenuto centrato con margini generosi

Target di Tocco

• I pulsanti usano padding comodo (8px–16px verticale)
• Link di navigazione a 14px con spaziatura adeguata
• I badge hanno un padding orizzontale minimo di 6px per le aree di tocco
• Toggle nav mobile con pulsante a radius 6px

Strategia di Collasso

• Hero: display da 56px -> 32px su mobile, peso 300 mantenuto
• Navigazione: link orizzontali + CTA -> toggle hamburger
• Card funzionalità: 3 colonne -> 2 colonne -> colonna singola impilata
• Sezioni brand scure: mantengono il trattamento a larghezza piena, riducono il padding interno
• Tabelle dati finanziari: scorrimento orizzontale su mobile
• Spaziatura delle sezioni: 64px+ -> 40px su mobile
• La scala tipografica si comprime: da 56px -> 48px -> 32px nelle dimensioni hero tra i breakpoint

Comportamento delle Immagini

• Screenshot dashboard/prodotto mantengono l'ombra con tonalità blu a tutte le dimensioni
• Le decorazioni gradiente hero si semplificano su mobile
• I blocchi di codice mantengono il trattamento SourceCodePro, possono scorrere orizzontalmente
• Le immagini delle card mantengono un border-radius costante di 4px–6px

9. Guida ai Prompt per Agenti

Riferimento Rapido Colori

• CTA primario: Viola Stripe (#533afd)
• Hover CTA: Viola Scuro (#4434d4)
• Sfondo: Bianco Puro (#ffffff)
• Testo intestazione: Blu Navy Profondo (#061b31)
• Testo corpo: Ardesia (#64748d)
• Testo etichetta: Ardesia Scuro (#273951)
• Bordo: Blu Tenue (#e5edf5)
• Link: Viola Stripe (#533afd)
• Sezione scura: Brand Scuro (#1c1e54)
• Successo: Verde (#15be53)
• Accento decorativo: Rubino (#ea2261), Magenta (#f96bee)

Esempi di Prompt per Componenti

• "Crea una sezione hero su sfondo bianco. Titolo a 48px sohne-var peso 300, line-height 1.15, letter-spacing -0.96px, colore #061b31, font-feature-settings 'ss01'. Sottotitolo a 18px peso 300, line-height 1.40, colore #64748d. Pulsante CTA viola (#533afd, radius 4px, padding 8px 16px, testo bianco) e pulsante ghost (trasparente, 1px solid #b9b9f9, testo #533afd, radius 4px)."
• "Progetta una card: sfondo bianco, bordo 1px solid #e5edf5, radius 6px. Ombra: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. Titolo a 22px sohne-var peso 300, letter-spacing -0.22px, colore #061b31, 'ss01'. Corpo a 16px peso 300, #64748d."
• "Costruisci un badge successo: sfondo rgba(21,190,83,0.2), testo #108c3d, radius 4px, padding 1px 6px, 10px sohne-var peso 300, bordo 1px solid rgba(21,190,83,0.4)."
• "Crea la navigazione: header bianco sticky con backdrop-filter blur(12px). sohne-var 14px peso 400 per i link, testo #061b31, 'ss01'. CTA viola 'Inizia ora' allineato a destra (sfondo #533afd, testo bianco, radius 4px). Contenitore nav radius 6px."
• "Progetta una sezione brand scura: sfondo #1c1e54, testo bianco. Titolo 32px sohne-var peso 300, letter-spacing -0.64px, 'ss01'. Corpo 16px peso 300, rgba(255,255,255,0.7). Le card interne usano bordo rgba(255,255,255,0.1) con radius 6px."

Guida all'Iterazione

1. Abilita sempre font-feature-settings: "ss01" sul testo sohne-var — questo è il DNA tipografico del brand
2. Il peso 300 è il predefinito; usa 400 solo per pulsanti/link/navigazione
3. Formula ombra: rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2 dove Y1/B1 sono più grandi (ombra lontana) e Y2/B2 sono più piccoli (ombra vicina)
4. Il colore dell'intestazione è #061b31 (blu navy profondo), il corpo è #64748d (ardesia), le etichette sono #273951 (ardesia scuro)
5. Il border-radius rimane nell'intervallo 4px–8px — non usare mai forme a pillola o arrotondamenti grandi
6. Usa "tnum" per qualsiasi numero in tabelle, grafici o visualizzazioni finanziarie
7. Le sezioni scure usano #1c1e54 — non nero, non grigio, ma un indaco profondo del brand
8. SourceCodePro per il codice a 12px/500 con line-height 2.00 (molto generoso per la leggibilità)