Salt Design System

Get DESIGN.md Download View template Works with

Salt is a clean, almost monochrome startup and SaaS template. It reads like a tidy product catalogue: pure black type on white, pale blue-grey (#F7FAFC) panels, square-cornered buttons in black or light grey with small uppercase labels, and lots of white space. The published home is a demo index, so the measured page is mostly a 3-column grid of framed page previews; the previews show the same language on the inner pages, with bright lifestyle photos cropped into arch shapes.

Four signatures make it recognisable:

Square uppercase arrow buttons. 52px tall, 0px radius, 12px bold uppercase labels with 1px tracking and a small ↗ arrow drawn as a background image at the right (VIEW ON WEBFLOW ↗, BUY SALT NOW ↗). One light grey, one black.
Uppercase eyebrow over a bold headline. A grey 13px eyebrow with 1px tracking (DESIGN ANYTHING, BUILD EVERYTHING) sits directly above a 60px bold sentence headline.
Spaced wordmark and ≡ MENU toggle. The SALT logo is set in wide-tracked capitals, and the nav ends in a hamburger icon with MENU in 13px uppercase with 2px tracking, separated from the social icons by a vertical hairline.
Arch-cropped photography. Many inner-page photos (seen in the previews) are cropped with a fully rounded top and a square bottom; avatars are circles, and some blog grids keep plain square photos.

Colors

Surfaces

canvas#FFFFFF

Page background, nav, menu overlay

surface-1#F7FAFC

Demo cards and page-header bands on inner pages

field#FFFFFF

Inputs

field-ink#222222

Text on field

inverse-canvas#000000

The black CTA band above the footer

Ink

on-primary#FFFFFF

Text on primary

on-secondary#000000

Text on secondary

ink#000000

Headlines, nav, card titles

ink-muted#4D4D4D

Body text and the hero lead (p colour)

ink-subtle#757575

Uppercase eyebrows, footer links

ink-faint#979797

Right-aligned small notes; demo-card title on hover

ink-dropdown#000000 · 54%

Dropdown links (80% on hover)

inverse-ink#FFFFFF

Text on inverse-canvas

Action

primary#000000

BUY SALT NOW, CONTACT US

secondary#ECECEC

VIEW ON WEBFLOW (the base .button style)

link-dark#434945

Underlined inline links

Lines & effects

line#000000 · 8%

Nav bottom border

line-menu#C9C9C9

1px lines under the overlay-menu links

line-field#6E6E6E · 20%

Input borders

Typography

DM Sans · display-hero

The quick brown fox jumps

Hero h1 You deserve a stunning website (.title-1). 60px · 700 · 1.0

DM Sans · headline-cta

The quick brown fox jumps

White title in the black CTA band (.cta-title). 40px · 500 · 1.1

DM Sans · title-quote

The quick brown fox jumps

Centred quote "Build a full website in 1 hour or less…". 24px · 700 · 1.17

DM Sans · body-lg

The quick brown fox jumps

Hero lead and CTA lead. 21px · 400 · 1.33

DM Sans · label-footer

The quick brown fox jumps

Footer column titles. 18px · 700 · 1.11

DM Sans · caption

The quick brown fox jumps

Footer legal line. 15px · 500 · 1.6

Spacing & shape

Purpose	Value
Container	max 1140px, centred
Section rhythm	.section is 100px top and bottom (80px at ≤991, 60px at ≤479); the black CTA band is 75px (50px at ≤991); the footer is 60px top and 30px bottom (40px / 15px at ≤991)
Breakpoints	991px, 767px and 479px, plus a 768px+ rule

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	16px
`md`	20px
`lg`	30px
`xl`	50px
`2xl`	75px

Layout spacing

Token	Value	Preview
`footer-bottom`	30px
`footer-top`	60px
`section-cta`	75px
`nav-height`	75px
`hero-top`	80px
`section`	100px

Border radius

field5px

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Motion

Button hover	Arrow background moves 90% → 93% 45%, transition: all 0.2s
Demo card hover	Opacity 1 → 0.8, label colour → #979797, all 0.3s
Dropdown link hover	Colour black 54% → 80%, all 0.2s
Footer link hover	#757575 → #000000
Menu toggle	Lottie hamburger icon plays over 1200ms ease; the overlay fades in and out with opacity over 300ms ease
Load-in	Two elements fade in (opacity, 1000ms outQuart) while moving to y 0 (1000ms outQuart)

Do’s and don’ts

Use square (0px) buttons, 52px tall, with 12px bold uppercase labels, 1px tracking and a ↗ arrow on the right.
Pair a #ECECEC secondary button with a #000000 primary, light one first.
Put an uppercase #757575 eyebrow (13px, 1px tracking) above every bold headline.
Use #F7FAFC panels with 30px padding for grouped content and page headers.
Keep body copy at #4D4D4D and headlines at #000000.
Crop feature photos into arches or circles.
Round buttons, cards or panels; only inputs get 5px.
Add a brand colour to the UI; salmon #EEA27C is for blockquote rules only.
Put ink-subtle #757575 on #F7FAFC for small text; it falls just under 4.5:1 there. Use #4D4D4D on panels.
Use heavy shadows; the only shadow is 0 8px 25px black at 5%.
Set long text in uppercase; uppercase is for labels of 15px or less.
Use Caveat or a second typeface.

Example prompt

Any page in the Salt style

Prompt

Build your page in the Salt style. Use DM Sans on a white (#FFFFFF) page with #000000 headlines and #4D4D4D body text (17px / 24px, weight 400). Put a sticky 75px white nav with a 1px black-8% bottom border, a wide-tracked wordmark left, and social icons plus "≡ MENU" (13px bold uppercase, 2px tracking) right. Each section starts with a #757575 uppercase eyebrow (13px bold, 1px tracking) above a bold sentence-case headline (60px hero, line height 1.0). Buttons are square (0px radius), 52px tall, padding 16px 40px 16px 20px, 12px bold uppercase with 1px tracking and a small ↗ arrow on the right: primary #000000 with white text, secondary #ECECEC with black text; on hover the arrow nudges up-right over 0.2s. Group content in #F7FAFC panels with 30px padding and no radius. Use bright lifestyle photos cropped into arches or circles, a black CTA band with a 40px weight-500 white title, and a 1140px container with 100px section padding.

# Salt Design System

> Measured from the Salt template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

Salt is a clean, almost monochrome startup and SaaS
template. It reads like a tidy product catalogue: pure
black type on white, pale blue-grey (#F7FAFC) panels,
square-cornered buttons in black or light grey with
small uppercase labels, and lots of white space. The

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background, nav, m… |
| surface-1    | #F7FAFC     | Demo cards and page-hea… |
| field        | #FFFFFF     | Inputs                   |
| field-ink    | #222222     | Text on field            |
| inverse-can… | #000000     | The black CTA band abov… |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #000000     | Text on secondary        |
| ink          | #000000     | Headlines, nav, card ti… |
| ink-muted    | #4D4D4D     | Body text and the hero … |
| ink-subtle   | #757575     | Uppercase eyebrows, foo… |
| ink-faint    | #979797     | Right-aligned small not… |
| ink-dropdown | #000000 54% | Dropdown links (80% on … |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| primary      | #000000     | BUY SALT NOW, CONTACT US |

## Typography

- display-hero: DM Sans 60px / 700
- headline-cta: DM Sans 40px / 500
- headline-menu: DM Sans 40px / 700
- title-quote: DM Sans 24px / 700

{
  "$description": "Salt design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "BUY SALT NOW, CONTACT US"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#ECECEC",
      "$description": "VIEW ON WEBFLOW (the base .button style)"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background, nav, menu overlay"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F7FAFC",
      "$description": "Demo cards and page-header bands on inner pages"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines, nav, card titles"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#4D4D4D",
      "$description": "Body text and the hero lead (p colour)"
    },
    "ink-subtle": {
      "$type": "color",
      "$value": "#757575",

/* Salt theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-body, rounded-field, p-lg */

@theme {
  /* Colors */
  --color-primary: #000000;
  --color-on-primary: #FFFFFF;
  --color-secondary: #ECECEC;
  --color-on-secondary: #000000;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F7FAFC;
  --color-ink: #000000;
  --color-ink-muted: #4D4D4D;
  --color-ink-subtle: #757575;
  --color-ink-faint: #979797;
  --color-ink-dropdown: #0000008A;
  --color-link-dark: #434945;
  --color-line: #00000014;
  --color-line-menu: #C9C9C9;
  --color-line-field: #6E6E6E33;
  --color-field: #FFFFFF;
  --color-field-ink: #222222;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;

  /* Fonts */
  --font-sans: "DM Sans", sans-serif;
  --font-dm-sans: "DM Sans", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 60px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 700;
  --text-headline-cta: 40px;
  --text-headline-cta--line-height: 1.1;
  --text-headline-cta--letter-spacing: 0px;
  --text-headline-cta--font-weight: 500;
  --text-headline-menu: 40px;
  --text-headline-menu--line-height: 0.88;
  --text-headline-menu--letter-spacing: 0px;
  --text-headline-menu--font-weight: 700;
  --text-title-quote: 24px;
  --text-title-quote--line-height: 1.17;
  --text-title-quote--letter-spacing: 0px;

/* Salt design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #000000; /* BUY SALT NOW, CONTACT US */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #ECECEC; /* VIEW ON WEBFLOW (the base .button style) */
  --color-on-secondary: #000000; /* Text on secondary */
  --color-canvas: #FFFFFF; /* Page background, nav, menu overlay */
  --color-surface-1: #F7FAFC; /* Demo cards and page-header bands on inner pages */
  --color-ink: #000000; /* Headlines, nav, card titles */
  --color-ink-muted: #4D4D4D; /* Body text and the hero lead (p colour) */
  --color-ink-subtle: #757575; /* Uppercase eyebrows, footer links */
  --color-ink-faint: #979797; /* Right-aligned small notes; demo-card title on hover */
  --color-ink-dropdown: #0000008A; /* Dropdown links (80% on hover) */
  --color-link-dark: #434945; /* Underlined inline links */
  --color-line: #00000014; /* Nav bottom border */
  --color-line-menu: #C9C9C9; /* 1px lines under the overlay-menu links */
  --color-line-field: #6E6E6E33; /* Input borders */
  --color-field: #FFFFFF; /* Inputs */
  --color-field-ink: #222222; /* Text on field */
  --color-inverse-canvas: #000000; /* The black CTA band above the footer */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */

  /* Fonts */
  --font-dm-sans: "DM Sans", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 60px;
  --text-display-hero-font: var(--font-dm-sans);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: 0px;
  --text-headline-cta: 40px;
  --text-headline-cta-font: var(--font-dm-sans);
  --text-headline-cta-weight: 500;
  --text-headline-cta-line-height: 1.1;
  --text-headline-cta-tracking: 0px;
  --text-headline-menu: 40px;
  --text-headline-menu-font: var(--font-dm-sans);
  --text-headline-menu-weight: 700;
  --text-headline-menu-line-height: 0.88;
  --text-headline-menu-tracking: 0px;
  --text-title-quote: 24px;
  --text-title-quote-font: var(--font-dm-sans);

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Business design systems, the same colors first.

Browse all 398

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 Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

DM Sans · display-hero

DM Sans · headline-cta

DM Sans · title-quote

DM Sans · body-lg

DM Sans · label-footer

DM Sans · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Salt style

More design systems like this

Foreruns

Bridge

Elite X

Equity

Bring any of them to your AI tool