Logan Mann Design System

Get DESIGN.md Download View template Works with

Logan Mann website template preview detail 2

Logan Mann website template preview detail 3

Logan Mann is a stripped-back, Swiss-style portfolio on a warm linen page. Everything is set in one wide, bold grotesk in capitals, in pure black, and organised by thin black rules that run edge to edge. There are no fills, no shadows and almost no colour: the only accent is a burnt-sienna #E2815D used for small details and the button hover.

Three signatures make it recognisable:

Ruled hero words. The hero is a stack of giant capital words (UI KIT, PORTFOLIO) at 120px, each in its own full-width row with a 1px black rule under it, and each row offset sideways by a different amount so the words stagger across the page.
Uppercase everything. Every heading and text tag (h1–h6, p, li, blockquote) plus the nav, logo and button links is text-transform: uppercase in Sporting Grotesque bold, from 120px down to the 10px footer.
The transparent ruled nav. A fixed nav with no background: LOGAN MANN left, TEMPORARY FOLIO centred, ABOUT BLOG WORK right, and a 1px black rule under all three. Content scrolls visibly underneath it.

Logan Mann is a light-only design.

Colors

Surfaces

canvas#EDE5E0

Page background (linen)

surface-1#EDE5E0

Same as canvas

field#FFFFFF

Button and input fill

Ink

on-primary#000000

Text on primary

on-primary-hover#FFFFFF

Text on primary-hover

ink#000000

All text, rules and card borders

ink-muted#000000

Body copy

Action

primary#FFFFFF

The pill button (white with a 1px black border)

primary-hover#E2815D

Button hover: fill and border go burnt sienna, text white

accent#E2815D

Button hover, the 4px blockquote rule, the 1px line under text links, a small dot under the nav

Lines & effects

line#000000

1px rules under the nav, under hero rows, and around cards

line-accent#E2815D

The 1px underline of link-line and one outlined element

line-on-canvas#EDE5E0

The nav link hover line (linen, drawn over the black rule)

line-on-dark#FFFFFF · 35%

A divider used on top of images

Typography

Sporting Grotesque · display-hero · shown in Space Grotesk (fallback)

The quick brown fox jumps

Hero rows UI KIT, PORTFOLIO. 120px · 700 · 1.1

Sporting Grotesque · headline-lg · shown in Space Grotesk (fallback)

The quick brown fox jumps

h2 page headings on inner pages. 32px · 700 · 1.13

Sporting Grotesque · title-price · shown in Space Grotesk (fallback)

The quick brown fox jumps

Product prices (.product-price-1). 19px · 400 · 1.4

Sporting Grotesque · quote · shown in Space Grotesk (fallback)

The quick brown fox jumps

Blockquotes with a 4px #E2815D left bar. 17px · 700 · 1.4

Sporting Grotesque · body · shown in Space Grotesk (fallback)

The quick brown fox jumps

Paragraphs. 14px · 700 · 1.4

Sporting Grotesque · label-nav · shown in Space Grotesk (fallback)

The quick brown fox jumps

Nav links. 13px · 700 · 1.54

Spacing & shape

Purpose	Value
Container	full width with 2% side padding (about 29px at 1440px), so content runs nearly edge to edge
Breakpoints	991px, 767px and 479px

Spacing scale

Token	Value	Preview
`hair`	5px
`xs`	10px
`sm`	16px
`md`	20px
`lg`	30px
`xl`	40px

Layout spacing

Token	Value	Preview
`gutter`	29px
`nav-height`	73px
`section`	100px
`hero`	110px

Border radius

xs2px

pill30px

full9999px

Surfaces

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

Level 1canvas

Level 2field

Motion

Scroll reveal	opacity 0 → 1 and move to y 0, 1000ms outQuart
Hero word drift	Rows move horizontally on mouse move, between about x −150px and x 450px, 500ms
Nav link hover	A 1px linen line grows in width over 500ms ease
Hover pop	scale 1 → 1.1 in 100ms ease and back, with a quick 100ms rotate
Button hover	transition: all 0.2s to the sienna fill
Panels	Size changes of 300–500ms ease for opening and closing

