Design system | Renato Decarolis

01 · Palette

Quattro famiglie, ognuna con un compito.

Ogni coppia testo/sfondo usata nel sito rispetta il rapporto di contrasto WCAG 2.2 AA. I valori vivono in _tokens.scss e diventano variabili Bootstrap e custom properties --rd-*.

Cravatta: brand e candela ribassista

Tie5.2:1 ⬜

#D3261B
$tie · primary
CTA, accenti, candele ribassiste

Tie 7007.0:1 ⬜

#AE1D14
$tie-700 · danger
Link e testo rosso su carta (6.3:1)

Tie 3006.6:1 ⬛

#FF6B5E
$tie-300
Testo rosso su fondo scuro

Bull: candela rialzista, conferme

Bull6.2:1 ⬛

#13A97E
$bull
Candele rialziste, testo su scuro

Bull 7006.1:1 ⬜

#0A7050
$bull-700 · success
Testo verde su carta (5.4:1)

Bull 30010.5:1 ⬛

#3DDBA8
$bull-300
Evidenze su fondo scuro

Ink: superfici scure e testo

950

#070B14
$ink-950
Header, hero, footer

90016.5:1

#0C1322
$ink-900 · dark
Testo su carta, sezioni scure

800

#152038
$ink-800
Card su scuro, input scuri

700

#24324D
$ink-700 · secondary
Hover scuri, bordi forti

5005.2:1

#56657F
$ink-500
Testo secondario su carta

400

#7F8CA3
$ink-400
Etichette su scuro (5.5:1)

300

#A9B3C5
$ink-300
Testo secondario su scuro (8.8:1)

100

#E3E7EE
$ink-100
Testo su scuro (15:1)

Carta e oro

Paper

#F5F1EA
$paper · body-bg
Sfondo di lettura

Paper 2

#EAE4D9
$paper-2
Sezioni alternate

Gold8.5:1 ⬛

#D9A84A
$gold · warning
Solo premi e focus su scuro

Gold 700

#825E14
$gold-700
Testo oro su carta (4.7:1+)

02 · Tipografia

Un quotidiano su un terminale.

Archivo (asse di larghezza 62–125) per titoli espansi e testo. Instrument Serif corsivo per la voce umana. JetBrains Mono per dati ed etichette. Scala in rem, fluida con clamp().

.display-xl · clamp(3rem → 9.5rem) · 850 · stretch 118%

Trend.

.display-2 · clamp(2.75rem → 6rem)

Meno rumore. Più trend.

h2 · 2.625rem · 800 · stretch 112%

Inversione, conferma, evoluzione

h4 · 1.375rem

Due appuntamenti in diretta

.lead · clamp(1.125rem → 1.3125rem)

Cinque giornate di formazione operativa in diretta, mentre i mercati sono aperti.

body · 1.0625rem / 1.6

Le candele Heikin Ashi calcolano ogni candela usando anche la precedente: i movimenti di fondo emergono come sequenze dello stesso colore.

.pull-quote · Instrument Serif

Semplificare al massimo tutto.

.eyebrow · .mono-label · JetBrains Mono

Live · ogni giorno

26 → 30 ottobre 2026

03 · Spaziatura e griglia

Scala Bootstrap estesa, tutta in rem.

Spacer da 0 a 8 (fino a 8rem) per il ritmo editoriale. Breakpoint in rem (36 / 48 / 62 / 75 / 90rem) così layout e zoom del testo restano coerenti. Container max 82.5rem, gutter 1.5rem. Sezioni: clamp(4.5rem, 3rem + 6vw, 9rem).

10.25rem

20.5rem

31rem

41.5rem

53rem

64.5rem

76rem

88rem

04 · Componenti

Pulsanti, card, badge, moduli.

Primario Ink Linea Esterno Link animato

Live Corso Gratis Paper Rialzista Ribassista

Card · white · offer

Titolo card

Bordo sottile al posto delle ombre; barra-candela in alto.

Card · featured

In evidenza

Una sola per sezione.

Card · ink

Su scuro

Per moduli e riepiloghi.

05 · Movimento

Un solo gesto memorabile: la lente Heikin Ashi.

Il resto del movimento è al servizio della lettura: titoli che emergono da una linea di base, card che salgono di 1.5rem, sottolineature che scorrono. Transizioni solo su transform e opacity. Con prefers-reduced-motion tutto si ferma su un fotogramma significativo.

--rd-ease-outcubic-bezier(.16, 1, .3, 1)
--rd-dur-fast160ms
--rd-dur-base320ms
--rd-dur-slow700ms
Focus0.1875rem rosso su carta · oro su scuro

Trading floor,after hours.