Brand system · v1.0
Human Premium brand system
How the brand looks, sounds and is put together. The site and the product both draw from these tokens, which live in tailwind.config.ts and app/globals.css.
Logo
The specimen mark is a solid disc with a lowercase hp knocked out of it. The h’s right leg is also the p’s stem, and the p’s counter holds a signal-green core: one line shared by the people who build training and the people who take it. The wordmark is written like a lab terminal prompt, humanpremium_, with the cursor waiting for the next course.
Primary lockup · mark + humanpremium_ · one word, Geist SemiBold, −3.5%, green cursor
Construction · 48-unit disc · 4.5-unit strokes · shared stem · core r 2.1
Clear space · Keep one bowl width (9 units) clear on every side.
Minimum size · Mark 16 px. Lockup 112 px wide.
Never set it in capitals · humanpremium_ is one lowercase word.
Never recolour the core · The core is signal green, or signal 50 on green.
Colour
Mostly paper and ink. Signal green is the one colour, used for the logo core, citations, the live state and the primary action on night. If a screen has more than a few spots of green, it has too many.
Paper#F4F5F0
Page ground. Always under grain.
Panel#FFFFFF
Cards, menus, product surfaces.
Well#E4E6E0
Screenshot placeholders, quiet fills.
Ink 3#6C736F
Captions, meta, mono labels.
Ink 2#3A403D
Body copy.
Ink#0A0C0B
Headlines, logo, primary buttons.
Night#090C0A
Dark bands and the closing CTA.
signal 50
#ECFBF2
signal 100
#D3F6E1
signal 200
#A6EDC3
signal 300
#6FE09F
signal 400
#3FD27E
signal 500
#1FBF66
signal 600
#139A51
signal 700
#0F7A42
signal 800
#0D5A33
signal 900
#0A3321
Text on paper uses signal 700 or darker. Signal 500 is a fill, never body text on light grounds. Status colours: warn #B4561B for lapsed sign-offs and flags, danger #B42318 for destructive actions only.
Type
Geist for everything, set tight and in sentence case. Geist Mono, uppercase at 11 px with 8% tracking, labels data: page numbers, versions, sections, eyebrows.
Texture
Three layers give the lab feel: film grain over every page, a soft field of signal light behind heroes, and a faint 56 px measuring grid that fades out from the top. Use the field once per page.
.grain · SVG fractal noise, 22% multiply on paper
.field · three radial signal lights + 56 px grid
.scheme-night .field · the closing CTA
Imagery
The product is the picture. Every image on the site is a real screenshot of app.humanpremium.ca on sample data. We do not use stock photography, illustrations of people or AI-generated faces. Until a screenshot exists, a grey placeholder names the screen, its export size and what must be visible.
Screen name
- What must be visible, top to bottom
- Which sample data to load
- Any state to capture: hover, flag, signed
- Capture at 2× on a 1440 × 900 window, then export at the size on the placeholder.
- Use the Harbourline or Cedar Valley sample organisations. Never a real client.
- Crop to the app frame. The site adds the browser chrome.
- One highlighted element per shot, in signal green, matching the copy beside it.
Components
Marketing components share the product’s primitives. Pill buttons, 18 px cards, 10 px fields.
Button · primary, secondary, ghost, link · sm / md / lg
Button · signal, on night only
Badge · neutral, signal, ink, warn, danger
How it works
Six steps from a PDF to a signed course
Eyebrow · mono label with signal dot
Layout
A 1280 px container with 20 px gutters on mobile and 32 px from tablet. Sections breathe at 112 px on desktop and 80 px on mobile. Hairline grids (1 px gaps on a line-coloured ground) replace boxed cards when items are peers.
Container
1280
Section
112 / 80
Card radius
18
Image radius
14
Field radius
10
Button
pill
Voice
We write like the person who built the product explaining it to a compliance lead: specific, plain, and honest about limits. Copy follows the marketing-copywriting skill, which bans the patterns that make text read as machine-written.
Name the document and the person
Upload the new wording. Your compliance lead signs the course.
Empower your team with intelligent learning.
Make claims a reviewer could check
Every point quotes the sentence it teaches, with page and section.
Best-in-class accuracy you can trust.
Say what happens, in order
The lessons that quote a changed clause lose their sign-off.
No retraining. No hassle. No stress.
State limits plainly
We are not SOC 2 certified yet.
Enterprise-grade security.
Headlines carry no dashes or reveals
Retrain producers the week a wording changes.
It’s not training — it’s transformation.
Banned in headlines: em dashes, “it’s not X, it’s Y”, “No X. No Y.”, “The result?”. Banned anywhere: seamless, unlock, empower, revolutionary, game-changer. Never say ShareCo on a Human Premium surface except in the legal line.
Relume map
Each section starts from a Relume library component or pattern. The vendored ones (navbar2, layout403, pricing23, faq1, cta1, footer1) live in components/ and are restyled with these tokens.
| Section | Relume | How we use it |
|---|---|---|
| Navigation | navbar2 / navbar30 | Centred menu, one shared dropdown that slides and resizes between items |
| Hero | header144 | Centred copy, two buttons, full-width product screenshot below |
| How it works | layout403 | Six tabs, copy left, screenshot right |
| Feature grid | custom | Four-column hairline grid with icon, title and one line |
| Feature rows | layout4 | Alternating copy and screenshot, one capability per row |
| Pricing | pricing23 | Billing toggle, three cards, the middle card on night |
| Comparison | pricing27 | Feature table with checks |
| FAQ | faq1 | Split layout, accordion right |
| CTA | cta1 | Night panel with field light, centred |
| Footer | footer1 | Logo and contact left, three link columns |