Resumely Design System

Get DESIGN.md Download View template Works with

Resumely website template preview detail 2

Resumely website template preview detail 3

Resumely is a one-page personal resume on pure black. It reads like a printed CV set in a modern grotesk: every word is uppercase Manrope, information sits in tidy two-column rows between white hairlines, and labels are wrapped in square brackets. The only drama is the hero, a 110px statement that switches from heavy to hairline weight mid-sentence, next to a round portrait.

Four signatures make it recognisable:

Weight switch in the hero. INNOVATIVE DESIGNER DRIVEN in Manrope 700 at −6px tracking, then BY CREATIVITY. in Manrope 200 at −3px, same size, same line.
Star-marked rules. Full-width 1px white rules carry a small four-point star (sparkle) where they cross: under the nav, under the hero, and at the top of the vertical divider between the two columns.
Bracketed labels. Labels and meta sit in square brackets with spaces: [ RESUME TEMPLATE ], [ PROFESSION ], [ 2017 - PRESENT ], counts [ 14 ], percentages [80%].
All caps, everywhere. Body copy, list items, nav and button are uppercase; section labels add 2px tracking.

Resumely is a dark-only design.

Colors

Surfaces

canvas#000000

Page background (pure black)

surface-1#000000

Same as canvas

Ink

on-primary#000000

Text on primary

ink#FFFFFF

Hero, names, section labels, job titles, values, nav, skill names

ink-muted#A1A1A1

Body copy, bullet items, bracketed labels and dates (31 text elements)

ink-subtle#FFFFFF · 60%

Two small secondary lines

ink-faint#FFFFFF · 55%

Two small secondary lines

on-media#FFFFFF

Action

primary#FFFFFF

The one button, DOWNLOAD MY RESUME

primary-hover#FFFFFF

Lines & effects

line#FFFFFF

Every rule, the vertical column divider, the skill bars

Typography

Manrope · display-hero

The quick brown fox jumps

INNOVATIVE DESIGNER DRIVEN. 110px · 700 · 0.8 · -6px

Manrope · title-name

The quick brown fox jumps

AMELIA WONG. 23px · 700 · 1.05 · 2px

Manrope · label-section

The quick brown fox jumps

WORK EXPERIENCE, AWWARDS, EDUCATION, SKILLS. 18px · 700 · 1.05 · 2px

Manrope · body

The quick brown fox jumps

Bio, bullet items, award rows, in ink-muted. 17px · 500 · 1.2

Manrope · caption

The quick brown fox jumps

Page default. 14px · 400 · 1.43

Spacing & shape

Purpose	Value
Container	1380px wide inside 30px side gutters at 1440px (max 1400px)
Breakpoints	Webflow's 991, 767 and 479px; the two columns stack at 991px

Spacing scale

Token	Value	Preview
`xs`	16px
`sm`	30px
`md`	50px

Layout spacing

Token	Value	Preview
`gutter`	30px
`column-gap`	50px
`nav-height`	106px

Border radius

full9999px

Motion

Skill bars and rules	Width grows over 500ms ease as they scroll into view
Fade in	opacity 0 → 1 over 800ms ease
Borders	Border changes over 200ms outSine / 300ms ease
Image hover	A filter change over 300–400ms ease

Do’s and don’ts

Use pure black #000000, white #FFFFFF and grey #A1A1A1 only.
Set everything in uppercase Manrope; 700 for names and labels, 500 for content.
Build the hero with the weight switch: 110px Manrope 700 at −6px, then 200 at −3px, line height 0.8.
Separate information with 1px white rules and mark one crossing per rule with the four-point star.
Wrap labels, dates and counts in brackets with inner spaces: [ 2017 - PRESENT ].
Keep the profile column sticky beside a scrolling right column.
Add cards, panels, shadows or rounded corners; only the portrait is round.
Use Playfair Display, even though it is loaded.
Add a second button style or a coloured accent.
Use ink-muted grey for titles or values; those are white.
Use sentence case; the template is all caps.
Let long content sit under the transparent nav without checking legibility; give new pages enough top padding (about 130px).

Example prompt

Any page in the Resumely style

Prompt

Build your page in the Resumely style. Pure black #000000 background. Manrope only, all text uppercase. Hero: 110px, line height 0.8, first words weight 700 with −6px tracking, the end of the sentence weight 200 with −3px tracking, white. Section labels 18px weight 700 with 2px tracking; job titles 18px 700; body and list items 17px weight 500 in #A1A1A1, line height 1.2. Put labels, dates and counts in square brackets in grey. Separate everything with 1px white rules and put a small white four-point star where a rule meets a column edge. Content runs in a 1380px container with 30px gutters, two columns with a sticky left column. One square white button with 15px weight 800 black text and 1px tracking. No radius except a circular portrait, no shadows. Skill bars are 2px white lines that grow over 500ms ease.

# Resumely Design System

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

## Overview

