UNI© Design System

Get DESIGN.md Download View template Works with

UNI© is a black-and-white creative-studio site with a digital, slightly retro edge. The headline face is Geist Pixel, a bitmap-style font set at poster size with very tight tracking, against plain Inter for reading text. The page alternates long white bands and long black bands; colour only arrives through fashion and sports photography and a smoky showreel video.

Four signatures make it recognisable:

Pixel wordmark. UNI© and STUDIO in Geist Pixel at 201.6px (14vw), uppercase, line height 0.85, tracking −10px. Small labels (EST 2021, LOCAL TIME: 9:00:24 CET, STEP 01) use the same pixel face at 11–14px.
Shape-shifting images in the hero. A strip of photos in mixed masks: a pill (200px), a leaf (0% 100px), a circle (100%), an oval (60%) and a 50px rounded square.
Inverted nav. The fixed bar uses filter: invert() with mix-blend-mode: exclusion, so UNI© and MENU ═ flip between black and white over each band. MENU opens a white side panel (36vw) of huge condensed links.
The cross-shaped showreel. A video masked into a plus sign, split by thin vertical lines, labelled VIEW SHOWREEL ©26 ↘ in white Geist Pixel.

The default cursor is hidden (cursor: none on body and links); a custom follower replaces it, with a round VIEW label over projects.

Colors

Surfaces

canvas#FFFFFF

Page background and white bands (65 fills)

surface-1#F5F5F5

Testimonial cards

surface-2#D3D3D3

Light grey fills (2 uses)

inverse-canvas#000000

Black bands: latest work, statement, process, project list (51 fills)

field#FFFFFF

Form inputs and their placeholder

field-placeholder#999999

Placeholder text on field

Ink

on-primary#FFFFFF

Text on primary

on-secondary#000000

Text on secondary

ink#000000

Text on white (1,884 uses), borders, the black button

ink-muted#000000

Same as ink: body copy on white is full black

inverse-ink#FFFFFF

Text on black (1,039 uses)

inverse-ink-muted#ADADAD

Grey text on black: OUR PROCESS, LET'S WORK ↘, step text (111 uses)

on-media#FFFFFF

Logos and titles placed over photos

Action

primary#000000

The black button and the form submit Contact Us

secondary#F0F0F0

The light GET IN TOUCH button

Lines & effects

line#000000 · 25%

0.5px borders on pricing cards and pricing rows

line-strong#000000

1px solid rules (7 uses), form underline

line-soft#CFCFCF

0.5px hero divider and logo-tile borders

inverse-surface#111111

Raised blocks on black (6 fills)

inverse-line#FFFFFF · 34%

0.5px rules under project rows on black

scrim#000000 · 25%

Overlays on photos (also 20% and 35% variants, and a 60% dimming layer)

glass#FFFFFF · 42%

Video controls and small frosted chips

Typography

Geist Pixel · display-hero

The quick brown fox jumps

UNI© (h1), STUDIO (h2). 202px · 400 · 0.85 · -10px

Humane · headline-menu · shown in Big Shoulders (fallback)

The quick brown fox jumps

Menu links HOME 01, STUDIO 02, WORK 03, CONTACT 04 (8rem). 128px · 400 · 1.1 · 0.8px

Geist Pixel · title-pixel

The quick brown fox jumps

VIEW SHOWREEL ©26 ↘ and similar overlay labels (52 uses). 32px · 600 · 1.1 · -0.5px

Inter · body-lg

The quick brown fox jumps

Nav text MENU, short labels (1.1rem). 17.6px · 500 · 1.1 · -0.5px

Geist Pixel · label

The quick brown fox jumps

Button labels, LET'S WORK ↘ (.9rem). 14.4px · 600 · 1.1 · -0.5px

Geist Pixel · caption

The quick brown fox jumps

EST 2021, 5+ YEARS DESIGNING WHAT'S NEXT., LOCAL TIME, X / DB / BE (318 uses). 12.8px · 700 · 1.3

Spacing & shape

Purpose	Value
Container	max 1600px (--page-container--container-large), 100% wide, 2% side padding (28.8px at 1440)
Section rhythm	.section is padding: 150px 2%; the top drops to 50px at ≤479
Section header (on black)	OUR PROCESS left, a thin rule across, LET'S WORK ↘ right, in grey caption
Breakpoints	991, 767 and 479px, plus a 1920px+ step

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	20px
`md`	30px
`lg`	50px
`xl`	60px
`2xl`	120px

Layout spacing

Token	Value	Preview
`column-gap`	20px
`gutter`	28.8px
`section-footer`	100px
`section`	150px

