flowmanceFrame Studio Design System
Frame Studio is a dark, type-first studio site. It opens on a wordmark so large it fills the 1440px width edge to edge, then alternates very big bold Instrument Sans lines with lots of empty near-black space and square-cornered product photography. Everything is flat: no shadows, no rounded cards, no gradients except two edge fades on the logo strip. The only light surfaces are the white testimonial cards and the pale subscribe field in the footer.
Four signatures make it recognisable:
- The full-width wordmark. Frame® in Inter Tight 600 at 27vw (389px at 1440) with line height 0.9 and −2px tracking, the ® set as a full-size circled glyph at the end of the word.
- Bold sans plus a hairline script word. The hero tagline A design studio crafting timeless is Instrument Sans 600 at 43px, followed by a lowercase word in Pencerio Hairline at 70px (solution) that rotates through other words.
- Indented headlines with ©. Statements and section titles start with a 30px first-line indent and often end in ©: Frame© is a creative force…, Featured Work©.
- White and dimmed lines in one block. Huge stacked lines mix full white with dimmed grey: Straight (white), to the (grey), bold ideas (white), with a small photo dropped into the gap. The services list (Brand strategy, Motion graphic, Video editing, 3D Animation) sits at 20% white at 86px.
Frame Studio is a dark-only design.
Colors
Surfaces
#0F0F11Page, every section and the footer (--main-color)
#19191D--third-color: button hover fill, blockquote rule
#222222Dark fill measured on 12 elements behind media (image and avatar wrappers)
#F1F3F8Footer subscribe field
#FFFFFFTestimonial cards: white with dark text
Ink
#FFFFFFText on primary
#D9DAE2Text on secondary
#FFFFFFHeadlines, nav, project titles, most text
#D9DAE2--body-text-color: footer text and secondary paragraphs
#FFFFFF · 70%Dates and meta (.data-text), project categories like Logo, User Interface
#FFFFFF · 20%Dimmed display lines (the services list)
#FFFFFF#000000Text on field
#0F0F11Text on inverse-canvas
Action
#27272EThe filled button (--second-color)
#19191DButton hover: the fill darkens
#000000Footer subscribe button; hover #080425
#080425#F1F3F8.button-line text links, checkbox label (66% opacity)
Lines & effects
#FFFFFF · 27%1px rules on dark
#D9DAE2The one solid light border (1px)
Typography
Inter Tight · display-wordmark
The quick brown fox jumpsFrame® hero (27vw). 389px · 600 · 0.9 · -2px
Instrument Sans · headline-lg
The quick brown fox jumpsFeatured Work© (4.2vw). 60.48px · 600 · 1.1
Instrument Sans · title-lg
The quick brown fox jumpsBlog titles. 24px · 600 · 1.2
Instrument Sans · body-lg
The quick brown fox jumpsLead paragraphs. 19px · 500 · 1.5
Instrument Sans · label-nav
The quick brown fox jumpsNav links. 19px · 500 · 1.68
Instrument Sans · caption
The quick brown fox jumpsDates and meta at 70%. 14px · 500 · 1.3
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1440px, centred (.container, 7 uses) |
| Grid | 12 columns with a 16px column gap and 40px row gap (.top-grid, 6 uses); at ≤991px .top-grid switches to flex |
| Section rhythm | 150px top and bottom (.section), 100px at ≤767px, 60px at ≤479px; side padding stays 3% |
| Breakpoints | 991px, 767px and 479px, plus min-width steps at 768, 1280 and 1920px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 3px | |
xs | 8px | |
sm | 16px | |
md | 25px | |
lg | 40px | |
xl | 80px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 16px | |
gutter | 43px | |
footer-top | 80px | |
section-compact | 100px | |
section | 150px |
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 | y 10% → 0%, 500ms; opacity 0 → 1 over 1000ms outQuart |
| Headline reveal | y 120% → 0% with skew back to 0°, 800ms outExpo |
| Slide-in | x −30px → 0, 500ms outQuart; mirrored x 30px → 0, 800ms outExpo |
| Featured work row | Horizontal move x 0vw → −140vw, driven by scroll while the section is in view |
| Settle | x 0px, y 0px, 1000ms outQuart (images moving into place) |
| Text roll (nav, buttons) | Label and its copy move up by one line inside a 24px mask on hover, 500ms |
| Underline grow | Width change, 300ms ease or 400ms outCubic |
| Border change | 200ms outSine |
| Button fill | transition: all .3s |
| Rotate | 500ms (icons on hover) |
| Script word | The Pencerio word cycles through a list of words |
| Logo strip and marquee | Continuous sideways scroll |
Do’s and don’ts
- Keep every section on #0F0F11 and separate sections with 150px of space.
- Use Instrument Sans 600 for headlines, with sizes in vw so they scale with the window.
- Pair one bold line with one lowercase Pencerio Hairline word at 70px.
- Mix white and dimmed lines in big type blocks, and drop a small photo into the gap.
- Keep every image, card, button and input square (0px radius).
- Use white #FFFFFF cards with #0F0F11 text for testimonials only.
- Round corners, add drop shadows or add an accent colour.
- Use Inter Tight for anything but the wordmark, or Pencerio Hairline for anything but the single script word.
- Put ink-faint (white 20%) on anything below 80px; it is for dimmed display lines only.
- Brighten the button on hover. The measured hover darkens #27272E to #19191D.
- Add letter spacing to body or headline text. Only the wordmark (−2px) and marquee (−7px) are tracked.
- Use coloured overlays on photos; only avatars go greyscale.
Example prompt
Any page in the Frame Studio 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 Frame Studio 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/frame.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