Pofo eC Design System

Get DESIGN.md Download View template Works with

Pofo eC website template preview detail 2

Pofo eC website template preview detail 3

Pofo is a dark, gallery-like agency site held inside a fixed frame. A 90px top bar and a 90px left rail, both drawn with white hairlines, stay on screen while the content scrolls under them. Headlines are big uppercase Satoshi in which some words switch to a light italic (WE ARE AN AWARD-WINNING *BRANDING* AND *WEB AGENCY*.), and the only filled buttons are white circles with black micro-caps. Saturated studio photography (chess on white plinths, a martini on orange, floating jeans) supplies the colour.

Signatures:

The hairline frame. A fixed top bar (90px, 1px bottom rule at 20% white) and a left rail (90px wide, 1px right rule) with the crossed P O F O monogram in the corner square, spaced-out MENU top-right, and a stack of social icons at the bottom of the rail.
Roman + italic uppercase. Most display lines mix Satoshi 700 roman words with Satoshi 400 italic words at the same size: FEATURED *CLIENTS*, WHAT THEY *THINK*, A *ITALIAN-AMERICAN* RUN AGENCY.
Circles that turn. White 120px circle buttons (BOOK A FREE KICK-OFF CALL!) rotate −30° and grow on hover, and circular text rings (Play Showreel, Contact Us) spin around a play or arrow icon.
Huge white space. 120px section padding and very little text per screen; some sections are a single centred headline and a circle.

Colors

Surfaces

canvas#171717

Page background and the menu overlay (--black-2)

surface-1#171717

Same as canvas: Pofo has no raised panels

field-line#FFFFFF · 22%

2px underline on the newsletter field and arrow button

inverse-canvas#FFFFFF

The white circle surfaces

Ink

on-primary#000000

Text on primary

on-secondary#FFFFFF

Text on secondary

ink#FFFFFF

Headlines, titles, nav, testimonial quote

ink-lead#FFFFFF · 80%

Hero lead We create digital products…

ink-soft#FFFFFF · 70%

Secondary meta and service text

ink-muted#FFFFFF · 60%

Paragraphs, list items, placeholder, paragraph links

ink-subtle#FFFFFF · 57%

Footer links (hover to full white)

on-media#FFFFFF

inverse-ink#000000

Text on inverse-canvas

Action

primary#FFFFFF

Circle buttons

primary-hover#FFFFFF

No colour change on hover; the hover is a −30° rotation and 1.1 scale

secondary#424242

Contact form Send Message submit

accent#F64D52

Line icons in the services list and the blockquote rule (--red-color)

success#2E856E

Form success message

Lines & effects

line#FFFFFF · 20%

The frame hairlines

Typography

Satoshi · display-marquee

The quick brown fox jumps

The sliding philosophy line (.philosopy-text), one line, no wrap. 75px · 700 · 0.99 · 7px

Satoshi · headline-menu

The quick brown fox jumps

Full-screen menu links (.navlinks). 50px · 500 · 1.0

Satoshi · body-quote

The quick brown fox jumps

Testimonial quote. 27px · 400 · 1.15

Satoshi · title-sm

The quick brown fox jumps

Footer column titles. 21px · 700 · 1.43

Satoshi · label

The quick brown fox jumps

MENU. 13px · 700 · 1.54 · 7px

Satoshi · caption

The quick brown fox jumps

Default small text. 14px · 500 · 1.43

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Breakpoints	991px, 767px and 479px

Spacing scale

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

Layout spacing

Token	Value	Preview
`section-short`	60px
`section-side`	67.5px
`frame`	90px
`section`	120px
`hero-left`	140px

Border radius

xs2px

full9999px

Motion

Page load	Page load: a preloader with 11px / 700 uppercase text at 5px tracking, then content fades in
Scroll reveal	Scroll into view: opacity 0 → 1 and y 30px → 0, 500ms outExpo
Slow reveal	Opacity 0 → 1 and move to 0, 0, 1000ms outQuart
Mask / line grow	Width or height, 500ms outExpo or ease
Sideways scroll	While scrolling in view: the client logo row and the philosophy line move horizontally with scroll
Mouse parallax	Mouse move: elements shift slightly with the cursor
Hover colour	Background colour 300ms outExpo, text colour 500ms outExpo (menu links; footer links use the CSS 200ms transition)
Circle button hover	rotate(-30deg) scale(1.1), CSS transition: all 0.3s