Border radius

xs6px

sm10px

md20px

lg50px

leaf100px

xl200px

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Level 3surface-2

Motion

Text roll (buttons, links)	y 0% → −101%, power1.out, 0.4s, staggered
Nav and menu roll	y 100% → 0 and y −100% → 0%, power4.out, 0.5s
Line reveal	SplitText lines y 100% → 0%, 0.5–0.91s, staggered
Fade-up	y 30% → 0%, opacity 0 → 1, power2.out, 0.25s (also staggered)
Image parallax	y 5% → −5%, linear, scrubbed top bottom → bottom top, scrub 1.2
Hero exit	y 0 → 20%, scale 1 → 0.95, scrubbed (scrub 0.8)
Image hover zoom	scale → 1.15, sine.out, 0.5s
Accordion	height → auto, 0.3s; icon rotation → 0°, 0.2s
Arrow slide	x −19px → 0, power1.in, 0.3s; lift y → −11px, 0.2s
Menu line wipe	width 0% → 100%, power1.in 0.4s or power2.out 0.25s
Icon pop	y −5px → 0, rotation 40° → 0°, scale 0.6 → 1, opacity 0 → 1, sine.inOut, 0.2s
Intro and shapes	expo 0.8s and 1.2s tweens

Do’s and don’ts

