flowmanceStartIt Design System
StartIt is a dark, product-launch style startup kit. It feels like a SaaS landing page at night: a navy-black canvas (#12141D), chunky Clash Grotesk headlines, calm Inter paragraphs at reduced white, and one loud neon lime (#39FF14) used for the logo, eyebrows and the strongest call to action. The home page is a showcase of the kit's own pages, laid out as a grid of framed thumbnails.
Four signatures make it recognisable:
- The lime logo pill. The StartIt wordmark sits in dark ink on a neon lime pill top-left, and the same lime returns as small eyebrows above the hero title and most inner-page section titles (StartIt UI Kit template, Tips & Tricks, Pricing).
- The mesh hero. A full-width blue-to-violet-to-crimson gradient image behind a centred 72px Clash Grotesk headline, with a white pill button and a small underlined text link under it.
- Overlapping feature cards. Three surface-1 cards hang over the bottom edge of the hero, each with an 80px coloured icon circle (blue #4253FF, green #3CCF91, red #D40617) and a 22px Clash Grotesk sentence.
- Framed page thumbnails. Square-cornered 1px line frames hold a screenshot of each page and a centred 18px label (Landing 1, Blog 2, Contact 3).
StartIt is a dark-only design.
Colors
Surfaces
#12141DPage background, nav bar and footer (--black)
#1C1E2AFeature cards, the Sign In button, cart icon button, dropdown hover (--black-2)
#81818B · 30%Icon-button hover only
Ink
#061012Text on primary
#12141DText on accent
#FFFFFFHeadlines, card titles, thumbnail labels, button text on dark
#FFFFFF · 70%Nav links, list items, footer links, Or view on Webflow
#FFFFFF · 60%Hero lead paragraph and dropdown links
#8A8A8AStruck or secondary price tags only
Action
#FFFFFFThe main filled button: Buy StartIt Today
#39FF14Logo pill, eyebrows, Try StartIt Now, small Get Started buttons on inner pages, blockquote bar
#FF0E0ECart remove dot (a 24px circle with an 8px white × image, no text)
Lines & effects
#FFFFFF · 7%1px frames around page thumbnails (--white)
#FFFFFF · 12%Footer top border
#4253FFThe three feature icon circles only
#3CCF91The three feature icon circles only
#D40617The three feature icon circles only
Typography
Clash Grotesk · display-hero
The quick brown fox jumpsBuild smooth startup sites with us. 72px · 600 · 1.0
Clash Grotesk · headline-quote
The quick brown fox jumpsCentred quote: "Build a full website in 1 hour or less…" (.quote-title). 30px · 500 · 1.13
Clash Grotesk · title-lg
The quick brown fox jumpsFeature card sentences (h3). 22px · 500 · 1.14
Clash Grotesk · price
The quick brown fox jumpsPrice tags, ink-faint. 24px · 600 · 1.88
Clash Grotesk · label-nav
The quick brown fox jumpsNav links and footer links. 18px · 500 · 0.94
Inter · body-lg
The quick brown fox jumpsHero lead. 22px · 400 · 1.27
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred (.container) |
| Section rhythm | 120px top and bottom (.section), 100px for the page showcase (.section-presentation), 80px for the hero |
| Breakpoints | 991px, 767px and 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 15px | |
md | 20px | |
lg | 30px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 30px | |
footer-top | 60px | |
hero | 80px | |
section-presentation | 100px | |
section | 120px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Link hover | Colour or opacity, 200ms (transition: all .2s / opacity .2s) |
| Button and thumbnail hover | transition: all .3s; thumbnails go to 80% opacity |
| Dropdown open / close | Opacity 0 → 1, 200ms easeInOut; caret rotates over 200ms easeInOut; list moves to y 0px over 200ms |
| Page load fade | Opacity 0 → 1 over 1000ms outQuart |
| Scroll reveal | Elements fade in on scroll into view (opacity 500ms) |
| Mobile menu | Opens with a 400ms outCubic size change |
Do’s and don’ts
- Keep the canvas #12141D and put cards on #1C1E2A with a 5px radius.
- Set headlines in Clash Grotesk 600 and paragraphs in Inter 400 at white 60–80%.
- Put a lime #39FF14 eyebrow above the hero title and section titles.
- Use the white pill (#FFFFFF, #061012 text, 56px, 50px radius) for the main action and the lime pill once for the final call to action.
- Frame previews and screenshots with a 1px white-7% border and square corners.
- Give feature cards an 80px coloured icon circle from the three feature colours.
- Use lime for body text or large fills; it is for the logo, eyebrows and one button.
- Add drop shadows, glass blur or gradients on UI elements. The only gradient is the hero image.
- Add letter spacing, uppercase labels or the unused Playfair Display and Architects Daughter fonts.
- Round images or thumbnails; only cards (5px), buttons (30–50px) and circles are rounded.
- Use pure #000000 or a solid grey for paragraph text.
- Use ink-faint #8A8A8A for anything but secondary price text.
Example prompt
Any page in the StartIt style
More design systems like this
SaaS 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 StartIt 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/startit.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