flowmanceNifty Design System
Nifty is a calm, gallery-like site for an architecture or furniture studio. The page is white and black only, laid over thin vertical guide lines every 240px, so it feels like a drawing sheet. Big Satoshi headlines pair bold words with regular ones, and the colour comes only from the photographs: pastel skies behind white concrete and glass.
Four signatures make it recognisable:
- The visible column grid. Five full-height 240px stripes with 1px lines in #ECECEC run behind everything, from the nav to the footer, and on the black work band the lines stay visible. Photos and text blocks snap to these columns.
- Bold + regular in one headline. We are here to build your in 700, then dreams. in 400, at the same size. The same move repeats in Meet Our Heroes. and To us, buildings are more than structures. Headlines end with a full stop.
- The black work band. The page turns black for Our Work: square project photos slide sideways as you scroll, each with a title-lg name on the left and #1 on the right, and a thin 716px progress track under them.
- No filled buttons on the page. Calls to action are bold text links with a small arrow (Meet The Team →, Let's Get in Touch →). The only fill is the form's Send Message bar.
Nifty is light with black bands; it has no dark mode.
Colors
Surfaces
#FFFFFFPage background
#F6F7F9Webflow variable for a soft panel; not used on the home page
#000000Work band, Want to talk about a new project? band, footer, menu
Ink
#000000Text on primary
#000000Headlines, links, names, labels
#6E6E6EParagraphs, service lines, roles, form text and labels
#FFFFFF#FFFFFFText on inverse-canvas
#FFFFFF · 70%Footer statement and address on black
#FFFFFFAction
#ECECECThe only filled button: Send Message
#ECECEC#FF0E0EThe cart's remove dot only
Lines & effects
#ECECECThe full-height 240px column lines
#CFCFCFThe 1px bottom border of form inputs
#171717Column dividers inside the black menu
#ECECECThe work slider's progress track (716×5px)
#919191Behind the showreel image, under white 70px text
Typography
Satoshi · display-hero
The quick brown fox jumpsHero: We are here to build your. 88px · 700 · 0.9
Satoshi · headline-lg
The quick brown fox jumpsSection titles (Our Work, Architecture is about), blog row titles. 50px · 700 · 1
Satoshi · title-lg
The quick brown fox jumpsProject names under work photos. 24px · 700 · 1.25
Satoshi · body-lead
The quick brown fox jumpsLead paragraphs. 22px · 400 · 1.18
Satoshi · label
The quick brown fox jumpsArrow links (Meet The Team); 17px on the submit, 20px on the CTA link. 16px · 700 · 1.25
Satoshi · caption
The quick brown fox jumpsRoles (Co-Founder), field labels. 16px · 500 · 1.25
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 120px top and bottom (80px at ≤991, 60px at ≤479) |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus a min-width: 768px step |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 16px | |
md | 20px | |
lg | 30px | |
xl | 80px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
nav-y | 15px | |
nav-x | 20px | |
footer-bottom | 50px | |
section-band | 80px | |
section | 120px | |
column | 240px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Heading reveal | A black .heading-overlay covers each heading and moves away (y 100%, x −100%), 500ms; content slides x −100% → 0%, 400ms ease |
| Text roll on hover | Duplicate labels: the visible copy moves y 0% → −100% while the copy below moves 100% → 0%, 1000ms inOutQuint (project names, article rows, menu links) |
| Skew-in | y 15px → 0, skew −10° → 0°, opacity 0 → 1, 300ms inOutQuint; the outgoing copy moves to y −15px |
| Fades | opacity 0 → 1, 300ms or 500ms ease |
| Work band | Page background changes to black, 500ms ease; photos translate horizontally while the band is in view (scroll-linked) |
| Menu | Panels open and hamburger lines rotate, 500ms inOutBack |
| Link hover | transition: all 0.2s (opacity 0.7 → 1 on footer socials) |
| Scroll badge | The circular SCROLL DOWN text rotates |
Do’s and don’ts
- Draw the five faint 240px column lines (#ECECEC) behind every section and align photos to them.
- Split headlines into bold (700) and regular (400) at the same size, ending with a full stop.
- Use ink-muted #6E6E6E for paragraphs at 18px / 500 / 1.33.
- Use black #000000 for whole bands (work, CTA, footer) with white text.
- Make calls to action bold arrow text links; keep the #ECECEC fill for the form submit only.
- Keep every photo, field and band square.
- Add an accent colour, gradients, shadows or rounded corners.
- Use Syne or any second typeface. It is loaded but unused.
- Put text in boxes or cards; text sits directly on the page or a band.
- Turn headings uppercase. Only the overlay menu is uppercase.
- Draw input boxes. Fields are a single #CFCFCF underline.
- Use the #ECECEC button on the black bands; use the white arrow link there.
Example prompt
Any page in the Nifty style
More design systems like this
Construction 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 Nifty 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/nifty.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