Lioré Design System

Get DESIGN.md Download View template Works with

Lioré is a stark, black personal portfolio for a creative developer. It reads like a well-set CV: a huge bold name on an empty black screen, then a two-column résumé with ruled rows, then project images that step left and right down the page. There is one family (Inter), one colour (white on black), no rounded corners and no buttons, only underlined text links.

Three signatures make it recognisable:

The centred 272px name. John / Lioré in Inter 600 at 272px, line height 0.85, centred on a bare black screen, with only a small nav above and a one-line location and social icons along the bottom.
Résumé layout. A narrow left column of plain labels (Experience, Award Highlights) and a wide right column of 16px rows separated by 1px white 25% rules, with dates right-aligned (2024 — Present).
Staggered project images. Square-cornered project images about 640px wide alternate between the left and the centre of a 4-column grid, each with a title on the left and uppercase tags on the right underneath.

Lioré is a dark-only design.

Colors

Surfaces

canvas#000000

Hero, about, work and CTA sections (.section uses pure black)

surface-1#121212

The body colour (--color--second-color), seen in the footer

Ink

on-primary#FFFFFF

Text on primary

ink#FFFFFF

Headlines, labels, rows, links

ink-soft#F5F5F5

Default link colour (a)

ink-muted#FFFFFF · 70%

The about intro paragraph and menu numbers

on-media#FFFFFF

Action

primary#000000

Set to the canvas: there are no filled buttons

Lines & effects

line#FFFFFF · 25%

1px rules between résumé rows

line-link#FFFFFF · 50%

The 1px base line under text links

glass#111111 · 85%

The full-screen menu overlay

Typography

Inter · display-hero

The quick brown fox jumps

The name John Lioré (.title-1, --main-title: 17rem). 272px · 600 · 0.85

Inter · headline-lg

The quick brown fox jumps

Design driven creative developer focused on building immersive, high impact digital products. 57.6px · 600 · 1.1 · -1px

Inter · title-md

The quick brown fox jumps

Project titles (One Step, Clicks And Magic). 22.4px · 500 · 1.52

Inter · label-link

The quick brown fox jumps

Text links (View All Work). 17px · 600 · 1.3

Inter · body

The quick brown fox jumps

Paragraphs, address, footer text. 16px · 500 · 1.3

Inter · eyebrow

The quick brown fox jumps

Project tags WEB DESIGN, MARKETING. 12.8px · 500 · 2.34 · -0.2px

Spacing & shape

Purpose	Value
Container	max 1300px, centred
Section rhythm	.section is 150px top and bottom (80px from 991px; 20px bottom at ≤479); the CTA uses 80px top / 150px bottom
Breakpoints	991px, 767px and 479px, plus a 1920px+ step

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	15px
`md`	16px
`lg`	20px
`xl`	30px
`2xl`	50px
`3xl`	60px
`4xl`	70px
`5xl`	80px
`6xl`	100px

Layout spacing

Token	Value	Preview
`grid-gap`	10px
`gutter`	72px
`nav-height`	80px
`section`	150px

Border radius

full9999px

Surfaces

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

Level 1canvas

Level 2surface-1

Motion

Heading entrance	y 20% → 0, skewX 30° → 0, opacity → 1, 400ms outCubic
Bar wipe reveal	A white overlay moves x −102% → 0%, 500ms, then off
Text roll on hover	y 0 → −100%, 300ms ease
Link line	Width 0 → 100%, 300ms ease (some 200ms inOutQuint)
Hover dim	Siblings to opacity 0.6, 300ms easeIn
Menu open	Circle scale 0 → 1, 500ms; links slide up 500ms outExpo
Hamburger	Line rotation, 400ms ease and 600ms outExpo
Fades	opacity 0 ↔ 1, 500ms; first load opacity → 1, 1000ms outQuart

Do’s and don’ts

