---
title: "Hard Work Club design system"
variant: extended
source: https://www.hardworkclub.com/
captured_at: 2026-10-12
theme: light
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/hardworkclub-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Hard Work Club · Design System

> A stark black canvas for cinematic creative work.

**Theme:** light · **Industry:** agency · **Source:** https://www.hardworkclub.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Hard Work Club pairs a nearly all-black portfolio with cinematic campaign imagery and restrained white typography. The homepage shifts to a quiet white contact section, creating a clear closing contrast.

## North star

Keep the interface nearly monochrome and let cinematic campaign media provide the page’s colour, texture, and movement.

## Overview

The visual identity is anchored by a black canvas (#000000), used across the opening, introduction, and extensive portfolio rather than alternating decorative section colours. White (#ffffff) carries the wordmark, project labels, navigation, and contact-area canvas. The vivid blue menu control is visible in the screenshot but is not part of the supplied measured palette, so treat it as a small isolated interface detail rather than a broader brand colour. Founders Grotesk supplies light, readable supporting copy and bold uppercase captions; Maligna adds a distinctive editorial display voice. The layout uses a centered site mark above a large full-bleed video frame, then a long sequence of image-led portfolio compositions with generous black intervals. Rounded, irregular media masks and asymmetrical tile groupings give the gallery its shape. Keep imagery responsible for most colour and texture: campaign footage can be vibrant, but the surrounding interface remains flat, quiet, and high contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Wordmark, navigation and portfolio labels on black; also the full contact-section canvas. |
| Club Black | `#000000` | `--color-club-black` | surface | Primary page canvas across the hero, introduction, and portfolio gallery. |
| Soft Charcoal | `#313130` | `--color-soft-charcoal` | semantic | Measured hairline border colour; use sparingly for subtle outlines against dark surfaces. |
| Button Silver | `#cccccc` | `--color-button-silver` | neutral | Measured outline on the Instagram buttons; a restrained detail, not a section colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Club Black) · `--color-text` → `#000000` (Club Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#313130` (Soft Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Founders Grotesk | `--font-body` | webfont | 300, 700, 500 | Body copy, section headings, captions, navigation, buttons, and contact details. | Barlow |
| Maligna | `--font-display` | webfont | 500, 300 | Expressive display and headline typography, including the refined brand wordmark character. | Bodoni Moda |

- **Founders Grotesk:** Mostly light weights; use bold uppercase for compact captions and keep body copy open and readable.
- **Maligna:** Use light display styling with tight negative tracking; reserve it for larger editorial moments.

### Type scale — Perfect Fifth (ratio ≈ 1.506, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 61.5px | 300 | 1.2 | -0.03em | — | Maligna | Oversized editorial statements and prominent brand moments. |
| h1 | 31.5px | 500 | 1.2 | -0.03em | — | Maligna | Primary headline or standout page statement. |
| h2 | 22.5px | 300 | 1.21 | 0 | — | Founders Grotesk | Introduction and major section headings. |
| body | 18px | 300 | 1.5 | 0 | — | Founders Grotesk | Introductory copy and contact information. |
| caption | 16px | 700 | 1.2 | 0 | uppercase | Founders Grotesk | Uppercase portfolio labels and section markers. |
| button | 18px | 300 | 0.78 | 0 | — | Founders Grotesk | Compact social and navigation actions. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 3, 5, 8, 13, 16, 24, 32, 48 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1344px.

Use a centered site header and a wide, capped content area, with the measured page maximum of 1344px. The first screen is dominated by a large inset video frame; below it, maintain a single-column page rhythm while arranging portfolio items in asymmetric two-column groups and full-width media bands. Align project titles over their images. Leave generous black intervals between campaigns, then switch to a spacious white contact section with four aligned content areas. Overall density is comfortable, not card-heavy.

## Shape & elevation

- Radius: button `9999px` · nav `9999px` · link `8px` · xs `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is predominantly flat: no measured shadows or gradients. Use dark canvas bands and image overlays for separation rather than raised cards. Keep borders rare and subtle; the supplied measured border colours appear on outlines, while the main visual depth comes from footage, contrast, and overlapping media crops.

## Imagery

Prioritize full-bleed campaign video and still photography over decorative illustrations. Frame media in broad rounded or sculpted masks, mixing wide panels with differently sized paired tiles. Preserve the source footage’s colour and texture, while placing a darkened or black interface around it so white project titles remain legible. The measured screenshot’s dominant near-black values largely reflect the site canvas and media treatment.

## Components

### Centered wordmark header

Place the white Hard Work Club mark at the center of the black header, with a compact circular menu control offset to the right.

### Hero video frame

Use a large, nearly viewport-wide inset video frame against black, with gently rounded corners and minimal surrounding interface.

### Intro statement

Set the short agency introduction as quiet white copy on black, with generous separation from the hero and portfolio.

### Featured work gallery

Arrange campaign videos and stills in varied wide and paired compositions; overlay centered white project names directly on imagery.

### Portfolio action

Use a restrained text link near the end of the black work sequence, rather than a large filled CTA.

### Contact section

Switch to a white canvas and organize inquiry categories and email links into aligned columns with dark typography.

### Social outline button

Render Instagram actions as light text with a thin #cccccc outline and a pill-shaped silhouette.

### Measured component styles

- **Primary button** (“Instagram”): transparent background · text #000000 · border 1px solid #cccccc · radius 1440px · padding 4.5px 12.6px 7.2px 12.6px · 300 18.016px Founders Grotesk
- **Link** (“End The Waiting Game”): transparent background · text #ffffff · radius 8px · padding 0px · 300 18.016px Founders Grotesk
- **Navigation item**: transparent background · text #ffffff · radius 0px · padding 0px · 300 18.016px Founders Grotesk

## Do

- Keep the main canvas black and the interface monochrome.
- Let campaign media supply most of the page’s colour.
- Use white project names directly over their imagery.
- Vary gallery composition while maintaining a clear page rhythm.
- Keep navigation and calls to action visually restrained.
- Make the contact section a deliberate white-on-black-to-black-on-white transition.

## Don't

- Do not introduce extra interface colours from campaign footage into the brand palette.
- Do not turn every work item into a conventional bordered card.
- Do not crowd the black space between major portfolio moments.
- Do not use heavy shadows or decorative gradients.
- Do not make buttons more prominent than the work.
- Do not force the gallery into a repetitive uniform grid.

## Agent prompt

Build a new creative-agency page in the Hard Work Club visual style. Use Club Black (#000000) as the dominant canvas and Gallery White (#ffffff) for navigation, headlines, and text; reserve Soft Charcoal (#313130) and Button Silver (#cccccc) for rare, subtle outlines. Set body and utility copy in a light Founders Grotesk-style sans serif, with an editorial Maligna-style display face for standout headlines. Create a centered header, a cinematic video-led hero, and an asymmetric portfolio gallery with broad rounded media crops and titles overlaid directly on footage. Use generous black intervals, restrained links, and no shadows. Close with a spacious white contact band arranged in aligned columns. Keep colours in the interface quiet and let photography or video carry the visual drama.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered header above a large inset, full-bleed video frame on black. | Centered brand mark, Compact menu access | Black canvas, Wide rounded video frame, White wordmark |
| 2 | other | Short, left-aligned statement within a spacious black section. | Agency positioning, Pause before portfolio | Light text, Black background, Editorial spacing |
| 3 | gallery | Asymmetric two-column project group followed by a wide campaign panel. | Browse campaign work, Titles over media | Image-led tiles, White overlay labels, Rounded media masks |
| 4 | gallery | A wide campaign feature paired in the sequence with varied project tiles. | Continuous portfolio browsing, Direct project naming | Black section bands, Cinematic stills, Centered white labels |
| 5 | gallery | Wide media band with nearby paired or split campaign compositions. | Explore project stories, Maintain gallery rhythm | Sculpted rounded crops, Image overlays, Minimal interface |
| 6 | gallery | Prominent wide feature followed by a quiet text link near the gallery end. | View more work, Portfolio continuation | High-impact campaign imagery, White project title, Subtle text action |
| 7 | contact | White contact band with a lead statement and four aligned inquiry columns. | Choose inquiry type, Email contact links | White canvas, Dark typography, Column-based details |

## Source CSS custom properties (selected)

```css
--theme--background: white;
--text-main--font-family: "Founders Grotesk",sans-serif;
--theme--text: black;
--text-main--font-size: clamp(1rem, 0.964rem + 0.18vw, 1.179rem);
--text-main--line-height: 1.5em;
--text-main--letter-spacing: 0em;
--display--font-family: Maligna,sans-serif;
--display--font-size: clamp(3.81rem, 2.748rem + 5.31vw, 9.123rem);
--display--letter-spacing: -.03em;
--h1--font-family: "Founders Grotesk",sans-serif;
--h1--font-size: clamp(3.05rem, 2.384rem + 3.33vw, 6.379rem);
--h1--letter-spacing: -.03em;
--h2--font-family: "Founders Grotesk",sans-serif;
--h2--font-size: clamp(2.44rem, 2.04rem + 2vw, 4.44rem);
--h2--letter-spacing: -.03em;
--h3--font-family: "Founders Grotesk",sans-serif;
--h3--font-size: clamp(1.95rem, 1.724rem + 1.13vw, 3.079rem);
--h3--letter-spacing: -.03em;
--h4--font-family: "Founders Grotesk",sans-serif;
--h4--font-size: clamp(1.56rem, 1.446rem + 0.57vw, 2.131rem);
--h4--letter-spacing: -.03em;
--h5--font-family: "Founders Grotesk",sans-serif;
--h5--font-size: clamp(1.25rem, 1.208rem + 0.21vw, 1.463rem);
--h5--letter-spacing: -.03em;
--h6--font-family: "Founders Grotesk",sans-serif;
--h6--font-size: clamp(1rem, 1rem + 0vw, 1rem);
--h6--letter-spacing: 0em;
--space--small: 1.5rem;
--border-width--main: 1px;
--theme--border: #0003;
--radius--main: .5rem;
--radius--small: .5rem;
--space--extra-small: .75rem;
--font--secondary-family: Maligna,sans-serif;
--swatch--brand: #1200e3;
--radius--round: 100vw;
--text-large--font-size: clamp(1.12rem, 1.082rem + 0.19vw, 1.307rem);
--text-large--line-height: 1.2em;
--text-large--font-family: "Founders Grotesk",sans-serif;
--text-large--letter-spacing: 0em;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/hardworkclub-com