EPFL design system catalog

The ENAC IT4R team's working reference for building EPFL-branded web UI — 20 component and token cards, plus the brand rules and reference screens. Every card renders the canonical skills/epfl-design/css/epfl.css in isolation. Generated from preview/*.html; do not edit by hand.

Unofficial. Maintained by the ENAC IT4R team at EPFL ENAC (School of Architecture, Civil and Environmental Engineering). It is distilled from EPFL's official brand guidelines and the epfl-si/elements styleguide, and is not produced or endorsed by EPFL's central brand or communications team. For canonical EPFL brand assets, use the official Elements styleguide.

Brand rules

Enforced by the linter

No raw hex colors. Use a token: var(--primary), var(--fg), … Raw values live only in tokens/colors_and_type.css (and framework brand-mapping recipes, which are exempt).
No raw px. Use rem or a spacing token (var(--space-*), var(--gutter), var(--radius), var(--border-w)). The whole css/ layer is rem-only on purpose.
Only Suisse Int'l as a font family (Arial is the sanctioned fallback, already in --font-sans).
Never commit or bundle font files. Suisse Int'l is licensed to EPFL; pages load it from https://enac-it-fonts.epfl.ch (tokens/fonts.css), which serves *.epfl.ch origins, and localhost dev servers on the EPFL network or VPN. A mock opened as a file, or off VPN, renders in Arial: that is expected, not a bug to fix.
Import kits from index.js, never from internals.

Brand rules the linter can't see

Sentence case for headings and buttons — never Title Case. ("Discover our research", not "Discover Our Research".) UPPERCASE only for h6 / category labels.
No emoji. Ever. Not in UI, not in content.
No gradients, no textures, no drop-shadows on cards. Borders > shadows. Surfaces are flat.
Tight radii — 2px (--radius) / 4px (--radius-lg).
Hover changes color/border, never scales or lifts. No "card lift on hover".
Focus = 2px solid outline, 2px offset, hue-matched (red-dark / gray-600 / canard-dark). Disabled stays at opacity 1.
French is primary; voice is institutional, precise, calm. Web red is #FF0000/#B51F1F; print red is #E30713 — never mix them.
Signatures: white text-panel hero over a full-bleed photo; 7×6px red dot under the active nav item; red triangle flag on distinction cards; "three" is the recurring count.

Parsed from skills/epfl-design/rules.md — the canonical rules file.

Brand

EPFL illustrative icons Bespoke campus & character pictograms preview/icons-bespoke.html

Elements custom icons Project-custom UI icons not covered by Feather preview/icons-elements.html

Feather icons Primary UI icon set — 24px, 2px stroke, currentColor preview/icons-feather.html

Logos EPFL wordmark — positive and negative preview/logos.html

Colors

Brand colors Red (web + print) and teal accents preview/colors-brand.html

Neutrals 6-step gray ramp from #E6E6E6 to #212121 preview/colors-neutrals.html

Status colors Success / info / warning / danger preview/colors-status.html

Type

Body type H4–H6, lead, body, small preview/type-body.html

Display type H1 / H2 / H3 specimens preview/type-display.html

Suisse Int'l weights From enac-it-fonts.epfl.ch on *.epfl.ch sites; Arial elsewhere (this catalog) preview/type-fonts.html

Quotes & inline Blockquote, mark, ins/del, code preview/type-quotes.html

Spacing

Radii Tight 2/4 px Swiss radii + pill preview/radii.html

Spacing scale 4 / 8 / 16 / 24 / 32 / 48 / 96 px preview/spacing.html

Components

Alerts Info / success / warning / danger preview/alerts.html

Badges & tags Status badges and link tags preview/badges.html

Buttons Primary / secondary / tertiary / disabled preview/buttons.html

Cards News card and distinction card with red flag preview/card.html

Form inputs Text, select, checkbox, radio preview/forms.html

Header Main header with red active dot preview/header.html

Key numbers Large light numerals with red accent bar preview/key-numbers.html

Examples — full screens

Research landing page open full page →

The canonical reference — header, signature overlapping hero, card deck (with a distinction card), key numbers, dark footer.

News listing open full page →

Page header, filter tags, a paged 6-card grid, "load more". A different page type.