- Home
- Catalogo
- Academy
- Magazine
- Corporate
Container Max-Width: 1170px
(Breakpoints: Desktop 1440 - Tablet 1440/1280 - Mobile 768/420)
Background: #F1F3F5
(riduce l'abbagliamento)
Text (primary): #1a1a1a
(h1, p)
Text (secondary): #4d4d4d
(grigio antracite per contrasto morbido)
H1
(size: 2.5rem - height: 3.75rem - weight 800 - spacing: -0.01rem)
H2
(size: 2rem - height: 3rem - weight 800 - spacing: 0rem)
H3
(size: 2.5rem - height: 3.75rem - weight 800 - spacing: 0.01rem)
H4
(size: 1.25rem - height: 1.875rem - weight 600 - spacing: 0.01rem)
H5
(size: 1.125rem - height: 1.687rem - weight 600 - spacing: 0.02rem)
H6
(size: 1rem - height: 1.5rem - weight 600 - spacing: 0.03rem)
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
p
(size: 1.125rem - height: 1.912rem - weight 400 - spacing: 0.02rem)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
link
(#58509b - text-underline-offset: 0.3125rem)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
link hover/active
(#e6007e)
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
caption
(size: 0.875rem - height: 1.312rem - weight 400 - spacing: 0.03rem)
caption
(size: 0.875rem - height: 1.312rem - weight 500 (Medium)- spacing: 0.03rem)
BUTTON PROPOSTA 1: Magenta
TEXT > size: 1rem - height: 1.5rem - weight 600 - spacing: 0.05rem
BUTTON > padding: 1rem e 2rem - margin: 2.5rem - border radius: 3.125rem - border width: 0.125rem
| Tipo | Stato | Background | Bordo (2px) | Testo | Contrasto Reale | Stato WCAG |
|---|---|---|---|---|---|---|
| Primary | Default | #D10074 | #9E0058 | #FFFFFF | 5.16:1 | AA |
| Hover | #A9005E | #7D0046 | #FFFFFF | 7.06:1 | AAA | |
| Active | #8F0050 | #9E0058 | #FFFFFF | 8.86:1 | AAA | |
| Secondary | Default | #F1F3F5 | #CB0070 | #CB0070 | 4.51:1 | AA |
| Hover | #FDEEF6 | #B00062 | #B00062 | 5.08:1 | AA | |
| Active | #F0CCE0 | #8F0050 | #8F0050 | 5.45:1 | AA |
BUTTON Viola
TEXT > size: 1rem - height: 1.5rem - weight 600 - spacing: 0.05rem
BUTTON > padding: 1rem e 2rem - margin: 2.5rem - border radius: 3.125rem - border width: 0.125rem
| Tipo | Stato | Background | Bordo (2px) | Testo | Contrasto Reale | Stato WCAG |
|---|---|---|---|---|---|---|
| Primary | Default | #3E3B92 | #3F3970 | #FFFFFF | 7.38:1 | AAA |
| Hover | #2D2A6B | #3F3970 | #FFFFFF | 10.46:1 | AAA | |
| Active | #1D1B4B | #1A1840 | #FFFFFF | 14.32:1 | AAA | |
| Secondary | Default | #F1F3F5 | #3E3B92 | #3E3B92 | 7.09:1 | AAA |
| Hover | #E1E1F5 | #2D2A6B | #2D2A6B | 9.49:1 | AAA | |
| Active | #D1D0EA | #1A1840 | #1A1840 | 12.28:1 | AAA |
| Caratteristica | Viola | Magenta |
| Emozione | Calma, Fiducia, Qualità | Creatività, Energia, Gioia |
| Effetto Neuro | Molto riposante | Stimolante |
| Accessibilità | Ottima | Buona |
Dal confronto il viola risulta essere la scelta più sicura per i lettori neurodivergenti perché riduce l'affaticamento visivo rispetto ai colori caldi mantenendo l'integrazione nativa con il logo.
FOCUS RING solo da tastiera
(color: #D46F00 arancione più scuro - spessore: 0.188rem - offset: 0.188rem - stile: solid)
MENU'
(size: 1.25rem - height: 1.6rem - weight 600- spacing: 0.02rem - Color: text secondary #4D4D4D - Color hover/active: #CE0084 - margin voce menu left/right: 1.6rem - padding-bottom per distanza sottolineatura: 0.25rem - bordo inferiore voce menù hover/active: 0.1875rem dotted)