Visual Design System

Get DESIGN.md Download View template Works with

Visual website template preview detail 2

Visual website template preview detail 3

Visual is a two-colour poster site: brick red on a pale misty rose, nothing else. The hero is three lines of Tanker, a heavy condensed display face, at 13vw. Everything else is either a small General Sans capital label or a red outline drawn around something: tilted stamp boxes, full-width outlined pills, underline-only form fields. Bright product photography inside 20px-rounded frames is the only other colour.

Four signatures make it recognisable:

Two colours only. #B04540 brick red for every word, line and button on the #FBE6DE misty rose canvas. Even the footer is a solid red band.
Tilted stamp labels. Service names (WEBSITE DESIGN, PROTOTYPING, MARKETING DESIGN) and SEND A MESSAGE sit in 3px red outline boxes, each rotated a few degrees, with mixed corner shapes: square (WEBSITE DESIGN, SEND A MESSAGE), full pill, or one rounded diagonal (30px 0px).
Dash-underlined arrow links. Small links are General Sans 14px 600 capitals followed by a ↗, with a short red dash under the first letters: VIEW OUR WORK ↗, LEARN MORE ↗, STUDIO ↗, and the hero social row.
Condensed capitals at two scales. Tanker at 187.2px for the hero and 70px for the centred agency statement, line height 0.9–1.1, with no tracking.

Visual is light-only.

Colors

Surfaces

canvas#FBE6DE

Page background everywhere (Webflow var --misty-rose)

surface-1#FBE6DE

Same as canvas: there are no surface steps or cards with fills

inverse-canvas#B04540

The footer band and the red wipe behind headings on hover

Ink

on-primary#B04540

Text on primary

on-primary-hover#1A1B1F

Text on primary-hover

ink#B04540

All text, headlines, labels, links (Webflow var --brown)

ink-muted#B04540

Same as ink: paragraphs are full brick red, uppercase

inverse-ink#FFFFFF

Text on inverse-canvas

on-media#FFFFFF

Action

primary#FBE6DE

The button is an outline: transparent over the canvas with red text and a 3px red border

primary-hover#B04540

On hover the button fills red and the text turns near-black (CSS .button:hover)

Lines & effects

line#B04540

3px button and stamp outlines, 2px project pills and field underlines, section rules

line-strong#1A1B1F

