Loyal Design System

Get DESIGN.md Download View template Works with

Loyal is a dark, cinematic photography showcase. The home page is one screen: a full-bleed photo under a black gradient, a transparent nav, a light-weight Poppins title, one line of serif text and a single deep-pink button. The mix of thin sans titles and Playfair Display serif lines gives it a gallery-catalogue feel.

Four signatures make it recognisable:

One-screen slider home. Five full-viewport slides (one per photo) with nothing below them. The page is exactly 900px tall at 1440×900.
Thin sans over serif. Titles are Poppins 62px weight 300 in Title Case; the line under them is Playfair Display 18px in #DDDDDD.
Deep pink, used once. The only colour in the UI is --deep-pink #E23B7D on the LEARN MORE button (and the blockquote rule). Everything else is white on black.
Gallery furniture in the corners. Photo by: William Lee bottom-left (serif label, sans name), slider dots bottom-centre, an outlined VIEW GALLERY button bottom-right, and square black arrow tabs flush to the left and right edges.

The home page is dark (photo plus gradient); inner pages are white.

Colors

Surfaces

canvas#FFFFFF

Body background (inner pages)

surface-1#FFFFFF

Same as canvas

inverse-canvas#000000

The slide gradient base and the text on it

Ink

on-primary#FFFFFF

Text on primary

ink#212121

ink-body#333333

Default body text, form text, blockquotes

ink-muted#919191

Paragraphs (Poppins 300)

ink-subtle#777777

Uppercase field labels

on-media#FFFFFF

Nav, titles, credits, outline button on photos

on-media-muted#DDDDDD

Serif subtitles on slides

inverse-ink#FFFFFF

Text on inverse-canvas

Action

primary#E23B7D

The main button (--deep-pink)

primary-hover#AC285B

Button background on hover

Lines & effects

line#E1E1E1

Field underlines and the form wrapper border

line-strong#CCCCCC

The 50px circular close button outline

line-on-media#FFFFFF · 23%

1px rule under the nav

nav-hover#000000 · 23%

Nav link background on hover

dot#FFFFFF · 40%

Inactive slider dots (active is white)

arrow#000000 · 80%

Square arrow tabs

Typography

Poppins · display-slide

The quick brown fox jumps

Slide titles (Minimalistic Architecture), text-transform: capitalize. 62px · 300 · 1.16

Poppins · headline-lg

The quick brown fox jumps

h1 on inner pages. 34px · 500 · 1.29

Playfair Display · quote

The quick brown fox jumps

Blockquotes, 3px pink left rule. 30px · 400 · 1.33

Poppins · title-lg

The quick brown fox jumps

h3. 24px · 400 · 1.25

Playfair Display · body-serif

The quick brown fox jumps

Slide subtitles in #DDDDDD. 18px · 400 · 1.78

Poppins · label-nav

The quick brown fox jumps

Nav links. 14px · 500 · 1.43

Spacing & shape

Purpose	Value
Container	940px, centred (Webflow default)
Breakpoints	991px, 767px and 479px

Spacing scale

Token	Value	Preview
`xs`	8px
`sm`	15px
`md`	20px
`lg`	25px
`xl`	30px
`2xl`	40px

Layout spacing

Token	Value	Preview
`nav-side`	25px
`field-height`	40px
`arrow`	70px
`nav-height`	83px

Border radius

sm5px

full9999px

Motion

Slide change	Webflow slider default slide transition
Nav link hover	all 400ms: opacity 0.8 → 1, background to black at 23%
Button hover	all 400ms: #E23B7D → #AC285B
Close button hover	all 400ms: outline #CCCCCC → #E23B7D

Do’s and don’ts