Do’s and don’ts

Use #EDE5E0 for the page and #000000 for all text, rules and borders.
Set every heading, paragraph and link in Sporting Grotesque bold, uppercase.
Separate content with 1px black rules that run the full width.
Stagger the giant hero words with different left offsets, one per ruled row.
Use white pill buttons with a 1px black border that fill #E2815D on hover.
Keep gutters at 2% so the layout runs nearly edge to edge.
Use grey text or a second text colour.
Use #E2815D for text or large areas. White text on it is only about 2.8:1, so keep the hover label at 12px bold capitals on a short button and never put body text on it.
Add shadows, rounded cards or background fills to cards.
Give the nav a background; it stays transparent over its black rule.
Use sentence case or a second typeface (Inter is declared but not loaded).
Use sizes between 32px and 120px; the contrast between huge and tiny is the point.

Example prompt

Any page in the Logan Mann style

Prompt

Build your page in the Logan Mann style. Use a #EDE5E0 linen background and black #000000 for all text, rules and borders. Set everything in Sporting Grotesque (or another wide grotesk) bold and uppercase: hero words at 120px with line height 1.1, each in its own full-width row with a 1px black bottom rule and a different left offset; section labels 16px; body 14px with line height 1.4; captions 12px. Use a fixed transparent nav with "NAME" left, a tagline centred and three 13px links right, all sitting on one 1px black rule. Side gutters are 2%, sections 100px top and bottom. Put work in a .25fr / 1fr grid: label left, a 3-column grid of 1px-black-outlined 1.6:1 cards right with 16px gaps. Buttons are white pills (30px radius, 1px black border, padding 20px 28px 18px, 12px bold caps) that turn #E2815D with white text in 200ms. No shadows, no grey, no rounded cards.

# Logan Mann Design System

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

## Overview

Logan Mann is a stripped-back, Swiss-style portfolio on
a warm linen page. Everything is set in one wide, bold
grotesk in capitals, in pure black, and organised by
thin black rules that run edge to edge. There are no
fills, no shadows and almost no colour: the only accent

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #EDE5E0     | Page background (linen)  |
| surface-1    | #EDE5E0     | Same as canvas           |
| field        | #FFFFFF     | Button and input fill    |
| on-primary   | #000000     | Text on primary          |
| on-primary-… | #FFFFFF     | Text on primary-hover    |
| ink          | #000000     | All text, rules and car… |
| ink-muted    | #000000     | Body copy                |
| primary      | #FFFFFF     | The pill button (white … |
| primary-hov… | #E2815D     | Button hover: fill and … |
| accent       | #E2815D     | Button hover, the 4px b… |
| line         | #000000     | 1px rules under the nav… |
| line-accent  | #E2815D     | The 1px underline of li… |
| line-on-can… | #EDE5E0     | The nav link hover line… |
| line-on-dark | #FFFFFF 35% | A divider used on top o… |

## Typography

- display-hero: Sporting Grotesque 120px / 700
- headline-lg: Sporting Grotesque 32px / 700
- headline-md: Sporting Grotesque 24px / 700
- title-price: Sporting Grotesque 19px / 400