The 2px footer divider (the round cart button is #151619)

scrim#1A1B1F · 70%

Behind the mobile menu and cart overlay

cart-panel#12141D

Ecommerce cart drawer

Typography

Tanker · display-hero

The quick brown fox jumps

WE SHAPE / DIGITAL / IDENTITIES. 187.2px · 400 · 0.9

Tanker · headline-md

The quick brown fox jumps

Section intro line We are happy to contribute… (.title-3). 28px · 400 · 1.3

Tanker · title-stamp

The quick brown fox jumps

Stamp labels (.service-title). 25px · 400 · 1.15

Tanker · label-button

The quick brown fox jumps

Outlined button label WORK WITH US. 18px · 400 · 1.2

General Sans · body

The quick brown fox jumps

All paragraphs and service lists (base p is uppercase). 15px · 500 · 1.4

General Sans · nav

The quick brown fox jumps

Nav links Home, About, Blog (sentence case). 16px · 600 · 1.25

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Section rhythm	110px top and bottom for content sections, 80px for the CTA, 50px for the contact form band (.section, .section.cta, .section.red)
Breakpoints	Webflow's 991px, 767px and 479px, plus 1280px+

Spacing scale

Token	Value	Preview
`xs`	6px
`sm`	16px
`md`	30px
`lg`	35px
`xl`	40px
`2xl`	50px
`3xl`	70px

Layout spacing

Token	Value	Preview
`section-form`	50px
`nav-top`	50px
`section-x`	72px
`section-cta`	80px
`section`	110px

Border radius

sm4px

image20px

pill30px

pill-lg50px

full9999px

Motion

Fade-up on scroll	opacity 0 → 1 over 1000ms outQuart, y 50px → 0 over 1000ms outQuart
Hero and statement drift	Lines move y ±50px to ±100px while scrolling in view, 500ms steps
Cursor parallax	x / y ±5px follow the mouse, 500ms
Arrow-link dash	Width grows, 300ms ease
Project hover	Red overlay slides from translateX(-100%) to 0; image scale 1 → 1.1, 500ms; pill border changes over 300ms ease
Button hover	Fill transparent → #B04540, text → #1A1B1F, transition: all .3s
Nav link hover	opacity 1 → 0.8, 300ms

Do’s and don’ts

Use only #B04540 (ink, line) on #FBE6DE (canvas), plus photography.
Set hero and statement type in Tanker 400 with line height 0.9–1.1 and no tracking.
Set every paragraph in uppercase General Sans 15px 500, line height 1.4.
Box section labels in tilted 3px red outlines (padding 15px 39px), mixing square, pill and 30px 0px corners.
Give small links the ↗ arrow and the short red dash underline.
Keep the button outlined (3px, 30px radius) and fill it red only on hover. Keep its label at 18px Tanker, because #1A1B1F on #B04540 is only about 3.1:1.
Add a dark section, grey text, gradients or shadows.
Use filled buttons at rest or a second accent colour.
Use Tanker for paragraphs, or General Sans for display lines.
Fade body text with opacity; it is always full red.
Use EB Garamond; it is loaded but unused.
Put a background on the fixed nav, or scale stamps beyond a slight tilt.

Example prompt

Any page in the Visual style

Prompt

Build your page in the Visual style. Background #FBE6DE, every word and line #B04540, no other UI colour. Display type is Tanker (condensed capitals) weight 400: the hero at 13vw (about 187px), line height 0.9, three staggered lines; statements at 70px, line height 1.1. All paragraphs are uppercase General Sans 15px weight 500, line height 1.4. Small links are General Sans 14px 600 capitals with a "↗" and a short red dash underline that grows on hover over 300ms. Label each section with a tilted outline box (3px #B04540, padding 15px 39px, Tanker 25px) and vary the corners (square, pill, 30px 0px). Buttons are outline pills: 3px #B04540 border, 30px radius, padding 17px 30px, Tanker 18px; on hover fill #B04540 with #1A1B1F text. Project images have a 20px radius with a full-width 2px outlined pill name under each. Container 1200px, sections 110px tall padding and 5% sides. Forms are underline-only (2px red). Footer is a solid #B04540 band. No shadows, no gradients.

# Visual Design System

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

## Overview

Visual is a two-colour poster site: brick red on a pale
misty rose, nothing else. The hero is three lines of
Tanker, a heavy condensed display face, at 13vw.
Everything else is either a small General Sans capital
label or a red outline drawn around something: tilted

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FBE6DE     | Page background everywh… |
| surface-1    | #FBE6DE     | Same as canvas: there a… |
| inverse-can… | #B04540     | The footer band and the… |
| field        | #000000 0%  |                          |
| on-primary   | #B04540     | Text on primary          |
| on-primary-… | #1A1B1F     | Text on primary-hover    |
| ink          | #B04540     | All text, headlines, la… |
| ink-muted    | #B04540     | Same as ink: paragraphs… |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| on-media     | #FFFFFF     |                          |
| primary      | #FBE6DE     | The button is an outlin… |
| primary-hov… | #B04540     | On hover the button fil… |
| line         | #B04540     | 3px button and stamp ou… |
| line-strong  | #1A1B1F     | The 2px footer divider … |

## Typography

- display-hero: Tanker 187.2px / 400
- display-statement: Tanker 70px / 400
- headline-md: Tanker 28px / 400
- title-stamp: Tanker 25px / 400

{
  "$description": "Visual design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#FBE6DE",
      "$description": "The button is an outline: transparent over the canvas with red text and a 3px red border"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#B04540",
      "$description": "On hover the button fills red and the text turns near-black (CSS .button:hover)"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#B04540",
      "$description": "Text on primary"
    },
    "on-primary-hover": {
      "$type": "color",
      "$value": "#1A1B1F",
      "$description": "Text on primary-hover"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FBE6DE",
      "$description": "Page background everywhere (Webflow var --misty-rose)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FBE6DE",
      "$description": "Same as canvas: there are no surface steps or cards with fills"
    },
    "ink": {
      "$type": "color",
      "$value": "#B04540",
      "$description": "All text, headlines, labels, links (Webflow var --brown)"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#B04540",
      "$description": "Same as ink: paragraphs are full brick red, uppercase"
    },
    "line": {
      "$type": "color",
      "$value": "#B04540",

/* Visual 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-sm, p-lg */

@theme {
  /* Colors */
  --color-primary: #FBE6DE;
  --color-primary-hover: #B04540;
  --color-on-primary: #B04540;
  --color-on-primary-hover: #1A1B1F;
  --color-canvas: #FBE6DE;
  --color-surface-1: #FBE6DE;
  --color-ink: #B04540;
  --color-ink-muted: #B04540;
  --color-line: #B04540;
  --color-line-strong: #1A1B1F;
  --color-inverse-canvas: #B04540;
  --color-inverse-ink: #FFFFFF;
  --color-field: #00000000;
  --color-scrim: #1A1B1FB3;
  --color-cart-panel: #12141D;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Tanker", "Bebas Neue", sans-serif;
  --font-tanker: "Tanker", "Bebas Neue", sans-serif;
  --font-general-sans: "General Sans", "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 187.2px;
  --text-display-hero--line-height: 0.9;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 400;
  --text-display-statement: 70px;
  --text-display-statement--line-height: 1.1;
  --text-display-statement--letter-spacing: 0px;
  --text-display-statement--font-weight: 400;
  --text-headline-md: 28px;
  --text-headline-md--line-height: 1.3;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 400;
  --text-title-stamp: 25px;
  --text-title-stamp--line-height: 1.15;
  --text-title-stamp--letter-spacing: 0px;
  --text-title-stamp--font-weight: 400;
  --text-title-pill: 22px;

/* Visual 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: #FBE6DE; /* The button is an outline: transparent over the canvas with red text and a 3px red border */
  --color-primary-hover: #B04540; /* On hover the button fills red and the text turns near-black (CSS .button:hover) */
  --color-on-primary: #B04540; /* Text on primary */
  --color-on-primary-hover: #1A1B1F; /* Text on primary-hover */
  --color-canvas: #FBE6DE; /* Page background everywhere (Webflow var --misty-rose) */
  --color-surface-1: #FBE6DE; /* Same as canvas: there are no surface steps or cards with fills */
  --color-ink: #B04540; /* All text, headlines, labels, links (Webflow var --brown) */
  --color-ink-muted: #B04540; /* Same as ink: paragraphs are full brick red, uppercase */
  --color-line: #B04540; /* 3px button and stamp outlines, 2px project pills and field underlines, section rules */
  --color-line-strong: #1A1B1F; /* The 2px footer divider (the round cart button is #151619) */
  --color-inverse-canvas: #B04540; /* The footer band and the red wipe behind headings on hover */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-field: #00000000;
  --color-scrim: #1A1B1FB3; /* Behind the mobile menu and cart overlay */
  --color-cart-panel: #12141D; /* Ecommerce cart drawer */
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-tanker: "Tanker", "Bebas Neue", sans-serif;
  --font-general-sans: "General Sans", "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 187.2px;
  --text-display-hero-font: var(--font-tanker);
  --text-display-hero-weight: 400;
  --text-display-hero-line-height: 0.9;
  --text-display-hero-tracking: 0px;
  --text-display-statement: 70px;
  --text-display-statement-font: var(--font-tanker);
  --text-display-statement-weight: 400;
  --text-display-statement-line-height: 1.1;
  --text-display-statement-tracking: 0px;
  --text-headline-md: 28px;
  --text-headline-md-font: var(--font-tanker);
  --text-headline-md-weight: 400;
  --text-headline-md-line-height: 1.3;
  --text-headline-md-tracking: 0px;
  --text-title-stamp: 25px;
  --text-title-stamp-font: var(--font-tanker);
  --text-title-stamp-weight: 400;
  --text-title-stamp-line-height: 1.15;

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

Agency 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

Tanker · display-hero

Tanker · headline-md

Tanker · title-stamp

Tanker · label-button

General Sans · body

General Sans · nav

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Visual style

More design systems like this

Altrum

Jore

Agencā

AgencQ

Bring any of them to your AI tool