flowmanceAron Design System
Aron is a loud, type-led studio site on a dark olive-black. Huge uppercase words in a heavy sans are scattered across the first screen like a magazine spread, warm stone-grey type replaces white, and one electric yellow (#FFEA00) is used for every point of emphasis: the play button, the back-to-top button, icons, stars and button hovers. Headlines mix a bold word with a light italic word, which gives the page its voice.
Four signatures make it recognisable:
- Staggered giant hero. DIGITAL top-left, INNOVATIVE centred, STUDIO bottom-right, each about 173px (12vw), weight 900, uppercase, placed on a 3×3 grid that fills 90vh. A yellow 100px play circle sits beside INNOVATIVE, and a rotating SCROLL DOWN text ring sits beside STUDIO.
- Bold + italic headline pairs. OUR *WORK*, BUILD *FANTASTIC* WEBFLOW WEBSITES., WHAT THEY *THINK*., THE *DETAILS*: the plain words are 700, the stressed word is italic at 300–400.
- One yellow accent. #FFEA00 on dark #212721, used sparingly: solid fills, thin line icons, stars, the yellow copy of the layered philosophy text and the hero lead's yellow Playfair Display &.
- Warm grey instead of white. Text on the dark page is #D6D1CA (a warm stone grey) or its tints, and the canvas fades from #212721 at the top to #3A423A further down.
Colors
Surfaces
#212721Page background at the top, the menu overlay, the cart (CSS --black-2)
#3A423AThe end of the page's vertical gradient #212721 → #3A423A; lower sections sit on it
#D6D1CA · 18%1px input border
#FFFFFFThe white footer revealed under the page
Ink
#FFFFFFText on primary
#212721Text on primary-hover
#212721Text on secondary
#D6D1CAHeadlines, nav, labels and most text (CSS --light-grey)
#D6D1CA · 80%Paragraphs (base p)
#D6D1CA · 70%Hero lead, ENQUIRE US:, footer column titles
#6F776FTestimonial roles (Aron Designer)
#212721Text on accent
#212721Text on inverse-canvas
#696969Footer links and the footer quote
Action
#4A524AMain filled button (View on Webflow)
#FFEA00Every button on hover
#D6D1CALight button (More About Us, Send Message)
#FFEA00Play button, back-to-top, stars, line icons, philosophy text, the &, blockquote rule
Lines & effects
#4A524A1px line under text links, the 1×15px logo divider
#D6D1CA · 12%Header bottom border
#6F776F · 44%1px border of testimonial cards
#00663FBlog category tags, white text
#000DFFBlog category tags, white text
#FF3A1BBlog category tags, white text
Typography
Source Sans 3 · display-hero
The quick brown fox jumpsDIGITAL, INNOVATIVE, STUDIO. 173px · 900 · 1.0
Source Sans 3 · headline-lg
The quick brown fox jumpsOUR, BUILD, WE WORRY ABOUT THE … SO YOU DON'T HAVE TO. 50px · 700 · 1.0
Source Sans 3 · title-blog
The quick brown fox jumpsBlog card titles. 28px · 700 · 1.0 · 1px
Source Sans 3 · body-lg
The quick brown fox jumpsHero lead WE ARE AN AWARD-WINNING BRANDING & WEB STUDIO…. 22px · 400 · 1.2
Source Sans 3 · label-button
The quick brown fox jumpsFilled buttons. 16px · 700 · 1.25
Source Sans 3 · eyebrow
The quick brown fox jumpsFooter column titles. 15px · 600 · 1.33 · 1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | .container max 1200px, centred |
| Section padding | 100px top and bottom, 5% left and right (72px at 1440px) |
| Breakpoints | 991px, 767px and 479px, plus a min-width: 768px set |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 5px | |
xs | 15px | |
sm | 16px | |
md | 25px | |
lg | 40px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
nav-height | 82px | |
section | 100px | |
footer-side | 200px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Fade-up on scroll | opacity 0 → 1 and y 20px → 0, 300ms outCubic |
| Slow reveal | opacity 0 → 1 and move to 0, 0, 1000ms outQuart |
| Link line | Width grows on hover, 300ms ease (also 300ms outExpo, 400ms outCubic) |
| Menu open | Display to flex, opacity fade 400–500ms, hamburger lines rotate 200ms ease |
| Testimonial slider | Active/inactive slides fade with opacity 400ms ease |
| Header on scroll | Scroll-up and scroll-down events drive small y ±20px moves at 500ms |
| Button hover | Background and colour, 0.2s CSS transition |
| Blog title hover | Opacity to 0.53 over 0.3s |
| Project rows | all, transform 0.5s transitions on the rows and their images |
Do’s and don’ts
- Use canvas #212721 fading to surface-1 #3A423A, with ink #D6D1CA type.
- Set headlines in Source Sans 3 uppercase and stress one word in italic 300–400 next to the 700 words.
- Keep #FFEA00 for small, solid accents: the play circle, back-to-top, stars, line icons and all button hovers.
- Use the #4A524A button (white text, 4px radius, 15px 23px padding, 50px tall) with a yellow hover and #212721 text.
- Lay the hero words out on a 3×3 grid at 12vw, weight 900, in a diagonal.
- Use 1px lines for links and testimonial cards instead of filled cards.
- Use pure white for text on the dark page; use #D6D1CA and its 80% / 70% tints.
- Add a second accent colour; #00663F, #000DFF and #FF3A1B are only for blog tags.
- Add shadows, blur or large rounded corners; the largest non-circle radius is 5px.
- Set more than one italic word in a headline, or use Playfair Display for anything but the &.
- Put ink-subtle (70%) or ink-faint #6F776F on the lighter #3A423A part of the page at small sizes; keep them for 14px+ uppercase labels and 18px roles on the darker top.
- Fill large areas with yellow; it is an accent, not a section colour.
Example prompt
Any page in the Aron 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 Aron 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/aron.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