Portfolyo Design System

Get DESIGN.md Download View template Works with

Portfolyo website template preview detail 2

Portfolyo website template preview detail 3

Portfolyo is a one-person portfolio (demo name John Doe) that reads like a printed CV poster. Everything is black on white, almost every heading is set in uppercase Inter Tight 500, and the structure is drawn with thick 2px black rules rather than boxes or shadows. Colour comes only from the portrait and the bright, glossy 3D artwork in the work carousel.

Four signatures make it recognisable:

The ruled nav. A 130px header split into two cells by 2px black lines: JOHN DOE centred in the left cell, and ABOUT ME · PORTFOLIO · NEWS · HIRE ME on the right, with a 2px rule under both.
Uppercase everything. body sets text-transform: uppercase. Only paragraphs and list items (Inter, sentence case) escape it.
Scroll-filled intro. The 34px about text starts at 10% black and fills to full black line by line as you scroll (A GRAPHIC DESIGNER WITH 7 YEARS OF EXPERIENCE…).
Ruled work carousel. Square-cornered project images in a horizontal slider, separated by 2px vertical black lines, each with an uppercase title and an outlined pill tag below.

Portfolyo is a light-only design.

Colors

Surfaces

canvas#FFFFFF

Page, nav, buttons at rest

surface-1#F1F1F7

Webflow variable --ghost-white; not measured on the home page

inverse-canvas#000000

Hovered buttons and the active timeline segment

Ink

on-primary#000000

Text on primary

ink#000000

All headings, labels, links and rules

ink-muted#000000

Body text

ink-faint#C3C8CC

Small top text in the testimonial block only

ink-reveal#000000 · 10%

The resting state of scroll-filled text, before it fills to ink

inverse-ink#FFFFFF

Text on inverse-canvas

Action

primary#FFFFFF

The outlined pill button at rest

primary-hover#000000

The pill fills black with white text on hover

Lines & effects

line#DDDDDD

The vertical rail of the experience timeline

line-strong#000000

2px nav rules, button and tag outlines, title underlines, carousel dividers, the footer top rule

Typography

Inter Tight · display-hero

The quick brown fox jumps

HEY, I'M / JOHN DOE. 80px · 500 · 1.2 · 3px

Inter Tight · headline-lg

The quick brown fox jumps

Scroll-filled about text. 34px · 500 · 1.3

Inter · title-price

The quick brown fox jumps

Pricing figures. 33px · 500 · 1.2

Inter · body-lg

The quick brown fox jumps

Paragraphs (p), sentence case. 18px · 500 · 1.2

Inter Tight · label-lg

The quick brown fox jumps

Pill button labels (in a 31px roll mask). 21px · 600 · 1.52 · 1px

Inter · caption

The quick brown fox jumps

Timeline dates (ADOBE AT 2017-2020). 13px · 600 · 1.2 · 1px

Spacing & shape

Purpose	Value
Container	max 1200px for text blocks; most bands run full width with 5% side padding (72px at 1440px)
Section rhythm	.section is 100px top and bottom; the footer is padding 50px 5%
Breakpoints	991px, 767px and 479px (Webflow defaults), plus a 1440px+ step

Spacing scale

Token	Value	Preview
`xs`	7px
`sm`	16px
`md`	25px
`lg`	30px
`xl`	50px
`2xl`	60px
`3xl`	100px

Layout spacing

Token	Value	Preview
`hero`	50px
`gutter`	72px
`section`	100px
`nav-height`	130px

Border radius

sm15px

tag30px

pill40px

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

Scroll-filled text	Lines rest at opacity 0.1 and fill to 1 while scrolling through the viewport
Fade-up	y 50px → 0 and opacity 0 → 1, 600ms outExpo
Pop in	scale 0 → 1, 500–600ms outExpo
Underline grow	Size, 300–500ms ease; 800ms outExpo for the longest line
Text roll	Label moves y 0% in a 20–31px mask, 300ms ease
Arrow turn	rotate, 400ms ease
Button fill	CSS transition: all .2s (white → black)
Links	all .3s; background-color .1s, color .1s on small controls

Do’s and don’ts

Set headings, nav, buttons and tags in uppercase Inter Tight 500–600; keep paragraphs and lists in sentence-case Inter.
Draw structure with 2px #000000 rules: the nav grid, carousel dividers, title underlines, the footer top.
Use the outlined pill (2px black, 30px radius) for actions and fill it #000000 with #FFFFFF text on hover.
Keep images square-cornered; the only round image is the hero portrait.
Let scroll-filled text start at 10% black (ink-reveal) and fill to ink.
Use the 1–3px tracking only where measured: 3px on the hero name, 2px on nav, 1px on section and project titles and buttons.
Add an accent colour, gradients or shadows to the UI.
Use ink-faint #C3C8CC for anything but the small testimonial top label; it is too pale for reading text.
Leave text at ink-reveal (10%) once it is in view.
Set paragraphs in uppercase, or headings in sentence case.
Use borders thinner than 2px on components; 1px is only for footer dividers.
Round the work or blog images.

Example prompt

Any page in the Portfolyo style

Prompt

