Edge Runner

Concept: 镜之边缘风格,丰富简约动效 — Mirror's Edge style, rich yet minimal motion.

A dual-theme (light + dark) design system inspired by the visual language of Mirror's Edge: stark, near-monochrome cities punctuated by a single saturated accent — the "Runner Red." Geometry is sharp, space is generous, motion is purposeful.

Design Pillars

  • Clarity over decoration. White or near-white surfaces, high contrast, no gratuitous gradients.
  • One signal color. Runner Red (#E62020) is reserved for the single most important element on any screen. Everything else is neutral.
  • Flow, not bounce. Motion uses long easing curves and directional slides; never springy overshoot.
  • Architecture as composition. Hard 90° geometry, thin rules, and pristine negative space. Grids are visible, not hidden.

Core Specifications

Colors: Ink (#0B0B0D), Paper (#FAFAF7), Runner Red (#E62020), Sky (#3AA7FF)

Typography: Heebo (display/UI), JetBrains Mono (code/data)

Spacing: 4px base unit with 10-step scale

Motion: cubic-bezier(0.2, 0.7, 0, 1) with 4 duration tokens

· 01 ·

Design Foundations

Color Palette

Neutral Scale (Warm-Tinted)

Paper
#FAFAF7
Paper-2
#F2F2EE
Paper-3
#E7E7E2
Neutral-200
#D8D8D1
Neutral-300
#BCBCB3
Neutral-400
#8E8E86
Neutral-500
#60605A
Neutral-600
#3E3E3A
Neutral-700
#26262A
Ink
#0B0B0D

Signal Colors

Runner Red
#E62020
Signature — ≤5% per screen
Sky
#3AA7FF
Secondary signal · links · data
Success
#22A06B
Warning
#E8A33A

Typography

Type Scale

96px
Find the line.
Display XL · 800
64px
Hold it.
Display L · 800
40px
Runner's grid
Display M · 700
28px
Route planning
H1 · 700
20px
Section heading
H2 · 700
16px
Body copy keeps running.
Body · 400
14px
Secondary context.
Body S · 400
12px
Fine print / caption
Caption · 400

Font Family

  • Display/UI: Heebo (300, 400, 500, 700, 800) — geometric, humanist grotesque
  • Mono: JetBrains Mono (400, 500, 700) — code, timestamps, coordinates, data
  • Substitution: Google Fonts (Heebo and JetBrains Mono). Swap with licensed/brand-specific faces when available.

Spacing & Grid

Spacing Scale (4px Base Unit)

1
4px
2
8px
3
12px
4
16px
5
24px
6
32px
7
48px
8
64px
9
96px
10
128px

Grid Specs

  • 12-column layout
  • 24px gutter
  • 96px outer margin (desktop)
  • Left-aligned by default. Center only for hero/marketing.

Borders, Shadows, Radii

Border Radius

0
Default
2px
Inputs
4px
Cards
full
Avatar · Dot

Shadows

shadow-lift
Hover · Cards
shadow-ping
Focus Ring
shadow-cut
Active Tab
Flat
Default Rest

Borders

  • 1px hairlines in neutral-200 for subtle divisions
  • 2px in Ink or Red for emphasis
  • No glows. No colored shadows except shadow-ping.

Backgrounds & Imagery

  • Flat color first. Paper or Ink fills 95% of surfaces.
  • No gradients as decoration. One acceptable gradient: horizontal Runner-Red → transparent on nav underline.
  • Rooftop imagery (full-bleed architecture) permitted for hero moments only — always cool-toned, high-key, 40% empty sky minimum.
  • No repeating textures. No illustrations. No emoji.
  • Photography: Cool temperature, high-key, architectural or sky-forward, ≥40% empty space for type.

Transparency & Blur

  • Blur: Used only for fixed top nav over scrolling: backdrop-filter: blur(12px) + 85% Paper fill.
  • Transparency: Limited to focus-ping (20% red) and disabled states (40%).
· 02 ·

Components

Buttons

Primary

Ghost

<button class="btn btn-primary">Start running →</button> <button class="btn btn-ghost">View the grid</button>

Cards

· 01 · route

North Edge

Rooftop traversal — 12 jumps, 3 grapples.

· 02 · route

Aurora Line

Sunrise-only route. Wall-runs through Sector 4.

Badges & Chips

RUN LIVE · 01 · DRAFT CLEAN CAUTION

Input Fields

> active
Letters and digits only
> must be > 00:00:20

Navigation

EDGE RUNNER
Grid
Routes
Runners
> top nav · 64px · backdrop-blur · hairline bottom · active underline in runner red

Logo & Mark

EDGE RUNNER
mark red · ink · reverse
min 16px

The mark is a single red right-chevron (>) in Runner Red — the universal "this way" signal. Never tint, rotate, or distort. Minimum clear space = 1 chevron width.

· 03 ·

Motion & Animation

Motion Tokens

--ease-runner: cubic-bezier(0.2, 0.7, 0, 1) ← signature curve, long tail --ease-cut: cubic-bezier(0.8, 0, 0.2, 1) ← decisive state changes --ease-std: cubic-bezier(0.4, 0, 0.2, 1) ← standard easing --dur-flash: 120ms ← quick feedback --dur-step: 240ms ← UI transitions --dur-run: 480ms ← primary motion --dur-glide: 720ms ← slow reveal

Motion Patterns

· 01 · Clipped Reveal
Find the line.
· 02 · Directional Slide
> > > route ahead
· 03 · Focus Ping
View the grid

Motion Rules

  • Clipped reveals: clip-path: inset(0 100% 0 0) animating to inset(0 0 0 0) — text swipes in from left.
  • Directional slides: translateX/Y of 16–24 px, never scale bounces.
  • Focus ping: 2px red underline scales from scaleX(0) to scaleX(1) with origin left on focus.
  • Never: Spring overshoot, rotating spinners with >1 revolution, wobble.
  • Hover states: opacity: 0.7 on icons/links, background darkens by 4% on buttons, 2px red bottom-border slides in on nav items. Duration --dur-step.
  • Press states: transform: translateY(1px) + background darkens 8%. Never scale.
· 04 ·

Iconography

Icon System

Lucide Icons (https://lucide.dev) — loaded via CDN, rendered as inline SVG at runtime.

Specifications

  • Default size: 20 × 20 px
  • Stroke width: 1.5 (overrides Lucide's 2 default — matches the system's hairline language)
  • Color: currentColor — icons inherit from their text context
  • Fill: always none. Line-only. No filled icons.

Usage Example

<!-- CDN --> <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> <script>lucide.createIcons({ "stroke-width": 1.5 });</script> <!-- Inline use --> <i data-lucide="arrow-right" width="20" height="20"></i>

What NOT to Use

  • Emoji — never. Breaks the system's monochrome precision.
  • Decorative unicode (★ ♥ ✓) — never as UI icons.
  • Filled / duotone icons — never.
  • Icon fonts other than Lucide — never.

Acceptable Typographic Symbols

Used as typography, not iconography:

  • → ← ↑ ↓ — directional arrows in button labels, pagination
  • · — middle dot as CTA separator
  • — — em-dash for asides
  • ·01 ·02 — numeric section markers (set in mono)

Logo Usage

  • Mark: Single red right-chevron (>) — the universal "this way" signal.
  • Wordmark: "EDGE RUNNER" with chevron, geometric rendering.
  • Never: Tint, rotate, or distort. Minimum clear space = 1 chevron width.
  • Substitution note: No source codebase provided. Lucide is the closest match to the system's visual grammar (thin, geometric, open). Swap to a bespoke or licensed set when one is provided.
· 05 ·

Voice & Tone

Content Fundamentals

Voice: Terse. Technical. Confident without swagger. Think a freerunner's playbook — short sentences, verb-first, no hedging.

Writing Guidelines

  • Casing: Title Case for display/eyebrows; sentence case for UI copy and body. ALL CAPS reserved for eyebrows, status pills, and key labels (tracking +0.08em).
  • Pronouns: Second person ("you") in product copy; first person plural ("we") only on brand/marketing pages.
  • Emoji: Never. This brand uses iconography and typography alone.
  • Numbers: Arabic numerals, even for small numbers ("3 runners online"). Use real units with thin spacing: 12 ms, 1920 × 1080.
  • Punctuation: En-dashes for ranges (08–12); em-dashes for asides — spaced — like this.

Copy Examples

Hero & Navigation

Hero: Find the line. Hold it.
Sub: A design system built for interfaces that move the way you do.
CTA: Start running · View the grid

Empty States & Errors

Empty state: Nothing here yet. Drop a file, or press N to start a new run.
Error: Route blocked. The server didn't respond in time. Retry in 5 s.
Success: Clean run. Saved at 14:22.

What to Avoid

  • Corporate warmth ("We're so excited!")
  • Exclamation points outside success states
  • Vague qualifiers ("simply", "easily", "just")
  • Emoji or decorative symbols

Layout Conventions

  • Fixed elements: Top nav (64 px), optional left rail (72 px), optional right meta panel (320 px).
  • Eyebrows: Small ALL-CAPS labels sit 8 px above every headline on marketing surfaces.
  • Number markers: 01 · 02 · 03 precede major sections — a trademark of the system.
  • Corner HUD treatment: Important meta can sit flush in corners (top-right timestamp, bottom-left coordinates) in mono, small caps.
  • Alignment: Left-aligned copy is default. Center only for hero/marketing moments.

Tone Samples (Continued)

Status: Route active · 3.2 km · 00:14:22
Confirmation: Route saved. View Aurora Line.
Warning: Network latency detected. Syncing may delay.
Help text: Callsign must be 3–12 alphanumeric characters.