flowmanceEnfold Design System
Enfold is a clean, optimistic consulting and startup site. It feels light and approachable: lots of white, one confident emerald green, big but friendly Inter Tight headlines in semibold, and warm, well-lit office and product photography with generously rounded corners. It is tidy rather than dramatic, built from outlined white cards, centred section titles and clear metrics.
Four signatures make it recognisable:
- Emerald green, used sparingly. #079561 fills the main pill button, colours the big metrics (4k, $10m, 100%) and the line icons, and appears as a solid green block and a thin green ring that sit behind the hero photo as decoration.
- Mint icon circles. Feature cards carry a 100px pale-mint (#E7F9E9) circle with a green line icon, pushed half out of the top edge of the card.
- Underlined text links. Secondary actions are Learn more with a short black 2px underline stub under the first letters, which grows on hover.
- Hand-drawn underline. The hero H1 underlines one word (growth) with a scribbled pen stroke.
Colors
Surfaces
#FFFFFFPage background, cards, section backgrounds
#E7F9E9Icon circles and small decorative dots (--green-light)
#F7F8F8Dropdown-link hover background
#C7C7C7 · 20%#121212The cart panel only
Ink
#FFFFFFText on primary
#060609Text on secondary
#FFFFFF#060609Headlines, nav, links, body copy (--black)
#060609Body copy is full ink too; paragraphs use 18px weight 500 in #060609
#2C2C2CSmall top text and testimonial names
#2C2C2C · 50%Roles next to names (Designer, Developer)
#777777Input placeholders, the blockquote rule (--dark-grey)
#FFFFFFText on inverse-canvas
#FFFFFFAction
#079561Main pill button (Let's Talk ↗), metrics, decorative green block
#079561#C7C7C7 · 20%Full-width form button (Send Message)
#060609Form button on hover
#079561Lines & effects
#DDDDDDFull-width section dividers
#D0D5DD1px borders on testimonial and feature cards
#0000002px underlines on links and work titles, 2px tag borders
#FFFFFF · 90%The fixed navigation bar
Typography
Inter Tight · display-metric
The quick brown fox jumpsGreen metrics 4k, $10m, 100% (86.4px above 1440px). 82px · 600 · 1.2
Inter Tight · headline-lg
The quick brown fox jumpsSection titles (title-2): Recent Work, Designed for entrepreneurs and innovators. 38px · 600 · 1.3
Inter Tight · title-work
The quick brown fox jumpsProject titles: Dreamy Visions, Night Desert. 28px · 500 · 1
Inter Tight · body-lead
The quick brown fox jumpsHero subtitle. 26px · 600 · 1.4
Inter Tight · quote
The quick brown fox jumpsTestimonial quotes. 18px · 600 · 1.3
Inter Tight · label-nav
The quick brown fox jumpsNav links. 17.6px · 700 · 1.14
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred, with 5% side padding on sections |
| Section rhythm | padding: 130px 5% |
| Breakpoints | 991px, 767px and 479px, plus a min-width: 1440px step for the large metrics |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 4px | |
sm | 8px | |
md | 12px | |
lg | 15px | |
xl | 25px | |
2xl | 35px | |
3xl | 40px | |
4xl | 50px | |
5xl | 70px | |
6xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
nav-side | 32px | |
section | 130px | |
hero-top | 160px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll fade-in | opacity 0 → 1, 1000ms or 1250ms outQuart |
| Pop-in | Decorative circles and icons scale 0 → 1, 600ms outExpo |
| Parallax | Images and decoration move y 7% ↔ −7% and y 100px ↔ −100px while in view |
| Button arrow | x 0 → 6px, 500ms outQuint, back on mouse-out |
| Link underline | Width grows, 300ms ease |
| Image hover | Filter change and scale → 1, 300ms ease |
| Cursor circle | Follows the mouse over work images (mouse-move), fades in |
| Slide swap | Elements move x 0% ↔ 100%, 300ms ease; background colour changes 300ms ease |
Do’s and don’ts
- Keep the page white (#FFFFFF) with #060609 text and a single green, #079561.
- Use the green pill (Let's Talk ↗) for the one main action, next to an underlined Learn more link.
- Keep button text at 16.8px semibold or larger; white on #079561 only reaches about 4:1.
- Put features on white 20px-radius cards with a 1px #D0D5DD border, the faint ring shadow and a 100px #E7F9E9 icon circle.
- Show results as big green 82px numbers with a short black caption.
- Round photos generously (18–30px) and keep cards and sections airy (130px section padding).
- Add a second accent colour or tinted section backgrounds.
- Use grey for body copy; paragraphs are #060609.
- Set role text (#2C2C2C at 50%) below 16px semibold; it is low contrast and only works as small meta beside a name.
- Use heavy drop shadows on cards; only the dropdown has a real shadow.
- Use square photos or sharp-cornered cards.
- Set headlines in uppercase or tight negative tracking.
Example prompt
Any page in the Enfold style
More design systems like this
Business 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 Enfold 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/enfold.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