flowmanceMarlin Design System
Marlin is a one-person photography portfolio. It opens on a full-screen, darkened video of a photographer at work, with a brush-script name centred at the top and a single line, I ♥ Photography, across the middle. Everything around the image is quiet: white panels, dark grey Poppins, and one colour story, a violet-to-tomato gradient that appears on the left rail, the button and the menu underlines.
Four signatures make it recognisable:
- The gradient rail. A fixed 80px bar runs the full height of the left edge, filled with linear-gradient(45deg, #ED6245, #B63DFD) (tomato at the bottom, violet at the top). It holds a white hamburger at the top and, at the bottom, a search icon, a short white hairline, then Facebook, Twitter, 500px and Instagram icons.
- Script against sans. The hero line pairs a Poppins 500 capital I at 100px, an outline heart graphic, and Photography in the Magehand brush script at 130px. The logo Marlin Quisha is the same script, set as an image, with PHOTOGRAPHER in wide-tracked capitals below it.
- The small gradient button. One compact uppercase button: 13px Poppins with 1px tracking, 4px radius, 12px 40px padding, filled with linear-gradient(225deg, #9100FF, #ED6245) and a soft drop shadow. On hover it lifts 5px and turns flat violet.
- The circular gallery button. A thin white ring, about 60px, centred near the bottom of the hero with a white four-square grid icon, opening the work.
Marlin is a light template (white canvas, dark ink) whose home page is entirely covered by the dark hero video: the page is one 900px screen with its own scroll container, and screenshots taken down the page show only that same hero with a different video frame. There are no further sections below it.
Colors
Surfaces
#FFFFFFPage background, side menu, search overlay
#F3F3F3One measured light-grey fill, not visible on the home screen; keep for quiet bands on inner pages
Ink
#FFFFFFButton text; all text and icons over the video and the rail
#212127Menu links, headings, search text
#333333Default body text and form text (Webflow body colour)
#818187Paragraphs (p colour) and the search hint
#C2C2C2The .text-block caption default on white (13px, 4px tracking)
#FFFFFFText on media
Action
#9100FFButton fill under the gradient, menu underline, blockquote, input border and placeholder
#9100FF#ED6245Tomato end of every gradient
Lines & effects
#B63DFDViolet end of the rail gradient
#3333333px underline of the search input
#FFFFFF · 40%1px ring of the gallery button over the video
#000000 · 50%Flat dark layer over the hero video
#000000 · 80%Tooltip chip
Typography
Magehand · display-hero · shown in Permanent Marker (fallback)
The quick brown fox jumpsPhotography in the hero (.top-title). 130px · 400 · 0.92
Poppins · headline-lg
The quick brown fox jumpsBase h1 on inner pages. 80px · 500 · 1.13
Poppins · title-lg
The quick brown fox jumpsBase h3, card titles. 22px · 500 · 1.36
Poppins · body-lg
The quick brown fox jumpsBlockquotes, in violet. 18px · 400 · 1.67
Poppins · label-lg
The quick brown fox jumpsSide-menu links. 16px · 500 · 1.25 · 1px
Poppins · eyebrow
The quick brown fox jumpsPHOTOGRAPHER under the logo. 13px · 400 · 1.54 · 4px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | .container-fluid, max 1170px, centred |
| Section rhythm | the home page is one full-screen hero, so no section padding is measured |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus a min-width: 768px rule set |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 5px | |
xs | 10px | |
sm | 15px | |
md | 30px | |
lg | 40px | |
xl | 50px | |
2xl | 80px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
rail | 80px | |
section | 80px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Page-load fade-up | opacity 0 → 1 with y 10px → 0 (and −10px → 0), 400ms ease |
| Button hover | all 300ms: gradient off, translateY(−5px), shadow 20% → 30% |
| Menu link | all 350ms; the 2px underline changes width, 200ms inOutBack and 300–400ms ease |
| Menu open | Side menu moves x → 0, 400ms ease; links fade in, 400ms; hamburger lines rotate, 400ms ease |
| Image hover zoom | scale 1 → 1.1, 400–500ms ease |
| Search overlay | Display on, then opacity 0 → 1, 300ms ease; reverse on close |
| Border change | 200ms outSine |
Do’s and don’ts
- Keep the 80px gradient rail (#ED6245 to #B63DFD, 45°) fixed on the left on every page.
- Use Magehand for one word per screen at 100px+, paired with Poppins 500.
- Use the single button-primary: 13px uppercase, 1px tracking, 4px radius, 12px 40px padding, violet-to-tomato gradient, lift 5px on hover.
- Keep panels white #FFFFFF or #F3F3F3 and headings #212127 at weight 500.
- Put white text over media only with the 50% black overlay underneath.
- Keep small UI text uppercase with tracking (1px for links and buttons, 4px for the caption).
- Use the gradient on large panels, section backgrounds or headings.
- Set Magehand for body, nav or button text, or below 100px.
- Use ink-muted #818187 under 15px; it is 3.9:1 on white. Use #333333 for small text.
- Use ink-faint #C2C2C2 for anything on white except the wide-tracked caption; it fails contrast.
- Round images or cards; only buttons (4px), tooltips (5px) and circles are rounded.
- Add new hues beyond tomato and violet, or bold heading weights.
- Animate longer than 500ms or with large moves; the measured moves are 5–15px.
Example prompt
Any page in the Marlin 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 Marlin 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/marlin.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