flowmanceTower Design System
Tower is a bright, airy construction-company site. It feels like a clean contractor brochure: lots of white and pale lavender-white space, condensed uppercase Oswald headings with open tracking, light grey paragraphs, and one loud lime green #A1F04C that marks every action and every title. Sunny, colourful job-site photography (hard hats, timber, saws, finished interiors) supplies the warmth.
Four signatures make it recognisable:
- The green slash. Every section title starts with a lime /: /OUR PROMISE AND VALUES, /WORKS, /PRODUCTS, /FROM OUR BLOG, / TRUSTED BY BEST BRANDS. Even the hero headline opens with it.
- Skew. Shapes lean at −15°: the 1px divider between the TOWER logo and the hamburger, the 3px green bars in the overlay menu, the green contact band at the bottom of the hero, and the pale 4px frames that peek out under service images. The team card frames are straight.
- Square green buttons with spaced labels. A flat #A1F04C rectangle, white 13px uppercase label at 3px tracking, and a long thin ⟶ arrow. No radius, no shadow.
- Overlapping work cards. In /WORKS a large photo and a white text card overlap by about 80px, alternating left and right down a #FAFAFF band.
Tower is light-only.
Colors
Surfaces
#FFFFFFPage background, work and team cards, form fields
#FAFAFF.section.gray bands (/works, /products, /from our blog) and the hero backdrop (--ghost-white-section-2)
#F6F6FF--ghost-white-section: the diagonal hero gradient (233°, #F6F6FF → #FFFFFF)
#F5F5F740px social-icon circles, close buttons, image placeholders
#919197Text typed into fields, the footer copyright line
#515157Footer links (.link)
Ink
#FFFFFFText on primary
#111111Headings, logo, labels, team names, prices in the cart
#111111Same as ink
#A1A1B4Every paragraph (--dark-grey-paragraph), team roles, prices, field labels
#FFFFFFAction
#A1F04CButtons, the hero contact band, the fun-facts band, the play button
#A1F04C#A1F04CThe / before every title, the skewed menu bars, active states
#39B23DNEW product badge
Lines & effects
#E9E9F81px bottom border on fields / the skewed nav divider
#DBD5D5With line: 1px bottom border on fields / the skewed nav divider
#F6F6FF4px (once 6px) frame borders under service and team images
#FFAE00USED product badge
#A1F04C · 40%Three translucent green circles, likely the rings that pulse around the play button
Typography
Oswald · logo
The quick brown fox jumpsTOWER wordmark (an h1 in the nav). 20px · 500 · 1.0 · 4px
Oswald · display-hero
The quick brown fox jumps/PERFECTION IS ALWAYS … hero headline (.top-banner-title). 41px · 500 · 1.29 · 1px
Oswald · headline-menu
The quick brown fox jumpsOverlay menu links (.navigation-link, line height 40px on .navigation-text). 40px · 400 · 1.0 · 2px
Oswald · title-md
The quick brown fox jumpsWork card titles: MODERN VILLA, OSLO STUDIO. 20px · 500 · 1.3 · 1px
Oswald · body-lg
The quick brown fox jumpsHero lead (.big-paragraph). 17px · 300 · 1.47
Oswald · price
The quick brown fox jumpsProduct prices; also the contact lines in the hero band. 17px · 400 · 1.18
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px (.container, flex 1), inside sections with 30px side padding |
| Section rhythm | .section is 140px top and bottom, 30px sides: 100px at ≤991px, then 60px 15px at ≤767px |
| Section title block | centred /TITLE, then 80px (.top-title margin-bottom) before the content; the centred block's margin drops to 60px at ≤991px and 30px at ≤479px |
| Breakpoints | 991px (tablet), 767px (landscape phone), 479px (phone) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 10px | |
md | 20px | |
lg | 30px | |
xl | 55px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
grid-gap | 16px | |
gutter | 30px | |
band | 70px | |
title-gap | 80px | |
footer-top | 80px | |
section | 140px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Button label flip | The label sits in a 20px overflow-hidden mask with 1000px perspective and origin 50% 100%. On hover the first copy rotates to rotateX(−90°) while the second rotates from −90° to 0°, 350ms ease |
| Menu open | .navigation-menu width 0% → open, 500ms; links fade in (opacity 0 → 1, 300–400ms ease) and rise (y −50px → 0, 300–500ms) |
| Hamburger to close | Lines rotate, 200ms easeInOut, and slide x → 0% |
| Menu link hover | The skewed lime bar grows (size, 300ms ease), text colour changes 300ms ease |
| Card lift | y 0 → −20px, 350ms ease, back to 0 on mouse out |
| Play-button pulse | Scale to 1 over 1000ms ease, then to 0 over 1500ms ease, on the three translucent green rings |
| Logo hover | opacity 0.7 → 1, 200ms |
| Cart button hover | Background #A1F04C → #AFFD5A, 200ms |
Do’s and don’ts
- Start every section title with a lime / (#A1F04C) at the same size as the uppercase Oswald title.
- Keep headings uppercase Oswald 500 with 1px tracking, and labels at 2–3px tracking.
- Set paragraphs in Oswald 300, 15px, line height 1.67, in ink-subtle #A1A1B4.
- Use the square lime button (#A1F04C, white 13px label at 3px tracking, 16px 30px padding, ⟶) for every action.
- Alternate white #FFFFFF sections and #FAFAFF bands, 140px top and bottom.
- Lean decorative shapes at −15° (dividers, bars, bands, frames).
- Round buttons, cards or photos. Only icons and the play button are circles.
- Use lime for body text or small type on white; it is far below readable contrast.
- Shrink the white button label below 13px weight 500 with 3px tracking; white on #A1F04C is about 1.4:1, so the label relies on size, weight and spacing.
- Use ink-subtle #A1A1B4 for anything under 15px except uppercase meta; it is about 2.5:1 on white. Put important text in ink #111111. Typed field text #919197 is about 3.1:1, so keep it at 14px+.
- Add heavy shadows, blur or gradients on UI; shadows stay at 5–20% with a −20px spread.
- Bring in the unused orange #F03C02 or yellow #E5F04C.
- Mix in a second typeface or sentence-case headings.
Example prompt
Any page in the Tower 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 Tower 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/tower.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