Harlem Design System

Get DESIGN.md Download View template Works with

Harlem website template preview detail 2

Harlem website template preview detail 3

Harlem is a dark, confident fintech and startup site. Everything sits on pure black with white Inter Tight; one crimson (#C51E3A) marks the main button, the feature icons and a single word line, and the imagery is moody 3D in magenta, indigo and teal. Surfaces are white at low opacity rather than greys, so cards, buttons and fields all glow faintly out of the black.

Four signatures make it recognisable:

Greyed tails. Leads and section statements start in white and fade into white at 50% for the second half: Our expertise lies in lifting / your business to a more advanced level.
One crimson line. The big statement is two short sentences, the second in crimson: Unusual devotion. / Unusual achievements.
Sheen buttons. Buttons have a 5px radius and an inset 0 800px 3px white-10% shadow that lightens the fill; on hover the sheen is removed and the button settles to its true colour.
The rounded work panel. Selected work sits in a panel inset to the page gutter with a 50px radius and a soft white-14% glow from the top-left corner fading to black.

Harlem is a dark-only design.

Colors

Surfaces

canvas#000000

Page background (--black)

surface-1#FFFFFF · 15%

Feature cards (renders about #262626 on black)

surface-2#FFFFFF · 10%

Quieter fills; the work panel's gradient starts at 14% white

surface-3#3B3B3B

Solid grey pills: the EN/FR circles and the MENU button

field#81818B · 20%

Form fields; the shipped typed-text colour is #333333

field-text#333333

Text on field

Ink

on-primary#FFFFFF

Text on primary

on-secondary#FFFFFF

Text on secondary

ink#FFFFFF

Headlines, labels, button text

ink-muted#FFFFFF · 60%

Paragraphs (p { color: #fff9 }), metric labels, footer links

ink-subtle#FFFFFF · 50%

The greyed second half of leads and statements

ink-faint#FFFFFF · 40%

The inactive language circle (FR) and inactive client logos (37%)

on-accent#FFFFFF

on-tag#000000

Text on tag

on-media#FFFFFF

Action

primary#C51E3A

Get started, Get in Touch (--main-color)

primary-hover#C51E3A

secondary#FFFFFF · 20%

View on Webflow, View full project, card buttons

secondary-hover#FFFFFF · 20%

accent#C51E3A

Feature icon squares, the crimson statement line, the menu hover bar

Lines & effects

line#FFFFFF · 15%

Dividers under metrics and testimonials

line-title#FFFFFF · 38%

The 1px underline under work titles

line-strong#FFFFFF

The 1px outline of the active logo tab

sheen#FFFFFF · 10%

The inset shadow that lightens every button at rest

tag#FFFFFF

Blog category chips and the round subscribe arrow

Typography

Inter Tight · display-menu

The quick brown fox jumps

Links in the full-screen menu overlay (.navlinks). 80px · 500 · 1.2

Inter Tight · headline-lg

The quick brown fox jumps

Unusual devotion. 50px · 600 · 1.2

Inter Tight · lead

The quick brown fox jumps

The hero lead; also the 27/700 variant for emphasis. 27px · 600 · 1.4

Inter Tight · title-lg

The quick brown fox jumps

Smaller statements (It's our honor to serve an array of different businesses.). 23px · 600 · 1.4

Inter Tight · body

The quick brown fox jumps

Paragraphs at 60% white; 16px at ≤479. 18px · 500 · 1.4

Inter Tight · label

The quick brown fox jumps

Buttons. 16px · 600 · 1.25

Spacing & shape

Purpose	Value
Container	.container max 1200px, centred
Breakpoints	991px, 767px and 479px, plus a 1440px+ step

Spacing scale

Token	Value	Preview
`xs`	7px
`sm`	15px
`md`	20px
`lg`	30px
`xl`	50px
`2xl`	100px
`3xl`	150px

Layout spacing

Token	Value	Preview
`gutter`	72px
`section`	100px
`hero-top`	205px

Border radius

sm5px

field6px

md10px

lg15px

input-pill40px

panel50px

full9999px

Surfaces

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

Level 1canvas

Level 2surface-3

Motion

Fade-up on scroll	opacity 0 → 1, y 20px → 0, 300–500ms ease-out-cubic or ease
Scale-in	scale 0 → 1, 400–600ms ease-out-expo, for icons and the cursor circle
Button hover	The inset sheen removed, 0.2s
Link hover	Opacity 60% → 100% (footer) or 100% → 60% (blog titles), 0.3s
Logo tab hover	Opacity 37% → 100%, 0.4s
Menu	The overlay slides in from x −100% (500ms ease-out-back); the crimson bar fills behind a hovered link
Hero image	Follows the mouse slightly (mouse-move) and shifts on page scroll

Do’s and don’ts

Keep the canvas pure #000000 and all text white; set paragraphs at white 60%.
Use crimson #C51E3A for the primary button, the 70px icon squares and one statement line only.
Split leads and statements into white and white-50% halves.
Give buttons a 5px radius, 50px height, padding 15px 20px and the inset white-10% sheen that drops on hover.
Build cards from white at 15% with a 10px radius, and wrap featured work in a 50px-radius panel with a top-left glow.
Use Inter Tight 600 for headlines and 500 for metrics and menu links.
Add a second accent colour, or use crimson for body text or large backgrounds.
Use drop shadows or solid grey cards; depth is white alpha over black.
Use ink-faint (white at 40%) for anything but inactive controls and dimmed logos.
Round buttons into pills; only the nav MENU, logo tabs and subscribe field are pill-shaped.
Copy the shipped #333333 input text colour; typed text must be white.
Use Newsreader or any serif; it is loaded but unused.

Example prompt

Any page in the Harlem style

Prompt

Build your page in the Harlem style. Pure black #000000 background, Inter Tight throughout, white text, paragraphs 18px / 500 / 1.4 at 60% white. Hero: a 74px / 600 / 1.1 headline, a 27px / 600 lead whose second half is white at 50%, then a crimson #C51E3A button and a white-20% button side by side (5px radius, 50px tall, padding 15px 20px, 16px / 600, inset box-shadow 0 800px 3px rgba(255,255,255,0.1) removed on hover in 0.2s). Container 1200px, sections 100px 5%. Feature cards: white at 15%, 10px radius, about 40px padding, a 70px crimson icon square, a 21px / 600 title. Section statements 36px / 600 with a greyed tail; one big statement where the second sentence is crimson. Featured work sits in a 50px-radius panel with a linear-gradient(162deg, rgba(255,255,255,0.14), #000 62%). Imagery: dark glossy 3D renders in magenta, indigo and teal. Fade-up on scroll, y 20px, 300–500ms.

# Harlem Design System

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

## Overview

Harlem is a dark, confident fintech and startup site.
Everything sits on pure black with white Inter Tight;
one crimson (#C51E3A) marks the main button, the feature
icons and a single word line, and the imagery is moody
3D in magenta, indigo and teal. Surfaces are white at

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #000000     | Page background (--blac… |
| surface-1    | #FFFFFF 15% | Feature cards (renders … |
| surface-2    | #FFFFFF 10% | Quieter fills; the work… |
| surface-3    | #3B3B3B     | Solid grey pills: the E… |
| field        | #81818B 20% | Form fields; the shippe… |
| field-text   | #333333     | Text on field            |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #FFFFFF     | Text on secondary        |
| ink          | #FFFFFF     | Headlines, labels, butt… |
| ink-muted    | #FFFFFF 60% | Paragraphs (p { color: … |
| ink-subtle   | #FFFFFF 50% | The greyed second half … |
| ink-faint    | #FFFFFF 40% | The inactive language c… |
| on-accent    | #FFFFFF     |                          |
| on-tag       | #000000     | Text on tag              |

## Typography

- display-menu: Inter Tight 80px / 500
- display-metric: Inter Tight 84px / 500
- display-hero: Inter Tight 74px / 600
- headline-lg: Inter Tight 50px / 600

{
  "$description": "Harlem design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#C51E3A",
      "$description": "Get started, Get in Touch (--main-color)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#C51E3A"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#FFFFFF33",
      "$description": "View on Webflow, View full project, card buttons"
    },
    "secondary-hover": {
      "$type": "color",
      "$value": "#FFFFFF33"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Page background (--black)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FFFFFF26",
      "$description": "Feature cards (renders about #262626 on black)"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#FFFFFF1A",
      "$description": "Quieter fills; the work panel's gradient starts at 14% white"
    },

/* Harlem 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-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #C51E3A;
  --color-primary-hover: #C51E3A;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFFFFF33;
  --color-secondary-hover: #FFFFFF33;
  --color-on-secondary: #FFFFFF;
  --color-canvas: #000000;
  --color-surface-1: #FFFFFF26;
  --color-surface-2: #FFFFFF1A;
  --color-surface-3: #3B3B3B;
  --color-ink: #FFFFFF;
  --color-ink-muted: #FFFFFF99;
  --color-ink-subtle: #FFFFFF80;
  --color-ink-faint: #FFFFFF66;
  --color-line: #FFFFFF26;
  --color-line-title: #FFFFFF61;
  --color-line-strong: #FFFFFF;
  --color-sheen: #FFFFFF1A;
  --color-accent: #C51E3A;
  --color-on-accent: #FFFFFF;
  --color-field: #81818B33;
  --color-field-text: #333333;
  --color-tag: #FFFFFF;
  --color-on-tag: #000000;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Inter Tight", sans-serif;
  --font-inter-tight: "Inter Tight", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-menu: 80px;
  --text-display-menu--line-height: 1.2;
  --text-display-menu--letter-spacing: 0px;
  --text-display-menu--font-weight: 500;
  --text-display-metric: 84px;
  --text-display-metric--line-height: 1.2;
  --text-display-metric--letter-spacing: 0px;
  --text-display-metric--font-weight: 500;
  --text-display-hero: 74px;

/* Harlem 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: #C51E3A; /* Get started, Get in Touch (--main-color) */
  --color-primary-hover: #C51E3A;
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #FFFFFF33; /* View on Webflow, View full project, card buttons */
  --color-secondary-hover: #FFFFFF33;
  --color-on-secondary: #FFFFFF; /* Text on secondary */
  --color-canvas: #000000; /* Page background (--black) */
  --color-surface-1: #FFFFFF26; /* Feature cards (renders about #262626 on black) */
  --color-surface-2: #FFFFFF1A; /* Quieter fills; the work panel's gradient starts at 14% white */
  --color-surface-3: #3B3B3B; /* Solid grey pills: the EN/FR circles and the MENU button */
  --color-ink: #FFFFFF; /* Headlines, labels, button text */
  --color-ink-muted: #FFFFFF99; /* Paragraphs (p { color: #fff9 }), metric labels, footer links */
  --color-ink-subtle: #FFFFFF80; /* The greyed second half of leads and statements */
  --color-ink-faint: #FFFFFF66; /* The inactive language circle (FR) and inactive client logos (37%) */
  --color-line: #FFFFFF26; /* Dividers under metrics and testimonials */
  --color-line-title: #FFFFFF61; /* The 1px underline under work titles */
  --color-line-strong: #FFFFFF; /* The 1px outline of the active logo tab */
  --color-sheen: #FFFFFF1A; /* The inset shadow that lightens every button at rest */
  --color-accent: #C51E3A; /* Feature icon squares, the crimson statement line, the menu hover bar */
  --color-on-accent: #FFFFFF;
  --color-field: #81818B33; /* Form fields; the shipped typed-text colour is #333333 */
  --color-field-text: #333333; /* Text on field */
  --color-tag: #FFFFFF; /* Blog category chips and the round subscribe arrow */
  --color-on-tag: #000000; /* Text on tag */
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-inter-tight: "Inter Tight", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-menu: 80px;
  --text-display-menu-font: var(--font-inter-tight);
  --text-display-menu-weight: 500;
  --text-display-menu-line-height: 1.2;
  --text-display-menu-tracking: 0px;
  --text-display-metric: 84px;
  --text-display-metric-font: var(--font-inter-tight);
  --text-display-metric-weight: 500;
  --text-display-metric-line-height: 1.2;
  --text-display-metric-tracking: 0px;
  --text-display-hero: 74px;

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

Inter Tight · display-menu

Inter Tight · headline-lg

Inter Tight · lead

Inter Tight · title-lg

Inter Tight · body

Inter Tight · label

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Harlem style

More design systems like this

Arbiter

Avante

Coach X

Focus

Bring any of them to your AI tool