Luiss rebuilds its digital presence as an ecosystem: multibrand design system, Drupal and search with agentic AI.
−70% in content publishing time
Sapienza A design system for Europe’s largest university, starting from its homepage.
Documented foundations: color palette, typography, spacing, grids, tone of voice. Foundations first, then the first page, then the guidelines for the future website.
The new uniroma1.it homepage
01 · The client
A complex university, one single front door.
Sapienza University of Rome is Europe’s largest university by number of enrolled students: 11 faculties, 58 departments, plus research centers and sites across the territory. uniroma1.it is its main digital point of contact.
On the other side of the screen there is an vast and diversified audience: Italian and international students, families, academic and administrative staff, media and the scientific community.
125,000+students, Europe’s largest university
11faculties, each with its own identity and its own student community
58departments, plus research centers and sites across the territory
02 · The challenge
From everything highlighted, to a clear hierarchy.
The previous homepage, running on Drupal 7 for years, struggled to communicate Sapienza’s identity. At its core was a mosaic of news items and boxes that put everything on the same level. Users ended up relying on external search engines rather than on the site’s own navigation.
Designing the main page and the menu, however, had to account for a deeper constraint: the site’s dual nature. Two different needs, often competing for the same space: the first screen of the homepage.
- A student audience with very concrete needs: enrolment, course attendance, campus services.
- An external audience of the scientific community, institutions, schools and media, which looks to the site for authority and visibility of the educational offer, of research and of social impact.
⇤⇥
Drag to compare · from mosaic to bands
03 · The audience
Before designing, understand who for.
The starting point was a qualitative analysis of the site’s audience: telling primary targets from secondary ones, each with its own needs and its own language.
It is from this map that the homepage hierarchy comes: what deserves the first screen, and what can wait.
01
Prospective studentsItalian and international
02
Familiesguidance in choosing
03
Internal staffacademic and administrative
04
Media and institutionsexternal communication
05
Scientific communityresearch and publications
04 · The system
Not a homepage. A design system.
The deliverable of the project is not the homepage: it is the design system foundations that make it possible. Color palette, typography, spacing, grids, tone of voice and accessibility, defined once, in a single place, and valid for everything that comes after.
The homepage is the first thing built with that system, not its purpose.
Foundations · Sapienza
color
8-step scale
type
Aa Bb CcCormorant Garamond · DM Sans
serif · sansspace
mobile-first
grid
bands
Course guide
Education
Research
University
uniroma1.it
One base, different pages
For a university of this breadth the difference is substantial. Without shared foundations, every page that follows starts from scratch: new decisions on color, new measurements, a new tone, and a consistency that frays as the future site grows.
With foundations in place, whoever designs the next sections starts from a vocabulary that already exists and discusses content, not pixels. This is why the work on the first page was set up as work on the system, and not as the restyling of a single screen.
05 · The foundations
The foundations of the entire future university website.
The design system foundations are defined and documented as a shared base for the whole future university website, not only for the page that brought them to life.
01Color paletteinstitutional Sapienza Red · 8-step scale
02TypographyCormorant Garamond · DM Sans
03Spacing and gridsmobile-first approach
04Tone of voicefrom technical wording to the words users use
05Accessibilitya design criterion for every component
The palette starts from the institutional Sapienza Red and works it into a full scale, so that the accent stays recognizable even where contrast, depth or a soft background is needed. The type pairing holds the two sides of the university together: a serif for the authority of headings, a neutral, highly legible sans for body copy and interface.
Tone of voice is the least visible foundation and perhaps the most useful: the new homepage was the occasion to build on the language review the university is carrying out, starting with the reconfiguration of menus and navigation paths. And digital accessibility is not a final check but a design constraint: every component was designed with it in mind from the start.
Designing the homepage of a university like Sapienza means deciding what comes first. Doing that required shared foundations: without them, every page that follows would start over from scratch.
Home · three-level menu · search overlay
08 · Headless architecture
The foundations reach all the way into the code.
Underneath the page, the content model stays in Drupal and builds on the modular architecture already available in the CMS: the content types and Paragraphs dedicated to composing the homepage are where the editorial team decides, with full flexibility, what to feature, reorder or replace.
The front end was rebuilt from scratch as a Next and React application that consumes that content and presents it according to the rules of the design system. The foundations do not stay a document: they become the behavior of the page.
01Content in Drupalthe content model
02Paragraphscomposing the homepage
03Next and React front endrebuilt from scratch
04Foundations appliedthe design system rules
Drupal Certified Partner Gold
the first Italian company to earn the certification
Results
A base to build on, not a finish line.
5documented foundations: color palette, typography, spacing, grids, tone of voice
4breakpoints designed, from 393px to 1512px
3menu levels defined and exposed from the homepage
Design system underwayfoundations shared across the whole future university website
Homepage approvedin its visual and functional composition
Dual audience servedstudents and external audiences with a single identity
Digital accessibilitya design criterion for every component
The project came out of integrated work between the university and SparkFabrik, with no intermediaries: from audience analysis to the delivery of the foundations.
Sapienza University of Rome↗client and owner of the project: strategic direction, content, validation of identity and navigation choices. The homepage redesign was coordinated by the university’s web editorial committee (Comitato editoriale web).
SparkFabrik↗qualitative audience analysis, visual and content direction, design system foundations, design of the homepage and of the first menu levels, front end development.
The vision
One page today. A system for everything that comes next.
The homepage is the first application. The foundations remain: documented, shared, ready for every next page of the future university website.
Success Stories
Other similar projects
Gruppo Editoriale La Scuola modernises its whole stack, from digital identity to cloud native infrastructure.
Caleffi rebuilds its enterprise portal: migration to Drupal 10, a new information architecture, a new interface.
30 countries and about twenty languages on one platform
