flowmanceTriangle Design System
Triangle is a calm, nature-toned agency template. Content sits on pale sage panels (#ECF0ED) inset from a white page frame, with a faint topographic line pattern drawn across them, and a deep forest green (#012524) for the dark bands. Headlines are black Inter 600, a small green eyebrow sits above each title, and the one bright colour is a leafy green (#32A563) on buttons, numbers and thin rules. Photography is soft, plant-and-desk still life.
Four signatures make it recognisable:
- Clipped corners. A white right-angled triangle (120px) is laid over one corner of a panel or image, so blocks look cut diagonally: the hero's bottom-right, the work band's top-left, the strategy cells' bottom-left.
- Topographic lines. The hero, the dark work band and the newsletter band carry a pale contour-line pattern image, in sage on light panels and in a lighter green on the forest band.
- Green eyebrow over a black title. A 15px weight 600 green line (Ranked top 5 global UX design agencies in 2021., Our works., What they think.) sits with each main heading, usually above it; on the dark work band it sits below the white title (Recent work / Our works.).
- The numbered strategy checkerboard. A 2-column grid of alternating photos and white cells; each white cell has a large green index (01., 02., 03.) at the top-left, a green line icon, a title and centred text.
Colors
Surfaces
#FFFFFFThe page frame around panels (about 40px), and the clipping triangles
#ECF0EDDefault section panel (--white-smoke): hero, services, strategy, team, blog, CTA area
#FFFFFFCells and cards on a panel: strategy cells, blog content
#29335C · 15%Subscribe field / standard field borders
#BDBDBD · 40%Subscribe field / standard field borders
#012524Dark bands: Recent work, Newsletter
Ink
#FFFFFFText on primary
#FFFFFFText on secondary
#000000Headlines, nav links, service titles
#12141DBlog titles and display-3 headings
#444444Hero lead, dropdown links, testimonial names
#666666Paragraphs, testimonial quotes and roles
#FFFFFFText on dark bands / footer links and secondary text
#FFFFFF · 70%Text on dark bands / footer links and secondary text
#FFFFFFAction
#32A563Main button, play button, cart count, eyebrows, strategy numbers, icons
#32A563#012524The dark View on Webflow button
#32A563#03514EBlog title hover; start colour of the CTA's radial gradient; the round social buttons
Lines & effects
#D8D8D82px rule under each testimonial
#32A5632px left rule on service items, the nav divider and link underline
#000000Footer, with a background image
Typography
Inter · display-hero
The quick brown fox jumpsHero H1 We build top-notch Webflow templates. 58px · 600 · 1.03
Inter · headline-lg
The quick brown fox jumpsSection titles (.display-2): Our Services, Recent work, Client Feedback. 45px · 600 · 1.0
Inter · title-lg
The quick brown fox jumpsBlog titles, #12141D. 30px · 600 · 1.17
Inter · body-lg
The quick brown fox jumpsHero lead in #444. 22px · 400 · 1.36
Inter · label-lg
The quick brown fox jumpsTestimonial names. 17px · 500 · 1.18
Inter · eyebrow
The quick brown fox jumpsThe line above a title. 15px · 600 · 1.47
Spacing & shape
| Purpose | Value |
|---|---|
| Container | 1120px max, centred |
| Breakpoints | 991px (hero, strategy and newsletter go to 1 column, services and team to 2, triangles 90px), 767px (services, projects, feedback and footer 1 column, triangles 60px), 479px (team 1 column, triangles 40px) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 13px | |
sm | 20px | |
md | 25px | |
lg | 30px | |
xl | 40px | |
2xl | 60px | |
3xl | 80px | |
4xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-gap | 30px | |
page-inset | 40px | |
section-inline | 68px | |
section | 80px | |
triangle | 120px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Button hover | Adds 0 15px 25px rgba(0,0,0,0.15), transition: all .3s |
| Link hover | Colour change, 200–300ms (dropdown links to green, footer links to white) |
| Project hover | Opacity 1 → 0.85, 200ms |
| Blog image hover | Opacity 1 → 0.7, 300ms |
| Nav on scroll | Page-scroll triggers; background colour change over 500ms |
| Dropdown caret | Rotate, 200ms ease |
Do’s and don’ts
- Put sections on #ECF0ED panels inset about 40px from a white frame, with 80px 5% padding and 30px gaps.
- Cut one corner of a hero, band or cell with a white 120px right triangle.
- Head sections with a green #32A563 15px eyebrow and a black 45px weight 600 title.
- Use the forest #012524 band with the contour pattern for work and newsletter sections.
- Keep radii at 3–5px on controls and 0px on photos.
- Keep button text white at 16px weight 600 on #32A563; the pair is about 3:1, so never shrink it.
- Round panels or photos; the shape language is the triangle, not the curve.
- Use green #32A563 for paragraphs or for eyebrows smaller than 15px weight 600; it is under 3:1 on #ECF0ED.
- Add shadows beyond the hero photo and the button hover lift.
- Use grey panels; light panels are the sage #ECF0ED.
- Use Playfair Display or Kalam for text; they load but the system is Inter only.
- Add scroll-in animations; Triangle stays still.
Example prompt
Any page in the Triangle 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 Triangle 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/triangle.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