---
title: "Stryds design system"
variant: extended
source: https://www.stryds.com/
captured_at: 2026-10-12
theme: dark
industry: health
generator: Design DNA (https://four.wiralomi.com/style/stryds-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Stryds · Design System

> A dark canvas for vibrant social health

**Theme:** dark · **Industry:** health · **Source:** https://www.stryds.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Stryds pairs a near-black canvas and oversized white typography with vivid color in its immersive hero and app imagery. Rounded feature cards make fitness goals, friend challenges, and personal moments feel approachable and social.

## North star

Keep the interface almost-black and typographically restrained; let product visuals carry the color, with acid green as the sole UI accent.

## Overview

The page uses #101010 as an uninterrupted dark canvas, keeping the interface quiet while the hero’s concentric rainbow bands and app mockups supply vivid visual energy. That rainbow is illustration-led, not a reason to recolor the interface: the measured brand accent is acid green #a6ff00, reserved for the Join CTA and small brand details. Sf Pro Display carries the identity through large, tightly tracked white headings and compact muted-gray supporting copy. The hero centers the Stryds wordmark and short descriptor inside a full-bleed circular visual; a small pill-shaped Join control sits near its lower edge. Farther down, three generous, dark feature cards form a vertically stacked showcase. Their thin gray outlines and rounded corners contain colorful app metrics, activity imagery, and photo collages. Substantial dark gaps between sections give the page a calm, spacious rhythm despite its busy product visuals.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Night Canvas | `#101010` | `--color-night-canvas` | brand | Dominant page canvas and deep dark field behind the hero’s circular artwork. |
| Graphite Panel | `#171717` | `--color-graphite-panel` | surface | Primary background for the rounded feature cards. |
| Quiet Ash | `#6f6f6f` | `--color-quiet-ash` | neutral | Muted supporting text, including the hero descriptor and feature-card descriptions. |
| Outline Charcoal | `#3d3d3d` | `--color-outline-charcoal` | semantic | Fine card borders that separate panels subtly from the dark canvas. |
| Soft White | `#fdfdfd` | `--color-soft-white` | neutral | Primary headings and high-contrast text against dark backgrounds. |
| Acid Lime | `#a6ff00` | `--color-acid-lime` | accent | Join button fill and small Stryds brand mark details. |
| Deep Graphite | `#1c1c1c` | `--color-deep-graphite` | surface | Secondary dark surface for subtle variation within the otherwise near-black page. |

### Semantic aliases

`--color-canvas` → `#101010` (Night Canvas) · `--color-surface` → `#171717` (Graphite Panel) · `--color-surface-2` → `#1c1c1c` (Deep Graphite) · `--color-text` → `#fdfdfd` (Soft White) · `--color-text-muted` → `#6f6f6f` (Quiet Ash) · `--color-text-subtle` → `#101010` (Night Canvas) · `--color-border` → `#3d3d3d` (Outline Charcoal) · `--color-accent` → `#a6ff00` (Acid Lime) · `--color-on-accent` → `#040126`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fdfdfd` | `#101010` | 18.71:1 | AAA |
| `#fdfdfd` | `#171717` | 17.62:1 | AAA |
| `#fdfdfd` | `#1c1c1c` | 16.75:1 | AAA |
| `#6f6f6f` | `#101010` | 3.79:1 | AA-large |
| `#6f6f6f` | `#171717` | 3.57:1 | AA-large |
| `#6f6f6f` | `#1c1c1c` | 3.39:1 | AA-large |
| `#101010` | `#171717` | 1.06:1 | fail |
| `#101010` | `#1c1c1c` | 1.12:1 | fail |
| `#a6ff00` | `#101010` | 15.34:1 | AAA |
| `#a6ff00` | `#171717` | 14.45:1 | AAA |

### Gradients

- `linear-gradient(rgb(23, 23, 23), rgba(255, 255, 255, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Sf Pro Display | `--font-body` | webfont | 500, 600 | Display and interface typography, from oversized hero wordmark to feature headings and body copy. | Inter |

- **Sf Pro Display:** Measured weights 500 and 600; prominent headings use tight negative tracking, with sentence-case text and compact supporting copy.

### Type scale — Golden Ratio (ratio ≈ 1.629, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 183.5px | 600 | 1 | -0.027em | — | Sf Pro Display | Oversized Stryds wordmark within the immersive hero. |
| h1 | 148.5px | 600 | 1 | -0.007em | — | Sf Pro Display | Main hero identity and primary page headline. |
| h2 | 108.5px | 600 | 1 | -0.023em | — | Sf Pro Display | Large feature-showcase headings. |
| h3 | 78px | 500 | 1 | -0.026em | — | Sf Pro Display | Secondary feature titles and prominent card messaging. |
| h4 | 44px | 500 | 1.1 | -0.023em | — | Sf Pro Display | Smaller section headings or card subheads. |
| body | 16px | 500 | 1.25 | -0.012em | — | Sf Pro Display | Feature descriptions, hero descriptor, and supporting interface copy. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 3, 5, 11, 13, 16, 18, 19, 20, 24, 32, 56, 80, 108 px.
- Section rhythm 80px · element gap 16px · card padding 80px · max content width 1062px.

The measured content max width is 1062px, while the hero artwork spans the viewport as a full-bleed focal point. Its wordmark and descriptor are centered; feature-card content is arranged in a left-text, right-visual split. The three cards stack vertically, with generous 80px section gaps and substantial internal card padding. The overall density is comfortable: large dark intervals separate the hero and showcase, while each card keeps copy concise and product imagery prominent.

## Shape & elevation

- Radius: button `9999px` · card `40px` · xs `40px` · pill `9999px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.2) 0px 2px 20px 0px`

The interface favors flat dark surfaces over pronounced shadows. Feature cards are distinguished by a fine #3d3d3d outline and rounded corners; the hero’s concentric graphic supplies depth through layered color and overlap. Small app elements and pill controls sit above the visuals, but do not introduce heavy interface elevation.

## Imagery

The hero is dominated by oversized concentric rainbow rings surrounding a dark central disc, with small circular profile images embedded in the artwork. This vivid spectrum belongs to the hero graphic, not the interface palette. Feature cards use app-style activity metrics, progress rings, and candid lifestyle photos, arranged as compact collages against dark panels.

## Components

### Hero identity

A centered Stryds wordmark and muted app descriptor sit within a full-bleed, circular rainbow illustration on the near-black canvas.

### Join pill

Compact rounded CTA with #a6ff00 fill and #040126 text, visually nested in the hero graphic.

### Feature showcase card

Three vertically stacked #171717 panels with 1px #3d3d3d borders, 40px corners, and generous measured 80px padding.

### Feature copy

Large white, tightly tracked headings sit above short muted-gray descriptions on the left side of each card.

### App activity visuals

Bright metric pills, progress rings, profile images, and social activity snippets bring feature benefits to life inside the cards.

### Journey collage

A loose arrangement of lifestyle photos presents shared personal moments in the final feature card.

### Measured component styles

- **Primary button** (“Join Join”): background #a6ff00 · text #040126 · radius 100px · padding 12.8px 20px · 500 14px Arial
- **Secondary button** (“Join Join”): transparent background · text #040126 · border 2px solid #101010 · radius 100px · padding 16px 20px 16px 56px · 500 14px Arial
- **Card** (“Achieve Your Goals Supercharge your fitn”): background #171717 · text #333333 · border 1px solid #3d3d3d · radius 40px · padding 80px · 400 14px Arial
- **Navigation item**: transparent background · text #333333 · radius 0px · padding 0px · 400 14px Arial

## Do

- Use #101010 as the dominant page canvas.
- Reserve #a6ff00 for primary actions and small brand details.
- Use oversized white display typography with tight tracking.
- Keep descriptions short and muted in gray.
- Showcase product moments inside rounded, outlined dark cards.
- Let colorful app and lifestyle imagery provide visual variety.

## Don't

- Do not turn the rainbow illustration colors into interface accents.
- Do not use bright section backgrounds behind feature content.
- Do not crowd the page with dense navigation or long copy.
- Do not flatten the cards into unstructured text blocks.
- Do not add heavy shadows or glossy interface treatments.
- Do not use sharp-cornered controls or panels.

## Agent prompt

Build a new page in Stryds’ visual style: use Night Canvas (#101010) as the continuous background, with Soft White (#fdfdfd) for large, tightly tracked SF Pro Display-style headings and Quiet Ash (#6f6f6f) for concise supporting copy. Keep Acid Lime (#a6ff00) for the primary CTA and limited brand details; use near-black Graphite Panel (#171717) cards with fine Outline Charcoal (#3d3d3d) borders and strongly rounded corners. Structure the page as an immersive focal section followed by spacious, vertically stacked product showcases. Balance left-aligned copy with right-side app imagery, leaving generous dark breathing room between sections. Use vivid color in product mockups and lifestyle photography rather than adding more interface colors. Keep shadows restrained and the hierarchy simple.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed circular rainbow artwork frames a centered wordmark and descriptor on a near-black page. | Brand introduction, Compact Join CTA | Concentric color bands, Oversized white wordmark, Muted descriptor, Lime pill button |
| 2 | feature-split | Rounded dark card pairs a left-aligned heading and description with colorful activity metrics on the right. | Goal benefit explanation, Fitness metric showcase | Outlined card, White heading, Muted copy, Bright metric pills |
| 3 | feature-split | Dark feature card places concise copy alongside a collage of social moments and progress-ring motifs. | Social motivation, Friend challenge discovery | Rounded card, Photo snippets, Circular progress rings, Muted supporting text |
| 4 | feature-split | Rounded dark card balances left-side explanatory copy with a loose photo collage on the right. | Personal journey sharing, Lifestyle inspiration | Outlined dark panel, Large white heading, Overlapping photos, Muted body copy |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/stryds-com