flowmanceKalium Design System
Kalium is a soft, warm agency template. It feels like good stationery: an off-white, slightly yellow page, a single slate-grey ink used for every word, and wide geometric Clash Display set very large. Lines are pale grey hairlines, the only colour is a calm mint green on buttons, and photography brings the brighter notes (pink, cyan, warm interiors).
Four signatures make it recognisable:
- One ink, warm paper. All text, from the 130px hero to the 13px tag, is #3C4A53 on #FFFEF5; the only exception is the white label on the mint button. Hierarchy comes from size and weight, never from lighter greys.
- Wide Clash Display at poster size. The hero Lift your brand with a smart template. runs two lines across the full width at 9vw (130px at 1440), weight 500, in sentence case.
- The social rail. A thin column of outline social icons (Instagram, Twitter, Dribbble, Behance, Facebook), separated by hairlines, sits on the left edge of the hero (absolutely positioned, so it scrolls away with the hero).
- Mint pills and outlined tags. The main button is a 30px-radius mint pill with white text; small labels like STAY IN TOUCH sit in a hairline-outlined pill above big titles.
Colors
Surfaces
#FFFEF5Page background, the menu, the cart (--floral-white)
#F3F2E5Ivory panels: pricing cards, news cards, the menu-link hover fill, the button hover (--ivory)
Ink
#FFFFFFText on primary
#3C4A53Text on primary-hover
#3C4A53All text except the white button label: titles, paragraphs, links, labels (--dark-slate-grey)
#3C4A53The same as ink: body text is in full ink
#3C4A53 · 70%Footer links on hover
#FFFFFFAction
#84C0A4The pill button (--medium-aquamarine); also the moving underline on link-line and the 3px blockquote rule (accent)
#F3F2E5The button turns ivory with ink text on hover
#84C0A4Lines & effects
#E4E4E41px hairlines: social rail separators, page-card frames, menu rows, tag outlines, the rule above the call-to-action
#FFFFFF · 30%The resting underline of text links on images
Typography
Clash Display · display-hero
The quick brown fox jumpsHero title (129.6px at 1440, which is 9vw). 130px · 500 · 1.0
Clash Display · headline-sm
The quick brown fox jumpsGroup labels on the left of the page grid: Homepage, Work, News, Company. 24px · 500 · 1.1
Clash Display · title-md
The quick brown fox jumpsFooter column titles Sitemap. 21px · 600 · 1.43
Clash Display · body-lg
The quick brown fox jumpsDefault paragraph (p) and the footer address. 20px · 500 · 1.1
Clash Display · label
The quick brown fox jumpsButton labels. 16px · 500 · 1.0
Clash Display · caption
The quick brown fox jumpsCopyright line. 16px · 500 · 1.1
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred, with 5% side padding (72px at 1440px) |
| Section rhythm | 120px top and bottom (.section), 80px at ≤991px and 60px at ≤479px; 90px for the call-to-action; padding 70px 5% 10px for the footer (40px top at ≤479px) |
| Breakpoints | 991px, 767px and 479px (Webflow defaults) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 16px | |
md | 20px | |
lg | 30px | |
xl | 40px | |
2xl | 130px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
footer-bottom | 10px | |
nav-gutter | 29px | |
column-gap | 30px | |
footer-top | 70px | |
gutter | 72px | |
nav-height | 84px | |
section-cta | 90px | |
section | 120px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll reveal | Opacity 0 to 1 with y 20px → 0, 500ms; some at 300ms outCubic; slow fades 1000ms outQuart |
| Text rise | Lines move y 100% → 0% inside a mask, 400–500ms ease; a few use outBack |
| Menu open | Display none to flex, side panels move in from x ±50vw, 500ms |
| Menu row hover | The ivory fill grows in height, 500ms ease |
| Cursor follower | Scales 0 → 1, 500ms, then tracks the mouse |
| Counters (inner pages) | Digit columns move y 0 → -400% / -700% / -900%, 2500ms, cubic-bezier(0.784, 0.325, 0.222, 0.98) |
| Hamburger | Lines rotate, 400ms swingTo |
| Button hover | Mint to ivory and white to ink, 300ms |
| Footer link hover | Ink to 70% ink, 200ms |
Do’s and don’ts
- Use #3C4A53 for all text on the #FFFEF5 canvas, and vary only size and weight.
- Set everything in Clash Display 500, with 600 for small titles and links.
- Keep big titles as sentence-case statements with a full stop, centred, at 9vw.
- Use the mint #84C0A4 pill (30px radius, 50px tall) for the main action and pair it with an underlined line link.
- Frame cards and divide lists with 1px #E4E4E4 hairlines; use ivory #F3F2E5 for panels.
- Add the outlined eyebrow pill above major calls to action.
- Add a secondary grey for body text or use pure black #061012.
- Put white text on mint smaller than 16px or lighter than 500: #FFFFFF on #84C0A4 is only about 2.1:1, so keep button labels 16px+ medium.
- Use mint for text or large fills.
- Round cards or images; only buttons and tags are rounded.
- Add shadows, gradients or cool grey surfaces.
- Track Clash Display tighter or set headlines in uppercase.
Example prompt
Any page in the Kalium 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 Kalium 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/kalium.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