flowmanceTeo Design System
Teo is a spare, dark portfolio for one designer. A near-black page (#0A0A0A) carries silver (#C7C7C7) text, with white only on the project photos and no accent colour at all. Huge uppercase Clash Grotesk lines run across the screen, small uppercase Inter paragraphs sit in narrow columns, and the colour comes from the project photos alone.
Signatures:
- The slash. A thin silver bar (60×2px, skewed −50°) reads as a diagonal /. It separates the marquee phrases and sits before every section title: / RECENT PROJECT.
- Viewport marquee. TEO BRIDEN / FREELANCER DESIGNER & DEVELOPER runs as one nowrap line at 10vw (144px at 1440) with 5px tracking, 150px above the bottom of the hero.
- Horizontal project gallery. A 400vh scroll track pins a 100vh frame, and the project cards (each 60% of the width) slide sideways as you scroll down. A 1px silver line under the row grows with the progress.
- Rolling award counters. Award counts are 100px digits that roll up like an odometer when they enter the view.
Teo is a dark-only design with no filled buttons.
Colors
Surfaces
#0A0A0APage background (CSS --black)
#222222The go-top button only
Ink
#C7C7C7Text on primary
#C7C7C7All text: headlines, marquee, nav, paragraphs, counters (CSS --silver)
#C7C7C7Body text is the same silver as the headlines; there is no separate muted grey
#FFFFFFProject titles on photos
#FFFFFF · 70%Project disciplines under titles, the Powered by Webflow line
#FFFFFFText on project photos, over a top-to-bottom gradient from clear to 15% black (30% at ≤991px, suggested)
#0A0A0AText on cursor
Action
#0A0A0AThere is no filled button
#0A0A0ALines & effects
#C7C7C7Nav underlines, the slash mark, the gallery progress line, the scroll mouse outline
#FFFFFF · 35%The static underline under text links
#000000 · 15%Text on project photos, over a top-to-bottom gradient from clear to 15% black (30% at ≤991px, suggested)
#C7C7C7The 100px circle that follows the mouse over project cards
Typography
Clash Grotesk · display-hero
The quick brown fox jumpsMarquee TEO BRIDEN / FREELANCER DESIGNER & DEVELOPER (CSS 10vw). 144px · 500 · 1.1 · 5px
Clash Grotesk · title-project
The quick brown fox jumpsProject titles on cards, white. 24px · 500 · 1.0
Inter · body-lg
The quick brown fox jumpsIntro and footer paragraphs in 340px / 270px columns. 18px · 400 · 1.4
Inter · logo
The quick brown fox jumpsTeo Briden wordmark. 20px · 400 · 1.2
Inter · label
The quick brown fox jumpsNav links About, Blog, Contact. 20px · 400 · 1.0
Inter · caption
The quick brown fox jumpsCopyright line. 14px · 500 · 1.43
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 100px top and bottom (60px at ≤479px, measured) |
| Section title row | a flex row with a 25px gap: the slash mark, then the display-section title |
| Breakpoints | 991px, 767px and 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 20px | |
md | 25px | |
lg | 30px | |
xl | 50px | |
2xl | 80px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section | 100px | |
hero-top | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Award counters | Digit columns move y 0 → −400% and −700% over 2500ms, cubic-bezier(0.784, 0.325, 0.222, 0.98), on scroll into view |
| Horizontal gallery | Scroll-linked: the card row moves left across a 400vh track while the frame is pinned; the progress line grows with it |
| Text reveal | Lines move y to 0% over 500ms (from below, inside a clipped box) |
| Fade-in | opacity 0 → 1 over 1000ms outQuart, with a move to y 0 over 1000ms outQuart |
| Nav and link lines | Line length changes over 300–500ms on hover |
| Social icons | Scale 1 → 1.1 in 100ms ease; opacity 70% → 100% |
| Cursor circle | Follows the mouse over project cards |
| Links | all 200ms; go-top 300ms |
Do’s and don’ts
- Keep the page #0A0A0A with every piece of text in silver #C7C7C7.
- Set big lines in Clash Grotesk 500 uppercase: 10vw with 5px tracking for the marquee, 70px for section titles.
- Put the 60×2px silver slash (skewed −50°) before each section title.
- Write paragraphs in uppercase Inter 17–18px in narrow fixed columns (340px).
- Use text links with a 1px underline for every action.
- Show projects in the pinned horizontal gallery with a 1px progress line, and white titles on a soft bottom gradient.
- Add filled buttons, pill shapes or an accent colour.
- Use pure white for body text; white is only for text on photos.
- Round photos or cards; only the 5px go-top and the circles are round.
- Add shadows, glows or blur.
- Use more than two families, or Clash Grotesk for paragraphs.
- Set uppercase paragraphs wider than about 340px; long all-caps lines get hard to read.
Example prompt
Any page in the Teo 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 Teo 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/teo.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