Anfisa Pocovi°

(04)Design Systems

Archipelago

Archipelago is Pernod Ricard’s design system: one shared starting point for the company’s internal digital products. I contributed to its foundations, components and documentation.

Company
Pernod Ricard
Role
Product Designer
Year
2021–2023
Type
Design System · Enterprise
Archipelago data table documentation: do and don’t examples

01Overview

As more internal products and teams appeared at Pernod Ricard, the same interface problems were solved more than once. Archipelago gives those products shared foundations, components and documentation that explains how to use them.

8px
Base unit for every element
13
Spacing steps, 2px to 160px
12
Columns at every breakpoint
5
Internal products using it

02My role

Product Designer

  • Foundations: colour, spacing and grid
  • The data table, built from cells, headers and footers
  • Component documentation pages
  • Applying the system in products such as Vista Rev’Up

03The challenge

Buttons, spacing, forms, tables and navigation had drifted apart between products. A system had to fix that without making every product identical.

  1. 01Standardise too little and the system doesn’t help
  2. 02Standardise too much and teams work around it
  3. 03Internal tools are full of very different tables

04Approach

4.1

Foundations, one component, then the product

Archipelago is the shared starting point for Pernod Ricard’s internal products. The work is the system itself: colour, spacing and a 12-column grid, then components teams actually build with, then the pages that explain how to use them.

The data table is the clearest example. It is not one finished table. Designers combine cells, headers and footers into the table a product needs. The same parts show up in Vista Rev’Up’s calendar.

05Key flows

5.1

Foundations

Everything is built on an 8px base. Colours are split by role: semantic colours carry meaning, neutrals do the quiet work, and an additional palette, named after cocktail ingredients, is kept for categories and labels.

Semantical palette: blue / primary, red / danger, green / success and yellow / warning, eight steps each, with transparent variantsOpen full size
Semantic palette
Additional palette named after cocktail ingredients: Safran, Ice, Curaçao, Blueberry, Beet and Rose, six steps each, with a note on contrastOpen full size
Additional palette
Spacing scale from Spacing 1 (2px) to Spacing 13 (160px)Open full size
Spacing scale
Grid page: 8px base unit, and 12-column breakpoints for X-Large (1920px, 160px margin, 32px gutter) and Large (1440–1919px, 112px margin)Open full size
Grid and breakpoints

5.2

The data table

Instead of one large table, designers combine cells, headers and footers into the table a product needs: 3 row sizes, 9 content types, 3 footers, light and dark.

Datatable cells: footer variants in three sizes on light and dark backgrounds, and basic cells by content type in enabled, hover and selected statesOpen full size
Datatable cells
Usage page: a table on a small grid next to a chart, and a table with a wide range of content on a thin-margin gridOpen full size
Usage

5.3

Documentation

Every component is documented in the same order, linked to Zeroheight: overview, usage, do & don’ts, and a changelog so teams know what they’re picking up.

  1. 1Overview
  2. 2Usage
  3. 3Do & don’ts
  4. 4Changelog
Do & Don’ts: a simple data table as the do, and an overloaded table as the don’t, with the advice to use data visualisation insteadOpen full size
Do & don’ts
Changelog for Datatable Cells: v1.0 on 15 March 2023, v1.1 on 22 March 2023, and v1.2 updates on 16 May and 19 June 2023Open full size
Changelog

5.4

In a product

Vista Rev’Up’s calendar table, buttons, chips and modals all come from the system.

Vista Rev’Up calendar optimisation built with Archipelago: header, action buttons, a grouped data table and a KPI footerOpen full size
Rev’Up calendar
Vista Rev’Up edit scope modal built with Archipelago chips, date fields and buttonsOpen full size
Rev’Up modal

06Design decisions

  • Decide it once

    Colour, spacing and grid are fixed at the foundation level, so products don’t re-decide them.

  • Twelve columns everywhere

    Only margins and gutters change, so a layout keeps its structure as the screen narrows.

  • Rules travel with colours

    No additional colours on text, and at least 3:1 contrast with backgrounds.

  • Room to differ

    Products share foundations and components, and can still be different when they have a reason.

07Outcome

The system was used across five internal products. The hardest part was deciding what not to include: every extra variation makes a system slightly more powerful and slightly harder to understand.