flowmanceGoya Design System
Goya is a bright, friendly studio site on a white page. It mixes chunky Rubik headlines (65px and 50px at weight 700, set solid at line height 1.0) with small letter-spaced uppercase labels, and it uses one strong colour, sea green #007F5F, for the logo, the pill buttons, the text links, a full-width stats band and the footer. Pale yellow and light grey bands break up the white, and warm documentary photos of people at work carry the imagery.
Four signatures make it recognisable:
- The curved-cut hero. The hero photo fills the right half of the screen inside a large shape whose left edge is a curve that sweeps down into a diagonal. Thin black line-art cubes float on the cut edge. Text sits on white to the left.
- Spaced uppercase type for anything small. The G O Y A logo has 10px tracking; nav links, text links (LEARN MORE ›, VIEW PROJECT ›, WORK WITH US ›) and footer headings all use 2px tracking in uppercase.
- Fat sea-green pills. The main button is a 70px-tall pill with a 35px radius and generous 25px 35px padding, much larger than the type it holds.
- Little flat badges. A pale-yellow chip with olive text (Introducing Goya, Fun Facts, Branding) marks hero, sections and project categories; a pale-blue one marks the top notice bar.
Goya is a light-only design.
Colors
Surfaces
#FFFFFFPage background, nav, testimonial cards, play pill
#F0F0F0The grey Key Features band and the frame around the video
#007F5FThe green stats band and the footer
#FFFFFFInputs, with a 1px #000000 at 7% border; input text
#333333Text on field
Ink
#FFFFFFText on green
#000000Headlines, nav links, lead text
#212127Paragraphs (the base p colour) and quote text
#919196List items and input placeholders (#919197)
#756D10Olive text on yellow badges
#2E6E8FText on accent
#FFFFFFText on inverse-canvas
#FFFFFFAction
#007F5FFilled pill buttons, logo, text links, back-to-top square
#FBFADDThe pale-yellow testimonials band and yellow badges
#E9F7FEThe Important Notice! badge in the notification bar
Lines & effects
#000000 · 8%The 1px rule under the nav
#DDDDDD · 60%The 1px border around blog cards
Typography
Rubik · display-hero
The quick brown fox jumpsHero h1 Create great, sparkling Webflow sites. 65px · 700 · 1.0
Rubik · headline-lg
The quick brown fox jumpsSection titles (A minimalist approach is the only way to design a website). 50px · 700 · 1.0
Rubik · logo
The quick brown fox jumpsThe GOYA wordmark in green. 30px · 700 · 1.33 · 10px
Rubik · title-lg
The quick brown fox jumpsProject card titles. 30px · 600 · 1.07
Rubik · body-lg
The quick brown fox jumpsHero lead (We are passionate about creating…). 25px · 500 · 1.2
Rubik · label
The quick brown fox jumpsButtons, notice text, footer links. 16px · 600 · 1.25
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1130px, centred |
| Section rhythm | 100px top and bottom on every band; .section steps to 80px 3% at ≤991, 80px 5% at ≤767 and 60px top and bottom at ≤479 |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus a few min-width: 768px rules |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 30px | |
lg | 50px | |
xl | 70px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
gutter | 72px | |
nav-height | 75px | |
hero-bottom | 80px | |
section | 100px | |
hero-top | 130px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Hover transitions | all 0.2s on buttons, nav links, footer links and logos |
| Nav link hover | Opacity 1 → 0.6, 200ms |
| Footer link hover | Opacity 1 → 0.8, 200ms |
| Outline button hover | Transparent → white fill, text white → #007F5F, 200ms |
| Close button hover | Opacity → 0.65, 300ms |
| Dropdown carets | Rotations, 300ms ease |
| Mobile menu icon | Moves of ±6px on the y axis, 300–500ms, on navbar open and close |
| Notification bar | Closing sets it to display: none with no animation |
Do’s and don’ts
- Use #007F5F for every action: filled pills, text links, the back-to-top square.
- Set headlines in Rubik 700 at line height 1.0 (65px hero, 50px sections), with no tracking.
- Put 2px tracking on all uppercase labels, and 10px on the GOYA logo.
- Mark categories and section intros with the yellow badge (#FBFADD, #756D10, 3px radius).
- Alternate bands: white, #FBFADD, #007F5F, white, #F0F0F0, with 100px vertical padding.
- Keep buttons as 35px-radius pills with 25px 35px padding.
- Add a second accent colour; the blue, coral and lime variables are unused.
- Round images or cards; only pills, badges (3px) and blog cards (4px) have corners.
- Add shadows beyond the 3% blog-card shadow.
- Use #919196 (ink-subtle) for paragraphs; keep it for list items and placeholders at 14px+.
- Track mixed-case text or set body copy in uppercase.
- Use Playfair Display; it is loaded but not part of the home design.
- Invent hover colours for the filled green button; it only transitions.
Example prompt
Any page in the Goya 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 Goya 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/goya.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