h.work Branding
Canonical source:
/BRANDING.md(repo root, last touched 2026-06-05, commite40ae7ac). This file mirrors selected fields for Docusaurus; if it conflicts with the rootBRANDING.md, the root file wins.
The single source of truth for h.work's visual system is the running code:
frontend/src/app/globals.css— design tokens (colors, type scale, radius, elevation) as CSS variables under:rootand[data-theme="dark"]. Components consume the semantic aliases (--bg-canvas,--text-primary,--accent, etc.), never the raw scale.frontend/src/components/ui/— shadcn/ui primitives styled with the tokens above.docs/design/DESIGN_PRINCIPLES.md— the design rules behind the tokens (light/dark strategy, color usage rules, typography rules, what counts as a primary CTA, etc.). Read this before adding a screen.docs/design/COMPONENT_INVENTORY.md— catalogue of every shipped component, with known issues.
Official Visual Identity
From the h.work Visual Identity Guidelines (2024):
Color Palette
| Name | Hex | Usage |
|---|---|---|
| H red (brand) | #7E1C1E | Primary brand / accent (claret) — token: --accent |
| Dark Job | #1A1611 | Primary text / ink — token: --text-primary |
| Grey day | #87837C | Secondary / muted text — token: --text-secondary |
| Bright work | #F4F0E6 | Canvas / page background (light mode) — token: --bg-canvas |
Typography
| Weight | Typeface | Token / Usage |
|---|---|---|
| Body (300–500) | Manrope (with ui-sans-serif, system-ui, sans-serif fallback) | --font-sans |
| Display (300/400/500/600) | Source Serif 4 | --font-display |
| Any | JetBrains Mono | Highlights and CTA labels — --font-mono |
Brand spec vs in-code: The brand spec calls for Test Tiempos Text on display + body. Two attempts at switching the in-code body to Tiempos / Source Serif 4 were reverted on 2026-06-01 (PR #1010 reverted in #1234; PR #1104 reverted in #1223) because (a) Source Serif 4 was making all dashboard chrome serif, which is a UX regression for the operational surface, and (b) the local Tiempos files were missing weight-300 declarations needed by elements that reference
font-weight: 300. The running code currently ships Manrope for body and Source Serif 4 for display, both loaded vianext/font/google.JetBrains Monois open-source and loaded via--font-mono. Tiempos / serif applies only to brand/marketing surfaces if/when reintroduced.
Quick reference
| Concept | Where |
|---|---|
| Color tokens (light + dark) | frontend/src/app/globals.css :root and [data-theme="dark"] blocks |
| Type scale | frontend/src/app/globals.css — --font-sans, --font-display, --font-mono |
| Brand wordmark | frontend/src/components/brand/Logo.tsx |
Accent (claret #7E1C1E) | --accent-0 / --accent token. Used sparingly — only for primary CTAs, active nav, persona avatars, selected-state affordances, and the brand tile. |
| Light vs dark | Toggled by [data-theme="dark"] on <html>, set by DarkModeProvider. Light is the default. |
Rules
- No hex colors in components. Every color is a token; components consume aliases, not the raw scale.
- Light is the default theme. Dark mode is first-class but the home aesthetic.
- Sentence case microcopy. No emojis in UI. See
DESIGN_PRINCIPLES.md. - Claret is a moment, not a wallpaper. If you can replace it with a neutral and the meaning is preserved, you should.
History
The original sibling-app audit (the recruiter app, 1,292 lines of token export) is archived at archive/branding-recruiter-app-audit-2026-05-22.md for reference. The migration humanwork performed against it is documented in archive/BRANDING_MIGRATION_2026-05-22.md and the after-state audit in archive/BRANDING_AUDIT_AFTER_2026-05-22.md. Those are point-in-time records — for current state, read the CSS file directly.
Last updated: 2026-06-06. Color palette per Visual Identity Guidelines; typography reflects post-revert in-code state (PR #1223 / #1234) rather than spec — see the "Brand spec vs in-code" note above. Canonical: /BRANDING.md (root) was last touched 2026-06-05 via commit e40ae7ac.