flowmanceVerde Design System
Verde is a quiet, magazine-style personal blog. It reads like a lifestyle journal: a pale #F8F8F8 page, a white top bar with tiny tracked uppercase links, a centred script wordmark over a washed-out photo, and long single-column post cards with serif excerpts beside a narrow sidebar. Colour is almost absent; one soft sage green #ADC7A6 marks the active link, categories, labels and the footer band.
Four signatures make it recognisable:
- Sage on grey. #ADC7A6 is the only hue in the interface. It fills the active HOME tab, the photo-tile labels, the Subscribe button and the footer strip, and colours category names and the section title.
- Framed photos. Photo tiles carry a thin white inner frame (1px, white at 95%) inset about 15px, and post images carry a 2px #F8F8F8 frame that the post card breaks into from below.
- Overlapping post card. Each post's #F8F8F8 text card is narrower than the photo and rises over its bottom edge by about 75px, so category and title sit half on the image.
- Sans over serif. Poppins for titles and tracked uppercase UI labels, Playfair Display for excerpts, dates and the "By" line. Every corner is square.
Verde is a light-only design.
Colors
Surfaces
#F8F8F8Page background, post cards, the backing behind centred section titles
#FFFFFFNav bar, footer, social squares, subscribe field
#F1F1F1Category tag buttons in the sidebar
#EEEEEEThe full-width "big button"
#E9E9E9Subscribe input border
#313131Nav link hover: dark block with white text
Ink
#FFFFFFText on primary
#313131Post titles, nav links, author names, Keep reading
#616161Serif excerpts and dates (the p colour)
#797979Hero tagline, sidebar titles, tag text, social icons
#999999Input placeholders only
#FFFFFF#FFFFFFText on inverse-canvas
Action
#ADC7A6Active nav tab, subscribe button, tile labels, footer strip
#2A2A2ASubscribe button hover
#ADC7A6Lines & effects
#DBDBDB1px rules under posts and either side of sidebar titles
#DDDDDD2px underline under Keep reading (the live page computes #E4E4E4)
#E6E6E61px borders on tag buttons and social squares; #E1E1E1 on the footer divider
#FFFFFF · 95%1px inner frame on photo tiles
#F8F8F8 · 60%Top of the gradient that fades the hero photo into the page
Typography
Poppins · headline-lg
The quick brown fox jumpsPost titles (.blog-title), e.g. 32px · 500 · 1.44
Poppins · title-lg
The quick brown fox jumpsLabels on photo tiles (About Me, Lifestyle). 18px · 300 · 1.33
Playfair Display · body
The quick brown fox jumpsExcerpts, By. 14px · 400 · 1.86
Playfair Display · caption
The quick brown fox jumpsDates (March 8, 2016). 13px · 400 · 2.0
Poppins · label
The quick brown fox jumpsNav links. 11px · 600 · 1.82 · 1px
Poppins · micro
The quick brown fox jumpsTag buttons, subscribe input text. 12px · 400 · 1.67
Spacing & shape
| Purpose | Value |
|---|---|
| Container | 940px, centred (the Webflow default container) |
| Section rhythm | the main section has 100px bottom padding (top padding is removed under the hero) |
| Breakpoints | 991px, 767px and 479px (Webflow defaults) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 12px | |
md | 15px | |
lg | 20px | |
xl | 30px | |
2xl | 40px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
nav-height | 50px | |
section | 100px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Nav link hover | background-color 0.2s to #313131, text to white |
| Title and link hover | color 0.4s (post titles) and color 0.5s (popular posts) to #ADC7A6; color 0.2s on tags |
| Button hover | background-color 0.4s (subscribe to #2A2A2A, big button to sage); Keep reading all 0.4s |
| Photo tile hover | Image scale 1 → 1.2, 500ms ease, back to 1 on mouse out |
| Scroll navigation | Slides from y −100% to 0% over 500ms once you scroll past the hero |
| Page load | One element fades in: opacity 0 → 1, y 100px → 0, 1000ms outQuart |
| Social icons | background-position 0.4s sprite shift on hover |
Do’s and don’ts
- Keep the page #F8F8F8 with white bars, and use sage #ADC7A6 as the single accent.
- Set titles in Poppins 32px weight 500, excerpts in Playfair Display 14px / 26px #616161.
- Use uppercase Poppins 11–13px with 1px tracking for nav links, Keep reading, the big button and author names.
- Keep every corner square (0 radius) and add thin white frames to photos.
- Overlap the post card onto the bottom of its 3:2 photo and centre its text.
- Title sidebar blocks with a centred label sitting on a 1px #DBDBDB rule.
- Round buttons, tiles or inputs, or add drop shadows beyond the 3px #EEEEEEB8 hairline glow.
- Set long text in sage; #ADC7A6 on #F8F8F8 is about 1.7:1. Keep it to bold category words, the section title at 32px, and fills.
- Put long labels in white on sage; it is about 1.8:1. Keep it to short words like Subscribe and About Me, at 13px or larger.
- Use #797979 for body text; keep ink-subtle for 14px+ meta such as sidebar titles and tags.
- Add a second accent colour or saturated UI elements; colour comes from the photos.
- Swap the serif and the sans: Poppins never sets excerpts, Playfair never sets nav or buttons.
Example prompt
Any page in the Verde style
More design systems like this
Blog 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 Verde 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/verde.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