# HeroKit — Design System
> Source: (marketing landing page)
> Captured: 2026-09-02
HeroKit is a browser‑based **hero‑background generator**: drop in an image, stack real
print / dither / glitch effects computed pixel‑by‑pixel, preview it under a live hero
layout, and export up to 4K. Free to explore, no signup, fully client‑side.
The design language is **"built like an instrument, not a settings page."** It leans on a
print‑shop and outboard‑gear metaphor — warm paper stock, registration marks, halftone
dots, CMYK angles, tactile hardware buttons — deliberately rejecting the "gloomy
dark‑mode tool" aesthetic. Editorial, confident, single‑maker.
## 1. Brand foundation
### Voice & tone
- Declarative and specific: *"HeroKit does one thing extremely well."*, *"If the type reads, it ships."*
- Craft / heritage framing: 30+ years in design, "started in print", effects are "the real technique, not a filter menu".
- Anti‑bloat positioning: "not another CSS filter", "not buried in the dropdowns of yet another gloomy dark‑mode tool".
- Numbered, spec‑sheet cadence: sections are indexed `01`–`09`; features get numerals; stats are bare figures.
### Logo
- **Logomark**: black rounded‑square tile with a white spark / swoosh glyph (`/herokit_logomark_dark.png`).
- **Wordmark**: `HeroKit` set in the display face, followed by katakana **ヒーロー** ("hero") as a smaller muted tag.
- **Motif**: four short orange vertical bars beneath the wordmark — a registration‑mark / equalizer detail reused as a brand accent.
- Footer lockup: logomark + `HeroKit ヒーロー — hero backgrounds, engineered`.
## 2. Color
Warm, paper‑based neutral palette (not pure gray) with a single hot orange‑red accent.
### Neutrals
| Token | Value | Use |
| ------------------ | ------------------------ | -------------------------------------- |
| `--paper` | `#F2F0EB` | Page background (warm off‑white) |
| `--paper-sticky` | `rgba(242,240,235,0.88)` | Sticky header background (translucent) |
| `--surface` | `#F8F6F2` | Raised card / panel fill |
| `--surface-sunken` | `#EAE7E1` / `#E5E2D9` | Recessed wells, alternating blocks |
| `--ink` | `#1A1917` | Primary text, headings |
| `--ink-muted` | `#6B6860` | Body copy, nav links, captions |
| `--ink-faint` | `#9A9690` | Section numerals, metadata, disabled |
| `--line` | `#CDC9BF` | Hairline dividers / borders (warm) |
| `--line-strong` | `#B8B4AA` | Emphasized borders, input outlines |
| `--white` | `#FFFFFF` | Text on accent, spec highlights |
> Note: Tailwind's default `#E5E7EB` ("gray‑200") appears in the cascade but is almost
> always rendered at `0px` width — the visible hairline colour is the warm `#CDC9BF`.
### Accent — "HeroKit Orange"
| Token | Value | Use |
| ----------------- | --------- | ---------------------------------------------------- |
| `--accent` | `#E84320` | Accent text (2nd headline line), links, active marks |
| `--accent-hi` | `#F05535` | Gradient top / hover highlight |
| `--accent-lo` | `#D43A1C` | Gradient bottom |
| `--accent-border` | `#B8310F` | 1px border on accent buttons |
| `--accent-shadow` | `#9E2A0D` | Hard bottom "edge" shadow on raised buttons |
Primary button fill is a **radial gradient**, brighter at top‑center:
`radial-gradient(ellipse at 50% 0%, #F05535 0%, #E84320 55%, #D43A1C 100%)`
### Semantics
- Success / neutral states are carried by the neutral scale — no green/blue in the marketing palette.
- The accent is used sparingly: one word of the H1, links, the CTA, small indicators. Never as a large flat fill except the CTA.
## 3. Typography
Three families, each with a clear job.
| Role | Family | Fallback | Notes |
| ---------------------- | ----------------- | ------------ | ------------------------------------------------------------------- |
| **Display / headings** | `Space Grotesk` | `sans-serif` | Weight **700** only. Tight negative tracking (~`-0.02em`). |
| **Body / UI** | `Inter` | `sans-serif` | 400 for prose, 600 for nav / small labels, 700 for buttons. |
| **Mono / labels** | `Share Tech Mono` | `monospace` | Eyebrows, section numerals, stat figures. UPPERCASE, wide tracking. |
### Type scale (desktop)
| Style | Font | Size / line-height | Weight | Tracking | Color |
| -------------------- | --------------- | ------------------- | ------ | ----------------- | ---------------------------- |
| H1 (hero) | Space Grotesk | 72 / 70.5px (~0.98) | 700 | -1.44px (-0.02em) | ink; 2nd line `--accent` |
| H2 (section) | Space Grotesk | 42 / 52.5px (1.25) | 700 | -0.84px | ink |
| Quote (testimonial) | Space Grotesk | 22 / ~31px | 700 | -0.44px | ink |
| Stat figure | Share Tech Mono | 22px | 700 | normal | ink |
| H3 (feature subhead) | Space Grotesk | 15 / 22.5px | 700 | -0.30px | ink |
| Body / lede | Inter | 16–18px | 400 | normal | `--ink-muted` |
| Nav link | Inter | 13px | 600 | normal | `--ink-muted` → ink on hover |
| Button label | Inter | 12–14px | 700 | +0.02em | white |
| Eyebrow (mono) | Share Tech Mono | 12px | 700 | +2.64px (~0.22em) | `--ink-muted` |
| Section kicker | Inter | 11px | 700 | +1.98px (~0.18em) | `--ink-muted` |
| Section numeral | Share Tech Mono | 11px | 700 | normal | `--ink-faint` |
### Headline pattern
Two lines, second line in accent, hard line break:
> **Hero backgrounds,**
> **engineered.**
Section headings follow the same two‑line rhythm (*"From flat photo to / front‑page material."*).
### Eyebrow pattern
Mono, uppercase, dot‑separated:
`FREE TO EXPLORE · BROWSER‑BASED · NO SIGNUP · NO UPLOADS`
## 4. Layout & spacing
- **Container**: `max-width: 1152px` (`max-w-6xl`), centered, `24px` (`px-6`) side gutters.
- **Grid**: 8px base unit. Common gaps: 8, 16, 20, 24, 32.
- **Header**: ~96px tall, `flex` space‑between, transparent → translucent paper on scroll.
- **Section rhythm**: ~128px bottom padding per section (`pb-32`); hero uses ~96px vertical (`py-24`).
- **Section anatomy**:
1. Row: `NN` numeral (mono) + kicker label (e.g. `02 · The engine`)
2. Two‑line Space Grotesk H2
3. One muted Inter paragraph (max ~40rem measure)
4. Content: cards, image, chip cloud, or numbered list
- **Radii**: `4px` inline, `6px` controls, `10px` buttons, `12px` cards, `16px` button mount / bezel.
- **Full‑bleed exceptions**: the "Made with HeroKit" gallery is an edge‑to‑edge horizontal marquee.
## 5. Components
### Primary button — "hardware CTA" (`.hw-cta`)
Skeuomorphic raised key.
```
background: radial-gradient(ellipse at 50% 0%, #F05535 0%, #E84320 55%, #D43A1C 100%);
color: #fff; font: 700 14px Inter; letter-spacing: .02em;
border: 1px solid #B8310F; border-radius: 10px; padding: 12px; gap: 8px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28), /* top specular */
0 4px 0 #9E2A0D, /* hard bottom edge = button height */
0 6px 14px rgba(232,67,32,.35), /* colored glow */
0 2px 4px rgba(0,0,0,.15); /* ambient */
transition: box-shadow .08s ease, transform .08s ease;
```
- **Hover**: `translateY(-1px)`, taller edge (`0 5px 0`), stronger glow.
- **Active**: `translateY(3px)`, shadow collapses to inset — the key presses down.
- **Disabled**: `opacity: .40`.
- Optional label icon: leading arrow `→`.
- Sizes: compact (`padding: 9px 18px`, 12 px text) in the header; full (`padding: 13px 34px`, 14 px text) in‑page.
### Button mount / socket (`.hw-cta-mount`)
Recessed housing the CTA sits inside (seen on the hero).
```
padding: 5px 5px 9px; border-radius: 16px; background: rgba(0,0,0,.07);
box-shadow:
inset 0 2px 6px rgba(0,0,0,.18),
inset 0 1px 2px rgba(0,0,0,.10),
0 1px 0 rgba(255,255,255,.70); /* bottom lip highlight */
```
### Secondary / nav actions
Text‑only buttons, `13px Inter 600`, `--ink-muted`, no background, hover → `--ink`.
Inline text link with trailing glyph: `See the engine ↓`.
### Eyebrow / kicker
Mono uppercase string with ` · ` separators; or `NN` numeral + label per section.
### Stat row
Four cells, each = big mono figure + short caption:
`30+` stackable effects · `4K` PNG · WebP · JPG export · `0` uploads — fully client‑side · `$0` free to explore, no account
### Gallery marquee
Full‑bleed, auto‑scrolling horizontal strip of before/after image cards; the list is
duplicated for a seamless loop. Caption: "Made with HeroKit".
### Feature blocks (numbered)
`1` / `2` / `3` numeral → Space Grotesk H3 → muted paragraph. Used for the
"Print & screen / dither lab / Surgical control" trio and the 3‑step "Ship it" flow.
### Effect chip cloud
The full module list (35 names — Halftone, Duotone Halftone, Risograph, CMYK Separation,
Silkscreen, Bayer Dither, Floyd‑Steinberg, Atkinson, ASCII Dither, Pixel Sort, Channel
Smear, Liquid Glass, Chromatic Aberration, Effect Mask, Film Grain, Vignette …) rendered
as a dense wrapping list of small tags.
### Media + caption cards
UI screenshots (`/landing/ui-*.jpg`) paired with an H3 + paragraph, alternating
image/text alignment down the "workflow" section.
### Testimonial card
Large Space Grotesk quote (22 px) → avatar photo → name → `@handle` (accent link) → role.
Opening `"` set large as a decorative mark.
### Maker's plate
Portrait photo + "Designed & built by" + two‑line H2 + bio paragraph + spec tags
(`30+ yrs · print to product`, `Creator of Cabana`, `Solo‑built · hand‑tuned`, `@mrcndrw`).
### Ratio selector (described)
Pill set of standard canvas shapes: `16:9` Desktop hero · `21:9` Ultrawide · `4:3` Classic
· `1:1` Square social · `9:16` Story · `Free`.
### Footer
Logomark + wordmark + ヒーロー + tagline; links: `HeroKit for Teams` (`/teams`),
`Made by @mrcndrw` (x.com). Closing line above it: "No signup · No uploads · No catch" →
H2 "Ready when you are." → CTA.
## 6. Iconography & imagery
- **Icons**: minimal, line‑weight, used only where functional (arrow `→`, down‑arrow `↓`). No icon set draws attention to itself.
- **Registration‑mark motif**: small orange tick marks / bars as a recurring brand detail.
- **Product imagery**: heavily processed photos — halftone, duotone, dither, glitch, CMYK separation — on the warm paper ground. Every gallery image is an "ordinary photo → hero" transformation.
- **UI imagery**: light‑themed screenshots of the tool's tactile control panels (knobs, toggles, LCD readouts).
- **People**: square portrait photos for testimonials and the maker.
- **Print‑lab references in copy**: CMYK press angles `C 15° · M 75° · Y 0° · K 45°`, Bayer matrices `2×2 … 16×16`, Floyd‑Steinberg / Atkinson diffusion.
## 7. Motion
- Button feedback: `transform` + `box‑shadow`, `.08s ease` — fast, physical, press‑down travel of ~3 px.
- Preferred easing elsewhere: `cubic‑bezier(.16, 1, .3, 1)` (soft overshoot‑free ease‑out).
- Continuous marquee scroll on the gallery.
- Page scroll appears smoothed / controlled (scroll‑hijack), consistent with the "instrument" feel.
- Restraint overall: no parallax spectacle, no entrance animation on every block.
## 8. Accessibility notes
- Body text `#1A1917` on `#F2F0EB` — very high contrast (~15:1).
- `--ink-muted` `#6B6860` on paper ≈ 5.3:1 — passes AA for body text.
- `--ink-faint` `#9A9690` is decorative only (numerals, metadata) — keep off essential copy.
- Accent `#E84320` on white ≈ 3.6:1 — acceptable for large/bold text and the white‑on‑accent button, borderline for small link text; links are also weight‑600 and context‑clear.
- Buttons communicate state through motion **and** shadow, not color alone.
- Katakana ヒーロー is decorative; ensure `aria-hidden` or an accessible name on the lockup.
## 9. Token quick-reference
```css
:root {
/* neutrals */
--paper: #F2F0EB;
--paper-sticky: rgba(242,240,235,.88);
--surface: #F8F6F2;
--surface-sunken: #EAE7E1;
--ink: #1A1917;
--ink-muted: #6B6860;
--ink-faint: #9A9690;
--line: #CDC9BF;
--line-strong: #B8B4AA;
/* accent */
--accent: #E84320;
--accent-hi: #F05535;
--accent-lo: #D43A1C;
--accent-border: #B8310F;
--accent-shadow: #9E2A0D;
--cta-gradient: radial-gradient(ellipse at 50% 0%, #F05535 0%, #E84320 55%, #D43A1C 100%);
/* type */
--font-display: "Space Grotesk", sans-serif;
--font-body: "Inter", sans-serif;
--font-mono: "Share Tech Mono", monospace;
/* radius */
--r-inline: 4px; --r-ctl: 6px; --r-btn: 10px; --r-card: 12px; --r-mount: 16px;
/* rhythm */
--container: 1152px; --gutter: 24px; --section-gap: 128px;
--ease: cubic-bezier(.16, 1, .3, 1);
}
```