flowmanceSasify Design System
Sasify is a calm, monochrome SaaS landing page for a finance product. It alternates pure black bands (hero, product tools, FAQ, CTA, footer) with white content sections, and keeps everything else grey: #2C2C2C text, #E7E7E7 icon circles, #F5F5F7 cards. Product screenshots in charcoal frames do the selling; headlines are Inter with tight −2px tracking.
Four signatures make it recognisable:
- Black and white bands. The hero and the long tools/FAQ section are #000000 with #E7E7E7 headlines; the sections between are #FFFFFF with #2C2C2C headlines. There are no mid-grey sections.
- Tight Inter headlines. Big headings are Inter 500–600 at 44–56px with −2px letter spacing and line height 1.2, set in sentence case (Establish a reliable brand with Sasify.).
- Grey circle icons. Features sit under 120px #E7E7E7 circles holding a thin dark line icon, followed by a title-lg name and a Learn More → link.
- Small uppercase white buttons. BUY SASIFY, GET STARTED: white, 5px radius, Inter 15px 700 uppercase, on black.
Sasify is light with dark bands; there is no dark mode.
Colors
Surfaces
#FFFFFFWhite sections
#F5F5F7Testimonial cards (--white-smoke)
#E7E7E7120px feature icon circles (--gainsboro)
#000000Hero, tools/FAQ band, CTA and footer
#2C2C2CScreenshot frames on black, the hero email field
Ink
#2C2C2CText on primary
#000000Button text darkens on hover (CSS .button-line-link:hover)
#2C2C2CHeadlines and labels on white (--black-3)
#555555Paragraphs and list items on white (base p, --dim-grey-2)
#9C9C9CBlog category labels only
#E7E7E7Headlines and paragraphs on black
#8F8F8FFAQ questions, footer titles, placeholders, the privacy line on black (--grey)
#FFFFFF · 41%Inactive tabs
#FFFFFFAction
#FFFFFFWhite buttons
#FFFFFF#00C25722px round badges only (--lime-green)
Lines & effects
#FFFFFF · 25%1px rules on black: under the nav, between FAQ rows, above the footer
#FFFFFF2px underline on the active tab
#2C2C2CScreenshot frames on black, the hero email field
Typography
Inter · display-stat
The quick brown fox jumpsStats ~1h, 34m. 64px · 600 · 1.0
Inter · headline-lg
The quick brown fox jumpsSection titles on white (Let your users drive your growth); a 500 variant is used on black (Tailored for teams of all sorts and sizes). 44px · 600 · 1.2 · -2px
Inter · title-lg
The quick brown fox jumpsFeature names (Expenses Management). 24px · 600 · 1.25
Inter · body-lg
The quick brown fox jumpsLeads and FAQ questions. 18px · 500 · 1.3
Inter · nav
The quick brown fox jumpsNav links. 18px · 500 · 1.11
Inter · quote
The quick brown fox jumpsTestimonial quotes. 17px · 600 · 1.3
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 120px top and bottom (.section); the CTA band uses 64px; the hero is min-height: 95vh with 160px top and 220px bottom; the footer 30px |
| Breakpoints | Webflow's 991px, 767px and 479px, plus 1440px+ |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 15px | |
md | 20px | |
lg | 25px | |
xl | 30px | |
2xl | 40px | |
3xl | 50px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-cta | 64px | |
section-x | 72px | |
section | 120px | |
hero-top | 160px | |
hero-bottom | 220px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Fade-in on scroll | opacity 0 → 1, 1000ms outQuart |
| Icon hover | scale 1 → 1.1, 100ms ease, and back |
| Arrow nudge | x 0 → 6px, 500ms outQuint, and back |
| Image drift | Small x / y ±4–10px and ±50–80px moves, 500ms, while scrolling in view |
| Tab underline | Size change 400ms outCubic; border 200ms outSine |
| Nav on scroll | Separate scroll-up / scroll-down triggers show and hide the bar |
| Hover transitions | Buttons all .2s; nav opacity and links .3s |
Do’s and don’ts
- Alternate #000000 bands and #FFFFFF sections; keep headlines #E7E7E7 on black and #2C2C2C on white.
- Set 44–56px headlines in Inter 500–600 with −2px tracking and line height 1.2.
- Use white uppercase buttons (5px radius, padding 10px 20px, Inter 15px 700).
- Put features under 120px #E7E7E7 circles with thin line icons.
- Frame product screenshots in #2C2C2C panels with an 8px radius.
- Separate FAQ and footer rows with 1px white-25% rules.
- Use the lime #00C257 or slate blue #3347FF for buttons or text.
- Add tracking to text under 44px, or uppercase anything but buttons.
- Use large drop shadows; the only shadow is 0 1px 2px #1018280D.
- Use ink-subtle #9C9C9C below 15px or for anything but category meta; it is only about 2.7:1 on white.
- Use pure #FFFFFF for headlines on black; use #E7E7E7.
- Use THICCCBOI or a second typeface.
- Use the 41% white inverse-ink-tab for anything but 16px weight-500 inactive tab labels beside a full-white active tab; it is only about 3.8:1 on black.
Example prompt
Any page in the Sasify 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 Sasify 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/sasify.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