Use full-bleed photos under linear-gradient(9deg, #000000 10%, #00000033).
Set slide titles in Poppins 62px weight 300, white, with one Playfair Display 18px line in #DDDDDD below.
Use #E23B7D for one button per view, hovering to #AC285B.
Keep buttons at 12px uppercase with 1px tracking, padding 17px 25px 15px and a 5px radius.
Credit the photographer in the bottom-left corner.
Draw forms with 1px #E1E1E1 lines, not filled fields.
Add a second accent colour or use pink for text blocks.
Bold the slide titles; the light 300 weight is the look.
Add drop shadows or rounded image corners.
Shrink the pink button text below 12px or drop the uppercase; white on #E23B7D is only about 4.1:1, so it needs the tracking and caps to read.
Use ink-muted #919191 for text under 15px; it is about 3.2:1 on white.
Use ink-subtle #777777 for anything but the 13px uppercase field labels.

Example prompt

Any page in the Loyal style

Prompt

Build your page in the Loyal style. Use Poppins for UI and titles and Playfair Display for subtitles, captions and quotes. Hero: a full-bleed photo under linear-gradient(9deg, #000 10%, rgba(0,0,0,0.2)), a transparent 83px nav with a 1px white-23% rule, white links at 80% opacity (14px weight 500) and outlined social squares (about 40px) with a 5px radius. Centre a Poppins 62px weight 300 white title in Title Case, a Playfair 18px #DDDDDD line, and one button: #E23B7D, white 12px uppercase text with 1px tracking, padding 17px 25px 15px, 5px radius, hover #AC285B over 400ms. Put square black-80% arrow tabs (about 70px) on the edges, 10px dots bottom-centre, a "Photo by:" credit bottom-left and an outlined "VIEW GALLERY" button bottom-right. Inner pages are white with #919191 Poppins 300 paragraphs. No shadows.

# Loyal Design System

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

## Overview

Loyal is a dark, cinematic photography showcase. The
home page is one screen: a full-bleed photo under a
black gradient, a transparent nav, a light-weight
Poppins title, one line of serif text and a single
deep-pink button. The mix of thin sans titles and

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Body background (inner … |
| surface-1    | #FFFFFF     | Same as canvas           |
| inverse-can… | #000000     | The slide gradient base… |
| on-primary   | #FFFFFF     | Text on primary          |
| ink          | #212121     | h1                       |
| ink-body     | #333333     | Default body text, form… |
| ink-muted    | #919191     | Paragraphs (Poppins 300) |
| ink-subtle   | #777777     | Uppercase field labels   |
| on-media     | #FFFFFF     | Nav, titles, credits, o… |
| on-media-mu… | #DDDDDD     | Serif subtitles on slid… |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| primary      | #E23B7D     | The main button (--deep… |
| primary-hov… | #AC285B     | Button background on ho… |
| line         | #E1E1E1     | Field underlines and th… |

## Typography

- display-slide: Poppins 62px / 300
- headline-lg: Poppins 34px / 500
- headline-md: Poppins 32px / 700
- quote: Playfair Display 30px / 400

{
  "$description": "Loyal design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#E23B7D",
      "$description": "The main button (--deep-pink)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#AC285B",
      "$description": "Button background on hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Body background (inner pages)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Same as canvas"
    },
    "ink": {
      "$type": "color",
      "$value": "#212121",
      "$description": "h1"
    },
    "ink-body": {
      "$type": "color",
      "$value": "#333333",
      "$description": "Default body text, form text, blockquotes"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#919191",
      "$description": "Paragraphs (Poppins 300)"
    },
    "ink-subtle": {
      "$type": "color",
      "$value": "#777777",

/* Loyal 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-sm, p-lg */

@theme {
  /* Colors */
  --color-primary: #E23B7D;
  --color-primary-hover: #AC285B;
  --color-on-primary: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #FFFFFF;
  --color-ink: #212121;
  --color-ink-body: #333333;
  --color-ink-muted: #919191;
  --color-ink-subtle: #777777;
  --color-line: #E1E1E1;
  --color-line-strong: #CCCCCC;
  --color-on-media: #FFFFFF;
  --color-on-media-muted: #DDDDDD;
  --color-line-on-media: #FFFFFF3B;
  --color-nav-hover: #0000003B;
  --color-dot: #FFFFFF66;
  --color-arrow: #000000CC;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;

  /* Fonts */
  --font-sans: "Poppins", sans-serif;
  --font-poppins: "Poppins", sans-serif;
  --font-playfair-display: "Playfair Display", serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-slide: 62px;
  --text-display-slide--line-height: 1.16;
  --text-display-slide--letter-spacing: 0px;
  --text-display-slide--font-weight: 300;
  --text-headline-lg: 34px;
  --text-headline-lg--line-height: 1.29;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 500;
  --text-headline-md: 32px;
  --text-headline-md--line-height: 1.13;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 700;
  --text-quote: 30px;
  --text-quote--line-height: 1.33;

/* Loyal 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: #E23B7D; /* The main button (--deep-pink) */
  --color-primary-hover: #AC285B; /* Button background on hover */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-canvas: #FFFFFF; /* Body background (inner pages) */
  --color-surface-1: #FFFFFF; /* Same as canvas */
  --color-ink: #212121; /* h1 */
  --color-ink-body: #333333; /* Default body text, form text, blockquotes */
  --color-ink-muted: #919191; /* Paragraphs (Poppins 300) */
  --color-ink-subtle: #777777; /* Uppercase field labels */
  --color-line: #E1E1E1; /* Field underlines and the form wrapper border */
  --color-line-strong: #CCCCCC; /* The 50px circular close button outline */
  --color-on-media: #FFFFFF; /* Nav, titles, credits, outline button on photos */
  --color-on-media-muted: #DDDDDD; /* Serif subtitles on slides */
  --color-line-on-media: #FFFFFF3B; /* 1px rule under the nav */
  --color-nav-hover: #0000003B; /* Nav link background on hover */
  --color-dot: #FFFFFF66; /* Inactive slider dots (active is white) */
  --color-arrow: #000000CC; /* Square arrow tabs */
  --color-inverse-canvas: #000000; /* The slide gradient base and the text on it */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */

  /* Fonts */
  --font-poppins: "Poppins", sans-serif;
  --font-playfair-display: "Playfair Display", serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-slide: 62px;
  --text-display-slide-font: var(--font-poppins);
  --text-display-slide-weight: 300;
  --text-display-slide-line-height: 1.16;
  --text-display-slide-tracking: 0px;
  --text-headline-lg: 34px;
  --text-headline-lg-font: var(--font-poppins);
  --text-headline-lg-weight: 500;
  --text-headline-lg-line-height: 1.29;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 32px;
  --text-headline-md-font: var(--font-poppins);
  --text-headline-md-weight: 700;
  --text-headline-md-line-height: 1.13;
  --text-headline-md-tracking: 0px;
  --text-quote: 30px;

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

Poppins · display-slide

Poppins · headline-lg

Playfair Display · quote

Poppins · title-lg

Playfair Display · body-serif

Poppins · label-nav

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Loyal style

More design systems like this

Kai's

Mio Kain

Flaue Udo

Max Bennet

Bring any of them to your AI tool