Romeo Design System

Get DESIGN.md Download View template Works with

Romeo is a bold, playful personal portfolio for a single designer. The page is a pale cream (#FFFFE6) with everything else in pure black: a huge, wide Clash Display headline, outline pill buttons, hand-drawn doodles and a circular text badge. The work section is a slow zig-zag of large square-cornered images with the project name and a View Project link beside each one.

Four signatures make it recognisable:

Outline pill nav. Four separate pills (Home, About, Work, Contact) with a 2px black border and a 40px radius, 7px apart at the top right. On hover each fills black and its text turns cream.
Poster hero. Visual / Designer at 213px, weight 600, line height 0.9, centred in a full-height screen, with a circular text badge (CREATIVE DESIGNER UI/UX) to the right and Tw. In. Db. Ig. centred at the bottom.
Black wipe reveals. Headings are covered by a black block (.heading-overlay) that slides across and off as they scroll into view.
Zig-zag work list. Each project is a 2-column row (1fr / 1.3fr) with a 1.32:1 image and the title block on the other side, alternating left and right; a doodle (a smiley) floats near the first title.

Romeo is a light-only design.

Colors

Surfaces

canvas#FFFFE6

Page background (--light-yellow)

surface-1#FFFFFF

The white cart panel, the only surface lighter than the page

field-text#6E6E6E

Input text and placeholders

inverse-canvas#000000

Nav pill hover fill, the heading wipe block

Ink

on-primary#FFFFE6

Text on primary

on-primary-hover#FFFFFF

Text on primary-hover

ink#000000

All text, borders, rules and doodles (89 of 89 measured text uses)

ink-muted#000000

Body text is full black, the same as ink

ink-faint#000000 · 36%

.smaller-text (16px weight 300, opacity 0.36) for secondary figures

inverse-ink#FFFFE6

Text on inverse-canvas

Action

primary#000000

The .button pill: cream text on black

primary-hover#222222

.button:hover

Lines & effects

line#000000

2px pill borders, 2px input underline, 2px nav underline

line-soft#B9BBC8

The 1px base line of link-underline text links

line-cart#E6E6E6

1px cart border only

Typography

Clash Display · display-hero

The quick brown fox jumps

Visual, Designer (.title-1, 13.3rem), each in a 210px clipped box. 213px · 600 · 0.9

Clash Display · headline-lg

The quick brown fox jumps

Hey! I am Romeo, Latest Work, I create digital experiences, the contact title. 60px · 600 · 1.1

Clash Display · title-lg

The quick brown fox jumps

We are happy to contribute to our clients success. 24px · 600 · 1.15

Clash Display · body-lg

The quick brown fox jumps

Section leads (These are some of my recent favorites – always subject to change.). 21px · 500 · 1.24

Clash Display · label-social

The quick brown fox jumps

Tw. 19px · 600 · 1.37

Clash Display · caption

The quick brown fox jumps

Form labels, the ring badge text (set in caps). 14px · 600 · 1.43

Spacing & shape

Purpose	Value
Container	.container max 1200px, centred
Section rhythm	.section is 120px top and bottom with 5% sides (72px at 1440px)
Breakpoints	991px, 767px and 479px, plus a min-width: 768px set

Spacing scale

Token	Value	Preview
`hair`	2px
`xs`	7px
`sm`	16px
`md`	30px
`lg`	50px
`xl`	80px

Layout spacing

Token	Value	Preview
`nav-top`	35px
`field-indent`	79px
`section`	120px

Border radius

pill30px

nav40px

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 wipe	Black .heading-overlay moves x −100% → 0 then → 100% (300ms easeOut), uncovering the heading
Clipped rise	Hero lines and project titles move y 300px → 0 inside a clipped box, 500ms
Nav and social roll	Text rolls up inside a 26px box; size underline 0 → 100%, 500ms ease
Pill hover	Border and fill change, border 200ms outSine, plus transition: all
Icon hover	scale 1 → 1.1, 100ms ease
Page load	opacity 0 → 1 and move → 0px, 1000ms outQuart
Size reveals	Size 400ms outCubic and 500ms outExpo (blocks opening to full size)
Custom cursor	Follows the mouse, scales 0 → 1 in 500ms
Button	transition: all .2s

Do’s and don’ts

Keep the page #FFFFE6 and everything else #000000.
Use Clash Display 600 for every heading, with no letter spacing.
Make nav and secondary actions 2px black outline pills (40px radius) that fill black with #FFFFE6 text on hover.
Reveal headings with a black block that wipes across and off.
Alternate project rows: image left, then right, at 1fr / 1.3fr with 30px gaps.
Use underline-only inputs (2px black bottom border) set in Inter 18px.
Use white for text on black; use the cream #FFFFE6.
Round the project images or add shadows.
Add an accent colour; the blue and green CSS variables are unused.
Use ink-faint (black at 36%) below 16px or for paragraphs; it is about 2.5:1 on cream.
Use Clash Display for form inputs, or Inter anywhere else.
Centre the project titles; they align to the side away from the image.

Example prompt

Any page in the Romeo style

Prompt

Build your page in the Romeo style. Cream #FFFFE6 background, black #000000 text, Clash Display weight 600 headings with no letter spacing. Fixed nav: a 50px two-circle logo left; four outline pills right (2px black border, 40px radius, 46px tall, padding 8px 18px, 18px weight 600), 7px apart, filling black with #FFFFE6 text on hover. Hero: two centred lines at 213px, line height 0.9, rising from a clipped box. Sections: 120px top and bottom, 5% sides, 1200px container, centred 60px titles revealed by a black block wiping across, then a 21px weight 500 lead. Work: alternating rows, a square-cornered 1.32:1 image and a 44px title, 18px meta and a "View Project" link. No shadows, no gradients, no accent colour.

# Romeo Design System

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

## Overview

Romeo is a bold, playful personal portfolio for a single
designer. The page is a pale cream (#FFFFE6) with
everything else in pure black: a huge, wide Clash
Display headline, outline pill buttons, hand-drawn
doodles and a circular text badge. The work section is a

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFE6     | Page background (--ligh… |
| surface-1    | #FFFFFF     | The white cart panel, t… |
| field-text   | #6E6E6E     | Input text and placehol… |
| inverse-can… | #000000     | Nav pill hover fill, th… |
| on-primary   | #FFFFE6     | Text on primary          |
| on-primary-… | #FFFFFF     | Text on primary-hover    |
| ink          | #000000     | All text, borders, rule… |
| ink-muted    | #000000     | Body text is full black… |
| ink-faint    | #000000 36% | .smaller-text (16px wei… |
| inverse-ink  | #FFFFE6     | Text on inverse-canvas   |
| primary      | #000000     | The .button pill: cream… |
| primary-hov… | #222222     | .button:hover            |
| line         | #000000     | 2px pill borders, 2px i… |
| line-soft    | #B9BBC8     | The 1px base line of li… |

## Typography

- display-hero: Clash Display 213px / 600
- headline-lg: Clash Display 60px / 600
- headline-md: Clash Display 44px / 600
- headline-sm: Clash Display 30px / 600

{
  "$description": "Romeo 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 .button pill: cream text on black"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#222222",
      "$description": ".button:hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFE6",
      "$description": "Text on primary"
    },
    "on-primary-hover": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary-hover"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFE6",
      "$description": "Page background (--light-yellow)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "The white cart panel, the only surface lighter than the page"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "All text, borders, rules and doodles (89 of 89 measured text uses)"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Body text is full black, the same as ink"
    },
    "ink-faint": {
      "$type": "color",
      "$value": "#0000005C",

/* Romeo 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-primary-hover: #222222;
  --color-on-primary: #FFFFE6;
  --color-on-primary-hover: #FFFFFF;
  --color-canvas: #FFFFE6;
  --color-surface-1: #FFFFFF;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-ink-faint: #0000005C;
  --color-field-text: #6E6E6E;
  --color-line: #000000;
  --color-line-soft: #B9BBC8;
  --color-line-cart: #E6E6E6;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFE6;

  /* Fonts */
  --font-sans: "Clash Display", "Space Grotesk", sans-serif;
  --font-clash-display: "Clash Display", "Space Grotesk", sans-serif;
  --font-inter: "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 213px;
  --text-display-hero--line-height: 0.9;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 600;
  --text-headline-lg: 60px;
  --text-headline-lg--line-height: 1.1;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 600;
  --text-headline-md: 44px;
  --text-headline-md--line-height: 0.91;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 600;
  --text-headline-sm: 30px;
  --text-headline-sm--line-height: 1;
  --text-headline-sm--letter-spacing: 0px;
  --text-headline-sm--font-weight: 600;
  --text-title-lg: 24px;
  --text-title-lg--line-height: 1.15;

/* Romeo 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 .button pill: cream text on black */
  --color-primary-hover: #222222; /* .button:hover */
  --color-on-primary: #FFFFE6; /* Text on primary */
  --color-on-primary-hover: #FFFFFF; /* Text on primary-hover */
  --color-canvas: #FFFFE6; /* Page background (--light-yellow) */
  --color-surface-1: #FFFFFF; /* The white cart panel, the only surface lighter than the page */
  --color-ink: #000000; /* All text, borders, rules and doodles (89 of 89 measured text uses) */
  --color-ink-muted: #000000; /* Body text is full black, the same as ink */
  --color-ink-faint: #0000005C; /* .smaller-text (16px weight 300, opacity 0.36) for secondary figures */
  --color-field-text: #6E6E6E; /* Input text and placeholders */
  --color-line: #000000; /* 2px pill borders, 2px input underline, 2px nav underline */
  --color-line-soft: #B9BBC8; /* The 1px base line of link-underline text links */
  --color-line-cart: #E6E6E6; /* 1px cart border only */
  --color-inverse-canvas: #000000; /* Nav pill hover fill, the heading wipe block */
  --color-inverse-ink: #FFFFE6; /* Text on inverse-canvas */

  /* Fonts */
  --font-clash-display: "Clash Display", "Space Grotesk", sans-serif;
  --font-inter: "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 213px;
  --text-display-hero-font: var(--font-clash-display);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 0.9;
  --text-display-hero-tracking: 0px;
  --text-headline-lg: 60px;
  --text-headline-lg-font: var(--font-clash-display);
  --text-headline-lg-weight: 600;
  --text-headline-lg-line-height: 1.1;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 44px;
  --text-headline-md-font: var(--font-clash-display);
  --text-headline-md-weight: 600;
  --text-headline-md-line-height: 0.91;
  --text-headline-md-tracking: 0px;
  --text-headline-sm: 30px;
  --text-headline-sm-font: var(--font-clash-display);
  --text-headline-sm-weight: 600;
  --text-headline-sm-line-height: 1;
  --text-headline-sm-tracking: 0px;

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

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

Clash Display · display-hero

Clash Display · headline-lg

Clash Display · title-lg

Clash Display · body-lg

Clash Display · label-social

Clash Display · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Romeo style

More design systems like this

Mio Kain

Moka

Fifi

Portfolyo

Bring any of them to your AI tool