flowmanceMarketino Design System
Marketino is a dark, bright-accented marketing agency site. The page is a deep forest green-black (#091912), and a pale mint (#B4F8BC) does almost all the work: the button, the logo, the 1px rules, the menu badge, the numbers and the second half of the two-tone headlines. Three more pastels (pink, periwinkle, peach) appear only in the hero's rotating word and on the service cards, which gives the page a playful lift against the dark base. Type is Inter Tight semibold, centred in the hero and left-aligned below.
Four signatures make it recognisable:
- Mint second halves. Section intros and the hero lead start in white and finish in mint in the same sentence: Boasting over ten years of expertise, Marketino has emerged as a frontrunner / in digital experiences, web design, and branding.; Aligned with over 100+ companies and / startups around the world.
- The pastel word rotator. The middle line of the hero title cycles through words, each in its own pastel (computing web in pink #F8B4F0, tech web in mint, others in #B4CEF8 periwinkle and #F8DEB4 peach).
- Mint hairlines and circles. A 1px mint rule under the header and around content bands, and a large 1px mint circle around the $5.1M fact with avatars sitting on its edge. The menu button is a plus inside a ring of text reading Menu Menu Menu Menu.
- Gradient metrics. Big numbers (99%, 14, 6.5) are filled with a 135° gradient from mint to the canvas, so they fade toward the bottom right.
Marketino is a dark-only design.
Colors
Surfaces
#091912Page background (--black), a green-black
#091912Same as canvas: there are no raised dark panels
#81818B · 20%Footer subscribe field
#FFFFFFThe white square arrow button on the subscribe field
Ink
#091912Text on primary
#FFFFFFHeadlines, first halves of headlines
#FFFFFFParagraphs are full white (no opacity on p)
#FFFFFF · 60%Footer links
#999999Placeholders and list items (--grey)
#222222Titles and text on pastel cards (--black-second)
#091912Text on inverse-canvas
#FFFFFFAction
#B4F8BCThe filled buttons (except the white subscribe arrow), the 34px menu counters (13px / 700), the partner bullet (--blue-main, despite the name)
#091912The small .button turns canvas-coloured with mint text on hover; the big animated button keeps its mint
#B4F8BCMint text: headline endings, the logo, social icons, menu links, facts
#B4F8BC · 50%Metric labels (Client satisfaction)
#F8B4F0Rotating hero words only
#B4CEF8Rotating hero words only
#F8DEB4Rotating hero words only
Lines & effects
#B4F8BCThe three service cards
#CBDEFDThe three service cards
#FFD3FAThe three service cards
#B4F8BC1px rules under the header and around content bands, the fact circle
#FFFFFF · 15%One faint border
Typography
Inter Tight · display-fact
The quick brown fox jumps$5.1M in the fact circle (.fact-title, 9vw). 130px · 500 · 1.0
Inter Tight · headline-lg
The quick brown fox jumpsSection titles (Latest Works), centred. 44px · 600 · 1.3
Inter Tight · lead
The quick brown fox jumpsTwo-tone hero lead. 26px · 600 · 1.4
Inter Tight · title-md
The quick brown fox jumpsService card titles (.title-dark). 24px · 600 · 1.5
Inter Tight · body-lg
The quick brown fox jumpsFact label (Managed marketing budget). 20px · 500 · 1.3
Inter Tight · label-lg
The quick brown fox jumpsButton labels, footer titles, metric labels. 18px · 600 · 1.11
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred (.container) |
| Section rhythm | .section pads 100px top and bottom with 2% sides (80px at ≤991px, 60px at ≤479px); the video section 120px with 5% sides (80px with 2% sides at ≤991px, 60px at ≤479px); the hero is min-height: 100svh with 206px top, 130px bottom (182 / 120px at ≤991px; no min-height and 190 / 170px at ≤767px; 168 / 147px at ≤479px) |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus min-width: 1440px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 15px | |
md | 30px | |
lg | 50px | |
xl | 100px | |
2xl | 150px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
footer-bottom | 30px | |
footer-top | 80px | |
section | 100px | |
section-video | 120px | |
hero-bottom | 130px | |
hero-top | 206px |
Border radius
Motion
| Headline reveal | Text moves from y 200% to 0% in a mask, 1100ms outQuint, with a skew of y 7deg → 0deg over 500ms |
| Fade-in | opacity 0 → 1, 1000ms outQuart |
| Mouse parallax | Elements shift ±5, ±6 and ±10px on x and y as the cursor moves, 500ms (avatars, the fact ring, hero layers) |
| Button roll | Label out, arrow in, 500ms; transition: all |
| Hover colour | Text colour, image filter and opacity 300ms ease; small button and footer links transition: all .3s |
| Menu badge | Rotation 500ms; four elements use transform 0.75s cubic-bezier(1, 0, 0, 1) |
| Menu open | Overlay display: none → flex, size grows over 500ms, links roll up |
Do’s and don’ts
- Keep the page #091912 with white headlines; section intros finish in mint #B4F8BC.
- Use the mint pill (#B4F8BC, #091912 text, 70px tall, 40px radius) for every main action.
- Separate bands with 1px mint rules, and use one mint ring for a hero fact.
- Give each service card one pastel (#B4F8BC, #CBDEFD, #FFD3FA) with #222222 text and a 30px radius.
- Fill big numbers with the 135° mint-to-canvas gradient.
- Keep paragraphs full white at 18px weight 500.
- Put pastels other than mint anywhere except the rotator and the service cards.
- Use mint at 50% (accent-muted, about 4.4:1) for text under 18px semibold.
- Add shadows, grey panels or blur; this template has no raised dark surfaces.
- Use the unused CSS colours (#3B00DB, #E64007, #66FF00).
- Use white rules: lines here are mint.
Example prompt
Any page in the Marketino style
More design systems like this
Marketing 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 Marketino 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/marketino.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