centrepompidou
--------------
Centre Pompidou (light) tokens. Measured from www.centrepompidou.fr/en/, 2026-09-23. Univers Next (Regular/Medium/Bold as separate families, weight 400) with normal letter-spacing; square buttons, cards with a single 30px bottom-right corner.
Category: Nonprofit / cultural

Specimen: https://stylelift.dev/gallery/centrepompidou  (the page itself; signing in opens the full gallery)

With an agent that has the design-tokens MCP server:
  "apply the centrepompidou theme"

Without it, pick your stack:

## Tailwind v4

1. Download into src/centrepompidou/
   curl -sL --create-dirs "https://stylelift.dev/t/centrepompidou/{fonts.css,tokens.css,tailwind.theme.css}" -o "src/centrepompidou/#1"

2. In your global stylesheet:
   @import "./centrepompidou/fonts.css";
   @import "tailwindcss";
   @import "./centrepompidou/tokens.css";
   @import "./centrepompidou/tailwind.theme.css";

3. Order matters: fonts.css must come first, the theme file after Tailwind.

## Tailwind v3

1. Download into src/centrepompidou/
   curl -sL --create-dirs "https://stylelift.dev/t/centrepompidou/{fonts.css,tokens.css,tailwind.preset.js}" -o "src/centrepompidou/#1"

2. In your global stylesheet:
   @import "./centrepompidou/fonts.css";
   @import "./centrepompidou/tokens.css";

3. In tailwind.config.js: presets: [require("./centrepompidou/tailwind.preset.js")]

## Plain CSS

1. Download into src/centrepompidou/
   curl -sL --create-dirs "https://stylelift.dev/t/centrepompidou/{fonts.css,tokens.css}" -o "src/centrepompidou/#1"

2. In your global stylesheet:
   @import "./centrepompidou/fonts.css";
   @import "./centrepompidou/tokens.css";

3. fonts.css must be the first rule in the stylesheet.

This theme has one colour mode.

Use the CSS variables (var(--color-accent)) or the Tailwind classes they generate;
do not hard-code the hex values.

Prompts to paste into an agent (swap the <bits in angle brackets>):
--------------

## Start a new project
   Pick the theme before any UI exists, so nothing gets hard-coded in the first place.

   Create a Next.js + Tailwind v4 app for <what you are building>.
   Before writing any UI, apply the centrepompidou theme from the design-tokens MCP.
   Every colour, font, radius, shadow and motion value must come from its tokens
   (bg, surface, surface-muted, fg, fg-muted, accent, accent-fg, border, danger, success, inverse, inverse-muted; font-sans, font-medium, font-heading, font-bold, font-mono; rounded-*, shadow-*, ease-*, animate-*) — no hard-coded hex or px.

## Restyle a project you already have
   Keeps your components and layout, swaps the look.

   Apply the centrepompidou theme from the design-tokens MCP to this project, then restyle the
   existing UI to use only its tokens. Replace every hard-coded colour, font and radius
   with the matching token. Do not change the layout or the copy.

## Build one page or component
   For a single screen once centrepompidou is already installed.

   Build a <pricing page> with the centrepompidou theme that is already installed in this project.
   Use only its tokens: accent for primary actions, surface / surface-muted for cards and
   empty states, fg-muted for secondary text, rounded-* for corners, ease-* for transitions.
   No new colours.

## An agent without the MCP server
   ChatGPT, Cursor, v0, a teammate — anything that can read a link.

   Set up this theme first: https://stylelift.dev/use/centrepompidou
   Then build <what you are building> with it, using only the CSS variables it defines
   (var(--color-accent), var(--font-family-sans), …) — never a hard-coded hex.