flowmanceFitex Design System
Fitex is a moody, gallery-like template for creative agencies and studios. Everything sits on a deep green-black (#041A17) with white type, thin white hairlines and square edges. Two typefaces do the talking: a bold, compact sans (Porpora) for headlines and the wide, all-caps Optician Sans for the logo, labels, buttons and menu. Hand-drawn salmon (#EEA27C) loops and scribbles float around headlines as the only colour in the interface.
Four signatures make it recognisable:
- Mixed-face headline. Headlines mix Porpora sentence case with the brand word set in wide Optician Sans capitals: Create and Inspire. It's FITEX, We are FITEX.
- Ghost echo. A larger copy of the hero title (80px) sits behind the real one at 5% white, offset so it reads as an echo.
- Wide-tracked caps everywhere small. MENU, CART, UI KIT WEBFLOW TEMPLATE, HOME 1, VIEW ON WEBFLOW are all Optician Sans with 1–5px tracking.
- Salmon scribbles and a skewing button. Thin hand-drawn salmon strokes (loops, rings, hatching) decorate hero corners, and the square light button leans to −13° on hover.
Colors
Surfaces
#041A17Page background, nav, demo cards
#0E332FQuote panel, full-screen menu overlay, dark submit buttons
#FFFFFFInputs; placeholder #4D4D4D, border #6E6E6E at 20%
#333333Text on field
#4D4D4DInk
#000000Text on primary
#FFFFFFHeadlines, nav labels, the logo
#FFFFFF · 60%Body text, hero lead and eyebrow (the base p colour)
#FFFFFF · 74%Demo-card labels (HOME 1); full white on hover
#FFFFFF · 75%Underlined text links
#FFFFFF · 5%The ghost echo behind the hero title
#FFFFFFText on secondary
#FFFFFFAction
#ECECECThe square light button
#EEA27CHand-drawn scribbles, dotted 2px rings, blockquote rules
#0E332FDark form submit (SCHEDULE A DEMO)
Lines & effects
#FFFFFF · 15%1px borders on demo cards
#FFFFFF · 12%Nav bottom border, hero bottom border, the divider before CART
#6E6E6E · 20%Typography
Porpora · display-hero · shown in Playfair Display (fallback)
The quick brown fox jumpsCreate and Inspire. 74px · 700 · 0.99
Porpora · headline-lg · shown in Playfair Display (fallback)
The quick brown fox jumpsSection titles (.title-2). 50px · 700 · 1.0
Porpora · title-quote · shown in Playfair Display (fallback)
The quick brown fox jumps" Build a full website in 1 hour or less…". 28px · 700 · 1.07
Porpora · body-lg · shown in Playfair Display (fallback)
The quick brown fox jumpsHero lead. 23px · 400 · 1.17
Porpora · caption · shown in Playfair Display (fallback)
The quick brown fox jumpsFooter legal line. 16px · 400 · 1.5
Optician Sans · logo · shown in Syncopate (fallback)
The quick brown fox jumpsFITEX wordmark. 20px · 400 · 1.3 · 3px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1140px, centred, with 5% side padding on sections |
| Section rhythm | .section is 80px top and bottom (60px at ≤479), the presentation section 100px (80px at ≤991, 60px at ≤479), the footer 30px at the bottom |
| Breakpoints | 991px, 767px and 479px, plus a 768px+ rule |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 20px | |
lg | 50px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
footer-bottom | 30px | |
nav-height | 65px | |
section | 80px | |
section-lg | 100px | |
hero-y | 115px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Button hover | transform: skew(-13deg), transition: all 0.3s |
| Demo card hover | Opacity 1 → 0.62, label → #FFFFFF, all 0.3s |
| Link hover | Social links to 50% opacity; text links lose the underline |
| Scroll reveal | Elements fade in (opacity 500ms) while moving from y 30px / −30px or x ±30px to 0 (500ms ease) |
| Load-in | Opacity 0 → 1 over 1000ms outQuart |
| Scroll progress | The 2px top bar's width follows page scroll |
| Menu open | Overlay fades in over 300ms ease; hamburger lines rotate over 300–500ms |
| Mouse move | Registers mouse-move interactions on the page; keep any parallax to about 30px |
Do’s and don’ts
- Use #041A17 as the page and #0E332F for the one raised panel or overlay.
- Set headlines in Porpora 700 and every label, button and nav item in Optician Sans with 1–5px tracking.
- Keep everything square: 0px radius on buttons, cards, inputs and images.
- Use white at 60% for paragraphs and 1px white 12–15% hairlines for structure.
- Add one hand-drawn #EEA27C scribble near a hero or section title.
- Give the light button the −13° skew on hover, 0.3s.
- Use pure black, a grey canvas, or a lighter green than #0E332F.
- Fill buttons or text with salmon #EEA27C.
- Write lowercase labels expecting them to show; Optician Sans is caps-only, so use Porpora for any lowercase text.
- Round corners or add strong shadows; the only shadow is 0 15px 25px black at 10%.
- Use Great Vibes or a third typeface.
- Run reveal moves longer than 500ms (load-in fades are the one 1000ms exception).
Example prompt
Any page in the Fitex 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 Fitex 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/fitex.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