# Human Forward design language

For anyone building an HF product: the Findability Shopify app, the community apps, decks, anything. This is what the site at humanforward.io uses. Match it.

## In one line

Near white ground, one grotesk, big quiet type, tiny mono labels, a lot of air, charcoal panels for anything that is a product or a number, one orange for the thing that matters.

## Tokens

```css
:root {
  --ground: #F4F4F2;      /* page background, near white, never pure white */
  --ground-2: #E6E6E3;    /* a second ground for bands and gradients */
  --pale: #E9E9E6;        /* secondary buttons, chips on ground */
  --pale-2: #DCDCD8;      /* hover of pale */
  --white: #FFFFFF;       /* cards only */
  --ink: #121212;         /* text, primary buttons */
  --charcoal: #1A1A19;    /* dark panels, phones, dashboards */
  --bone: #E8E4DA;        /* text and buttons on charcoal */
  --signal: #FF4F00;      /* the one accent. Scores, live states, the thing to look at */
  --muted: #6E6E6A;       /* body on ground */
  --faint: #8A8A86;       /* labels, mono eyebrows */

  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-serif: "Instrument Serif", Georgia, serif;

  --r-xl: 28px;   /* panels, cards */
  --r-lg: 20px;   /* inner cards */
  --r-md: 12px;   /* inputs */
  --r-pill: 999px; /* buttons, chips, tabs */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
```

Dark surface (charcoal panels, the apps): ground becomes `--charcoal`, text becomes `--bone`, muted becomes `rgba(232,228,218,0.6)`, hairlines are `rgba(244,244,242,0.1)`. Signal stays signal.

Fonts load from Google Fonts: `Geist:wght@100..900`, `Geist+Mono:wght@100..900`, `Instrument+Serif:ital@0;1`.

## Type

| Role | Face | Size / line | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Display | Geist | clamp(56px, 8vw, 120px) / 0.95 | 400 | -0.045em |
| H2 | Geist | 40 to 56 / 1.05 | 400 | -0.04em |
| H3 | Geist | 24 to 28 / 1.15 | 500 | -0.03em |
| Lede | Geist | 20 to 24 / 1.35 | 400 | -0.01em |
| Body | Geist | 16 / 24 | 400 | 0 |
| Eyebrow, label, data | Geist Mono | 12 / 16 | 400 | 0, lowercase, `·` as separator |
| Big number | Geist | 120 to 200 / 1 | 300 | -0.06em, colour signal |
| The one human line | Instrument Serif italic | same size as the heading it sits in | 400 | -0.02em |

Rules: headings are regular weight, never bold. One serif italic phrase per screen at most, used for the human bit ("People belong.", "Say hello."). Eyebrows are lowercase mono with middle dots: `01 · are you ready`. Numbers that matter are huge, thin and orange.

## Writing

Short. British English. No hyphens or dashes anywhere, use a full stop or a comma. No buzzwords, no "leverage", no "seamless". Say the number. Plain verbs: run, score, fix, book. Headlines are a sentence with a full stop. Buttons are two or three words: Run, Install on Shopify, Pick a time, Copy prompt.

## Layout

- Max width 1280, side gutter 32 (16 on phones).
- Section padding clamp(120px, 14vw, 200px). More air than feels necessary.
- Two column split: 5fr copy, 7fr the thing (panel, phone, form). Flip it every other section.
- Everything is rounded: 28px panels, pill buttons, 48px phone shells.
- Shadows only under dark panels and phones: `0 24px 48px -32px rgba(18,18,18,0.45)`. Cards on ground get `0 1px 2px rgba(18,18,18,0.04)` and that is all.

## Components

**Button**: pill, 48px high, 22px side padding, 15px / 500. Primary = ink on ground, bone on charcoal. Secondary = pale. Hover on primary turns signal with ink text. Active scales to 0.98.

**Chip**: pill, 32 to 36px, 1px hairline border, sans 14 to 15 / 500. Mono variant for data chips, 12px.

**Eyebrow**: mono 12 / 16, faint. Sits above every heading.

**Panel**: charcoal, 28px radius, 32 to 40px padding, bone text, mono labels in faint. Used for product UI, scores, logs, admin.

**Card**: white, 28px radius, 24 to 32px padding, on ground only.

**Input**: 48px, 12px radius, 1px hairline, white. Focus = 2px signal outline, no border.

**Score**: the number at 120 to 200px thin orange, a mono log beside it (one line per check, `label` in faint and `result` in bone), a plain sentence under it, then a check list (label left, `earned/max` mono right, pass bone, fail signal, partial champagne #D9C7A3), then at most three fixes with a Copy prompt button.

**Log line**: mono 13 / 20, faint label then a bone result: `llms.txt not found`. A blinking signal cursor (8 × 14) at the end while running.

**Live pulse**: 8px signal dot with a soft ring, mono label "live on Shopify".

**Tabs**: pill group on a #1D1D1B track, the active tab bone with ink text.

**Phone shell**: 320 × 660, 48px radius, 10px bezel, gradient #2A2A28 to #121211, 1px inner highlight.

## Motion

- Reveal on scroll: opacity 0 to 1, y 16 to 0, 0.6s, ease above, stagger 60 to 80ms. Once.
- Parallax: floating chips move at 0.1 to 0.35 of scroll. Never on text people read.
- Numbers count up over 1.8s.
- Hover and active transitions 120 to 150ms. Nothing bounces.
- Respect prefers-reduced-motion: everything above becomes instant.

## Inside Shopify (Polaris)

Embedded apps live inside Polaris and should not fight it. Keep Polaris for navigation, page structure, tables and forms. Bring HF in through:

- The score panel as a charcoal card with the big thin orange number and the mono log. This is the one place the app looks like us, make it the first thing on the page.
- Eyebrows in mono above headings.
- Signal orange only for the score, live states and the one primary action. Polaris green and red stay for their own meanings.
- Copy in our voice: short, plain, the number first.
- Icons: the Findability dial (ink square, orange three quarter ring, bone dot) at 24, 48 and 512.

Do not: recolour Polaris buttons, use serif italic in product UI, or put white cards on white.

## Files

/brand on the site: wordmark and HF mark in SVG (outlined) and PNG, favicon, social card, app icons. Colours above. Fonts from Google.

## Trade mark

HUMAN FORWARD and the HF mark are trade marks of Human Forward LTD, UK application pending. Use the ™ symbol where a mark is needed (footer, press, legal). Never ® until registration is granted; using ® on an unregistered mark is an offence in the UK.