Set display text in Geist Pixel, uppercase, line height 0.85 and tight tracking (−10px at 201.6px, −2px at 48px).
Pair pixel labels (12.8px weight 700, uppercase) with Inter text (24px weight 500, −1.3px for leads; 14.4px weight 600 for paragraphs).
Alternate full white (#FFFFFF / #000000) and full black (#000000 / #FFFFFF) bands.
Keep buttons, inputs and grid images square (0px radius).
Use 0.5px hairlines (#00000040 on white, #FFFFFF57 on black) for structure.
Use #ADADAD only for meta text on black bands.
Add colour to the UI. The mint and coral fills are rare leftovers.
Round buttons or cards beyond the 10px testimonial cards.
Set Inter in uppercase or Geist Pixel in sentence case.
Use grey #ADADAD or #999999 text on white.
Use the hero's pill, leaf and circle masks elsewhere on the page.
Add drop shadows. Depth comes from bands, scrims and blur.

Example prompt

Prompt

Build your page in the UNI© style. Alternate white #FFFFFF bands (black #000000 text) and black #000000 bands (white text, grey #ADADAD meta). Display type: Geist Pixel, uppercase, 14vw (201.6px at 1440), line height 0.85, tracking −10px, with "©" in the brand. Meta labels: Geist Pixel 12.8px weight 700 uppercase ("EST 2021", "LOCAL TIME: 9:00:24 CET"). Text: Inter 500, leads at 24px / 1.3 / −1.3px, paragraphs at 14.4px weight 600 / 1.3 / −0.5px. Sections: padding 150px 2%, container 1600px. Section header on black: "OUR PROCESS" left, a thin rule, "LET'S WORK ↘" right. Buttons square: black with white pixel label, 44px tall, padding 15.2px 22.4px, or #F0F0F0 with black text; on hover the label rolls up (y → −101%, power1.out 0.4s). Images square-cornered, saturated fashion photography, 2-column staggered grid. 0.5px hairlines. Fixed nav with filter: invert() and mix-blend-mode: exclusion. No shadows, no accent colour.

# UNI© Design System

> Measured from the UNI© template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

UNI© is a black-and-white creative-studio site with a
digital, slightly retro edge. The headline face is Geist
Pixel, a bitmap-style font set at poster size with very
tight tracking, against plain Inter for reading text.
The page alternates long white bands and long black

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background and whi… |
| surface-1    | #F5F5F5     | Testimonial cards        |
| surface-2    | #D3D3D3     | Light grey fills (2 use… |
| inverse-can… | #000000     | Black bands: latest wor… |
| field        | #FFFFFF     | Form inputs and their p… |
| field-place… | #999999     | Placeholder text on fie… |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #000000     | Text on secondary        |
| ink          | #000000     | Text on white (1,884 us… |
| ink-muted    | #000000     | Same as ink: body copy … |
| inverse-ink  | #FFFFFF     | Text on black (1,039 us… |
| inverse-ink… | #ADADAD     | Grey text on black: OUR… |
| on-media     | #FFFFFF     | Logos and titles placed… |
| primary      | #000000     | The black button and th… |

## Typography

- display-hero: Geist Pixel 202px / 400
- display-marquee: Geist Pixel 160px / 500
- headline-menu: Humane 128px / 400
- display-project: Geist Pixel 96px / 500

{
  "$description": "UNI© design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "The black button and the form submit Contact Us"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#F0F0F0",
      "$description": "The light GET IN TOUCH button"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background and white bands (65 fills)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F5F5F5",
      "$description": "Testimonial cards"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#D3D3D3",
      "$description": "Light grey fills (2 uses)"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on white (1,884 uses), borders, the black button"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000",

/* UNI© theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #000000;
  --color-on-primary: #FFFFFF;
  --color-secondary: #F0F0F0;
  --color-on-secondary: #000000;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F5F5F5;
  --color-surface-2: #D3D3D3;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-line: #00000040;
  --color-line-strong: #000000;
  --color-line-soft: #CFCFCF;
  --color-inverse-canvas: #000000;
  --color-inverse-surface: #111111;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #ADADAD;
  --color-inverse-line: #FFFFFF57;
  --color-field: #FFFFFF;
  --color-field-placeholder: #999999;
  --color-scrim: #00000040;
  --color-glass: #FFFFFF6B;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Geist Pixel", sans-serif;
  --font-geist-pixel: "Geist Pixel", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-humane: "Humane", "Big Shoulders", sans-serif;
  --font-ibm-plex-mono: "IBM Plex Mono", monospace;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 202px;
  --text-display-hero--line-height: 0.85;
  --text-display-hero--letter-spacing: -10px;
  --text-display-hero--font-weight: 400;
  --text-display-marquee: 160px;
  --text-display-marquee--line-height: 1.1;
  --text-display-marquee--letter-spacing: 0px;
  --text-display-marquee--font-weight: 500;
  --text-headline-menu: 128px;

/* UNI© design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #000000; /* The black button and the form submit Contact Us */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #F0F0F0; /* The light GET IN TOUCH button */
  --color-on-secondary: #000000; /* Text on secondary */
  --color-canvas: #FFFFFF; /* Page background and white bands (65 fills) */
  --color-surface-1: #F5F5F5; /* Testimonial cards */
  --color-surface-2: #D3D3D3; /* Light grey fills (2 uses) */
  --color-ink: #000000; /* Text on white (1,884 uses), borders, the black button */
  --color-ink-muted: #000000; /* Same as ink: body copy on white is full black */
  --color-line: #00000040; /* 0.5px borders on pricing cards and pricing rows */
  --color-line-strong: #000000; /* 1px solid rules (7 uses), form underline */
  --color-line-soft: #CFCFCF; /* 0.5px hero divider and logo-tile borders */
  --color-inverse-canvas: #000000; /* Black bands: latest work, statement, process, project list (51 fills) */
  --color-inverse-surface: #111111; /* Raised blocks on black (6 fills) */
  --color-inverse-ink: #FFFFFF; /* Text on black (1,039 uses) */
  --color-inverse-ink-muted: #ADADAD; /* Grey text on black: OUR PROCESS, LET'S WORK ↘, step text (111 uses) */
  --color-inverse-line: #FFFFFF57; /* 0.5px rules under project rows on black */
  --color-field: #FFFFFF; /* Form inputs and their placeholder */
  --color-field-placeholder: #999999; /* Placeholder text on field */
  --color-scrim: #00000040; /* Overlays on photos (also 20% and 35% variants, and a 60% dimming layer) */
  --color-glass: #FFFFFF6B; /* Video controls and small frosted chips */
  --color-on-media: #FFFFFF; /* Logos and titles placed over photos */

  /* Fonts */
  --font-geist-pixel: "Geist Pixel", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-humane: "Humane", "Big Shoulders", sans-serif;
  --font-ibm-plex-mono: "IBM Plex Mono", monospace;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 202px;
  --text-display-hero-font: var(--font-geist-pixel);
  --text-display-hero-weight: 400;
  --text-display-hero-line-height: 0.85;
  --text-display-hero-tracking: -10px;
  --text-display-marquee: 160px;
  --text-display-marquee-font: var(--font-geist-pixel);
  --text-display-marquee-weight: 500;
  --text-display-marquee-line-height: 1.1;
  --text-display-marquee-tracking: 0px;
  --text-headline-menu: 128px;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Agency design systems, the same colors first.

Browse all 398

Bring any of them to your AI tool

All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.

Get All Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Geist Pixel · display-hero

Humane · headline-menu · shown in Big Shoulders (fallback)

Geist Pixel · title-pixel

Inter · body-lg

Geist Pixel · label

Geist Pixel · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the UNI© style

More design systems like this

Mōno™

Omnera

Nuvin

Moon Studio

Bring any of them to your AI tool