Press 1–5 to switch colorways · 0 to cycle
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
→ active colorway · #FF5105
→ semantic · hero-green
→ semantic · hero-amber
→ semantic · 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.
How to set it
- Display always sits in negative space
- Tighten tracking as size grows — display is compressed
- Mono is for labels, tokens, and code only
- Widows allowed, orphans punished
- Never set body copy below 14px
- Never reach for a sixth Space Grotesk weight
- Never set mono for running paragraphs
- Never sentence-case a button or micro label
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.
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.
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
Quick, confident, never cute.
Hero Mode motion is athletic — fast in, decisive hold, clean out. Every transition uses a single easing curve and stays under 400ms. Nothing bounces, nothing wobbles, nothing floats in slow motion.
cubic-bezier(0.4, 0, 0.2, 1)
The only curve. Fast attack, smooth decel. Used on every transition in the system — color, transform, opacity.
120 · 200 · 400ms
Micro (hover, focus): 120ms. Standard (panel, card): 200ms. Hero (page, modal): 400ms. Nothing exceeds 400ms.
Enter fast, exit faster
Elements enter with intent and leave without ceremony. No staggered reveals, no parallax, no scroll-jacking.
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:
- Two surfaces only: dark canvas (#0C1118) is home base; light surface
(#F5F6F6 with ink #0D1116) is reserved for editorial / tone-of-voice
moments. No other greys, no system light mode.
- Colorway tokens drive everything: var(--cw-primary), var(--cw-gradient),
var(--cw-glow), var(--cw-tint-weak). Never hard-code a brand hue.
- Primary font: Space Grotesk. Mono: JetBrains Mono (labels only, uppercase,
letter-spacing 0.14em).
- Every primary action uses var(--cw-primary) or var(--cw-gradient).
Button text on colored fills is #0D1116, never white.
- 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.
- Every section gets a mono eyebrow: "NN / SECTION NAME" in var(--cw-primary).
- Never use greyscale UI. Color is structural, not decorative.
Goal: make the user feel like they just stepped into their alter ego.
Tailor a prompt.
Pick what you want to build. Get a prompt that's already pointing your agent at Hero Mode's rules — paste it alongside DESIGN.md and run.
Build a Pricing card for Hero Mode AI. Follow DESIGN.md in this repo strictly.
CONTEXT
— Surface: dark canvas (#0C1118 background, white text)
— Inherit the active colorway from the app (currently Orange · The Hero). All color comes from --cw-* tokens — never hard-code a brand hue.
REQUIREMENTS
— Primary CTAs use var(--cw-gradient) or var(--cw-primary) with #0D1116 text. Focus rings glow with var(--cw-glow) — never generic blue.
— Typography: Space Grotesk for all display/body, JetBrains Mono for labels only (uppercase, 0.14em letter-spacing).
— Display type starts at 72px with -0.035em tracking. Body is 16/400/1.55.
— Spacing is on a 4px base. Sections breathe at 96px vertical padding.
— Eyebrow label on the block: "NN / PRICING CARD" in var(--cw-primary), mono.
— Glow is the shadow system. Use --cw-glow-subtle / --cw-glow / --cw-glow-strong for elevation, never a flat drop-shadow.
— Use Nuxt UI components where they fit (UButton, UBadge, UInput) with color="primary". No greyscale UI.
GOAL
Make the surface feel like it was born from the brand — bold, transformational, dialed to 10. The user should feel like they just stepped into their alter ego. Bold on bright.
Same energy.
The dark canvas is home base. The light surface is where the brand stops to breathe — a paper-grade contrast slot for tone-of-voice moments, editorial beats, and print-grade exports. Same colorway tokens, same grain, same mono labels, same geometry. Just inverted ink so the declarations can land.
Hero Mode AI is the alter ego
you can talk to, train,
and live inside.
We're not a productivity app — we're the part of you that already made the call. Every surface in this system is tuned to make the user feel closer to their hero self, not further from it. That's the whole brief. Everything else is execution.
We don't whisper.
We don't shout.
We declare.
Hero Mode speaks like the version of you that already made the call. Steady. Direct. Built. Never apologetic, never hyped. Bold, confident, unapologetic — a brand full of intensity, energy, and transformation. The voice is the product the same way the type is the product.
Help people
become the
version they
already see.
Every feature, every line of copy, every pixel ladders up to one question — does this make the user feel closer to their hero self? If the answer is no, it doesn't ship.
How we write
- Speak in short, declarative sentences
- Never apologize for ambition
- Use present tense — the future is already here
- Write like the user already won
- Name the feeling, then name the action
- Trust the reader — no exclamation points, no hype
One mark.
Seven expressions.
The Hero Mode logo is built around a single confident "H" monogram and the wordmark that anchors it. Each variant has a job — primary lockup, horizontal lockup, logomark, wordmark, and a set of usage rules that keep them recognizable everywhere they show up. Never substitute one for another.
Stacked lockup
The hero usage. Packaging, splash screens, and any full-bleed brand moment where the system needs to sign the page.
In-line variant
Nav bars, email signatures, and anywhere a single horizontal line needs to read at a glance without losing weight.
The "H"
Standalone monogram. Favicon, app icon, and merchandise where the wordmark would crowd the surface.
Hero Mode
Type-only treatment for editorial moments, footers, and partner co-branded surfaces where the monogram would compete.
Discipline stamp
The "Fullstack" descriptor locked under the wordmark. For moments that need to call the practice by name — decks, credentials, and role-specific surfaces.
Signal variant
The monogram paired with the star glyph. A recognition mark for awards, featured work, and moments that need a little extra weight behind the H.
Do's & don'ts
- Maintain clear space equal to the H height
- Never recolor outside the colorway tokens
- Never stretch, skew, or rotate
- Never set on busy photography
The system,
out in the world.
A design system only matters when it holds up under real weight. These slots are the proof points — product surfaces, out-of-home, social, and merch — the places where the Hero Mode aesthetic has to survive contact with the world.
Step into
your alter ego.
You've seen the system. Now use it — or hand this page to your agent alongside the DESIGN.md source and let it build Hero Mode UI for you.