Become
the hero
of your own life.
Hero Mode AI is a personal operating system for the person you're becoming. An alter ego you can talk to, train, and live inside. Design system v0.1 — auto-generated from DESIGN.md.
A brand dialed to ten.
Hero Mode is bold, transformational, and unapologetically colorful. Unlike a typical monochrome UI, color here is structural — it signals the alter ego you're in. Five colorways, one system, zero greyscale fallback.
Bold by default
Dark canvas. Gradient CTAs. 96px displays. Hero Mode refuses to whisper.
Transformational
Every interaction should feel like a small promotion toward who you're becoming.
Systemised
Tokens, Nuxt UI bindings, and a DESIGN.md so agents build Hero Mode, not generic UI.
Five colorways.
One alter ego at a time.
Each colorway is a mood, a persona, a switch. The active one flows through every primary, every focus ring, and every glow via CSS variables.
Orange · The Hero
Nuxt UI bindings
→ hero-orange (active colorway)
→ hero-green
→ hero-amber
→ hero-red
Space Grotesk, loud.
Hero Mode runs on one primary font — Space Grotesk — with JetBrains Mono reserved for labels and tokens. Tight tracking on displays, generous leading on body. It should feel engineered, not decorative.
Built on Nuxt UI.
Wired into the colorway.
Every component below uses Nuxt UI primitives, themed live via the active colorway. Flip it in the header — everything reflows at once.
Calls to action
Surfaces & containers
Standard
The workhorse. Hairline border, flat surface. Use for feature grids and content.
Elevated
Drop shadow at 0.5 opacity — has to clear dark canvas without looking fake.
Gradient Border
Reserved for hero content, onboarding peaks, alter-ego confirmation.
Solid & gradient cards
Two expressive card treatments lifted straight from the brand book. The solid row uses a single flat brand tone; the gradient row uses the signature two-tone "VS" diagonal. Both carry the same fractalNoise film grain so they always read as one family.
Form controls
Focus ring glows with --cw-primary
Textareas inherit the same glow ring
Feedback
Nuxt UI badge variants on --cw-primary
Day 62 / 100 — gradient fill for milestones
Built on a 4-unit grid.
Base unit is 4px. Containers max out at 1440px. Sections breathe with 96px vertical padding on desktop. Bold needs space — give it space.
Glow is our shadow.
On a dark canvas, drop shadows disappear. Hero Mode uses colorway-tinted glows to signal elevation and state. Four levels, from whisper to strong.
Rules of engagement.
- Lean into the colorway — it IS the brand signal
- Use gradient fills on CTAs and emotional touchpoints
- Pair Space Grotesk headings with JetBrains Mono labels
- Add glow shadows using the current --cw-glow token
- Leave generous breathing room — bold needs space
- Treat dark canvas as the default, not an option
- Revert to grey buttons — Hero Mode earns its color
- Mix two different colorways in the same view
- Use drop-shadows under 0.4 opacity on dark canvas
- Stack more than one gradient per section
- Substitute the fonts — Space Grotesk is non-negotiable
- Flatten the hero display below 72px on desktop
Mobile-first, hero-forward.
Stack everything. Hero 56px. Cards 1-col.
Cards 2-col. Hero 72px. Compact nav.
Full 3-col grid. Hero 96px. All chrome on.
Max container 1440px. Hero up to 128px.
Prompt the agent.
Get Hero Mode UI.
Drop this into Claude, Cursor, or v0 alongside DESIGN.md. The agent will generate components that look like they were born from the brand.
// Agent system prompt
You are building UI for Hero Mode AI. Follow DESIGN.md strictly:
- Dark canvas (#0A1218), never light mode.
- Primary font: Space Grotesk. Mono: JetBrains Mono (labels only).
- Every primary action uses var(--cw-primary) or var(--cw-gradient).
- Focus states glow with var(--cw-glow) — never generic blue.
- Shadows on dark canvas need >= 0.4 opacity to be visible.
- Use Nuxt UI components (UButton, UBadge, UInput) with color="primary".
- Display text is 72–96px with -0.035em tracking. Body is 16/400/1.55.
- Spacing is on a 4px base. Sections breathe at 96px vertical padding.
- Never use greyscale UI. Color is structural, not decorative.
Goal: make the user feel like they just stepped into their alter ego.