--- title: "Sapienza: a university design system, from the homepage" url: "https://www.sparkfabrik.com/en/success-stories/sapienza/" lang: "en" type: "case" date: "2026-08-17" lastmod: "2026-10-26" description: "A design system for Europe's largest university, from its homepage: audience analysis, documented foundations and a Next and React front end for uniroma1.it." keywords: ["Sapienza","case study","design system","foundations","homepage","Drupal","Next","React","university","SparkFabrik"] image: "https://www.sparkfabrik.com/images/og/case-studies-sapienza-en.webp" translations: it: "https://www.sparkfabrik.com/it/case-studies/sapienza/index.md" schema: {"@context":"https://schema.org","@id":"https://www.sparkfabrik.com/en/success-stories/sapienza/#article","@type":"Article","about":{"@type":"Organization","name":"Sapienza University of Rome","url":"https://www.uniroma1.it/en"},"articleSection":"Case Study","author":{"@id":"https://www.sparkfabrik.com/#organization"},"dateModified":"2026-10-26T09:54:37+01:00","datePublished":"2026-08-17","description":"A design system for Europe's largest university, from its homepage: audience analysis, documented foundations and a Next and React front end for uniroma1.it.","headline":"Sapienza University of Rome","image":"https://www.sparkfabrik.com/images/case-studies/sapienza/showcase-apertura.webp","mainEntityOfPage":{"@id":"https://www.sparkfabrik.com/en/success-stories/sapienza/#webpage"},"publisher":{"@id":"https://www.sparkfabrik.com/#organization"}} --- # 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.** - Client: Sapienza University of Rome - [Sector](https://www.sparkfabrik.com/en/services/by-industry/education/): Education and research - Services: Strategy & Design · Design System · Drupal development - Platform: Figma · Drupal · Paragraphs · Next & React ## The new uniroma1.it homepage ![The new uniroma1.it homepage](https://www.sparkfabrik.com/images/case-studies/sapienza/showcase-apertura.webp) 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 - **11** **faculties**, each with its own identity and its own student community - **58** **departments**, 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**. 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. 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. 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. 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. > > Stefano Mainardi, CEO, SparkFabrik 06 · The homepage ## A recognizable identity **on the first screen.** The visual direction presents Sapienza as a **large, inclusive university** with an innovative streak. The page is composed in **bands**: the university's areas of excellence and its **four missions** take the foreground. In the same scroll there is room for **inclusion and scientific output**, themes that had no home on the previous homepage. The result is a **template approved** in its visual and functional composition, which also becomes the reference for the first levels of the menu. [See the live site](https://www.uniroma1.it/it/) 07 · Navigation ## The menu **does not hide.** The navigation menu is exposed **down to the third level**, so content is reachable straight from the homepage. Alongside it, the menu dedicated to the **different audience groups** stays in plain sight: that is where the site's dual nature finds a structural answer rather than a compromise. Mobile-first is not a slogan. The homepage was designed across **four breakpoints** (393, 1024, 1280 and 1512) and the mobile menu across **three levels of depth**, plus the search overlay. Not adjustments made after the fact: compositions designed one by one, because the hierarchy that works on desktop is not the one that works on a phone. 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. Results ## A base to build on, **not a finish line.** The project came out of **integrated work between the university and SparkFabrik**, with no intermediaries: from audience analysis to the delivery of the foundations. - **5** **documented foundations**: color palette, typography, spacing, grids, tone of voice - **4** **breakpoints designed**, from 393px to 1512px - **3** **menu levels** defined and exposed from the homepage - Design system underway, foundations shared across the whole future university website - Homepage approved, in its visual and functional composition - Dual audience served, students and external audiences with a single identity - Digital accessibility, a design criterion for every component - **[Sapienza University of Rome](https://www.uniroma1.it/en/)**: 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](https://www.sparkfabrik.com/en/)**: 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. [Tell us about your project](https://www.sparkfabrik.com/en/contact-us/) [Visit uniroma1.it](https://www.uniroma1.it/en/) Success Stories ## Other similar projects - [Luiss: Luiss rebuilds its digital presence as an ecosystem: multibrand design system, Drupal and search with agentic AI.](https://www.sparkfabrik.com/en/success-stories/luiss/) - University - **−70%** in content publishing time - [La Scuola: Gruppo Editoriale La Scuola modernises its whole stack, from digital identity to cloud native infrastructure.](https://www.sparkfabrik.com/en/success-stories/la-scuola-sei/) - Publishing - [Caleffi: Caleffi rebuilds its enterprise portal: migration to Drupal 10, a new information architecture, a new interface.](https://www.sparkfabrik.com/en/success-stories/caleffi-new-website/) - Manufacturing - **30** countries and about twenty languages on one platform [All success stories](https://www.sparkfabrik.com/en/success-stories/) --- *This is the Markdown version of the page, to facilitate reading by AI and crawlers. Visit [https://www.sparkfabrik.com/en/success-stories/sapienza/](https://www.sparkfabrik.com/en/success-stories/sapienza/) for the full version with images and interactions.*