Heyra — Design System

AI development at the speed of imagination.

A React + TypeScript + Vite app that recreates the Heyra editorial design system, ported from an HTML/CSS prototype bundle exported from Claude Design. Editorial, type-led, hairline-driven — in the tradition of Werkplaats Typografie, Aesop, and Linear's quieter moments.

What's inside

Route	What it is
/	Index — landing page linking to each deliverable
/slides	Slide UI kit (9 templates: title, section, content, two-column, stats, numbered grid, big quote, trusted-by, close)
/proposals/bech-bruun	Worked proposal (11 slides, English) — SCQA executive summary, industry context, approach diagram, phases, pricing
/proposals/koda	Worked proposal (11 slides, Danish) — MVP scoped + feature roadmap
/linkedin-hiring	LinkedIn hiring visual (full / denser variant)
/linkedin-hiring-mobile	LinkedIn hiring visual (mobile-optimised)
/linkedin-hiring-editorial	LinkedIn hiring visual (editorial — the one we actually post)

All routes append ?raw=1 to render at 1:1 with no preview chrome, for PNG export via headless Chrome.

Brand foundations

• Palette: cream #F7F4F0, ink #232320, black #000, mute #999991. No accents, no gradients, no semantic alarm colours.
• Type: Geist (OFL) substituting Haffer TRIAL Light. Display weight 500 only for the wordmark, otherwise 300.
• Frame: three hairlines at 1px black — top, bottom, vertical centerline spine. No fourth rule. No shadows. No radii (except the occasional pill).
• Voice: declarative, present-tense, sentence case. No emoji. No exclamation marks. No marketing intensifiers.

Tokens live in src/styles/tokens.css and the slide system in src/styles/slides.css.

Local development

npm install
npm run dev          # serves on http://localhost:5173 by default

Exporting PNGs

Each LinkedIn variant ships as a static PNG. To regenerate:

npm run dev                      # in one terminal, on port 3748
./scripts/export-linkedin.sh all # in another

The script uses headless Chrome to capture the ?raw=1 route at exactly 1200×1200. Output PNGs land at the repo root.

Caveats

• Haffer TRIAL is substituted with Geist (OFL via Google Fonts). Drop a licensed .woff2 into public/fonts/ and update --font-sans in tokens.css if you have it.
• The slide deck system is a React port of the original <deck-stage> web component — it keeps the auto-scaling and keyboard navigation but not (yet) the thumbnail rail or print mode.