Resumely is a one-page personal resume on pure black. It
reads like a printed CV set in a modern grotesk: every
word is uppercase Manrope, information sits in tidy
two-column rows between white hairlines, and labels are
wrapped in square brackets. The only drama is the hero,

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #000000     | Page background (pure b… |
| surface-1    | #000000     | Same as canvas           |
| on-primary   | #000000     | Text on primary          |
| ink          | #FFFFFF     | Hero, names, section la… |
| ink-muted    | #A1A1A1     | Body copy, bullet items… |
| ink-subtle   | #FFFFFF 60% | Two small secondary lin… |
| ink-faint    | #FFFFFF 55% | Two small secondary lin… |
| on-media     | #FFFFFF     |                          |
| primary      | #FFFFFF     | The one button, DOWNLOA… |
| primary-hov… | #FFFFFF     |                          |
| line         | #FFFFFF     | Every rule, the vertica… |

## Typography

- display-hero: Manrope 110px / 700
- display-hero-light: Manrope 110px / 200
- title-name: Manrope 23px / 700
- label-section: Manrope 18px / 700

{
  "$description": "Resumely 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 one button, DOWNLOAD MY RESUME"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Page background (pure black)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Same as canvas"
    },
    "ink": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Hero, names, section labels, job titles, values, nav, skill names"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#A1A1A1",
      "$description": "Body copy, bullet items, bracketed labels and dates (31 text elements)"
    },
    "ink-subtle": {
      "$type": "color",
      "$value": "#FFFFFF99",
      "$description": "Two small secondary lines"
    },
    "ink-faint": {
      "$type": "color",
      "$value": "#FFFFFF8C",
      "$description": "Two small secondary lines"

/* Resumely 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-full, p-md */

@theme {
  /* Colors */
  --color-primary: #FFFFFF;
  --color-primary-hover: #FFFFFF;
  --color-on-primary: #000000;
  --color-canvas: #000000;
  --color-surface-1: #000000;
  --color-ink: #FFFFFF;
  --color-ink-muted: #A1A1A1;
  --color-ink-subtle: #FFFFFF99;
  --color-ink-faint: #FFFFFF8C;
  --color-line: #FFFFFF;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Manrope", sans-serif;
  --font-manrope: "Manrope", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 110px;
  --text-display-hero--line-height: 0.8;
  --text-display-hero--letter-spacing: -6px;
  --text-display-hero--font-weight: 700;
  --text-display-hero-light: 110px;
  --text-display-hero-light--line-height: 0.8;
  --text-display-hero-light--letter-spacing: -3px;
  --text-display-hero-light--font-weight: 200;
  --text-title-name: 23px;
  --text-title-name--line-height: 1.05;
  --text-title-name--letter-spacing: 2px;
  --text-title-name--font-weight: 700;
  --text-label-section: 18px;
  --text-label-section--line-height: 1.05;
  --text-label-section--letter-spacing: 2px;
  --text-label-section--font-weight: 700;
  --text-title-job: 18px;
  --text-title-job--line-height: 1.05;
  --text-title-job--letter-spacing: 0px;
  --text-title-job--font-weight: 700;
  --text-body: 17px;
  --text-body--line-height: 1.2;
  --text-body--letter-spacing: 0px;

/* Resumely 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 one button, DOWNLOAD MY RESUME */
  --color-primary-hover: #FFFFFF;
  --color-on-primary: #000000; /* Text on primary */
  --color-canvas: #000000; /* Page background (pure black) */
  --color-surface-1: #000000; /* Same as canvas */
  --color-ink: #FFFFFF; /* Hero, names, section labels, job titles, values, nav, skill names */
  --color-ink-muted: #A1A1A1; /* Body copy, bullet items, bracketed labels and dates (31 text elements) */
  --color-ink-subtle: #FFFFFF99; /* Two small secondary lines */
  --color-ink-faint: #FFFFFF8C; /* Two small secondary lines */
  --color-line: #FFFFFF; /* Every rule, the vertical column divider, the skill bars */
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-manrope: "Manrope", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 110px;
  --text-display-hero-font: var(--font-manrope);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 0.8;
  --text-display-hero-tracking: -6px;
  --text-display-hero-light: 110px;
  --text-display-hero-light-font: var(--font-manrope);
  --text-display-hero-light-weight: 200;
  --text-display-hero-light-line-height: 0.8;
  --text-display-hero-light-tracking: -3px;
  --text-title-name: 23px;
  --text-title-name-font: var(--font-manrope);
  --text-title-name-weight: 700;
  --text-title-name-line-height: 1.05;
  --text-title-name-tracking: 2px;
  --text-label-section: 18px;
  --text-label-section-font: var(--font-manrope);
  --text-label-section-weight: 700;
  --text-label-section-line-height: 1.05;
  --text-label-section-tracking: 2px;
  --text-title-job: 18px;
  --text-title-job-font: var(--font-manrope);
  --text-title-job-weight: 700;
  --text-title-job-line-height: 1.05;
  --text-title-job-tracking: 0px;

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

Design systems in the same colors.

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

Resumely Design System

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Manrope · display-hero

Manrope · title-name

Manrope · label-section

Manrope · body

Manrope · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Resumely style

More design systems like this

Article Dark

Valtero

Vantix

Lioré

Bring any of them to your AI tool

How to use the Resumely design system

What it is

Best for

How to use it

What it is

Best for

How to use it

What it is

Best for

How to use it

What it is

Best for

How to use it

Try this prompt