# HeroKit — Design System (Darkroom variant) > Source: (marketing landing page) > Captured: 2026-09-02 > Variant: **Darkroom** — an alternative color scheme. Structure, type, layout, and > components are unchanged from `design-default.md`; only the palette is re-cast from a > warm paper + hot orange-red scheme to a near-black press-room + safelight orange scheme > (the same instrument, read under darkroom light instead of daylight). 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 — dark press stock, registration marks, halftone dots, CMYK angles, tactile hardware buttons. Editorial, confident, single‑maker. ## 1. Brand foundation Unchanged from `design-default.md` — same voice & tone, same logomark/wordmark lockup, same registration‑mark motif. Only the accent's tuning shifts (see §2). ## 2. Color Near‑black, warm‑charcoal neutral palette (not pure black) with a single punched‑up orange accent, tuned brighter for legibility on dark ground. ### Neutrals | Token | Value | Use | | ------------------ | ------------------------ | --------------------------------------- | | `--paper` | `#17151F` | Page background (near‑black, warm) | | `--paper-sticky` | `rgba(23,21,18,0.88)` | Sticky header background (translucent) | | `--surface` | `#201D19` | Raised card / panel fill | | `--surface-sunken` | `#2A2620` / `#302B24` | Recessed wells, alternating blocks | | `--ink` | `#F2EFEA` | Primary text, headings (warm white) | | `--ink-muted` | `#A69E8E` | Body copy, nav links, captions | | `--ink-faint` | `#746C5E` | Section numerals, metadata, disabled | | `--line` | `#3C362C` | Hairline dividers / borders (warm dark) | | `--line-strong` | `#4C4536` | Emphasized borders, input outlines | | `--white` | `#FFFFFF` | Text on accent, spec highlights | ### Accent — "HeroKit Safelight" | Token | Value | Use | | ----------------- | --------- | ---------------------------------------------------- | | `--accent` | `#FF5A34` | Accent text (2nd headline line), links, active marks | | `--accent-hi` | `#FF7A50` | Gradient top / hover highlight | | `--accent-lo` | `#E8481F` | Gradient bottom | | `--accent-border` | `#B8310F` | 1px border on accent buttons | | `--accent-shadow` | `#7A2008` | Hard bottom "edge" shadow on raised buttons | Primary button fill is the same **radial gradient** shape, brighter at top‑center: `radial-gradient(ellipse at 50% 0%, #FF7A50 0%, #FF5A34 55%, #E8481F 100%)` ### Semantics Unchanged: the accent stays reserved for one word of the H1, links, the CTA, and small indicators — never a large flat fill except the CTA. ## 3. Typography Unchanged from `design-default.md` — Space Grotesk (display, 700), Inter (body/UI), Share Tech Mono (labels). All three are already free; no substitution needed. Colors follow the neutrals above (`--ink` / `--ink-muted` / `--ink-faint`) instead of their light‑mode equivalents. ## 4. Layout & spacing Unchanged from `design-default.md` — same 1152px container, 8px grid, ~96px header, ~128px section rhythm, and radius scale (4 / 6 / 10 / 12 / 16px). ## 5. Components Unchanged in structure. The hardware CTA (`.hw-cta`) keeps its raised‑key box‑shadow recipe with the new accent values from §2: ``` background: radial-gradient(ellipse at 50% 0%, #FF7A50 0%, #FF5A34 55%, #E8481F 100%); border: 1px solid #B8310F; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), /* dimmer specular on dark */ 0 4px 0 #7A2008, 0 6px 16px rgba(255,90,52,.45), /* stronger glow reads better on dark */ 0 2px 4px rgba(0,0,0,.4); ``` The button‑mount socket (`.hw-cta-mount`) inverts its highlight direction: `box-shadow: inset 0 2px 6px rgba(0,0,0,.5), inset 0 1px 2px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.06);` ## 6. Iconography & imagery Unchanged from `design-default.md`. Halftone/dither/glitch product imagery reads with more contrast against the darker page; UI screenshots should use their own dark chrome to match. ## 7. Motion Unchanged from `design-default.md` — same `.08s ease` button press, same `cubic-bezier(.16, 1, .3, 1)` elsewhere, same restrained, no‑parallax feel. ## 8. Accessibility notes - Body text `#F2EFEA` on `#17151F` — very high contrast (~16:1). - `--ink-muted` `#A69E8E` on paper ≈ 6.8:1 — passes AA for body text. - `--ink-faint` `#746C5E` is decorative only (numerals, metadata) — keep off essential copy. - Accent `#FF5A34` on `#17151F` ≈ 4.9:1 — passes AA for large/bold text and the CTA label. - Buttons still communicate state through motion **and** shadow, not color alone. ## 9. Token quick-reference ```css :root { /* neutrals */ --paper: #17151F; --paper-sticky: rgba(23,21,31,.88); --surface: #201D19; --surface-sunken: #2A2620; --ink: #F2EFEA; --ink-muted: #A69E8E; --ink-faint: #746C5E; --line: #3C362C; --line-strong: #4C4536; /* accent */ --accent: #FF5A34; --accent-hi: #FF7A50; --accent-lo: #E8481F; --accent-border: #B8310F; --accent-shadow: #7A2008; --cta-gradient: radial-gradient(ellipse at 50% 0%, #FF7A50 0%, #FF5A34 55%, #E8481F 100%); /* type — unchanged from design-default.md */ --font-display: "Space Grotesk", sans-serif; --font-body: "Inter", sans-serif; --font-mono: "Share Tech Mono", monospace; /* radius / rhythm — unchanged from design-default.md */ --r-inline: 4px; --r-ctl: 6px; --r-btn: 10px; --r-card: 12px; --r-mount: 16px; --container: 1152px; --gutter: 24px; --section-gap: 128px; --ease: cubic-bezier(.16, 1, .3, 1); } ```