Keep sections on pure black (canvas #000000) and step the footer to #121212.
Centre the name in Inter 600 at 272px, line height 0.85, with nothing else on the screen but the nav and a bottom meta row.
Lay out text as a résumé: a .6fr label column, a 2fr content column, 16px rows with 1px white 25% rules.
Use link-line (17px, 600, a 1px white 50% line) for every action.
Keep every image square-cornered and alternate project images left and centre on a 4-column grid.
Use only weights 500 and 600.
Add filled or pill buttons, cards with borders, or drop shadows.
Round image corners or put overlays on photos.
Use a grey hex for muted text; use ink-muted (white at 70%).
Use Playfair Display, Caveat or Caveat Brush, even though they are loaded.
Add an accent colour to the UI.
Animate longer than 600ms for hovers or entrances.

Example prompt

Any page in the Lioré style

Prompt

Build your page in the Lioré style. Pure black background (#000000), white Inter text, weights 500 and 600 only. Open with the person's name centred at 272px, weight 600, line height 0.85, with a fixed transparent nav (name left, "Menu" plus a two-line hamburger right, 80px tall) and a bottom row with a location line and social icons. Lay out content like a résumé: a narrow label column and a wide content column (.6fr 2fr, 70px gap), 16px rows with a 1px white-25% rule between them, dates right-aligned. Headlines are 57.6px, weight 600, −1px tracking. No buttons: links are 17px weight 600 with a 1px white-50% underline that a white line covers on hover. Project images have square corners, about 1.21:1, span two columns of a 4-column grid with 10px gaps, and alternate left and centre, with the title left and uppercase 12.8px tags right underneath. Sections are 150px top and bottom with 5% side padding; footer #121212. Motion: headings rise 20% with a 30° skew over 400ms outCubic; hovers 300ms ease.

# Lioré Design System

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

## Overview

Lioré is a stark, black personal portfolio for a
creative developer. It reads like a well-set CV: a huge
bold name on an empty black screen, then a two-column
résumé with ruled rows, then project images that step
left and right down the page. There is one family

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #000000     | Hero, about, work and C… |
| surface-1    | #121212     | The body colour (--colo… |
| on-primary   | #FFFFFF     | Text on primary          |
| ink          | #FFFFFF     | Headlines, labels, rows… |
| ink-soft     | #F5F5F5     | Default link colour (a)  |
| ink-muted    | #FFFFFF 70% | The about intro paragra… |
| on-media     | #FFFFFF     |                          |
| primary      | #000000     | Set to the canvas: ther… |
| line         | #FFFFFF 25% | 1px rules between résum… |
| line-link    | #FFFFFF 50% | The 1px base line under… |
| glass        | #111111 85% | The full-screen menu ov… |

## Typography

- display-hero: Inter 272px / 600
- display-lg: Inter 112px / 600
- headline-lg: Inter 57.6px / 600
- title-md: Inter 22.4px / 500

{
  "$description": "Lioré 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": "Set to the canvas: there are no filled buttons"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Hero, about, work and CTA sections (.section uses pure black)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#121212",
      "$description": "The body colour (--color--second-color), seen in the footer"
    },
    "ink": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Headlines, labels, rows, links"
    },
    "ink-soft": {
      "$type": "color",
      "$value": "#F5F5F5",
      "$description": "Default link colour (a)"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#FFFFFFB3",
      "$description": "The about intro paragraph and menu numbers"
    },
    "line": {
      "$type": "color",
      "$value": "#FFFFFF40",
      "$description": "1px rules between résumé rows"
    },
    "line-link": {
      "$type": "color",
      "$value": "#FFFFFF80",

/* Lioré 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-full, p-lg */

@theme {
  /* Colors */
  --color-primary: #000000;
  --color-on-primary: #FFFFFF;
  --color-canvas: #000000;
  --color-surface-1: #121212;
  --color-ink: #FFFFFF;
  --color-ink-soft: #F5F5F5;
  --color-ink-muted: #FFFFFFB3;
  --color-line: #FFFFFF40;
  --color-line-link: #FFFFFF80;
  --color-glass: #111111D9;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Inter", sans-serif;
  --font-inter: "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 272px;
  --text-display-hero--line-height: 0.85;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 600;
  --text-display-lg: 112px;
  --text-display-lg--line-height: 0.85;
  --text-display-lg--letter-spacing: -1px;
  --text-display-lg--font-weight: 600;
  --text-headline-lg: 57.6px;
  --text-headline-lg--line-height: 1.1;
  --text-headline-lg--letter-spacing: -1px;
  --text-headline-lg--font-weight: 600;
  --text-title-md: 22.4px;
  --text-title-md--line-height: 1.52;
  --text-title-md--letter-spacing: 0px;
  --text-title-md--font-weight: 500;
  --text-label-link: 17px;
  --text-label-link--line-height: 1.3;
  --text-label-link--letter-spacing: 0px;
  --text-label-link--font-weight: 600;
  --text-body: 16px;
  --text-body--line-height: 1.3;
  --text-body--letter-spacing: 0px;

/* Lioré 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; /* Set to the canvas: there are no filled buttons */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-canvas: #000000; /* Hero, about, work and CTA sections (.section uses pure black) */
  --color-surface-1: #121212; /* The body colour (--color--second-color), seen in the footer */
  --color-ink: #FFFFFF; /* Headlines, labels, rows, links */
  --color-ink-soft: #F5F5F5; /* Default link colour (a) */
  --color-ink-muted: #FFFFFFB3; /* The about intro paragraph and menu numbers */
  --color-line: #FFFFFF40; /* 1px rules between résumé rows */
  --color-line-link: #FFFFFF80; /* The 1px base line under text links */
  --color-glass: #111111D9; /* The full-screen menu overlay */
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-inter: "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 272px;
  --text-display-hero-font: var(--font-inter);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 0.85;
  --text-display-hero-tracking: 0px;
  --text-display-lg: 112px;
  --text-display-lg-font: var(--font-inter);
  --text-display-lg-weight: 600;
  --text-display-lg-line-height: 0.85;
  --text-display-lg-tracking: -1px;
  --text-headline-lg: 57.6px;
  --text-headline-lg-font: var(--font-inter);
  --text-headline-lg-weight: 600;
  --text-headline-lg-line-height: 1.1;
  --text-headline-lg-tracking: -1px;
  --text-title-md: 22.4px;
  --text-title-md-font: var(--font-inter);
  --text-title-md-weight: 500;
  --text-title-md-line-height: 1.52;
  --text-title-md-tracking: 0px;
  --text-label-link: 17px;
  --text-label-link-font: var(--font-inter);
  --text-label-link-weight: 600;
  --text-label-link-line-height: 1.3;
  --text-label-link-tracking: 0px;

Free with a Flowmance accountSign up freeAlready have an account? Log in

Download DESIGN.md

More design systems like this

Portfolio 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

Inter · display-hero

Inter · headline-lg

Inter · title-md

Inter · label-link

Inter · body

Inter · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Lioré style

More design systems like this

Mason Doe

Frame

JulianVoss

Leo Lutz

Bring any of them to your AI tool