Yoyo Design System

Get DESIGN.md Download View template Works with

Yoyo is a one-screen, magazine-style agency homepage. The whole page is a full-viewport hero slider framed by two white bars: the navigation at the top and a Works Quick View bar at the bottom. Each slide is a deep, flat colour (black, midnight #090A35, forest #012524) carrying a large white Playfair Display serif headline, one italic keyword in a bright colour with a hand-drawn underline, and square-cornered buttons. It feels like the cover of a fashion or culture magazine rather than a scrolling marketing page.

Four signatures make it recognisable:

Serif display with an italic keyword. Hey! We build [keyword] for your business. in Playfair Display 90px; the keyword is 600 italic and coloured per slide: strategies gold #FFCC29, websites sky #7EC8E3, brands lime #B2DA6F.
The drawn underline. A loose brush stroke in the keyword's colour is drawn under it by a Lottie animation when the slide plays.
The white frame. An 80px white nav on top and an 80px white bar fixed at the bottom (a two-line menu icon with Works Quick View on the left, italic follow us: and four 35px ringed social icons on the right) frame the coloured slide.
Serif UI. Nav links, buttons and labels are Playfair Display too; only paragraphs switch to Inter.

Colors

Surfaces

canvas#FFFFFF

Page background, the top nav, the bottom bar, the works overlay

surface-1#FFFFFF

Same as canvas: Yoyo has no tinted light surface

field-line#BDBDBD · 40%

Cart dividers / form field borders

inverse-canvas#000000

Slide 1 (strategies)

Ink

on-primary#FFFFFF · 70%

Text on primary

on-primary-hover#FFFFFF

on-secondary#FFFFFF · 70%

ink#000000

Nav links, labels, the works list, ring borders

ink-muted#666666

Paragraphs and dropdown links on white

ink-strong#444444

Emphasised paragraph text on inner pages

inverse-ink#FFFFFF

Hero headline / hero lead

inverse-ink-muted#F0F0F0

Hero headline / hero lead

on-media#FFFFFF

Action

primary#000000

The default button; text goes to full white on hover

primary-hover#000000

secondary#20459B

View All Works on the midnight and forest slides

secondary-2#03514E

With secondary: View All Works on the midnight and forest slides

accent#FFCC29

Italic keyword and its underline, one per slide

accent-sky#7EC8E3

With accent: Italic keyword and its underline, one per slide

accent-lime#B2DA6F

With accent: Italic keyword and its underline, one per slide

Lines & effects

line#000000

1px nav-link underline, 1–2px icon rings, cart count ring

line-soft#E1E1E1

Cart dividers / form field borders

slide-forest#012524

Slide 2 (brands) and blockquotes

slide-midnight#090A35

Slide 3 (websites)

inverse-line#FFFFFF · 23%

1px inset outline that makes the black button visible on the black slide

glass#FFFFFF · 40%

Inactive slider dots (the active one is white)

Typography

Playfair Display · display-hero

The quick brown fox jumps

Hero lines Hey! We build and for your business. 90px · 400 · 1.0

Playfair Display · headline-lg

The quick brown fox jumps

Project titles in the Works Quick View overlay (.project-link); they turn italic on hover. 70px · 400 · 1.0

Inter · body-lg

The quick brown fox jumps

Hero lead in #F0F0F0. 25px · 400 · 1.36

Playfair Display · label

The quick brown fox jumps

Nav links, buttons, Works Quick View. 17px · 500 · 1.18

Playfair Display · eyebrow

The quick brown fox jumps

Recent Works overlay title (.display-4); follow us: uses 16px italic too. 16px · 600 · 1.5

Playfair Display · caption

The quick brown fox jumps

Default body text, form fields. 14px · 500 · 1.43

Spacing & shape

Purpose	Value
Container	1130px max, centred, for the nav, slide content and bottom bar
Breakpoints	991px (bottom bar hidden, nav collapses to a menu button, headline 60px), 767px (hero 700px tall, slide bottom padding 40px), 479px (dots centred, keyword drops onto its own line)

Spacing scale

Token	Value	Preview
`xs`	6px
`sm`	18px
`md`	20px
`lg`	25px
`xl`	30px
`2xl`	80px

Layout spacing

Token	Value	Preview
`page-inline`	43px
`slide-inline`	72px
`bar`	80px
`slide-bottom`	80px

Border radius

pill100px

ring200px

full9999px

Motion

Lottie accents	The keyword underline is a Lottie stroke that draws in when its slide plays; button arrows and the play button are Lottie files that plays on hover over 500–1600ms ease (0 → 100%, back to 0 on mouse-out)
Nav link underline	1px line width 0 → 100%, 300–500ms
Button hover	Text colour 70% → 100% white, transition: all .3s
Social icon hover	Ring fill grows over 400ms outCubic, border 200ms outSine; icon opacity to 60%
Works overlay	Panel moves y -100px → 0 and fades in over 500–700ms ease; closes in reverse
Works title hover	font-style: italic, 300ms; the project image shows on hover
Dropdown caret	Rotate, 200ms ease

Do’s and don’ts

Use Playfair Display for headlines and all UI labels, and Inter only for paragraphs.
Set one keyword per headline in Playfair 600 italic, coloured #FFCC29, #7EC8E3 or #B2DA6F, with a drawn underline in the same colour.
Keep the white 80px bars at top and bottom and put the colour between them.
Use square buttons: 0px radius, 56px tall, padding 18px 25px, Playfair 17px weight 500 with a chevron.
Pair each dark ground with its own button colour: black with an outlined black button, #090A35 with #20459B, #012524 with #03514E.
Keep body paragraphs at 17px #666666 on white.
Round buttons, fields or images; only small controls (dots, rings, play) are circles.
Put the bright keyword colours on anything but the keyword and its underline.
Use Inter for headlines or Playfair for long paragraphs.
Add drop shadows or gradients to the slides.
Put more than one italic word in a headline.
Add tinted panels; the light side of Yoyo is pure white with black.

Example prompt

Any page in the Yoyo style

Prompt

Build your page in the Yoyo style. Frame the content with a fixed white 80px top nav and a fixed white 80px bottom bar (3% side padding, container 1130px). Between them, a full-viewport flat colour slide (#000000, #090A35 or #012524) with padding 0 5% 80px. Headline in Playfair Display 90px weight 400 line height 1.0, white, left aligned: "Hey! We build [keyword] for your business.", with the keyword in Playfair 600 italic coloured #FFCC29, #7EC8E3 or #B2DA6F and a hand-drawn underline in the same colour that draws in over 1600ms. Lead: Inter 25px line height 34px in #F0F0F0. Buttons: square (0px radius), 56px tall, padding 18px 25px, Playfair 17px weight 500 with a small chevron; one coloured button matched to the slide and one white button with black text. Nav links: Playfair 17px weight 500 black with a 1px black underline that grows on hover. No shadows, no rounded corners.

# Yoyo Design System

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

## Overview

Yoyo is a one-screen, magazine-style agency homepage.
The whole page is a full-viewport hero slider framed by
two white bars: the navigation at the top and a Works
Quick View bar at the bottom. Each slide is a deep, flat
colour (black, midnight #090A35, forest #012524)

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background, the to… |
| surface-1    | #FFFFFF     | Same as canvas: Yoyo ha… |
| field-line   | #BDBDBD 40% | Cart dividers / form fi… |
| inverse-can… | #000000     | Slide 1 (strategies)     |
| on-primary   | #FFFFFF 70% | Text on primary          |
| on-primary-… | #FFFFFF     |                          |
| on-secondary | #FFFFFF 70% |                          |
| ink          | #000000     | Nav links, labels, the … |
| ink-muted    | #666666     | Paragraphs and dropdown… |
| ink-strong   | #444444     | Emphasised paragraph te… |
| inverse-ink  | #FFFFFF     | Hero headline / hero le… |
| inverse-ink… | #F0F0F0     | Hero headline / hero le… |
| on-media     | #FFFFFF     |                          |
| primary      | #000000     | The default button; tex… |

## Typography

- display-hero: Playfair Display 90px / 400
- display-italic: Playfair Display 90px / 600
- headline-lg: Playfair Display 70px / 400
- body-lg: Inter 25px / 400

{
  "$description": "Yoyo 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 default button; text goes to full white on hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFFB3",
      "$description": "Text on primary"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#000000"
    },
    "on-primary-hover": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "secondary": {
      "$type": "color",
      "$value": "#20459B",
      "$description": "View All Works on the midnight and forest slides"
    },
    "secondary-2": {
      "$type": "color",
      "$value": "#03514E",
      "$description": "With secondary: View All Works on the midnight and forest slides"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFFB3"
    },
    "accent": {
      "$type": "color",
      "$value": "#FFCC29",
      "$description": "Italic keyword and its underline, one per slide"
    },
    "accent-sky": {
      "$type": "color",
      "$value": "#7EC8E3",
      "$description": "With accent: Italic keyword and its underline, one per slide"
    },
    "accent-lime": {

/* Yoyo 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-pill, p-lg */

@theme {
  /* Colors */
  --color-primary: #000000;
  --color-on-primary: #FFFFFFB3;
  --color-primary-hover: #000000;
  --color-on-primary-hover: #FFFFFF;
  --color-secondary: #20459B;
  --color-secondary-2: #03514E;
  --color-on-secondary: #FFFFFFB3;
  --color-accent: #FFCC29;
  --color-accent-sky: #7EC8E3;
  --color-accent-lime: #B2DA6F;
  --color-canvas: #FFFFFF;
  --color-surface-1: #FFFFFF;
  --color-ink: #000000;
  --color-ink-muted: #666666;
  --color-ink-strong: #444444;
  --color-line: #000000;
  --color-line-soft: #E1E1E1;
  --color-field-line: #BDBDBD66;
  --color-inverse-canvas: #000000;
  --color-slide-forest: #012524;
  --color-slide-midnight: #090A35;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #F0F0F0;
  --color-inverse-line: #FFFFFF3B;
  --color-glass: #FFFFFF66;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Playfair Display", serif;
  --font-playfair-display: "Playfair Display", serif;
  --font-inter: "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 90px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 400;
  --text-display-italic: 90px;
  --text-display-italic--line-height: 1.0;
  --text-display-italic--letter-spacing: 0px;

/* Yoyo 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 default button; text goes to full white on hover */
  --color-on-primary: #FFFFFFB3; /* Text on primary */
  --color-primary-hover: #000000;
  --color-on-primary-hover: #FFFFFF;
  --color-secondary: #20459B; /* View All Works on the midnight and forest slides */
  --color-secondary-2: #03514E; /* With secondary: View All Works on the midnight and forest slides */
  --color-on-secondary: #FFFFFFB3;
  --color-accent: #FFCC29; /* Italic keyword and its underline, one per slide */
  --color-accent-sky: #7EC8E3; /* With accent: Italic keyword and its underline, one per slide */
  --color-accent-lime: #B2DA6F; /* With accent: Italic keyword and its underline, one per slide */
  --color-canvas: #FFFFFF; /* Page background, the top nav, the bottom bar, the works overlay */
  --color-surface-1: #FFFFFF; /* Same as canvas: Yoyo has no tinted light surface */
  --color-ink: #000000; /* Nav links, labels, the works list, ring borders */
  --color-ink-muted: #666666; /* Paragraphs and dropdown links on white */
  --color-ink-strong: #444444; /* Emphasised paragraph text on inner pages */
  --color-line: #000000; /* 1px nav-link underline, 1–2px icon rings, cart count ring */
  --color-line-soft: #E1E1E1; /* Cart dividers / form field borders */
  --color-field-line: #BDBDBD66; /* Cart dividers / form field borders */
  --color-inverse-canvas: #000000; /* Slide 1 (strategies) */
  --color-slide-forest: #012524; /* Slide 2 (brands) and blockquotes */
  --color-slide-midnight: #090A35; /* Slide 3 (websites) */
  --color-inverse-ink: #FFFFFF; /* Hero headline / hero lead */
  --color-inverse-ink-muted: #F0F0F0; /* Hero headline / hero lead */
  --color-inverse-line: #FFFFFF3B; /* 1px inset outline that makes the black button visible on the black slide */
  --color-glass: #FFFFFF66; /* Inactive slider dots (the active one is white) */
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-playfair-display: "Playfair Display", serif;
  --font-inter: "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 90px;
  --text-display-hero-font: var(--font-playfair-display);
  --text-display-hero-weight: 400;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: 0px;
  --text-display-italic: 90px;
  --text-display-italic-font: var(--font-playfair-display);
  --text-display-italic-weight: 600;
  --text-display-italic-line-height: 1.0;

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

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

Playfair Display · display-hero

Playfair Display · headline-lg

Inter · body-lg

Playfair Display · label

Playfair Display · eyebrow

Playfair Display · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Yoyo style

More design systems like this

BigStudio

Bogota

Brün

Creativë

Bring any of them to your AI tool