flowmancePofo Design System
Pofo is a dark, cinematic agency site. It feels like a film poster in a frame: the whole page sits inside a fixed 90px border of hairline rails, headlines are all-caps Inter Tight that swap mid-sentence from bold roman to light italic, and photography is dimmed so the white type always wins. Despite "Light" in the file name, the published template is dark: #171717 everywhere.
Four signatures make it recognisable:
- The frame. A fixed 90px top bar and a fixed 90px left rail, both split from the page by a 1px white-20% hairline (line). The logo sits in the 90×90 corner square, the social icons stack at the bottom of the rail, and M E N U (7px tracking) sits top-right. Content scrolls behind it.
- Roman/italic switch. Every headline mixes weight 600 roman with weight 300 italic in the same size and line: WE ARE AN AWARD-WINNING *BRANDING* AND *WEB AGENCY*., FEATURED *CLIENTS*, WHAT THEY *THINK*.
- White circle buttons. The call to action is a 120px white disc with tiny black uppercase text (BOOK A FREE KICK-OFF CALL!) that rotates −30° and grows to 110% on hover.
- Text rings. Small circular bands of text around a centred arrow or play icon (Play Showreel, Contact Us) float over images and between sections.
Pofo is a dark-only design.
Colors
Surfaces
#171717Page background, menu overlay, rails (CSS var --black-2)
#171717Same as canvas
Ink
#000000Text on primary
#FFFFFFText on secondary
#FFFFFFHeadlines, service and card text, most body copy
#FFFFFF · 70%Secondary paragraphs
#FFFFFF · 80%The hero lead (We create digital products…)
#FFFFFF · 57%Footer links (#ffffff91), brightening to white on hover
#FFFFFFAction
#FFFFFFThe white circle buttons
#FFFFFF#424242The contact form's Send Message button, the only grey fill
Lines & effects
#FFFFFF · 60%Input placeholders and paragraph-link contact lines (#fff9)
#FFFFFF · 20%The rail and top-bar hairlines (#fff3)
#FFFFFF · 22%2px underline on the subscribe field and arrow button (#ffffff38)
Typography
Inter Tight · display-hero
The quick brown fox jumpsHero H1 and the CTA statement (main-title, cta-title). 70px · 600 · 1.04 · 2px
Inter Tight · headline-menu
The quick brown fox jumpsFull-screen menu links (navlinks). 50px · 500 · 1
Inter Tight · title-lg
The quick brown fox jumpsTestimonial quote. 27px · 400 · 1.22
Inter Tight · body-lg
The quick brown fox jumpsHero lead, in ink-lead. 24px · 300 · 1.25
Inter Tight · label
The quick brown fox jumpsService names: CONCEPT, STRATEGY. 15px · 700 · 1.6 · 3px
Inter Tight · eyebrow
The quick brown fox jumpsM E N U toggle. 13px · 700 · 1.54 · 7px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred (container-main), inside sections with padding: 120px 5% |
| Section rhythm | 120px top and bottom (section-main), 80px at ≤991 and 60px at ≤479 |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus a few min-width: 768px rules |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 10px | |
md | 16px | |
lg | 20px | |
xl | 30px | |
2xl | 35px | |
3xl | 40px | |
4xl | 50px | |
5xl | 60px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
rail | 90px | |
grid-gap-wide | 100px | |
section | 120px | |
hero-left | 140px |
Border radius
Motion
| Scroll reveal | Elements move y 30px → 0 (some 20px, 50px or 100px) and fade opacity 0 → 1, 500ms, outExpo; some fades run 1000ms outQuart. |
| Image reveal | Width/height changes over 500ms (outExpo or ease), uncovering images behind a mask |
| Parallax | Scrolling-in-view triggers move elements between y −100px and 100px with scroll |
| Circle button | rotate(-30deg) scale(1.1), 300ms, CSS transition: all .3s |
| Hover fades | Background colour 300–500ms outExpo, border 200ms outExpo, text colour 500ms |
| Footer links | Colour 57% → 100% white, 200ms |
| Menu | Overlay display toggled, opacity 400ms ease; link background images fade in on hover |
| Page load | Page-load: the loader (loading-text, 11px, 5px tracking) fades out and the hero fades up |
Do’s and don’ts
- Keep the 90px frame: a fixed top bar and left rail with 1px line (#FFFFFF33) hairlines on a #171717 canvas.
- Write headlines in uppercase Inter Tight and set one or two key words in 300 italic beside 600 roman.
- Use positive tracking: 2px on display text, 3px on labels, 7px on the menu toggle.
- Use the 120px white circle button (#FFFFFF, #000000 text) for the main action and rotate it −30° at 110% on hover.
- Keep images square-cornered and dimmed so white text reads over them.
- Give each statement its own nearly empty screen with 120px section padding.
- Add rounded cards, shadows, gradients or a raised surface colour.
- Use the unused --yellow #FFEF00 as an accent.
- Use pill or rectangular filled buttons for the main call to action.
- Set body copy in uppercase or with tracking.
- Mix in a second typeface or use italic outside the roman/italic headline switch and the marquee band.
- Put muted text in a grey hex; use white at 80 / 70 / 57%.
Example prompt
Any page in the Pofo style
More design systems like this
Agency design systems, the same colors first.
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 AccessUpgrade to All AccessHow to use the Pofo design system
Pick a file to see what it’s for and where it goes.
What it is
The whole design system in one markdown file, written for AI: every color, type style, spacing value, component and motion rule, plus do's, don'ts and a ready prompt.
Best for
Claude, ChatGPT, Gemini, Cursor and v0, or any other AI tool that builds pages or code.
How to use it
- Put
DESIGN.mdin your project and mention it in your request, or save it as.cursor/rules/pofo.mdc - For the rule file, start it with a front-matter block that sets
alwaysApply: true, so every chat uses it - Ask: “Build a pricing page using DESIGN.md.” Cursor follows the colors, fonts, spacing and rules
- Put
DESIGN.mdin the project root - Add one line to
CLAUDE.md: “Follow DESIGN.md for all UI.” - Ask for any page or component; Claude reads the file first
- Attach
DESIGN.mdto the chat (or paste it in) - Ask: “Build a landing page in this design system.”
- Keep the file in the chat or project knowledge, so follow-up pages stay on style
What it is
Every token as data, in the W3C Design Tokens format: colors with their roles, type styles, radius, spacing, and component tokens that point at them.
Best for
Figma (Tokens Studio), Style Dictionary and other design-token tools, and build scripts.
How to use it
- In Figma, open Tokens Studio, choose Import, and pick
tokens.json - Or point Style Dictionary’s
sourceat it to generate tokens for any platform - In code, import it like any JSON file
What it is
A Tailwind CSS v4 theme: every color, font, type style, radius and spacing value becomes a Tailwind utility, like bg-canvas, text-headline-lg or rounded-md.
Best for
Tailwind v4 projects, and AI builders that write Tailwind (v0, Lovable, Bolt).
How to use it
- Save
theme.cssnext to your main CSS file - Import it after Tailwind:
@import "tailwindcss"; @import "./theme.css"; - Use the classes:
bg-canvas text-ink rounded-md p-lg
What it is
The same tokens as plain CSS variables on :root. Component values point at the color variables, so changing one color updates everything that uses it.
Best for
Any website: plain CSS, Webflow custom code, Framer, WordPress.
How to use it
- Add it to your stylesheet, or in Webflow paste it into Site settings → Custom code inside a
<style>tag - Use the variables anywhere:
color: var(--color-ink) - Change a token once and every place that uses it follows