flowmancePortfolifa Design System
Portfolifa is a bright, personal portfolio for a single designer. It opens on a tall orange gradient with big white statements stacked down the left and a smiling portrait cut into a lime-green circle on the right. Below the hero the page turns calm: white and black sections, Switzer type with no tracking, and large rounded project cards that stack as you scroll. Orange comes back at the end as a full-screen fixed footer.
Four signatures make it recognisable:
- The orange scroll hero. A 400vh-tall section with a vertical gradient through five oranges (#E66007 → #E64D07 → #E64007 → #E63A07 → #E63407). The content stays in view while three 43px white statements fade from faint to full white one after another.
- Lime on orange. The portrait sits in a large bright-green circle (about 495px; it is part of the square portrait image and a brighter green than the button), and the main button Download My Resume is a #8CE607 lime pill, 74px tall.
- Stacked 50px cards. Project images sit in 50px-radius cards that stack on top of each other as you scroll, each scaling up from 0.8. A 60px white title and a 150px lime circle button are built in but hidden at rest (the screenshots show only the image).
- Reveal footer. The footer is fixed full-screen (100vh) in #E63A07 behind the page, uncovered when the content scrolls away.
Colors
Surfaces
#FFFFFFPage background for the work section
#FFFFFFSame as canvas: there is no grey surface step
#000000The Latest Insight blog band
Ink
#FFFFFFText on primary
#FFFFFFText on secondary
#000000Section titles (Featured Work), statements, nav over white
#222222Body text and labels on white ((Approach), Evolving brands into …)
#888A8BThe default p, list and blockquote grey
#FFFFFFText on orange, black and images; faded hero lines
#FFFFFF · 50%Muted text on media
#ECECECLocated in Los Angeles, California under the portrait
#ECECECText on inverse-canvas
Action
#8CE607Lime pill button, project circle buttons (the portrait circle is a brighter green inside the image)
#000000Button hover background
#E63A07The orange Work with me pill
#E63A07Fixed footer background
Lines & effects
#E66007Stops of the hero gradient (with #E64D07 at 25% and #E63A07 at 75%)
#E64007Stops of the hero gradient (with #E64D07 at 25% and #E63A07 at 75%)
#E63407Stops of the hero gradient (with #E64D07 at 25% and #E63A07 at 75%)
#888A8B2px left rule on blockquotes
#FFFFFF · 20%2px underline under nav links on orange
#181818 · 10%Scrim on the five project cards
Typography
Switzer · display-title
The quick brown fox jumpsStatements (Motion crafting brand voices in the digital age.), Latest Insight. 60px · 600 · 1.2
Switzer · headline-lg
The quick brown fox jumpsFeatured Work, centred. 50px · 600 · 1.1
Switzer · body-lg
The quick brown fox jumpsParagraphs, Located in Los Angeles, California, (Approach). 18px · 500 · 1.3
Switzer · label-nav
The quick brown fox jumpsABOUT, WORK, CONTACT. 18px · 500 · 1.11
Switzer · micro
The quick brown fox jumpsDefault body text. 14px · 700 · 1.43
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred; 5% side padding (72px at 1440px) |
| Section rhythm | 120px top and bottom (.section); the works section has 130px top and 0 bottom so cards run into the next band |
| Breakpoints | 991px, 767px and 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 7px | |
sm | 16px | |
md | 30px | |
lg | 40px | |
xl | 50px | |
2xl | 80px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 50px | |
section-side | 72px | |
section | 120px | |
section-works | 130px |
Border radius
Motion
| Hero statements | While scrolling the 400vh hero, each statement's opacity rises from faint to 1 in turn |
| Card stack | Project cards scale 0.8 → 1, 500ms, as they scroll in, then stick and stack |
| Text reveal | Titles rise to y 0% (from about 100%) inside a clipped wrapper, 500ms outExpo |
| Fades | opacity 0 → 1, 300ms ease or 500ms |
| Mouse parallax | Mouse move shifts hero layers ±10px, ±30px or ±80px |
| Hover filter | Filter change, 300ms ease |
| Nav underline | Border colour #FFFFFF33 → #FFFFFF, 200ms (CSS) and 300ms ease |
| Nav on scroll | Scroll up / scroll down triggers change the nav with scroll direction |
| Button hover | Background to black, CSS transition: all |
Do’s and don’ts
- Open with the orange gradient hero (#E66007 to #E63407) and white Switzer statements at 43px weight 500.
- Put the person in a bright-green circle and use the #8CE607 lime pill (74px tall, 40px radius) for the main action.
- Give project cards a 50px radius and stack them as the page scrolls, with a 60px white title near the bottom.
- Use black (#000000) bands with #ECECEC titles for blog content, and white for the work section.
- Keep tracking at 0 and headings in sentence case; uppercase only the nav.
- End with the fixed full-screen orange footer.
- Add box shadows; only the project titles carry a soft text shadow.
- Use small white text on the lime button: white on #8CE607 is only 1.6:1. White on the orange #E63A07 pill is 4.2:1. Keep button text at 18px weight 600 on both pills, and prefer the black hover state for clarity.
- Set grey #888A8B text below 18px on white (3.5:1).
- Use Cuprum or a second typeface.
- Introduce more hues; orange and lime are the only colours.
- Round cards to anything other than 50px or buttons to anything other than pills.
Example prompt
Any page in the Portfolifa style
More design systems like this
Portfolio 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 Portfolifa 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/portfolifa.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