flowmanceMosaix Design System
Mosaix is a loud, poster-like creative studio and shop template on a dark plum-black page. Almost every screen is dominated by one or two words of condensed, uppercase Coolvetica set at a fifth of the viewport width, sitting over or next to saturated, studio-lit photography. A fine film-grain texture covers the whole page, which makes the flat dark canvas look printed rather than digital. The UI around the type is minimal: square corners, no shadows, white dots and one plum button.
Four signatures make it recognisable:
- Filled and outlined headline lines. The hero stacks DIGITAL (filled white), CREATIVE (transparent fill with a thin white outline) and STUDIO (filled), each line offset left or right so the block steps across the screen.
- The © pill. A copyright mark drawn as an uppercase C inside a tall white-outlined stadium (3px solid white border, fully round). It closes the hero (STUDIO ©), sits inside the marquee (©DESIGN) and follows section labels small (SELECTED WORK ©).
- Viewport-scale type in vw. Headline sizes are set in vw (18vw hero, 20vw marquee, 9vw project titles), so the words fill the width at every screen size and often run off the edge in a scrolling marquee.
- Film grain over everything. A fixed, full-viewport noise layer (tv-dots) sits on top of all sections, photos included.
Mosaix is a dark-only design.
Colors
Surfaces
#17141DPage background (--main-color); every .section sets it explicitly
#1F1B27The closing "Let's…" call-to-action band, one step lighter than the canvas
#17141DInputs use the canvas colour with a line-strong border
Ink
#FFFFFFText on primary
#17141DText on secondary
#FFFFFFHeadlines, nav, service titles, the about statement
#FFFFFF · 70%Paragraphs: the base p rule sets white with opacity: .7
#FFFFFF · 63%Small uppercase labels (.figma-text)
#FFFFFF · 55%Dates and meta (.data-text); .gray-text uses 50%
#FFFFFFTitles laid over photos
Action
#75346BThe only filled button: plum with white uppercase text
#444444.button:hover background (CSS)
#FFFFFFWhite circles: nav dots that grow into arrow circles, the play button
Lines & effects
#FFFFFF · 15%Cart border, cart footer rule, the cart close button fill
#FFFFFF · 18%1px input borders
#FFFFFFThe 3px solid border of the © pill and the outlined hero line
#000000 · 30%Dark layer on work and blog images under white titles
Typography
Coolvetica Condensed · display-marquee · shown in Oswald (fallback)
The quick brown fox jumpsThe scrolling BRANDING ▶ ©DESIGN strip (20vw). 288px · 400 · 1.2 · 2px
Coolvetica Condensed · headline-lg · shown in Oswald (fallback)
The quick brown fox jumpsSection labels: SELECTED WORK ©. 54px · 400 · 0.9 · 3px
Coolvetica Condensed · title-lg · shown in Oswald (fallback)
The quick brown fox jumpsBlog card titles over the image. 35px · 400 · 1 · 1px
Coolvetica Condensed · label · shown in Oswald (fallback)
The quick brown fox jumpsButton labels (.button-first-line); .button uses 24px / 1.1. 23px · 400 · 0.87
Instrument Sans · body-lg
The quick brown fox jumpsParagraphs, always at 70%. 21px · 500 · 1.3
Instrument Sans · caption
The quick brown fox jumpsDates and meta, at 55%. 14px · 600 · 1.3
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1440px, centred (.container) |
| Section rhythm | .section uses 150px top and bottom, 100px at ≤767px and below; side padding stays 3% |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus min-width rules at 768px and 1280px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 8px | |
xs | 10px | |
sm | 20px | |
md | 30px | |
lg | 60px | |
xl | 100px | |
2xl | 120px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
nav-y | 32px | |
gutter | 43px | |
section-logos | 50px | |
section-cta | 100px | |
section | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Headline line reveal | Each line sits in an overflow-hidden mask (.text-overflow), moves y 120% → 0% and un-skews skewY 15° → 0°, 1000ms outExpo |
| Slide-in from the side | x −30px → 0 over 500ms outQuart, or x 30px → 0 over 800ms outExpo |
| Fade-in | opacity 0 → 1, 1000ms outQuart, with y/x → 0 over the same 1000ms |
| Rotate-in | Rotate 600ms outExpo on four elements |
| Horizontal scroll | Work gallery and text rotator move along x (vw) while the section is in view |
| Marquee | Logo carousel and display words loop horizontally without stopping |
| Button background | Background colour 500ms inOutQuart on hover; .button CSS transition 300ms |
| Nav dot grow | Size 300ms ease with scale 0 → 1 on the arrow |
| Mouse move | Mouse-move interactions shift elements with the cursor |
| 3D button | transform 0.2s |
Do’s and don’ts
- Set headlines in uppercase Coolvetica Condensed at vw sizes (18vw hero, 9vw project names) so they fill the width.
- Alternate one outlined line with filled lines in the hero, and close the hero or a marquee with the © pill (3px white stroke, fully round).
- Keep the page on #17141D with a fixed grain layer over everything.
- Use square corners (0px) on every image, card, input and button.
- Set paragraphs in Instrument Sans 21px at white 70% (ink-muted), never full white.
- Use the plum #75346B for the one main action per section, with white uppercase label text.
- Add rounded cards, shadows, gradients or glass blur. The only round shapes are dots, circles and the © pill.
- Use the plum on text, backgrounds or icons; it belongs to buttons only.
- Set Coolvetica in lowercase or Instrument Sans in uppercase at large sizes.
- Use #444444 anywhere except the button hover.
- Use the declared but unused fonts (Coolvetica Crammed, Coolvetica Rg Italic) or the unused light greys.
- Shrink a long headline to fit; stack it on more lines or let it run as a marquee.
Example prompt
Any page in the Mosaix 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 Mosaix 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/mosaix.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