flowmanceMiting Design System
Miting is a light, approachable event directory for tech meetups and conferences. It feels like a friendly SaaS marketing page: lots of white, black Inter 600 headlines at calm sizes, violet #7C39B8 on every link, card title and button, and pale lavender bands between sections. 3D cartoon people and purple-washed event photos keep it playful rather than corporate.
Four signatures make it recognisable:
- Violet everything that's clickable. Event titles, blog titles, nav active state, underline links, footer column titles and buttons are all #7C39B8. Headlines and body text stay black and grey.
- The dot eyebrow. A 10px violet dot and a 17px violet label with no chip behind it (Welcome to Miting, Testimonials, Why choose us) sits 25px above each headline.
- Purple-tinted event cards. Each event photo carries a 20% violet wash, white pill chips (Design, Remote) top-right, and a bordered white body below with centred London, UK | Aug 29, 2023 meta, a violet title and a View Event underline link.
- 3D characters in a violet circle. The hero shows two 3D cartoon people standing in a large purple disc, over a pale lavender wedge, with a small spiral icon set inline in the headline.
Colors
Surfaces
#FFFFFFPage background, cards, footer
#F9F1FFLavender bands (logo strip, testimonials), chips, secondary button
#F3E7FDA slightly deeper lavender fill measured on 14 small elements
#F7F8FCDropdown link hover
#FFFFFF#7C39B8The app-download and CTA bands
Ink
#FFFFFF#7C39B8Text on secondary
#000000Headlines, hero lead, testimonial quotes
#26272BNav links and footer links
#2C2C2CTestimonial names and small top texts
#6E6E6EEvent location and date, input placeholders
#838383Paragraphs (base p), event descriptions
#8F8F8FTestimonial roles (Creative Director)
#B4B4B4Rating stars
#FFFFFF#FFFFFFText on inverse-canvas
#FFFFFF · 80%Action
#7C39B8Buttons, links, card titles, eyebrows, the CTA and app bands
#A462DFFilled button hover (lighter violet)
#F9F1FFSecondary button (Next, Get in Touch) and category chips
#E3C4FFLight violet detail (2 uses)
Lines & effects
#E0E0E01px border around event card bodies (no top border)
#EBEBEB1px input border
#EFF0F6Dropdown card border
#7C39B8 · 20%Wash over event photos
#7C39B8 · 7%Card shadow 0 5px 13px
Typography
Inter · display-hero
The quick brown fox jumpsHero h1 (Establish genuine connections through Events.). 50px · 600 · 1.1 · -1px
Inter · headline-md
The quick brown fox jumpsSection titles (Featured Events, Real experiences, real results.). 30px · 600 · 1.3 · -0.05px
Inter · body-xl
The quick brown fox jumpsHero lead in black (Explore over 1,000+ technology events). 23px · 500 · 1.3 · -1px
Inter · title-lg
The quick brown fox jumpsEvent card titles and feature point titles, in violet. 23px · 600 · 1.3
Inter · label-nav
The quick brown fox jumpsNav links. 17px · 600 · 1.18
Inter · eyebrow
The quick brown fox jumpsDot-eyebrow labels. 17px · 500 · 1.1
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred (.container); one wide wrapper at 1600px and two at 85% |
| Section rhythm | .section is 150px top and bottom with 5% side padding (72px at 1440) |
| Section header | dot eyebrow, then a headline-md title, centred for lists (events, testimonials, blog) and left-aligned in split sections |
| Breakpoints | 991px, 767px and 479px, plus min-width steps at 768, 1280 and 1440px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 15px | |
md | 25px | |
lg | 35px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
grid-gap | 30px | |
card-gap | 35px | |
gutter | 72px | |
section-cta | 80px | |
section-band | 85px | |
section | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll fade-in | Opacity 0 → 1, 1000ms outQuart, on elements entering view |
| Testimonial marquee | Two rows move along x over 50000ms, linear, looping |
| Hero parallax | On mouse move, layers shift up to ±80px on x and y, and ±50px, over 500ms |
| Icon hover | scale 1 → 1.1, 100ms ease, back to 1 on mouse out |
| Filled button hover | Background to #A462DF, 200ms cubic-bezier(0.645, 0.045, 0.355, 1) |
| Secondary button hover | Background and text invert to violet / white (transition: all) |
| Nav and footer links | Colour or opacity, 300ms |
| Dropdown | Caret rotates 300–400ms (ease, swingTo); link icons go from greyscale to colour in 300ms |
Do’s and don’ts
- Use #7C39B8 for underline links, card titles and buttons; keep headlines #000000 and nav and footer links #26272B.
- Open sections with the dot eyebrow (10px dot, 17px 500 violet), no chip.
- Keep headlines modest: 50px hero, 30px sections, Inter 600.
- Build event cards as a violet-washed photo plus a bordered white body (#E0E0E0, 8px bottom corners, 35px padding, centred text).
- Put testimonials as white 6px cards on the #F9F1FF band.
- Use soft violet shadows only (#7C39B8 at 5–7%).
- Darken buttons on hover; the measured hover is lighter (#A462DF). White on #A462DF is only 3.9:1, so never set button labels below 16px 600.
- Use ink-muted #838383 or ink-subtle #8F8F8F below 15px or for long text on lavender; they are low contrast. Keep them for short descriptions and roles.
- Put grey or black shadows on cards.
- Round filled buttons into pills; pills are only for chips and the search field.
- Use Newsreader. It is loaded but unused.
- Add a second accent colour; #4500FF is a single search-button hover and should stay that way.
Example prompt
Any page in the Miting style
More design systems like this
Education 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 Miting 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/miting.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