Focus Design System

Get DESIGN.md Download View template Works with

Focus is a classic, confident business-agency site in red and white. It reads like a printed corporate brochure: condensed uppercase Oswald headlines in near-black, a warm serif (Playfair Display) for every paragraph, and one saturated red, #EF3E36, that marks every button, eyebrow, active link and most icons. Cool grey bands (#F0F4F7) alternate with white, and team and about photography is square-cornered cut-out portraits on pale grey.

Four signatures make it recognisable:

The red hero. A full-width red gradient (39deg, #C41515 to #EF3E36) crossed by thin, faint diagonal lines, with a white uppercase headline on the left and a laptop mockup on the right.
The split headline. THINK THE DESIGN, DESIGN THE THINKING in 60px Oswald sits on the hero's bottom edge. Two stacked copies, one white and one red #EF3E36, are clipped so the line reads across the red/white border.
Red eyebrow over black title. Most sections open with a 12px red uppercase eyebrow (BEST TEAM EVER, WHAT FITS YOUR BUSINESS) and a 42px uppercase title (THE TEAM, OUR PRICING).
Outline diamonds and avatar bubbles. Rotated squares with a 5px red border float at section edges, and testimonials use a cluster of 120px circular avatars scattered across a 587×556 area.

Focus is a light-only design.

Colors

Surfaces

canvas#FFFFFF

Page background and white sections

surface-1#F0F4F7

Grey bands (section gray), portrait backdrops, team photo backgrounds

surface-2#F5F5F5

Small light fills (rare)

field-line#DCE7E9

Input bottom border, which turns red on hover

field-hover#FC493E

Input bottom border, which turns red on hover

inverse-canvas#231F22

The 55px notice bar above the nav

Ink

on-primary#FFFFFF

Text on primary

on-secondary#EF3E36

Text on secondary

ink#121217

Headlines, nav links, names

ink-muted#818187

Paragraph text (Playfair Display)

ink-subtle#919197

Testimonial quotes and dropdown links

ink-dim#515157

Small uppercase footer text and plain links

on-media#FFFFFF

Text on red or on photos; testimonial roles (CEO OF FOCUS) on the grey band

on-media-muted#BDBDC5

Muted text on media

inverse-ink#CACACA

Text on inverse-canvas

Action

primary#EF3E36

Filled buttons, social icons, the CTA band

primary-hover#E57D78

.button:hover background

secondary#FFFFFF

The white CONTACT US button on red

accent#C41515

Deep red end of the hero and overlay gradients only

Lines & effects

line#E1E1E1

1px borders on cards and dividers

line-nav#EBECF0

The 1px rule under the fixed nav

overlay#222222 · 40%

Darkening over blog and project images

Typography

Oswald · display-hero

The quick brown fox jumps

Hero FOCUS AN AGENCY WEBFLOW TEMPLATE, white. 60px · 500 · 1.17

Oswald · headline-md

The quick brown fox jumps

YOU DESERVE A STUNNING WEBSITE (right-aligned). 46px · 400 · 1.09

Oswald · title-lg

The quick brown fox jumps

Project titles in red, blog card titles in white. 20px · 500 · 1.5

Playfair Display · body

The quick brown fox jumps

Paragraphs, pricing feature rows. 15px · 400 · 1.73

Oswald · label

The quick brown fox jumps

Nav links, white button, footer links (footer adds 2px tracking). 13px · 500 · 1.54

Oswald · eyebrow

The quick brown fox jumps

Red section eyebrows (.small-red-title). 12px · 500 · 2.5 · 1px

Spacing & shape

Purpose	Value
Container	max 1150px, centred (.container, used 11 times)
Section rhythm	130px top and bottom, 5% side padding (72px at 1440px); .section drops to 100px at ≤991
Section header	left-aligned eyebrow plus title, with a red button pinned to the right edge on the same row (JOIN US)
Breakpoints	991px, 767px and 479px (Webflow defaults)

Spacing scale

Token	Value	Preview
`xs`	5px
`sm`	10px
`md`	15px
`lg`	24px
`xl`	35px
`2xl`	80px
`3xl`	100px

Layout spacing

Token	Value	Preview
`column-gap`	35px
`notice-bar`	55px
`section-side`	72px
`nav-height`	81px
`section-cta`	90px
`section`	130px

Border radius

xs2px

sm3px

card12px

full9999px

Surfaces

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

Level 1canvas

Level 2surface-2

Level 3surface-1

Motion

Button hover	Background #EF3E36 to #E57D78, transition: all .3s
Nav and logo hover	Opacity 1 to 0.7 (nav) or 0.7 to 1 (logos), 200ms
Scroll reveal	opacity 0 → 1 with y 30px → 0, 500ms
Image overlay slide	Overlay moves x −100% → 0%, 300ms ease, on hover; out to x 100%
Icon hover	Rotate, 200ms ease; text colour change 200ms ease
Underline grow	Size change, 400ms outCubic; border change 200ms outSine
Parallax	Page scroll moves decorative shapes (up to y −55px) as the page scrolls
Dropdown	Fade in, 100–300ms ease

Do’s and don’ts

Open each section with a red #EF3E36 eyebrow (12px, 1px tracking) and a 42px uppercase Oswald headline-lg title.
Write every heading, label and button in uppercase Oswald, and every paragraph in sentence-case Playfair Display.
Alternate white #FFFFFF and grey #F0F4F7 sections at 130px vertical padding inside a 1150px container.
Use the 3px-radius red button (#EF3E36, 52px tall) for actions, and the white button with red text on red backgrounds.
Keep photos square-cornered and put people on the pale #F0F4F7 backdrop.
Use the outline diamond (5px red border) sparingly as a section-edge accent.
Add a second brand hue. #C41515 is only for gradients with #EF3E36; orange appears only in the review stars.
Round cards beyond 12px or photos at all.
Use ink-muted #818187 or ink-subtle #919197 for text under 14px: they reach only 3.9:1 and 3.1:1 on white. Keep grey text in 14–15px Playfair with 1.7+ line height.
Set red text (#EF3E36, 3.9:1) below 12px, and keep it uppercase and 500 weight.
Keep white text on the red button at 13px uppercase or larger; white on #EF3E36 is 3.9:1, and on the hover #E57D78 it is 2.8:1.
Use Roboto, Ubuntu or Poppins; Roboto and Ubuntu are loaded only for the map and a counter, and Poppins is declared but not loaded.
Add drop shadows stronger than 0 20px 50px -20px #0000004D.

Example prompt

Any page in the Focus style

Prompt

Build your page in the Focus style. Use a white #FFFFFF page with alternating #F0F4F7 sections, 130px vertical padding and a 1150px container. All headings are uppercase Oswald 500 in #121217: section titles 42px / 46px, hero titles 60px. Above each title put a red #EF3E36 eyebrow in Oswald 12px weight 500, 1px tracking, uppercase. Paragraphs are Playfair Display 15px / 26px in #818187. Buttons are #EF3E36 with white uppercase Oswald 13px text, 3px radius, 16px 24px padding, 52px tall, hover #E57D78 over 0.3s. The hero is a red gradient (39deg, #C41515 to #EF3E36) with white text and a white button with red text. Photos are square-cornered portraits on #F0F4F7. Pricing cards are white with a 12px radius, 42px 25px padding and a 0 20px 50px -20px #0000001A shadow. Fixed white nav, 81px tall, 13px uppercase links, 1px #EBECF0 bottom rule.

# Focus Design System

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

## Overview

Focus is a classic, confident business-agency site in
red and white. It reads like a printed corporate
brochure: condensed uppercase Oswald headlines in
near-black, a warm serif (Playfair Display) for every
paragraph, and one saturated red, #EF3E36, that marks

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background and whi… |
| surface-1    | #F0F4F7     | Grey bands (section gra… |
| surface-2    | #F5F5F5     | Small light fills (rare) |
| field-line   | #DCE7E9     | Input bottom border, wh… |
| field-hover  | #FC493E     | Input bottom border, wh… |
| inverse-can… | #231F22     | The 55px notice bar abo… |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #EF3E36     | Text on secondary        |
| ink          | #121217     | Headlines, nav links, n… |
| ink-muted    | #818187     | Paragraph text (Playfai… |
| ink-subtle   | #919197     | Testimonial quotes and … |
| ink-dim      | #515157     | Small uppercase footer … |
| on-media     | #FFFFFF     | Text on red or on photo… |
| on-media-mu… | #BDBDC5     | Muted text on media      |

## Typography

- display-hero: Oswald 60px / 500
- display-split: Oswald 60px / 500
- display-price: Oswald 50px / 400
- headline-md: Oswald 46px / 400

{
  "$description": "Focus design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#EF3E36",
      "$description": "Filled buttons, social icons, the CTA band"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#E57D78",
      "$description": ".button:hover background"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "The white CONTACT US button on red"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#EF3E36",
      "$description": "Text on secondary"
    },
    "accent": {
      "$type": "color",
      "$value": "#C41515",
      "$description": "Deep red end of the hero and overlay gradients only"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background and white sections"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F0F4F7",
      "$description": "Grey bands (section gray), portrait backdrops, team photo backgrounds"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#F5F5F5",

/* Focus 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-headline-lg, rounded-sm, p-lg */

@theme {
  /* Colors */
  --color-primary: #EF3E36;
  --color-primary-hover: #E57D78;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFFFFF;
  --color-on-secondary: #EF3E36;
  --color-accent: #C41515;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F0F4F7;
  --color-surface-2: #F5F5F5;
  --color-ink: #121217;
  --color-ink-muted: #818187;
  --color-ink-subtle: #919197;
  --color-ink-dim: #515157;
  --color-line: #E1E1E1;
  --color-line-nav: #EBECF0;
  --color-field-line: #DCE7E9;
  --color-field-hover: #FC493E;
  --color-on-media: #FFFFFF;
  --color-on-media-muted: #BDBDC5;
  --color-overlay: #22222266;
  --color-inverse-canvas: #231F22;
  --color-inverse-ink: #CACACA;

  /* Fonts */
  --font-sans: "Oswald", sans-serif;
  --font-oswald: "Oswald", sans-serif;
  --font-playfair-display: "Playfair Display", serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 60px;
  --text-display-hero--line-height: 1.17;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 500;
  --text-display-split: 60px;
  --text-display-split--line-height: 0.93;
  --text-display-split--letter-spacing: 0px;
  --text-display-split--font-weight: 500;
  --text-display-price: 50px;
  --text-display-price--line-height: 1;
  --text-display-price--letter-spacing: 3px;

/* Focus 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: #EF3E36; /* Filled buttons, social icons, the CTA band */
  --color-primary-hover: #E57D78; /* .button:hover background */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #FFFFFF; /* The white CONTACT US button on red */
  --color-on-secondary: #EF3E36; /* Text on secondary */
  --color-accent: #C41515; /* Deep red end of the hero and overlay gradients only */
  --color-canvas: #FFFFFF; /* Page background and white sections */
  --color-surface-1: #F0F4F7; /* Grey bands (section gray), portrait backdrops, team photo backgrounds */
  --color-surface-2: #F5F5F5; /* Small light fills (rare) */
  --color-ink: #121217; /* Headlines, nav links, names */
  --color-ink-muted: #818187; /* Paragraph text (Playfair Display) */
  --color-ink-subtle: #919197; /* Testimonial quotes and dropdown links */
  --color-ink-dim: #515157; /* Small uppercase footer text and plain links */
  --color-line: #E1E1E1; /* 1px borders on cards and dividers */
  --color-line-nav: #EBECF0; /* The 1px rule under the fixed nav */
  --color-field-line: #DCE7E9; /* Input bottom border, which turns red on hover */
  --color-field-hover: #FC493E; /* Input bottom border, which turns red on hover */
  --color-on-media: #FFFFFF; /* Text on red or on photos; testimonial roles (CEO OF FOCUS) on the grey band */
  --color-on-media-muted: #BDBDC5; /* Muted text on media */
  --color-overlay: #22222266; /* Darkening over blog and project images */
  --color-inverse-canvas: #231F22; /* The 55px notice bar above the nav */
  --color-inverse-ink: #CACACA; /* Text on inverse-canvas */

  /* Fonts */
  --font-oswald: "Oswald", sans-serif;
  --font-playfair-display: "Playfair Display", serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 60px;
  --text-display-hero-font: var(--font-oswald);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 1.17;
  --text-display-hero-tracking: 0px;
  --text-display-split: 60px;
  --text-display-split-font: var(--font-oswald);
  --text-display-split-weight: 500;
  --text-display-split-line-height: 0.93;
  --text-display-split-tracking: 0px;
  --text-display-price: 50px;
  --text-display-price-font: var(--font-oswald);
  --text-display-price-weight: 400;

Free with a Flowmance accountSign up freeAlready have an account? Log in

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

Oswald · display-hero

Oswald · headline-md

Oswald · title-lg

Playfair Display · body

Oswald · label

Oswald · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Focus style

More design systems like this

Arbiter

Avante

Coach X

Harlem

Bring any of them to your AI tool