# stepfun.com Design System

> High-contrast structural minimalism anchored by deep obsidian ink and expansive white space.

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

## TL;DR
StepFun utilizes a rigorous achromatic foundation where pure white surfaces (`#ffffff`) meet deep obsidian text and primary actions (`#111827`). The system is characterized by extreme geometric clarity, using a mix of sharp 0px edges for layout containers and ultra-soft 60px or 999px radii for interactive elements. Typography is the primary driver of hierarchy, pairing the technical precision of **MiSans** for body and UI with the authoritative, bold weights of **Proxima Nova** for display. Visual interest is generated through high-fidelity 3D glass-textured imagery rather than UI color, keeping the interface feeling like a neutral, high-performance tool.

## Signature DNA
1. **The Obsidian Primary** (The use of `#111827` as both a text color and a high-contrast surface for primary cards and buttons, creating a "dark mode" focal point within a light mode canvas. Seen on `pricing` and `about` pages.)
2. **Extreme Radius Contrast** (The juxtaposition of sharp `0px` layout boundaries with `60px` "stadium" buttons and `16px` soft-cornered cards. Evidence: Homepage hero actions vs. feature grids.)
3. **Glass-Morphism Imagery** (The reliance on cyan-tinted 3D glass blocks as the sole decorative motif, contrasting against the sterile black-and-white UI. Evidence: Homepage model showcase.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
| :--- | :--- | :--- | :--- | :--- |
| stepfun.com (Parent) | #111827 | 3D Glass Blocks | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--bg-primary` | `#ffffff` | Page background, primary surface | 38 | 1 | Computed Style |
| `--text-primary` | `#000000` | Default headings, primary body | 146 | 1 | CSS Variable |
| `--bg-card` | `#e9ebec` | Secondary section backgrounds | 2 | 1 | CSS Variable |
| `--bg-secondary`| `#eceff3` | Borders, subtle dividers | 2 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--primary` | `#111827` | Primary CTA surface, emphasized text | 6 | 1 | CSS Variable |
| `--muted` | `#6b7280` | Secondary text, descriptions | 4 | 1 | CSS Variable |
| `link-blue` | `#0000ee` | Inline text links (legacy/default) | 10 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Proxima Nova | 600, 630, 700 | Display, Hero Headings | Montserrat | Licensed |
| MiSans | 300, 400, 450, 600 | Body, UI, Subheadings | Noto Sans SC | Proprietary |
| -apple-system | 400, 500, 700 | System Fallback, Nav | Inter | System |
| Arial | 400, 600 | UI Labels | Arimo | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `display-mega` | 60px | 63px | normal | 700 | Homepage Hero | `h1:nth-of-type(1)` |
| `heading-lg` | 32px | normal | normal | 600 | Section Titles | `h2._title_1yt1d_48` |
| `heading-md` | 30px | 36px | 0.6px | 700 | Page Headers | `h1` |
| `heading-sm` | 24px | normal | normal | 630 | Card Titles | `h3._standard-card-title_1e40d_139` |
| `body-lg` | 16px | 24px | normal | 400 | Nav, Primary Body | `nav._nav-wrapper_1kbsl_9` |
| `body-md` | 16px | 21.6px | normal | 400 | Tab Titles | `span._tab-title_zaqje_171` |
| `button-text` | 16px | 24px | normal | 450 | Hero Actions | `a._hero-action_1e40d_136` |
| `body-sm` | 14px | 24px | normal | 300 | Card Descriptions | `p._standard-card-description_1e40d_140` |
| `caption` | 12px | 20px | 0.24px | 400 | Small Metadata | `p` |

### Principles
1. **Bold Display Weight:** Display type (Proxima Nova) never drops below 600 weight.
2. **Achromatic Hierarchy:** Importance is signaled by the shift from `#6b7280` (muted) to `#000000` (primary) rather than color.
3. **MiSans for Utility:** All interactive components and long-form descriptions use MiSans for its high legibility at small scales.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `space-2` | 8px | 7 |
| `space-2.5` | 10px | 7 |
| `space-4` | 16px | 8 |
| `space-7` | 28px | 4 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `radius-none` | 0px | Layout containers, section wrappers | 157 occurrences |
| `radius-card` | 16px | Feature cards, surface containers | Card component |
| `radius-button` | 60px | Primary and secondary buttons | Rounded Button component |
| `radius-pill` | 999px | Status badges, tags | Pill / Badge component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** Homepage
**Spec:** Background: transparent / Text: `#000000` (88% alpha) / Border: 1px `#000000` (12% alpha) / Radius: 60px / Padding: 0px 28px / Typography: MiSans 16px
**States observed:** Default | Hover: Not captured

#### Pill / Badge
**Role:** Status indicators and tags
**Pages observed:** Pricing, About
**Spec:** Background: transparent / Text: `#111827` / Border: 1px `#eceff3` / Radius: 999px / Padding: 0px / Typography: MiSans 16px
**States observed:** Default

### Tier 2: Patterns

#### Standard Card
**Role:** Feature display and model information
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` / Text: `#000000` / Border: 1px `#000000` (8% alpha) / Radius: 16px / Padding: 0px / Typography: MiSans 14px-16px
**States observed:** Default

#### Dark Feature Card
**Role:** Emphasized pricing or about-us highlights
**Pages observed:** Pricing, About
**Spec:** Background: `#111827` / Text: `#ffffff` / Border: 0px / Radius: 10px / Padding: 0px 18px / Typography: MiSans 14px
**States observed:** Default

### Tier 3: Surface-specific

#### Navigation Bar
**Role:** Global site header
**Pages observed:** All
**Spec:** Background: `#ffffff` / Text: `#000000` / Border: 1px bottom `#eceff3` / Radius: 0px / Height: ~64px
**States observed:** Default

#### Footer
**Role:** Global site footer
**Pages observed:** All
**Spec:** Background: `#111827` / Text: `#ffffff` / Radius: 0px / Padding: 48px vertical
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px |
| Section Padding | 80px - 120px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; Hero font-size reduces to 30px; Cards stack vertically. |
| Desktop | 1440px | 12-column grid; Horizontal navigation. |

## Imagery & decoration
StepFun uses high-fidelity 3D renders of glass cubes and prisms. These assets use a specific cyan/teal refraction (`#00f2ff` range) which provides the only chromatic relief in the system. The brand avoids flat icons, photography, and illustrative characters.

## Do's
- Use `#111827` for primary action buttons to ensure high contrast against white.
- Maintain `0px` border radius for full-width section containers.
- Pair Proxima Nova (700) with MiSans (400) for a clear display-to-body transition.
- Use `60px` radius for all standalone action buttons.
- Keep background surfaces strictly `#ffffff` or the light gray `#e9ebec`.

## Don'ts
- **Wrong:** Using `#0000ee` for primary UI buttons. **Right:** Use `#111827`. **Reason:** Blue is reserved for legacy inline links; obsidian is the brand's primary action color.
- **Wrong:** Applying `16px` radius to the global navigation bar. **Right:** Use `0px`. **Reason:** Structural layout elements remain sharp-edged.
- **Wrong:** Using Proxima Nova for body text. **Right:** Use MiSans. **Reason:** Proxima Nova is reserved for display/heading roles.
- Do not use shadows to create depth; use borders (`#eceff3`) or background shifts.
- Do not use the cyan glass color for text or UI borders.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --primary: #111827;
  --text-primary: #000000;
  --text-muted: #6b7280;
  --bg-primary: #ffffff;
  --bg-card: #e9ebec;
  --border-subtle: #eceff3;
  --radius-card: 16px;
  --radius-button: 60px;
}
```

```json
/* Style Dictionary */
{
  "color": {
    "brand": { "primary": { "value": "#111827" } },
    "surface": {
      "canvas": { "value": "#ffffff" },
      "card": { "value": "#e9ebec" }
    },
    "text": {
      "base": { "value": "#000000" },
      "muted": { "value": "#6b7280" }
    }
  }
}
```

## Agent prompt examples
- "Create a feature card using a `#ffffff` background, a 1px border of `#000000` at 8% opacity, and a `16px` border radius. Use MiSans 16px for the title."
- "Generate a primary CTA button with a `#111827` background, white text, and a `60px` border radius."
- "Design a section header using Proxima Nova Bold at 32px, centered, with a `#000000` color."

## Known gaps
- Hover and Active states for buttons were not captured in the source evidence.
- The specific transition logic for the mobile hamburger menu was not documented.
- Complex form validation states (Success/Error) were not present on the analyzed pages.