Do’s and don’ts

Keep the fixed frame: a 90px top bar and 90px left rail with 1px #FFFFFF33 hairlines.
Set display lines in uppercase Satoshi, bold roman with one or two light italic words at the same size.
Use #171717 for the page and white at 60% (#FFFFFF99) for paragraphs.
Use the 120px white circle button (11px / 900, 2px tracking, black) for the main call to action, with the −30° rotate and 1.1 scale on hover.
Leave 120px of space above and below each section and keep text per screen short.
Use square-cornered, saturated studio photography.
Add rectangular filled buttons on the home page; the only rectangle is the #424242 contact submit.
Add shadows, cards, panels or rounded image corners.
Use the red #F64D52 for text or fills; it is for thin icons and rules only.
Set headlines in sentence case or all-bold without the italic contrast.
Use solid greys for text; use white with alpha.
Run long paragraphs; keep descriptions to one or two lines.

Example prompt

Any page in the Pofo eC style

Prompt

Build your page in the Pofo style. Background #171717. Keep a fixed frame: a 90px top bar and a 90px left rail with 1px rgba(255,255,255,0.2) lines, a monogram logo in the corner square, "MENU" top-right in Satoshi 13px / 700 with 7px tracking, social icons at the bottom of the rail. Headlines are uppercase Satoshi: 70px / 700 / 1.04 with 2px tracking for statements, 40px / 700 / 1.15 for section titles, with the key words in Satoshi 400 italic at the same size. Paragraphs Satoshi 18px / 400 / 1.33 at white 60%. Sections have 120px vertical padding and a 1200px container. The main action is a 120px white circle with black 11px / 900 uppercase text at 2px tracking that rotates −30° and scales 1.1 on hover in 300ms. Square-cornered, saturated studio photos. No shadows, no panels.

# Pofo eC Design System

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

## Overview

