Design system Brand manual Scheda docente Scheda insegnamento Accessibilità
Accademia di Belle Arti di Foggia — v1.0

Design System

Token, tipografia, colori, componenti e specifiche di layout

ABAFG — v1.0 — Marzo 2026
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