flowmanceDakota Design System
Dakota is a neat, businesslike startup template. Its home page is a showroom: a light grey hero with one centred midnight-blue headline and a single royal-blue button, followed by a big rounded grey panel holding every page of the template as a three-column grid of preview cards. It feels like a well-organised SaaS product catalogue: calm greys, one strong blue, and soft 10–20px corners.
Three signatures make it recognisable:
- Midnight blue instead of black. All headlines and nav text are #1E2F3C, paragraphs #62636B. Nothing on the page is pure black.
- Royal blue with a magenta spark. The only filled button is #293BBE with white Inter text and a 5px radius. Magenta #B5179E appears as a thin-lined spark burst beside the hero and as the button colour inside the page previews.
- Rounded grey containers on white. The hero is a full-width #F4F3F3 band; below it, content sits in a #F4F3F3 panel with a 20px radius inset in the 1200px container, and the footer is another #F4F3F3 block with a 15px radius.
Dakota is a light design. Its inner pages (seen in the previews) add a full royal-blue hero band with white text.
Colors
Surfaces
#FFFFFFPage background between the grey blocks, preview card fills, dropdowns
#F4F3F3Hero band, the catalogue panel, the footer block
#FFFFFFInk
#FFFFFFText on primary
#FFFFFFText on accent
#1E2F3CHeadlines, nav links, the wordmark, card titles
#62636BParagraphs (the CSS p colour), footer links, copyright
#7C7C7CDropdown links and input placeholders only
#494949The hero eyebrow line, list items, input text
#FFFFFFAction
#293BBEThe filled button; also the full-bleed hero of the inner pages
#1E2F3CButton hover (.button:hover)
#B5179EThe spark icon and the magenta buttons in inner-page heroes
Lines & effects
#E1E1E11px input borders
#FFFFFF · 6%The nav bar's faint fill over the hero
Typography
Switzer · display-hero
The quick brown fox jumpsSee the power behind Dakota template., centred over two lines. 76px · 500 · 1.05
Switzer · headline-lg
The quick brown fox jumpsCatalogue group titles: Landing, Company, Blog, Utility Pages, and the Launch quick, build smart CTA line (five 44px headings measured). 44px · 600 · 1.1
Switzer · title-md
The quick brown fox jumpsPreview card titles: Landing I, About, Careers. 20px · 600 · 1.5
Switzer · eyebrow
The quick brown fox jumpsA stunning, modular — multi layout template above the hero title. 18px · 500 · 1.33
Switzer · footer-link
The quick brown fox jumpsFooter links. 18px · 600 · 0.94
Switzer · nav
The quick brown fox jumpsTop nav links, capitalised. 17px · 600 · 1.18
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred (a 940px variant exists) |
| Breakpoints | 991px, 767px and 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 13px | |
sm | 15px | |
md | 30px | |
lg | 50px | |
xl | 80px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
footer-bottom | 35px | |
section-gutter | 72px | |
section | 100px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Dropdown open | Height grows, 500ms ease; chevron rotates, 100ms ease |
| Icon hover | scale 1 → 1.1, 100ms ease, and back |
| Spark and decoration pop | scale 0.7 → 1 or 1.5 → 1, 400ms swingTo; opacity 0 → 1, 300ms ease |
| Parallax drift | y −50px, ±100px or ±5px, 500ms steps while scrolling |
| Slider | x ±20% slides, 500ms |
| Button and link hover | Colour, background or opacity, 200ms (transition: all .2s) |
Do’s and don’ts
- Use midnight blue #1E2F3C for headlines and #62636B for paragraphs.
- Make #293BBE the one main button colour, with white Inter 18px text and a 5px radius.
- Group content in #F4F3F3 blocks with 15–20px radii on a white page.
- Set headings in Switzer and paragraphs and buttons in Inter.
- Lay out cards in a 3-column grid with a 30px gap and 10px image radius.
- Keep magenta #B5179E for small accents (the spark icon, one secondary button).
- Use pure black or add drop shadows.
- Mix more of the CSS palette colours (khaki, honeydew, orange) into the UI.
- Round buttons beyond 5px or images beyond 10px.
- Use ink-subtle #7C7C7C for paragraphs: it is 4.17:1 on white and 3.77:1 on #F4F3F3. Keep it to dropdown links and placeholders.
- Put more than one primary button in the hero.
- Use letter spacing or uppercase labels.
Example prompt
Any page in the Dakota 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 Dakota 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/dakota.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