flowmanceNane Design System
Nane is a calm, gallery-like architecture studio template. Everything sits on a single deep teal (#082A2A) with cool silver text, so the page reads like a printed monograph on dark stock. Headlines are an elegant high-contrast serif, Cormorant Garamond, set large and light; every functional label (nav, buttons, card names, footer links) is a small, tracked, uppercase sans, THICCCBOI. The only warm colour is a burnt-sienna hover.
Four signatures make it recognisable:
- Silver on deep teal. Canvas #082A2A, text #C3C8CC, and silver at 70% for links and secondary copy. There is no white body text and no light page.
- Serif display, uppercase sans labels. Architecture Multi-Layout Template at 93px Cormorant Garamond 500 with a 0.9 line height, above pills reading PURCHASE NANE and VIEW ALL TEMPLATE in 14px THICCCBOI 600, uppercase, 1px tracking.
- Silver pill buttons that warm up. Filled pills in #C3C8CC with teal text turn burnt sienna (#E76F51) with white text on hover. The outline variant is a 1px solid silver ring.
- Centred three-column nav. The NANE wordmark with the italic-feeling serif tag A architecture studio sits centred on top, the uppercase menu with small triangle carets below it, social icons on the left and MAKE AN APPOINTMENT on the right.
The home page is a presentation index: silver-framed screenshots of each layout (HOME 1, WORK 2, BLOG 3, ABOUT) in a three-column grid under serif section titles.
Colors
Surfaces
#082A2A--dark-slate-grey-2
#144141One step lighter teal: the small round remove button in the cart
#C3C8CCSilver frames of the preview cards and their uppercase captions
Ink
#082A2AText on primary
#FFFFFFText on primary-hover
#C3C8CC--silver
#C3C8CC · 70%Nav links, dropdown links, footer links, footer legal line
#C3C8CC · 72%The A architecture studio tag next to the logo
#FFFFFF#082A2AText on inverse-canvas
#FFFFFFAction
#C3C8CCFilled pill buttons
#E76F51Every button on hover
#E76F51--burntsienna: button hover and the 2px blockquote rule
Lines & effects
#C3C8CC · 27%1px border on the hero tag pill and list dividers
#C3C8CC · 25%Cart left border and cart footer rule
#C3C8CC1px ring on the outline button
Typography
Cormorant Garamond · display-cta
The quick brown fox jumpsDo you have any Question? footer call. 100px · 500 · 1
Cormorant Garamond · headline-lg
The quick brown fox jumps.title-2 / .title-4 page titles on inner pages. 60px · 500 · 1.1
Cormorant Garamond · title-lg
The quick brown fox jumpsSection titles: Homepage, Work, Blog, Company. 32px · 500 · 1.3
Cormorant Garamond · body-lg
The quick brown fox jumpsParagraphs and the footer address. 21px · 400 · 1.2
Cormorant Garamond · logo
The quick brown fox jumpsA architecture studio beside the 80px NANE wordmark image. 18px · 500 · 1.11
THICCCBOI · label-lg · shown in Poppins (fallback)
The quick brown fox jumpsFooter column titles. 18px · 500 · 1.67 · 1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred (.container, flex column) |
| Section rhythm | .section is 120px top and bottom, 80px at ≤991 and 60px at ≤479 |
| Breakpoints | 991px, 767px and 479px, plus min-width: 768px rules |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 7px | |
sm | 15px | |
md | 16px | |
lg | 25px | |
xl | 30px | |
2xl | 50px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
nav-top | 40px | |
footer-top | 60px | |
gutter | 72px | |
section | 120px | |
nav-height | 163px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll reveal | Elements fade opacity 0 → 1 over 1000ms outQuart as they enter |
| Button hover | background-color and color to sienna and white, 300ms (transition: all .3s) |
| Nav and footer link hover | Text colour 70% → 100% silver, 200ms; text colour changes run 300ms ease |
| Dropdown | Caret rotate, 300ms ease; list height 300ms ease |
| Line and label slide | x −101% → 0% and 0% → 101%, 300ms easeOut (wipe in and out on hover) |
| Text roll | y 0% → −100%, 300ms ease, with a copy rising from below |
| Background colour shift | 400ms outExpo; text colour 500ms outExpo |
Do’s and don’ts
- Keep the whole page on canvas #082A2A with ink #C3C8CC; use silver at 70% (#C3C8CCB3) for links and secondary text.
- Set headlines in Cormorant Garamond 500 with a 0.9–1.1 line height, and every label in uppercase THICCCBOI 600 with 1px tracking.
- Use silver pill buttons (100px radius, padding 17px 28px) that turn #E76F51 with white text on hover over 300ms.
- Keep images and cards square-cornered; mount screenshots on silver frames with about 10px of padding.
- Use 1px silver hairlines at 25–27% for tags and dividers.
- Use a line-through on hover for inline text links.
- Use pure white text or a light page background; the template has neither.
- Use #E76F51 as a resting fill or a text colour. It is a hover and quote-rule colour only. White on it is about 3:1, so keep button labels at 14px weight 600 uppercase and don't put smaller text on it.
- Set headlines in the sans or labels in the serif, or uppercase the serif.
- Add shadows, gradients or blur.
- Copy the blue #2E5CFF Browse our templates band; it is a vendor promo.
- Round images or cards.
- Put 70% silver (ink-muted, ink-subtle) on surface-1 #144141; it drops to about 4.2:1. Use full ink #C3C8CC on that teal.
Example prompt
Any page in the Nane 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 Nane 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/nane.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