# Stepn Design System

> High-voltage athletic brutalism defined by ink-trapped italics, electric lime accents, and sharp-edged monochrome containers.

**Source:** https://stepn.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Stepn utilizes a high-contrast "Dark Mode" foundation, primarily using Obsidian `#000000` and Pure White `#ffffff` with a singular high-visibility accent of Electric Lime `#8eff36`. The typographic system is aggressive and directional, relying exclusively on **PP Neue Machina Inktrap** in various weights, always set in italics to convey forward motion. Layouts are structured with sharp 0px corners or extreme 100px pill radii, avoiding intermediate softness. Visual interest is generated through technical "inktrap" font details and diagonal hatched patterns rather than shadows or gradients.

## Signature DNA
1. **Kinetic Italics** (Every display and body element uses an italicized variant of PP Neue Machina, creating a persistent sense of athletic velocity across all pages).
2. **Electric Lime Highlighting** (The use of `#8eff36` for primary CTAs and critical headings against a black canvas creates a "night-run" high-visibility aesthetic).
3. **Inktrap Brutalism** (The typeface features deep, functional notches designed for ink spread, which are scaled up to 120px to serve as a primary decorative motif).

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#000000` | Primary page background and text | 73 | 0.8 | Computed Style |
| `{color.surface}` | `#ffffff` | Secondary text and card backgrounds | 152 | 0.8 | Computed Style |
| `{color.neutral}` | `#969696` | Muted secondary body text | 8 | 0.6 | Computed Style |
| `{color.surface-dark}` | `#1a1a1a` | Elevated section backgrounds | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent}` | `#8eff36` | Primary CTA background, Hero text | 57 | 0.8 | Computed Style |
| `{color.link}` | `#0000ee` | Inline links (legacy/browser default) | 48 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| PP Neue Machina Inktrap Ultrabold Italic | 400 | Display / Hero | Montserrat (Bold Italic) | Pangram Pangram |
| PP Neue Machina Inktrap Regular Italic | 400 | Headings | Space Grotesk (Italic) | Pangram Pangram |
| PP Neue Machina Inktrap Light Italic | 400 | Body / UI | Inter (Italic) | Pangram Pangram |
| sans-serif | 400 | System Fallback | - | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-xl}` | 120px | 108px | -4.8px | 400 | Hero H1 | `h1.framer-text` |
| `{type.display-lg}` | 72px | 72px | -2.88px | 400 | Section Headers | `h2.framer-text` |
| `{type.display-md}` | 46px | 46px | -1.84px | 400 | Sub-section titles | `h3.framer-text` |
| `{type.heading-md}` | 31px | 31px | -1.24px | 400 | Feature titles | `h4.framer-text` |
| `{type.heading-sm}` | 24px | 24px | -0.96px | 400 | Small headings | `h5.framer-text` |
| `{type.heading-xs}` | 20px | 22px | -0.4px | 400 | UI Labels | `h6.framer-text` |
| `{type.body-lg}` | 20px | 28px | -0.4px | 400 | Lead paragraphs | `p.framer-text` |
| `{type.body-md}` | 16px | 16px | -0.32px | 400 | Standard body | `h6.framer-text` |
| `{type.body-sm}` | 14px | 21px | -0.28px | 400 | List items | `li.framer-text` |
| `{type.caption}` | 12px | normal | normal | 400 | Metadata | `div.framer-nsCLf` |

### Principles
1. **Directional Bias:** All brand typography must be italicized to maintain the "Step" (movement) identity.
2. **Tight Tracking:** Display sizes use aggressive negative letter-spacing (up to -4.8px) to create a compact, high-impact block of text.
3. **Inktrap Visibility:** The "inktrap" notches of the font must be clearly visible; do not use weights that fill in these gaps at large sizes.

## Spacing
**Base unit:** 5px (derived)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 8 |
| `{space.sm}` | 9px | 8 |
| `{space.md}` | 20px | 61 |
| `{space.lg}` | 35px | 7 |
| `{space.xl}` | 50px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Default containers, buttons | 290 occurrences |
| `{radius.card}` | 15px | Feature cards, video embeds | 12 occurrences |
| `{radius.pill}` | 100px | Social icons, specific UI plates | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All components | System-wide (0 shadows captured) |

## Components

### Tier 1: Foundational

#### Primary Action Plate
**Role:** High-visibility interaction point (Marketplace/Download)
**Pages observed:** https://stepn.com
**Spec:** Background `{color.accent}` (#8eff36) / Text `{color.canvas}` (#000000) / Border none / Radius `{radius.sharp}` (0px) / Padding 9px 20px 5px
**States observed:** Default | Hover: Not captured

#### Social Icon Circle
**Role:** Ecosystem and social links in footer
**Pages observed:** https://stepn.com
**Spec:** Background `{color.surface}` (#ffffff) / Text `{color.canvas}` (#000000) / Border none / Radius `{radius.pill}` (100px) / Size 32px x 32px

### Tier 2: Patterns

#### Feature Card
**Role:** Content grouping for app features
**Pages observed:** https://stepn.com
**Spec:** Background transparent / Text `{color.link}` (#0000ee) / Border 1px `{color.link}` / Radius `{radius.card}` (15px)

#### Dark Section Block
**Role:** Major content division
**Pages observed:** https://stepn.com
**Spec:** Background `{color.canvas}` (#000000) / Padding 50px 35px / Radius `{radius.sharp}` (0px)

### Tier 3: Surface-specific

#### Download Container
**Role:** App store link grouping
**Pages observed:** https://stepn.com
**Spec:** Background transparent / Border 2px `{color.accent}` (#8eff36) / Radius `{radius.card}` (15px) / Padding 20px

#### Navigation Bar
**Role:** Top-level site movement
**Pages observed:** https://stepn.com
**Spec:** Background `{color.canvas}` (#000000) / Height 80px / Typography `{type.heading-xs}`

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Gutter | 50px |
| Column Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Display type scales to ~48px |
| Desktop | 1440px | Multi-column feature grids; Full display type (120px) |

## Imagery & decoration
- **Hatched Patterns:** 45-degree diagonal lines used as section dividers or background fills.
- **Lightning Motif:** Frequent use of the lightning bolt icon as a bullet point or decorative element.
- **Technical Grids:** Subtle circular and radial grid lines behind hero imagery to suggest "tracking" or "GPS" themes.

## Do's
- Use **PP Neue Machina Inktrap** for all text; never use a standard sans-serif for headings.
- Ensure all text is **italicized** (`font-style: italic`).
- Use `#8eff36` (Electric Lime) exclusively for the most important call-to-action on the page.
- Maintain **0px border radius** for primary structural blocks.
- Set display headings with **negative letter-spacing** to ensure the "inktraps" create a rhythmic visual pattern.

