ABAFG — Design System

01 — Color tokens

Palette e token cromatici

Brand tokens

brand.500
#8E0413
BASE

brand.700
#5F030D
dark

brand.900
#1C0104
darkest

brand.300
#B45862
light

brand.100
#E8CDD0
tint

highlights — #CF2622 — label-new, alert states

Neutral tokens

neutral.900
#1A1A1A
nav, btn

neutral.800
#404040
text primary

neutral.700
#666666
text second.

neutral.300
#D8D8D4
border

neutral.05
#F3F4F6
bg card

neutral.0
#FFFFFF
bg page

Semantic color tokens

brand.500
#8E0413 — primary brand color

highlights
#CF2622 — label-new, alerts

neutral.900
#1A1A1A — navbar, buttons

neutral.800
#404040 — primary text

neutral.700
#666666 — secondary text

neutral.300
#D8D8D4 — borders, dividers

neutral.05
#F3F4F6 — card background

neutral.0
#FFFFFF — page background

02 — Typography tokens

Sistema tipografico e scale

Editorial / display

IBM Plex Serif

font-weight: 700
token: editorial.display, editorial.banner,
editorial.small.title
letter-spacing: −1.1px / −2px

UI / body / nav

Inter

font-weight: 400 / 600 / 700
token: ui.nav, ui.body, ui.nav.small,
ui.link.inline, ui.nav.link.small, ui.new, ui.nav.new

Mono / metadata / token

IBM Plex Mono

font-weight: 400 / 700
token: — (nessun token dedicato)
uso: label, caption, specifiche tecniche

Specimen	Token	Properties	Usage
Display Hero	editorial.display	IBM Plex Serif Bold 48px / lh 100 / ls −1.1px	Hero slider, main banner
Kicker XL	editorial.kickerXL	Inter Bold 32px / lh 100 / ls −1.1px	Heading on brand.500 background
Section kicker	editorial.kicker	Inter Bold 24px / lh 24 / ls 0	Section heading (News, Bacheca…)
Category banner	editorial.banner	IBM Plex Serif Bold 24px / lh 24 / ls −0.264px	Category label component
News card title	editorial.small.title	IBM Plex Serif Bold 18px / lh 100 / ls −0.198px	modulo-news title, card heading
Navigation link	ui.nav	Inter Regular 16px / lh 100 / ls 0	Navbar, megamenu, btn-primary label
Interface body text	ui.body	Inter Regular 16px / lh Auto / ls 0	Body text, descriptions, paragraphs
Secondary nav, dates	ui.nav.small	Inter Regular 14px / lh 150 / ls −0.154px	Dates, read-more links, footer nav
Link inline	ui.link.inline	Inter Regular 16px / lh 100 / ls 0	Link testuale in corpo di testo
Nav link small	ui.nav.link.small	Inter Regular 14px / lh 150 / ls 0	Link secondario, breadcrumb
NEW	ui.new	Inter SemiBold 12px / lh 150 / ls 0	Badge NEW — bg: highlights
Nav new	ui.nav.new	Inter Regular 12px / lh Auto / ls 0	Link di navigazione ridotto

03 — Components

Componenti UI

btn-primary

Accesso Studenti

Leggi tutte le news

background: neutral.900 — border-radius: 0
font-family: IBM Plex Sans — font-weight: 400
font-size: 16px — letter-spacing: −0.176px
padding: 8px 16px — height: 44px — token: ui.nav

link-nav / ui.nav

Accademia Studiare Ricerca Docenti Studenti Segreteria

font-family: IBM Plex Sans — font-weight: 400
font-size: 16px — line-height: 1 — token: ui.nav
color: neutral.900 — height: 28px — padding: 8px
text-decoration: none — border-radius: 0

category label / editorial.banner

Workshop

Studenti

Bacheca

background: brand.500 — border-radius: 0
font-family: IBM Plex Serif — font-weight: 700
font-size: 24px — letter-spacing: −0.264px — token: editorial.banner
padding: 14px 32px — height: 52px

label-new / ui.new

Titolo news NEW

NEW NEW NEW

background: highlights — border-radius: 0
font-family: IBM Plex Sans — font-weight: 600
font-size: 12px — line-height: 1.5 — token: ui.new
width: 44px — height: 16px — NB: non brand.500

Component: modulo-news

NEW

Spostamento lezioni Digital Video prof. Scacchioli

Si comunica che martedì 21 ottobre 2025 le segreterie didattiche non effettueranno più sportello zoom a partire dal 21/12/2025

NEW

Manifesto degli studi 2025/2026

Scopri orari, corsi e tutte le informazioni per organizzare al meglio il tuo percorso accademico.

NEW

Apertura prenotazioni esami autunnali

Sono aperte le prenotazioni per gli esami della sessione invernale. Registrati entro la scadenza indicata nel portale.

background: neutral.05 — width: 308px — height: 238px — padding: 16px
gap (outer): 24px (base-8) — gap (content): 12px — gap (body): 8px
title: editorial.small.title — body: ui.body — footer: ui.nav.small / neutral.700

04 — Spacing & Layout

Scala di spaziatura e griglia

8px
xs

16px
sm

24px
md

32px
lg

40px
xl

48px
2xl

64px
3xl

80px
4xl

96px
5xl

Grid desktop — 1440px

columns: 12 — margin: 80px
gutter: 20px — content width: 1280px
column widths: 308 / 416 / 632 / 740px

Grid mobile — 430px

columns: 4 — margin: 20px
gutter: 16px — content width: 390px
base unit: 8px

Figma UI-abafg — componenti, varianti, token nel file di progetto

Apri in Figma ↗