Build your page in the Portfolyo style. White #FFFFFF page, black #000000 text, no accent colour, no shadows. Headings, nav, buttons and tags in uppercase Inter Tight: hero 80px weight 500, line height 1.2, 3px tracking; section titles 26px weight 500 with 1px tracking and a 2px black underline. Paragraphs and lists in sentence-case Inter 16–18px weight 500, full black. Header: 130px tall, split into two cells by 2px black rules, logo left, uppercase links right (14px 600, 2px tracking). Buttons are outlined pills: white, 2px black border, 30px radius, padding 14px 30px 12px, fill black with white text on hover over 0.2s. Images are square-cornered, bright glossy 3D art; a single circular portrait in the hero. Separate carousel cards with 2px vertical black lines. Section padding 100px, 5% side padding. Fade up from 50px over 600ms easeOutExpo; scroll-fill the intro text from 10% to 100% black.

# Portfolyo Design System

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

## Overview

Portfolyo is a one-person portfolio (demo name John Doe)
that reads like a printed CV poster. Everything is black
on white, almost every heading is set in uppercase Inter
Tight 500, and the structure is drawn with thick 2px
black rules rather than boxes or shadows. Colour comes

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page, nav, buttons at r… |
| surface-1    | #F1F1F7     | Webflow variable --ghos… |
| inverse-can… | #000000     | Hovered buttons and the… |
| on-primary   | #000000     | Text on primary          |
| ink          | #000000     | All headings, labels, l… |
| ink-muted    | #000000     | Body text                |
| ink-faint    | #C3C8CC     | Small top text in the t… |
| ink-reveal   | #000000 10% | The resting state of sc… |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| primary      | #FFFFFF     | The outlined pill butto… |
| primary-hov… | #000000     | The pill fills black wi… |
| line         | #DDDDDD     | The vertical rail of th… |
| line-strong  | #000000     | 2px nav rules, button a… |

## Typography

- display-hero: Inter Tight 80px / 500
- display-cta: Inter Tight 60px / 500
- headline-lg: Inter Tight 34px / 500
- headline-md: Inter Tight 30px / 500

{
  "$description": "Portfolyo design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "The outlined pill button at rest"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#000000",
      "$description": "The pill fills black with white text on hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page, nav, buttons at rest"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F1F1F7",
      "$description": "Webflow variable --ghost-white; not measured on the home page"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "All headings, labels, links and rules"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Body text"
    },
    "ink-faint": {
      "$type": "color",
      "$value": "#C3C8CC",
      "$description": "Small top text in the testimonial block only"
    },
    "ink-reveal": {
      "$type": "color",
      "$value": "#0000001A",

/* Portfolyo 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: #FFFFFF;
  --color-primary-hover: #000000;
  --color-on-primary: #000000;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F1F1F7;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-ink-faint: #C3C8CC;
  --color-ink-reveal: #0000001A;
  --color-line: #DDDDDD;
  --color-line-strong: #000000;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;

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

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 80px;
  --text-display-hero--line-height: 1.2;
  --text-display-hero--letter-spacing: 3px;
  --text-display-hero--font-weight: 500;
  --text-display-cta: 60px;
  --text-display-cta--line-height: 1.1;
  --text-display-cta--letter-spacing: 0px;
  --text-display-cta--font-weight: 500;
  --text-headline-lg: 34px;
  --text-headline-lg--line-height: 1.3;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 500;
  --text-headline-md: 30px;
  --text-headline-md--line-height: 1.2;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 500;
  --text-headline-sm: 26px;
  --text-headline-sm--line-height: 1.1;
  --text-headline-sm--letter-spacing: 1px;
  --text-headline-sm--font-weight: 500;

/* Portfolyo 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: #FFFFFF; /* The outlined pill button at rest */
  --color-primary-hover: #000000; /* The pill fills black with white text on hover */
  --color-on-primary: #000000; /* Text on primary */
  --color-canvas: #FFFFFF; /* Page, nav, buttons at rest */
  --color-surface-1: #F1F1F7; /* Webflow variable --ghost-white; not measured on the home page */
  --color-ink: #000000; /* All headings, labels, links and rules */
  --color-ink-muted: #000000; /* Body text */
  --color-ink-faint: #C3C8CC; /* Small top text in the testimonial block only */
  --color-ink-reveal: #0000001A; /* The resting state of scroll-filled text, before it fills to ink */
  --color-line: #DDDDDD; /* The vertical rail of the experience timeline */
  --color-line-strong: #000000; /* 2px nav rules, button and tag outlines, title underlines, carousel dividers, the footer top rule */
  --color-inverse-canvas: #000000; /* Hovered buttons and the active timeline segment */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */

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

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 80px;
  --text-display-hero-font: var(--font-inter-tight);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 1.2;
  --text-display-hero-tracking: 3px;
  --text-display-cta: 60px;
  --text-display-cta-font: var(--font-inter-tight);
  --text-display-cta-weight: 500;
  --text-display-cta-line-height: 1.1;
  --text-display-cta-tracking: 0px;
  --text-headline-lg: 34px;
  --text-headline-lg-font: var(--font-inter-tight);
  --text-headline-lg-weight: 500;
  --text-headline-lg-line-height: 1.3;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 30px;
  --text-headline-md-font: var(--font-inter-tight);
  --text-headline-md-weight: 500;
  --text-headline-md-line-height: 1.2;
  --text-headline-md-tracking: 0px;
  --text-headline-sm: 26px;
  --text-headline-sm-font: var(--font-inter-tight);

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

Inter Tight · display-hero

Inter Tight · headline-lg

Inter · title-price

Inter · body-lg

Inter Tight · label-lg

Inter · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Portfolyo style

More design systems like this

Mio Kain

Moka

Fifi

Ken

Bring any of them to your AI tool