## Don'ts
- **Wrong:** Using a soft blue or green for buttons. **Right:** Use `#8eff36`. **Reason:** The brand relies on high-visibility athletic neon, not corporate palettes.
- **Don't use drop shadows.** The brand is strictly flat/brutalist.
- **Don't use rounded corners** on primary buttons; keep them sharp (0px).
- **Don't use upright (roman) type.** It breaks the kinetic identity of the brand.

## Similar brands
- Nike (Move to Zero campaign)
- Adidas (Performance sub-brand)
- Strava (Technical athletic UI)
- Nothing (Tech-brutalist aesthetic)

## Quick start

### CSS Custom Properties
```css
:root {
  --stepn-lime: #8eff36;
  --stepn-black: #000000;
  --stepn-white: #ffffff;
  --stepn-gray: #969696;
  --font-main: "PP Neue Machina Inktrap", sans-serif;
  --radius-card: 15px;
  --radius-pill: 100px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #8eff36;
  --color-canvas: #000000;
  --font-display: "PP Neue Machina Inktrap";
  --tracking-tightest: -0.04em;
}
```

## Agent prompt examples
- "Create a hero section with a black background, using 120px PP Neue Machina Inktrap Ultrabold Italic text in Electric Lime (#8eff36) with -4.8px letter spacing."
- "Generate a primary button with 0px border radius, background color #8eff36, and black italicized text."
- "Design a content card with a 15px border radius and a 1px solid border using #0000ee."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Complex form elements (inputs, radio buttons) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://stepn.com | 1440x900 | 2026-06-06 |
| Mobile Home | https://stepn.com | 390x844 | 2026-06-06 |