Pofo is a dark, gallery-like agency site held inside a
fixed frame. A 90px top bar and a 90px left rail, both
drawn with white hairlines, stay on screen while the
content scrolls under them. Headlines are big uppercase
Satoshi in which some words switch to a light italic (WE

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #171717     | Page background and the… |
| surface-1    | #171717     | Same as canvas: Pofo ha… |
| field-line   | #FFFFFF 22% | 2px underline on the ne… |
| field        | #171717 0%  | Inputs and the frame ba… |
| inverse-can… | #FFFFFF     | The white circle surfac… |
| on-primary   | #000000     | Text on primary          |
| on-secondary | #FFFFFF     | Text on secondary        |
| ink          | #FFFFFF     | Headlines, titles, nav,… |
| ink-lead     | #FFFFFF 80% | Hero lead We create dig… |
| ink-soft     | #FFFFFF 70% | Secondary meta and serv… |
| ink-muted    | #FFFFFF 60% | Paragraphs, list items,… |
| ink-subtle   | #FFFFFF 57% | Footer links (hover to … |
| on-media     | #FFFFFF     |                          |
| inverse-ink  | #000000     | Text on inverse-canvas   |

## Typography

- display-marquee: Satoshi 75px / 700
- display-hero: Satoshi 70px / 700
- display-hero-italic: Satoshi 70px / 400
- headline-menu: Satoshi 50px / 500

{
  "$description": "Pofo eC 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": "Circle buttons"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "No colour change on hover; the hover is a −30° rotation and 1.1 scale"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#424242",
      "$description": "Contact form Send Message submit"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#171717",
      "$description": "Page background and the menu overlay (--black-2)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#171717",
      "$description": "Same as canvas: Pofo has no raised panels"
    },
    "ink": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Headlines, titles, nav, testimonial quote"
    },
    "ink-lead": {
      "$type": "color",
      "$value": "#FFFFFFCC",

/* Pofo eC 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-xs, p-lg */

@theme {
  /* Colors */
  --color-primary: #FFFFFF;
  --color-primary-hover: #FFFFFF;
  --color-on-primary: #000000;
  --color-secondary: #424242;
  --color-on-secondary: #FFFFFF;
  --color-canvas: #171717;
  --color-surface-1: #171717;
  --color-ink: #FFFFFF;
  --color-ink-lead: #FFFFFFCC;
  --color-ink-soft: #FFFFFFB3;
  --color-ink-muted: #FFFFFF99;
  --color-ink-subtle: #FFFFFF91;
  --color-accent: #F64D52;
  --color-line: #FFFFFF33;
  --color-field-line: #FFFFFF38;
  --color-field: #17171700;
  --color-on-media: #FFFFFF;
  --color-success: #2E856E;
  --color-inverse-canvas: #FFFFFF;
  --color-inverse-ink: #000000;

  /* Fonts */
  --font-sans: "Satoshi", "Inter", sans-serif;
  --font-satoshi: "Satoshi", "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-marquee: 75px;
  --text-display-marquee--line-height: 0.99;
  --text-display-marquee--letter-spacing: 7px;
  --text-display-marquee--font-weight: 700;
  --text-display-hero: 70px;
  --text-display-hero--line-height: 1.04;
  --text-display-hero--letter-spacing: 2px;
  --text-display-hero--font-weight: 700;
  --text-display-hero-italic: 70px;
  --text-display-hero-italic--line-height: 1.04;
  --text-display-hero-italic--letter-spacing: 2px;
  --text-display-hero-italic--font-weight: 400;
  --text-headline-menu: 50px;
  --text-headline-menu--line-height: 1.0;

/* Pofo eC 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; /* Circle buttons */
  --color-primary-hover: #FFFFFF; /* No colour change on hover; the hover is a −30° rotation and 1.1 scale */
  --color-on-primary: #000000; /* Text on primary */
  --color-secondary: #424242; /* Contact form Send Message submit */
  --color-on-secondary: #FFFFFF; /* Text on secondary */
  --color-canvas: #171717; /* Page background and the menu overlay (--black-2) */
  --color-surface-1: #171717; /* Same as canvas: Pofo has no raised panels */
  --color-ink: #FFFFFF; /* Headlines, titles, nav, testimonial quote */
  --color-ink-lead: #FFFFFFCC; /* Hero lead We create digital products… */
  --color-ink-soft: #FFFFFFB3; /* Secondary meta and service text */
  --color-ink-muted: #FFFFFF99; /* Paragraphs, list items, placeholder, paragraph links */
  --color-ink-subtle: #FFFFFF91; /* Footer links (hover to full white) */
  --color-accent: #F64D52; /* Line icons in the services list and the blockquote rule (--red-color) */
  --color-line: #FFFFFF33; /* The frame hairlines */
  --color-field-line: #FFFFFF38; /* 2px underline on the newsletter field and arrow button */
  --color-field: #17171700; /* Inputs and the frame bars */
  --color-on-media: #FFFFFF;
  --color-success: #2E856E; /* Form success message */
  --color-inverse-canvas: #FFFFFF; /* The white circle surfaces */
  --color-inverse-ink: #000000; /* Text on inverse-canvas */

  /* Fonts */
  --font-satoshi: "Satoshi", "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-marquee: 75px;
  --text-display-marquee-font: var(--font-satoshi);
  --text-display-marquee-weight: 700;
  --text-display-marquee-line-height: 0.99;
  --text-display-marquee-tracking: 7px;
  --text-display-hero: 70px;
  --text-display-hero-font: var(--font-satoshi);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1.04;
  --text-display-hero-tracking: 2px;
  --text-display-hero-italic: 70px;
  --text-display-hero-italic-font: var(--font-satoshi);
  --text-display-hero-italic-weight: 400;
  --text-display-hero-italic-line-height: 1.04;
  --text-display-hero-italic-tracking: 2px;
  --text-headline-menu: 50px;

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-marquee

Satoshi · headline-menu

Satoshi · body-quote

Satoshi · title-sm

Satoshi · label

Satoshi · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Pofo eC style

More design systems like this

Altrum

Jore

Agencā

AgencQ

Bring any of them to your AI tool