flowmanceCosmo Design System
Cosmo is a friendly, upbeat digital-agency template. It mixes bold, wide-tracked uppercase sans headings with a soft serif body, which makes it feel half tech studio, half magazine. The page is white and lavender-white with lots of air; colour comes from one electric purple (#CA0EFF) used on buttons, a stat card, thin underlines and blurred glowing dots, plus bright pastel product photography.
Four signatures make it recognisable:
- Sans headings, serif body. Headings, nav, buttons and names are uppercase Hind Vadodara 600–700 with 1–3px tracking. Every paragraph, subtitle, role and quote is in Butler, a high-contrast serif, at weight 500.
- Electric purple, used sparingly. #CA0EFF fills the buttons and one stat card, draws a 2px nav underline and a 40px rule under section titles, and appears as soft, blurred circles floating in the margins.
- Ghost words. Huge pale uppercase words (KIT - APPS - WEB DESIGN, BEST DESIGN TEAM IN NYC) run behind sections at 100px+ in #F4F8FC at about 49%, sliding sideways as you scroll.
- Tilted photo frames. The hero and about photos sit in skewed, perspective-warped frames with softly rounded corners, not plain rectangles.
Colors
Surfaces
#FFFFFFPage, nav, feature cards, testimonial cards, footer
#FAFAFFAlternating section gray bands (projects, blog, Instagram)
#F1F1F7Small pale fills and the faint grey dot in the margin
#FFFFFF#333333Ink
#FFFFFFText on primary
#FFFFFF#000000Headings, eyebrow labels, team names
#111111Nav links and plain links
#383841Paragraphs, lead text, subtitles, quotes (--black-4)
#5C5C66Dropdown links (--dim-grey)
#9797A7Team roles and job titles
#7B88A8Skill-bar labels
#F2F2FA · 70%Secondary text on the purple stat card
#FFFFFFAction
#CA0EFFButtons, the stat card, underlines, glow dots (--medium-orchid)
#D14AF6.button:hover
#66D4FFSmall Code category tag (--sky-blue)
Lines & effects
#FF95D7Other category tags (--plum, --light-coral)
#FF6E6EOther category tags (--plum, --light-coral)
#F4F8FC · 49%The big background words
#EDEDED1px borders on feature cards, testimonial cards and inputs
#FFFFFF · 30%Light overlays on images
Typography
Hind Vadodara · display-rotator
The quick brown fox jumpsGhost words behind sections (.big-text-rotator, 120px / 600 in the base class). 100px · 700 · 1.0 · 1px
Hind Vadodara · headline-overlay
The quick brown fox jumpsTeam first names set over the photo bottom (PHILIP). 40px · 600 · 1.18 · 3px
Hind Vadodara · title-lg
The quick brown fox jumpsProject titles DONEC POSUERE. 20px · 700 · 1.0 · 1px
Butler · body-lg · shown in Playfair Display (fallback)
The quick brown fox jumpsHero lead, section subtitles (.big-paragraph). 19px · 500 · 1.47
Butler · caption · shown in Playfair Display (fallback)
The quick brown fox jumpsTeam roles in #9797A7. 16px · 500 · 1.5
Hind Vadodara · label-nav
The quick brown fox jumpsNav links. 14px · 700 · 1.43 · 1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred, inside sections padded 120px top and bottom and 5% at the sides (72px at 1440px), dropping to 60px top and bottom at ≤479px |
| Breakpoints | 991px, 767px and 479px, plus a min-width: 768px set |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 6px | |
sm | 10px | |
md | 16px | |
lg | 20px | |
xl | 30px | |
2xl | 50px | |
3xl | 70px | |
4xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
card-gap | 30px | |
footer-top | 70px | |
section-side | 72px | |
nav-height | 75px | |
section | 120px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Button hover | Background #CA0EFF → #D14AF6, transition: all 0.2s |
| Nav hover | Text colour change over 300ms ease; the 2px purple underline grows (size change, 300–500ms) |
| Icon and link nudge | Move y −6px ↔ 6px over 300ms ease, back to 0 |
| Rotate on hover | Small rotations over 300ms ease (500ms on some) |
| Ghost-word drift | x −10% → 0% scrubbed while the section is in view |
| Parallax | Images and dots move y ±100px and y ±200px with page scroll |
| Logo hover | Opacity 0.75 → 1 over 0.2s |
| Nav on scroll | Separate actions on scroll up and scroll down; the menu button animates open and closed |
Do’s and don’ts
- Pair uppercase Hind Vadodara 700 headings (1px tracking) with Butler 500 sentence-case paragraphs in #383841.
- Use #CA0EFF for every button, the 2px nav underline and the 40px rule under section titles.
- Alternate #FFFFFF sections and #FAFAFF bands, with 120px vertical padding.
- Give cards a 1px #EDEDED border and a 5px radius instead of shadows.
- Put a pale ghost word (#F4F8FC at 49%) behind major section titles.
- Keep button labels at 12px weight 700 with 1px tracking: white on #CA0EFF is 4.2:1 and on the #D14AF6 hover 3.5:1, the template's real colours, so the label must stay bold.
- Set Butler in uppercase or Hind Vadodara in sentence case for headings.
- Add drop shadows to cards or buttons.
- Use the sky-blue, pink or coral tag colours for buttons or large fields. White on #66D4FF is only 1.7:1, so tags hold one short uppercase word, never sentences.
- Use #9797A7 or #7B88A8 for paragraphs; keep them for short roles and skill labels at 15px+.
- Round anything beyond 5px except avatars, dots and the tilted hero frames.
- Use the unused CSS colours (--indigo, --lime-green, --teal and others).
Example prompt
Any page in the Cosmo 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 Cosmo 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/cosmo.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