Porto Design System

Get DESIGN.md Download View template Works with

Porto is a dark, poster-style agency template that sells "multiple layouts". It feels like a studio's launch screen: an almost-black page, one enormous uppercase word, small uppercase corner labels and a thin fixed rail down the left edge. Colour appears only as small red marks: a starburst above the wordmark, a 1px red line that grows down the rail as you scroll, and red buttons and hovers on the inner pages. The demo index below the hero is a calm grid of flat #181818 cards with handwritten captions.

Four signatures make it recognisable:

The left rail. A fixed 90px column, full height, with a 1px line border on its right and a hamburger made of three vertical white strokes in the middle. A 1px primary red line runs down the rail's right edge and grows with page scroll.
The four-corner frame. A fixed top bar and a hero bottom bar put uppercase 15px labels in the corners: DIGITAL EXPERIENCE / DESIGN AGENCY top left, the PORTO logo top centre, INFO@PORTO.COM top right, MULTIPLE — LAYOUT and WEBFLOW TEMPLATE at the bottom, with a mouse-scroll icon between them.
The giant wordmark with a red star. PORTO in Satoshi 700 at 300px, uppercase, under a 40px red starburst. A 20px uppercase subtitle at 50% white sits below it.
Script captions on flat cards. Demo cards are flat surface-1 tiles with a screenshot and a centred caption (Home 1, Work 2) in Story Script, a slanted handwritten face. The whole card turns red (accent #FF384A) on hover.

Porto is a dark-only design.

Colors

Surfaces

canvas#111111

Page background, the left rail, the overlay menu

surface-1#181818

Demo cards (pres-content)

surface-2#222222

Form fields, the round go-top button, close buttons, the primary button's hover

field#222222

Form fields, the round go-top button, close buttons, the primary button's hover

Ink

on-primary#FFFFFF

Text on primary

on-secondary#111111

Text on secondary

on-accent#FFFFFF

Text on accent

ink#FFFFFF

Wordmark, section titles, footer titles, menu links

ink-soft#FFFFFF · 80%

Corner labels in the top bar and hero bottom bar

ink-card#FFFFFF · 70%

Card captions, field labels, social links (opacity 0.7), menu-link hover

ink-muted#FFFFFF · 60%

Paragraphs (base p) and placeholders; footer links use #FFFFFF91 (57%), the same step

ink-subtle#FFFFFF · 50%

The hero subtitle A COMPLETE MULTIPLE — LAYOUT…

on-media#FFFFFF

Action

primary#F64D52

Filled buttons, the scroll-progress line, field focus underline (the starburst is a red PNG of the same hue)

primary-hover#222222

Filled buttons go dark grey on hover

secondary#FFFFFF

The white button variant

accent#FF384A

Card hover fill, go-top hover, the 1px red underline under button-line

Lines & effects

line#FFFFFF · 20%

Rail border, menu divider, underline fields, mobile top-bar border

line-strong#FFFFFF · 40%

Blog dividers on inner pages

Typography

Satoshi · display-hero

The quick brown fox jumps

PORTO hero wordmark (title-1 vw x2). 300px · 700 · 1.1

Satoshi · headline-menu

The quick brown fox jumps

Overlay menu links (Home, About, Work, News, Contact). 80px · 700 · 1

Satoshi · title-md

The quick brown fox jumps

h3 on inner pages. 24px · 500 · 1.25

Satoshi · eyebrow

The quick brown fox jumps

Hero subtitle, menu divider. 20px · 500 · 1.1

Satoshi · body-lg

The quick brown fox jumps

Paragraphs, in ink-muted. 19px · 500 · 1.37

Satoshi · label

The quick brown fox jumps

Corner labels, the email link. 15px · 500 · 1.3

Spacing & shape

Purpose	Value
Container	max 1200px, centred (3% side margins from 991px down)
Section rhythm	120px top and bottom on desktop, 100px at ≤767px, 60px at ≤479px
Breakpoints	991px, 767px and 479px

Spacing scale

Token	Value	Preview
`hair`	3px
`xs`	10px
`sm`	20px
`md`	30px
`lg`	40px
`xl`	60px
`2xl`	100px

Layout spacing

Token	Value	Preview
`card-gap`	10px
`footer-gap`	40px
`rail`	90px
`section`	120px

Border radius

button3px

field4px

full9999px

Surfaces

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

Level 1canvas

Level 2surface-1

Level 3surface-2

Motion

Scroll reveal (hero lines, section titles, labels)	Start at opacity 0 (set inline), fade to 1 over 1000ms outQuart, moving to x 0, y 0 in the same 1000ms
Scroll progress line	The rail's 1px red page-loader grows in height with page scroll
Menu open	Panel moves in on x and fades (opacity 300ms ease); links settle from x 5–10% to 0%
Menu link underline	Size change 400ms outCubic
Button hover	transition: all .3s
Footer and social link hover	transition: all .2s
Newsletter arrow	Background position 50% → 90%, 300ms

Do’s and don’ts

Keep the fixed 90px left rail with its three-stroke hamburger and the red 1px progress line.
Frame every hero with uppercase label text in the four corners and one huge uppercase Satoshi 700 word in the middle.
Use #111111 for the page, #181818 for cards and #222222 for fields, with white text at 80 / 70 / 60 / 50%.
Use primary #F64D52 for at most one filled button per view, and pair a single red starburst or dot with the headline.
Keep cards and images square; use only 3px (buttons), 4px (fields) and full circles.
Set card captions in Story Script and everything else in Satoshi 500 or 700.
Add shadows, gradients, glass blur or rounded cards.
Use red for large backgrounds outside hover states.
Put the white-on-red button text below 17px bold: white on #F64D52 is only about 3.4:1, so keep label-button size and weight.
Use the pastel variables (#FFC569, #548BF4, #FFAAC3) for UI text or buttons; they belong to illustration tiles.
Use Story Script for headings, body or buttons.
Track out text other than label-caps; Satoshi runs at 0 letter spacing.

Example prompt

Any page in the Porto style

Prompt

Build your page in the Porto style. Page background #111111, Satoshi 500 at 0 letter spacing. Add a fixed 90px left rail (#111111, 1px #FFFFFF33 right border) with a three-vertical-line hamburger and a 1px #F64D52 line on its right edge that grows with scroll. Put uppercase 15px labels at 80% white in the top corners and a centred logo. Hero: 100vh, a 40px red starburst, then one uppercase word in Satoshi 700 at 300px (line height 1.1), then a 20px uppercase subtitle at 50% white. Sections have 120px vertical padding, a 1200px container and one-word 32px/500 titles. Cards are flat #181818 squares with 10px padding and a centred Story Script 19px caption at 70% white; on hover the card fills #FF384A. Paragraphs are 19px/500, line height 1.37, white at 60%. Buttons: #F64D52, white 17px/700 text, 3px radius, 15px 20px padding, hover #222222 in 300ms. Fields: #222222, 4px radius, 45px tall, red bottom border on focus. No shadows or gradients. Reveal text with a 1000ms outQuart fade.

# Porto Design System

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

## Overview

Porto is a dark, poster-style agency template that sells
"multiple layouts". It feels like a studio's launch
screen: an almost-black page, one enormous uppercase
word, small uppercase corner labels and a thin fixed
rail down the left edge. Colour appears only as small

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #111111     | Page background, the le… |
| surface-1    | #181818     | Demo cards (pres-conten… |
| surface-2    | #222222     | Form fields, the round … |
| field        | #222222     | Form fields, the round … |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #111111     | Text on secondary        |
| on-accent    | #FFFFFF     | Text on accent           |
| ink          | #FFFFFF     | Wordmark, section title… |
| ink-soft     | #FFFFFF 80% | Corner labels in the to… |
| ink-card     | #FFFFFF 70% | Card captions, field la… |
| ink-muted    | #FFFFFF 60% | Paragraphs (base p) and… |
| ink-subtle   | #FFFFFF 50% | The hero subtitle A COM… |
| on-media     | #FFFFFF     |                          |
| primary      | #F64D52     | Filled buttons, the scr… |

## Typography

- display-hero: Satoshi 300px / 700
- display-lg: Satoshi 110px / 700
- headline-menu: Satoshi 80px / 700
- headline-md: Satoshi 32px / 500

{
  "$description": "Porto design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#F64D52",
      "$description": "Filled buttons, the scroll-progress line, field focus underline (the starburst is a red PNG of the same hue)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#222222",
      "$description": "Filled buttons go dark grey on hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "The white button variant"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#111111",
      "$description": "Text on secondary"
    },
    "accent": {
      "$type": "color",
      "$value": "#FF384A",
      "$description": "Card hover fill, go-top hover, the 1px red underline under button-line"
    },
    "on-accent": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on accent"
    },
    "canvas": {
      "$type": "color",
      "$value": "#111111",
      "$description": "Page background, the left rail, the overlay menu"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#181818",

/* Porto 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-body, rounded-button, p-lg */

@theme {
  /* Colors */
  --color-primary: #F64D52;
  --color-primary-hover: #222222;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFFFFF;
  --color-on-secondary: #111111;
  --color-accent: #FF384A;
  --color-on-accent: #FFFFFF;
  --color-canvas: #111111;
  --color-surface-1: #181818;
  --color-surface-2: #222222;
  --color-field: #222222;
  --color-ink: #FFFFFF;
  --color-ink-soft: #FFFFFFCC;
  --color-ink-card: #FFFFFFB3;
  --color-ink-muted: #FFFFFF99;
  --color-ink-subtle: #FFFFFF80;
  --color-line: #FFFFFF33;
  --color-line-strong: #FFFFFF66;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Satoshi", "Inter", sans-serif;
  --font-satoshi: "Satoshi", "Inter", sans-serif;
  --font-story-script: "Story Script", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 300px;
  --text-display-hero--line-height: 1.1;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 700;
  --text-display-lg: 110px;
  --text-display-lg--line-height: 1.1;
  --text-display-lg--letter-spacing: 0px;
  --text-display-lg--font-weight: 700;
  --text-headline-menu: 80px;
  --text-headline-menu--line-height: 1;
  --text-headline-menu--letter-spacing: 0px;
  --text-headline-menu--font-weight: 700;
  --text-headline-md: 32px;
  --text-headline-md--line-height: 1.13;

/* Porto 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: #F64D52; /* Filled buttons, the scroll-progress line, field focus underline (the starburst is a red PNG of the same hue) */
  --color-primary-hover: #222222; /* Filled buttons go dark grey on hover */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #FFFFFF; /* The white button variant */
  --color-on-secondary: #111111; /* Text on secondary */
  --color-accent: #FF384A; /* Card hover fill, go-top hover, the 1px red underline under button-line */
  --color-on-accent: #FFFFFF; /* Text on accent */
  --color-canvas: #111111; /* Page background, the left rail, the overlay menu */
  --color-surface-1: #181818; /* Demo cards (pres-content) */
  --color-surface-2: #222222; /* Form fields, the round go-top button, close buttons, the primary button's hover */
  --color-field: #222222; /* Form fields, the round go-top button, close buttons, the primary button's hover */
  --color-ink: #FFFFFF; /* Wordmark, section titles, footer titles, menu links */
  --color-ink-soft: #FFFFFFCC; /* Corner labels in the top bar and hero bottom bar */
  --color-ink-card: #FFFFFFB3; /* Card captions, field labels, social links (opacity 0.7), menu-link hover */
  --color-ink-muted: #FFFFFF99; /* Paragraphs (base p) and placeholders; footer links use #FFFFFF91 (57%), the same step */
  --color-ink-subtle: #FFFFFF80; /* The hero subtitle A COMPLETE MULTIPLE — LAYOUT… */
  --color-line: #FFFFFF33; /* Rail border, menu divider, underline fields, mobile top-bar border */
  --color-line-strong: #FFFFFF66; /* Blog dividers on inner pages */
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-satoshi: "Satoshi", "Inter", sans-serif;
  --font-story-script: "Story Script", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 300px;
  --text-display-hero-font: var(--font-satoshi);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1.1;
  --text-display-hero-tracking: 0px;
  --text-display-lg: 110px;
  --text-display-lg-font: var(--font-satoshi);
  --text-display-lg-weight: 700;
  --text-display-lg-line-height: 1.1;
  --text-display-lg-tracking: 0px;
  --text-headline-menu: 80px;
  --text-headline-menu-font: var(--font-satoshi);
  --text-headline-menu-weight: 700;
  --text-headline-menu-line-height: 1;
  --text-headline-menu-tracking: 0px;
  --text-headline-md: 32px;

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

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

Satoshi · display-hero

Satoshi · headline-menu

Satoshi · title-md

Satoshi · eyebrow

Satoshi · body-lg

Satoshi · label

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Porto style

More design systems like this

Altrum

Jore

Agencā

AgencQ

Bring any of them to your AI tool