flowmanceRowan Blake Design System
Rowan Blake is a stark, square-cornered agency site. It reads like a fashion lookbook printed on white paper: pure black Instrument Sans on a pure white page, no rounded corners, no shadows, no grey panels, and saturated editorial portraits (signal red, blush pink, ochre, black with orange) that carry all the colour. The interface is black and white; the photographs are the brand.
Four signatures make it recognisable:
- Commas as layout. The nav reads Home, About, Work, Plans, Contact, and every work caption reads Vision Craft, Awwwards, Logo, User Interface. The commas are separate 24px elements (label-separator), slightly larger than the words, so the list looks typeset rather than spaced.
- The 288px section title. Featured is set at 288px, weight 600, tracking −5px, line height 0.9, with a superscript count (04) at the top right. It fills almost the full 1354px content width.
- The colour-field hero. A full-bleed portrait on a single saturated colour (about 95vh), a two-line 48px headline at the bottom left where the second line drops to white at 70%, an uppercase underlined VIEW PROJECTS link, and three stacked thumbnails on the right edge that switch the slide.
- The fading services list. Service names at 55px with a tight 0.8 line height, stacked flush left. The current one is full black; the rest sit at black 20% (ink-ghost) and come forward on hover.
Rowan Blake is a light-only design.
Colors
Surfaces
#FFFFFFPage background, every section and the footer (--white)
#FFFFFFSame as canvas
#000000The hero container and the work-card backing behind video
#FFFFFFForm inputs and their placeholders
#000000 · 60%Placeholder text on field
Ink
#FFFFFFText on primary
#000000Headlines, nav, links, the big titles (--main-color)
#000000Body text
#000000 · 70%Blog dates and read times (.data-text, opacity 0.7)
#000000 · 35%Footer column titles (.footer-title, opacity 0.35)
#000000 · 20%Inactive service rows and footer dash marks (opacity 0.2)
#FFFFFFText on inverse-canvas
#FFFFFFAll text set on photos: hero, nav over the hero, work captions
#FFFFFF · 70%Second line of the hero headline
#FFFFFF · 75%Award and categories in work captions (opacity 0.75)
Action
#000000The square submit button (.button)
#000000#F9031COnly the 2px left border on blog blockquotes (--third-color; --second-color holds the same red)
Lines & effects
#E1E1E11px bottom rule under .title-wrapper-main-first rows
#FFFFFF · 40%The 1px rule under the hero VIEW PROJECTS link
#000000 · 30%Flat photo darkening (also 10% on the hero and 50% on some slides)
#0C0C0D · 50%Bottom of the work-card gradient, which starts at #0C0C0D at 14%
Typography
Instrument Sans · display-xl
The quick brown fox jumpsFeatured section title. 288px · 600 · 0.9 · -5px
Instrument Sans · headline-lg
The quick brown fox jumpsServices list rows (Web design, Video editing, Motion graphic, Advertising). 55px · 600 · 0.8
Instrument Sans · title-lg
The quick brown fox jumpsThe intro statement Rowan© is a creative force…. 22px · 600 · 1.1
Instrument Sans · body-lg
The quick brown fox jumpsLonger text and footer lines. 18px · 500 · 1.5
Instrument Sans · label
The quick brown fox jumpsUnderlined text links (.button-line). 17px · 500 · 1.0
Instrument Sans · eyebrow
The quick brown fox jumpsSmall section labels (.top-line-title, 25px below). 13px · 600 · 1.54
Spacing & shape
| Purpose | Value |
|---|---|
| Container | .container is 100% wide with a max of 1440px, centred |
| Section rhythm | .section is 70px top, 120px bottom; the top drops to 31px at ≤991, and at ≤479 it is 30px top, 170px bottom |
| Breakpoints | 991px, 767px, 479px, plus 1280px and 1920px+ steps |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 20px | |
lg | 40px | |
xl | 50px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 16px | |
gutter | 43px | |
section-top | 70px | |
section | 120px | |
section-lg | 150px |
Border radius
Motion
| Text roll on hover (nav, links) | Doubled label in a 24px overflow-hidden wrapper moves y 0% → 100%, 500ms |
| Line reveal | Text starts at y 130% with skewY 6°, settles to y 0%, skewY 0° over 400ms outSine |
| Fade on hover | Opacity 0 ↔ 1 over 200ms or 300ms ease (icon squares, captions) |
| Underline grow | Size change, 500ms |
| Scroll moves | Scrubbed horizontal moves x 45vw → 0, x −45vw → 0, x 0 → −140vw while sections are in view; small y 10% → 0 and rotate steps, 500ms keyframes |
| Page load | Opacity 0 → 1 and move to 0px, 1000ms outQuart |
| Button hover | Opacity to 0.8, 300ms |
Do’s and don’ts
- Keep the UI strictly #000000 on #FFFFFF, with black at 70% for meta text.
- Join nav items and caption parts with 24px commas (label-separator) instead of gaps or bullets.
- Give the key section a single-word display-xl title at 288px, −5px tracking, with a superscript (0N) count.
- Keep every corner square: images, cards, inputs and the submit button at 0px.
- Put white text on photos only with the #0C0C0D 14%→50% scrim or a flat black overlay.
- Use Instrument Sans 500 for text and 600 for titles, with 0 tracking.
- Add rounded corners, shadows, borders around cards or grey panels.
- Use accent #F9031C outside the blockquote border, or bring back the unused #9ADBFF or #D9DAE2.
- Set paragraph text in grey; body copy is full black.
- Use ink-faint (35%) below 15px or ink-ghost (20%) below 48px. They fail contrast at small sizes.
- Use uppercase for anything except 13px labels.
- Stack a second filled button style. CTAs are underlined text links; the black square is for form submit.
- Animate longer than 500ms outside the 1000ms page-load fade.
Example prompt
Any page in the Rowan Blake style
More design systems like this
Portfolio 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 Rowan Blake 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/rowan.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