flowmanceBeńk Design System
Beńk is a friendly consumer-bank landing page. It is white and airy, with black Inter headlines set tight, grey supporting copy and a single loud colour: a pure, slightly greenish yellow (#FDE600) used for the main button, the active tab, the subscribe arrow and a big angled slab behind the hero. People photos sit on flat coloured backgrounds (electric violet, salmon pink), which gives the page a fintech-app feel rather than a corporate-bank one.
Four signatures make it recognisable:
- The yellow slab. A tall, angled yellow shape (a background image on .hero, anchored right, contain) cuts diagonally down the right side of the first screen. The hero photos and a white transactions card float on top of it.
- Product-UI props. The hero pairs two square portraits with a white "Transactions" card: card-brand logos, dates, amounts and 25px green ✓ or red ✕ status dots. Fake app UI is part of the illustration language.
- Faded second line. Big titles end in a grey phrase: Personal banking, in black, then your way. in #B4B4B4. Hyphens in the hero are replaced by an em dash: User—friendly banking.
- Tilted collage. In the personal-banking section, photos and a flat violet card with a yellow circle are stacked at different angles (about 10–15°), overlapping like dropped prints.
Beńk is light-only.
Colors
Surfaces
#FFFFFFPage background
#F7F8FCThe tinted band behind the tabs section (section with-color), the subscribe field, dropdown hover in the CSS variables
#FCFCFCFeature cards (end of their gradient)
#F7F7F8Feature cards (start of their 156° gradient)
#6E6E6ESubscribe placeholder
#F7F8FC#26272BDropdown link hover; #26272B is also the footer link colour
Ink
#000000Text on primary
#FFFFFFText on secondary
#000000Headlines, hero lead, nav links, button text
#202125FAQ questions, input text
#838383Paragraphs (p in the base styles), current nav link, footer titles, category text
#B4B4B4The faded second line of titles, small-text meta, base link colour
#FFFFFFText on inverse-canvas
#FFFFFF#FFFFFFAction
#FDE600Main buttons, active tab, circle arrow button, hero slab
#FDB500Circle arrow button on hover (the only measured hover colour)
#000000Open Account button in the nav
#00C257Status dots in the transactions card only
#FF0000Status dots in the transactions card only
Lines & effects
#555555Inactive tab pills
#E1E1E11px top rule on FAQ rows and card borders
#E4E5E9Light dividers (--gainsboro)
Typography
Inter · display-hero
The quick brown fox jumpsHero h1: User—friendly banking. 74px · 600 · 1.1 · -1px
Inter · headline-md
The quick brown fox jumpsSection h2: Tailored solutions for every business need. 35px · 600 · 1.3 · -1px
Inter · title-lg
The quick brown fox jumpsFAQ questions (.faq-title). 26px · 600 · 1.23 · -1px
Inter · body-lead
The quick brown fox jumpsHero lead and the black lead under big titles. 23px · 500 · 1.3 · -1px
Inter · label
The quick brown fox jumpsButtons, Check out more, footer links and titles. 16px · 600 · 1.25
Inter · caption
The quick brown fox jumpsCategory text, transaction rows. 15px · 500 · 1.33
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred (.container) |
| Section rhythm | 150px top and bottom for content sections (60px at ≤991px); 80px for the partner-logo strip; 50px for the closing CTA; the footer is 50px top, 30px bottom |
| Breakpoints | 991px, 767px and 479px (max-width), plus min-width steps at 768, 1440 and 1920px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 24px | |
lg | 40px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 40px | |
section-cta | 50px | |
gutter | 72px | |
section-partner | 80px | |
section | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll reveal | opacity 0 → 1, 1000–1250ms outQuart, with y settling to 0 over 1500ms outQuart |
| Image mask reveal | A cover moves y 0 → −102%, 1250ms inOutCirc, uncovering the image |
| Image settle | scale 1.5 → 1, 2000ms outQuart |
| Button hover fill | Inner layer x −101% → 0%, 300ms ease; leaves to x 100% |
| Arrow nudge | x 0 → 6px, 500ms outQuint, and back |
| Icon hover | scale 1 → 1.1, 100ms ease, and back |
| Tabs and pills | all 200ms |
| Links and footer | all 300ms; nav links opacity 300ms |
| Button background | background-color 200ms cubic-bezier(.645,.045,.355,1) |
Do’s and don’ts
- Use primary #FDE600 with black text for the one main action per block, as a 5px-radius, 48px rectangle with a ▸ caret.
- Set headlines in Inter 600 with −1px tracking, and put the last phrase of big titles in #B4B4B4.
- Pair a black 23px lead with grey #838383 16px body copy.
- Use flat-colour portrait backgrounds and fake app UI (transactions rows, status dots) as illustration.
- Keep the page white with one #F7F8FC band; nest white panels (20px radius) inside it.
- Keep pills for tabs and inputs only (30px), and small radii (5–7px) for buttons and cards.
- Add a second brand colour, or use green #00C257 and red #FF0000 for anything beyond status dots.
- Put white text on yellow.
- Use #B4B4B4 (ink-subtle) for text under 35px; it only works as the faded tail of a display title.
- Use #838383 (ink-muted) for text under 16px or for long paragraphs; it is a 3.8:1 grey, so keep it at 16px / 500 and short.
- Add drop shadows beyond the single 3% shadow, or glass and blur effects.
- Use Newsreader or any serif, uppercase labels, or weights above 600.
- Run hover animations longer than 300ms.
Example prompt
Any page in the Beńk 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 Beńk 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/benk.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