{
  "$description": "Logan Mann design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "The pill button (white with a 1px black border)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#E2815D",
      "$description": "Button hover: fill and border go burnt sienna, text white"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "on-primary-hover": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary-hover"
    },
    "accent": {
      "$type": "color",
      "$value": "#E2815D",
      "$description": "Button hover, the 4px blockquote rule, the 1px line under text links, a small dot under the nav"
    },
    "canvas": {
      "$type": "color",
      "$value": "#EDE5E0",
      "$description": "Page background (linen)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#EDE5E0",
      "$description": "Same as canvas"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "All text, rules and card borders"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000",

/* Logan Mann 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-xs, p-lg */

@theme {
  /* Colors */
  --color-primary: #FFFFFF;
  --color-primary-hover: #E2815D;
  --color-on-primary: #000000;
  --color-on-primary-hover: #FFFFFF;
  --color-accent: #E2815D;
  --color-canvas: #EDE5E0;
  --color-surface-1: #EDE5E0;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-line: #000000;
  --color-line-accent: #E2815D;
  --color-line-on-canvas: #EDE5E0;
  --color-line-on-dark: #FFFFFF59;
  --color-field: #FFFFFF;

  /* Fonts */
  --font-sans: "Sporting Grotesque", "Space Grotesk", sans-serif;
  --font-sporting-grotesque: "Sporting Grotesque", "Space Grotesk", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 120px;
  --text-display-hero--line-height: 1.1;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 700;
  --text-headline-lg: 32px;
  --text-headline-lg--line-height: 1.13;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 700;
  --text-headline-md: 24px;
  --text-headline-md--line-height: 1.25;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 700;
  --text-title-price: 19px;
  --text-title-price--line-height: 1.4;
  --text-title-price--letter-spacing: 0px;
  --text-title-price--font-weight: 400;
  --text-quote: 17px;
  --text-quote--line-height: 1.4;
  --text-quote--letter-spacing: 0px;
  --text-quote--font-weight: 700;

/* Logan Mann 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: #FFFFFF; /* The pill button (white with a 1px black border) */
  --color-primary-hover: #E2815D; /* Button hover: fill and border go burnt sienna, text white */
  --color-on-primary: #000000; /* Text on primary */
  --color-on-primary-hover: #FFFFFF; /* Text on primary-hover */
  --color-accent: #E2815D; /* Button hover, the 4px blockquote rule, the 1px line under text links, a small dot under the nav */
  --color-canvas: #EDE5E0; /* Page background (linen) */
  --color-surface-1: #EDE5E0; /* Same as canvas */
  --color-ink: #000000; /* All text, rules and card borders */
  --color-ink-muted: #000000; /* Body copy */
  --color-line: #000000; /* 1px rules under the nav, under hero rows, and around cards */
  --color-line-accent: #E2815D; /* The 1px underline of link-line and one outlined element */
  --color-line-on-canvas: #EDE5E0; /* The nav link hover line (linen, drawn over the black rule) */
  --color-line-on-dark: #FFFFFF59; /* A divider used on top of images */
  --color-field: #FFFFFF; /* Button and input fill */

  /* Fonts */
  --font-sporting-grotesque: "Sporting Grotesque", "Space Grotesk", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 120px;
  --text-display-hero-font: var(--font-sporting-grotesque);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1.1;
  --text-display-hero-tracking: 0px;
  --text-headline-lg: 32px;
  --text-headline-lg-font: var(--font-sporting-grotesque);
  --text-headline-lg-weight: 700;
  --text-headline-lg-line-height: 1.13;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 24px;
  --text-headline-md-font: var(--font-sporting-grotesque);
  --text-headline-md-weight: 700;
  --text-headline-md-line-height: 1.25;
  --text-headline-md-tracking: 0px;
  --text-title-price: 19px;
  --text-title-price-font: var(--font-sporting-grotesque);
  --text-title-price-weight: 400;
  --text-title-price-line-height: 1.4;
  --text-title-price-tracking: 0px;
  --text-quote: 17px;
  --text-quote-font: var(--font-sporting-grotesque);

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

Portfolio 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

Sporting Grotesque · display-hero · shown in Space Grotesk (fallback)

Sporting Grotesque · headline-lg · shown in Space Grotesk (fallback)

Sporting Grotesque · title-price · shown in Space Grotesk (fallback)

Sporting Grotesque · quote · shown in Space Grotesk (fallback)

Sporting Grotesque · body · shown in Space Grotesk (fallback)

Sporting Grotesque · label-nav · shown in Space Grotesk (fallback)

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Logan Mann style

More design systems like this

Falina Aime

Kai's

Mio Kain

Flaue Udo

Bring any of them to your AI tool