flowmanceRoby Design System
Roby is an editorial, black-and-white agency template with a handmade touch. A big brush-script Roby wordmark sits at the top of the page, and the headlines below it are uppercase lines that switch typeface mid-sentence: bold, wide Satoshi next to a tall, thin Melodrama serif. The rest is quiet: grey body text, hairline black frames, square-cornered photos and black circular buttons. One near-black band breaks the white page.
Four signatures make it recognisable:
- Two typefaces in one headline. “WE BELIEVE THAT (Satoshi 700) / THE POWER OF DESIGN (Melodrama 500) / HELPS BUSINESSES.” (Satoshi 700); SELECTED bold + WORK serif; OUR bold + TEAM serif + SKILLS bold. Numbers also switch to Melodrama (34, 10, 80%).
- The script wordmark. The Roby logo is a black brush script, about 350px wide in the hero, overlapping the top of the hero photo. It shrinks to about 120px in the fixed header as you scroll.
- Black circles. A 140px black circle WORK WITH US in the hero, a 65px UP button fixed bottom-right, round avatars and slider dots.
- Split compositions. The hero is half photo (bleeding off the left edge) and half quote; the skills band is half near-black text and half photo bleeding off the right.
Roby is a light design with one dark band.
Colors
Surfaces
#FFFFFFPage background
#FFFFFFSame as canvas: cards are white with a black hairline, not tinted
#FFFFFF#999999Input placeholders
#020A0CThe dark band (OUR TEAM SKILLS) and the Let's Talk CTA
Ink
#FFFFFFText on primary
#000000Headlines, nav links, the email, work titles, names
#747474Paragraphs, award rows, work categories, testimonial roles, the header tagline (about 4.6:1 on white)
#8F8F8FThe ( 0 ) cart count and other small meta (about 3.2:1)
#FFFFFFText and skill bars on the dark band
#FFFFFF · 70%Secondary text on the dark band
#FFFFFF · 50%Secondary text on the dark band
Action
#000000Circle button, pill button, UP button
#000000Lines & effects
#0000001px frames: testimonial cards, award dividers, tag borders
#E1E1E1Input borders
#222222 · 40%Slider dots
#222222With dot: Slider dots
#FFFFFF1px skill bars
Typography
Satoshi · display-section
The quick brown fox jumpsSection titles (SELECTED, THE PERFECT AGENCY FOR YOUR BRAND); the hero quote at line height 1.0. 60px · 700 · 1.2
Satoshi · headline-md
The quick brown fox jumpsFUN FACTS (with a Melodrama 48 / 500 partner). 48px · 700 · 1.1 · 1px
Melodrama · title-serif
The quick brown fox jumpsAward group titles and totals (CSS DESIGN AWARDS 34). 26px · 600 · 1.15
Melodrama · quote
The quick brown fox jumpsTestimonial quotes. 22px · 500 · 1.2
Satoshi · body
The quick brown fox jumpsParagraphs, award rows. 19px · 500 · 1.3
Melodrama · number-serif
The quick brown fox jumpsAward counts (10, 13). 19px · 500 · 1.3 · 1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred, with 5% side padding (72px at 1440) |
| Section rhythm | .section is 120px top and bottom, 5% sides |
| Breakpoints | Webflow defaults (991px, 767px, 479px) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 6px | |
xs | 15px | |
sm | 16px | |
md | 20px | |
lg | 30px | |
xl | 40px | |
2xl | 50px | |
3xl | 60px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-cta | 100px | |
section | 120px |
Border radius
Motion
| Slide and fade on scroll | Elements start at y 100px or x ±80px with opacity 0, then settle to 0, 0 and opacity 1 over 1000ms outQuart |
| Line reveal | Text moves y 110% → 0%, 500ms ease |
| Size changes | Skill bars grow to their percentage and the logo shrinks into the header, 500ms (ease on some, 300ms on smaller items) |
| Testimonial slider | 10 slide changes; inactive slides at 60% opacity |
| Icon hover | scale 1 → 1.1 and back, 100ms ease |
| Link arrow | Moves x 0% → 200% in 400ms ease, returns from the left in 600ms outExpo |
| Border and rotate | 300ms ease border change; 200ms ease rotation (menu icon) |
| Image hover | transform transition 500ms on five elements |
Do’s and don’ts
- Mix typefaces inside one uppercase headline: Satoshi 700 for most words, one Melodrama 500 word or line at the same size (display-section + display-section-serif, 60px).
- Keep the page canvas #FFFFFF with ink #000000 headlines and ink-muted #747474 paragraphs at 19px.
- Use black circles (button-circle 140px, back-to-top 65px) for primary actions.
- Use 1px black lines for frames and dividers, and square-cornered photos.
- Use one inverse-canvas #020A0C band, split with a photo bleeding off the edge.
- Set numbers in Melodrama.
- Add an accent colour, shadows or gradients.
- Use Melodrama for paragraphs or labels; it is for contrast words, quotes and numbers.
- Put ink-subtle #8F8F8F on anything but small meta like the cart count; it is about 3.2:1 on white.
- Round photos or cards.
- Invent a hover colour for the buttons; none is measured.
- Use pure #000000 for the dark band; it is #020A0C.
Example prompt
Any page in the Roby 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 Roby 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/roby.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