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

# ALSO · Design System

> Playful mobility, framed with bold contrast.

**Theme:** light · **Industry:** ecommerce · **Source:** https://ridealso.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._

ALSO pairs full-bleed bike imagery with a crisp black-and-white interface and vivid purple accents. The homepage moves between immersive product moments, community photography, press quotes, editorial stories, and a dark, oversized brand-led footer.

## North star

Keep the interface stark and legible, then let immersive mobility photography and targeted purple blocks carry the brand’s energy.

## Overview

The visual identity balances restrained interface colours with expressive photography and a bold purple accent. White provides the main canvas; black and near-black define navigation, labels, CTA surfaces, and dark content bands. Purple marks key promotional moments, press content, and the newsletter, while the deep violet footer gives the page a distinct ending. Typography contrasts a light, tightly tracked display sans with a heavy, uppercase utility face for navigation and eyebrow labels. The layout shifts between expansive hero media, a compact three-card entry point, horizontal content rails, and broad feature imagery rather than repeating one rigid grid. Rounded buttons and cards soften the otherwise high-contrast composition. Product and lifestyle photos supply most of the colour and texture; interface chrome stays simple, allowing bikes, riders, and real-world settings to remain the focus.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Absolute Ink | `#000000` | `--color-absolute-ink` | neutral | Core text and inverse surfaces; appears in dark content sections, solid READ MORE buttons, and strong outlines. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas and card surface; also provides contrast for navigation and text on dark areas. |
| Electric Orchid | `#ac74fc` | `--color-electric-orchid` | brand | Signature accent for primary SHOP GEAR and BUILD YOUR TM-B buttons, press band, and newsletter area. |
| Soft Alloy | `#d9d9d9` | `--color-soft-alloy` | surface | Measured neutral section and button surface; use as a secondary quiet band, not as the dominant canvas. |
| Near-Black | `#0b0b0b` | `--color-near-black` | neutral | Secondary text and fine borders, including card controls and subtle button outlines. |
| Graphite | `#1f1f1f` | `--color-graphite` | neutral | Navigation and text on light surfaces, plus dark footer and section details. |
| Footer Violet | `#361a5b` | `--color-footer-violet` | brand | Deep inverse footer surface, supporting the oversized purple wordmark and light utility links. |
| Vivid Violet | `#8a38f5` | `--color-vivid-violet` | accent | Secondary measured accent for section treatments; retain for selective graphic or promotional emphasis. |
| Cloud Grey | `#cccccc` | `--color-cloud-grey` | surface | Measured pale section surface; a subdued alternative to white for separating content. |
| Lime Flash | `#b1ff8f` | `--color-lime-flash` | accent | Small accent on a button; use sparingly as a contrasting highlight rather than a broad background. |
| Warm Porcelain | `#fff1e8` | `--color-warm-porcelain` | surface | Warm pale section tint visible around the introductory card area. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#d9d9d9` (Soft Alloy) · `--color-surface-2` → `#000000` (Absolute Ink) · `--color-surface-3` → `#361a5b` (Footer Violet) · `--color-surface-4` → `#cccccc` (Cloud Grey) · `--color-text` → `#000000` (Absolute Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#0b0b0b` (Near-Black) · `--color-border` → `#0b0b0b` (Near-Black) · `--color-accent` → `#ac74fc` (Electric Orchid) · `--color-accent-2` → `#8a38f5` (Vivid Violet) · `--color-accent-3` → `#b1ff8f` (Lime Flash) · `--color-on-accent` → `#1f1f1f` (Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#d9d9d9` | 14.88:1 | AAA |
| `#000000` | `#361a5b` | 1.46:1 | fail |
| `#ffffff` | `#d9d9d9` | 1.41:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#361a5b` | 14.43:1 | AAA |
| `#0b0b0b` | `#ffffff` | 19.68:1 | AAA |
| `#0b0b0b` | `#d9d9d9` | 13.94:1 | AAA |
| `#0b0b0b` | `#000000` | 1.07:1 | fail |
| `#0b0b0b` | `#361a5b` | 1.36:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABCCameraPlainVariable | `--font-display` | webfont | 400 | Display headings, editorial copy, and uppercase links. | Manrope |
| Serial C | `--font-body` | webfont | 900 | Body emphasis, navigation, and eyebrow labels. | Barlow Condensed |

- **ABCCameraPlainVariable:** Use regular weight for large headings, tight negative tracking, and natural case; links are uppercase.
- **Serial C:** Heavy weight with tracked uppercase navigation and eyebrow labels; use for concise functional copy.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 0.94 | -0.055em | — | ABCCameraPlainVariable | Oversized hero and brand statements. |
| h1 | 60px | 400 | 0.93 | -0.05em | — | ABCCameraPlainVariable | Primary hero headline and major campaign message. |
| h2 | 44px | 400 | 1.09 | -0.045em | — | ABCCameraPlainVariable | Section headings such as Stories or feature titles. |
| h3 | 32px | 400 | 1.12 | -0.047em | — | ABCCameraPlainVariable | Card and editorial feature headings. |
| h4 | 24px | 400 | 1.16 | -0.042em | — | ABCCameraPlainVariable | Smaller supporting headings and card titles. |
| body | 16px | 900 | 1.5 | 0 | — | Serial C | Bold utility copy and compact supporting text. |
| nav | 16px | 900 | 1.25 | 0.063em | uppercase | Serial C | Uppercase primary navigation labels. |
| link | 16px | 400 | 1.5 | -0.016em | uppercase | ABCCameraPlainVariable | Uppercase action links and compact calls to action. |
| eyebrow | 16px | 900 | 1.5 | 0.063em | uppercase | Serial C | Tracked uppercase labels above or beside section content. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 8, 12, 15, 16, 20, 24, 32, 40, 56, 62, 80 px.
- Section rhythm 40px · element gap 12px · card padding 20px · max content width —.

The page spans a broad desktop canvas, with measured content arranged in fluid columns rather than a fixed max-width container. A full-bleed hero leads into a three-card entry row, then horizontal image and press rails, a large product feature, story cards, newsletter, and footer. Alignment alternates between centered hero messaging and left-aligned editorial sections. Section changes are carried by imagery and background bands, not excessive separators. Keep internal spacing compact and purposeful, with larger breathing room around major media.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `8px` · nav `9999px` · link `9999px` · xs `8px` · sm `16px` · pill `9999px`
- Shadow `hairline` (button, link): `rgb(56, 27, 94) 0px 2px 0px 0px`
- Shadow `hairline-2` (card): `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px`
- Shadow `hairline-3` (button): `rgb(11, 11, 11) 0px 2px 0px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 1, 1)` on interactive elements.

The page is mostly flat, relying on full-width colour bands and image contrast to separate sections. Cards use restrained, subtle shadows, while buttons have compact hard-edged shadow lines. Borders are sparse and dark where functional controls need definition; rounded pills and cards provide the main component layering.

## Imagery

Use real-world bike, rider, and cargo photography as the primary visual material, with occasional product-focused scenes and embedded social clips. Hero media is full-bleed and atmospheric; card imagery is tightly framed with rounded corners. Preserve natural settings and photographic colour rather than applying heavy brand filters. Purple appears as a graphic overlay or supporting interface colour, not as a replacement for the photography.

## Components

### Announcement strip

A narrow, high-contrast booking prompt sits above the main navigation, with centered uppercase copy and a warm orange appearance in the screenshot.

### Pill CTA

Use rounded pill buttons. Primary SHOP GEAR and BUILD YOUR TM-B actions use #ac74fc with dark text and a violet hard shadow; READ MORE uses black with white uppercase text.

### Entry card row

Three image-led destinations introduce test rides, bike building, and gear shopping; place concise labels and small pill actions over or near the photographs.

### Community media rail

A dark band holds a horizontal series of tall rider and bike clips, with compact controls and a small uppercase social label.

### Press quote tiles

A vivid purple section groups white rectangular quote cards with short uppercase headlines and publication marks.

### Story cards

White, rounded cards combine a press or product image, concise headline, and black pill READ MORE action on a dark field.

### Newsletter block

A purple band introduces mailing-list signup with prominent heading, short prompt, email field, and a contrasting submit action.

### Brand footer

A deep violet footer organizes link columns and social links, finished with an oversized violet ALSO wordmark.

### Measured component styles

- **Primary button** (“SHOP GEAR”): background #ac74fc · text #1f1f1f · radius 999px · padding 12px 24px · 900 16px Serial C · uppercase · shadow rgb(56, 27, 94) 0px 2px 0px 0px
- **Secondary button** (“READ MORE”): background #000000 · text #ffffff · radius 999px · padding 8px 20px · 900 16px Serial C · uppercase · shadow rgb(11, 11, 11) 0px 2px 0px 0px
- **Link** (“"FUN TO RIDE AND SURPRISINGLY DIFFICULT ”): background #ffffff · text #0b0b0b · border 1px solid #000000 · radius 0px · padding 32px · 400 16px ABCCameraPlainVariable
- **Card** (“TM-B wins two 2026 Fast Company Design A”): background #ffffff · text #ffffff · radius 16px · padding 20px · 400 16px ABCCameraPlainVariable · shadow rgba(0, 0, 0, 0.08) 0px 1px 2px 0px
- **Navigation item** (“ALSO SHOP BIKE COMPANY SUPPORT TEST SPIN”): transparent background · text #1f1f1f · radius 0px · padding 0px · 400 16px ABCCameraPlainVariable

## Do

- Use full-bleed photography for the hero and major product moments.
- Reserve #ac74fc for prominent accents and clear calls to action.
- Keep navigation and utility labels uppercase and strongly weighted.
- Use rounded pills for buttons and rounded corners for image cards.
- Alternate dark media bands with light editorial sections.
- Let product and rider photography provide most of the visual texture.

## Don't

- Do not turn every section into a purple block.
- Do not overlay dense interface chrome on full-bleed imagery.
- Do not replace real-world product photography with generic illustrations.
- Do not use soft gradients; the measured page has none.
- Do not make cards feel heavily elevated or outlined.
- Do not use widely spaced, delicate text for functional labels.

## Agent prompt

Build a new ALSO page with a light, uncluttered canvas and bold mobility photography. Use Gallery White (#ffffff) for primary surfaces, Absolute Ink (#000000) and Graphite (#1f1f1f) for text and dark bands, and Electric Orchid (#ac74fc) for key buttons and selective section accents. Keep the display sans light and tightly tracked; use a heavy, uppercase utility face for navigation and eyebrow labels. Structure the page as broad media-led sections, alternating full-bleed imagery, compact rounded-card groups, and horizontal editorial rails. Make CTAs pill-shaped with concise uppercase labels and restrained hard shadows. Keep borders and elevation minimal. Let real bikes, riders, and cargo scenes dominate the visual storytelling, and finish with a deep violet footer and oversized brand typography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed hero media with overlaid navigation and centered campaign actions. | Book a test spin, Shop gear, Build a bike | Overlay navigation, Pill CTAs, Centered campaign graphic |
| 2 | category-nav | Three image-led destination cards in a compact row. | Choose a destination, Explore category | Rounded image cards, Short labels, Pill actions |
| 3 | gallery | Dark social-media band with a horizontal rail of tall video and image tiles. | Browse community media, Mute or unmute, Carousel navigation | Tall media cards, Dark background, Compact controls |
| 4 | testimonials | Purple band with a horizontal row of quote and publication tiles. | Browse press coverage, Move between quotes | White quote cards, Publication marks, Arrow controls |
| 5 | product-showcase | Large product-led feature with copy and a discovery link over or beside imagery. | Discover the product | Wide product image, Short supporting copy, Compact CTA |
| 6 | content-feed | Dark editorial section with a horizontal row of white story cards. | Browse stories, Read more, Carousel navigation | Image-led cards, Rounded white surfaces, Black pill actions |
| 7 | newsletter | Single-column signup band with heading, email fields, and action. | Join mailing list, Submit email | Purple surface, Prominent heading, Email input and CTA |
| 8 | footer | Deep violet footer with grouped link columns, social links, and oversized wordmark. | Browse site links, Visit social channels | Multi-column link groups, Dark violet surface, Large brand wordmark |

## Source CSS custom properties (selected)

```css
--color-2-a-m: #303b85;
--color-cold-harbor: #edf0ff;
--color-error: #dc3127;
--color-gi-gi: #ffcc08;
--color-gi-gi-200: #ffe88d;
--color-gi-gi-300: #ffdd5a;
--color-gi-gi-400: #ffd639;
--color-gi-gi-50: #fffae6;
--color-gi-gi-500: #ffcc08;
--color-gi-gi-600: #e8ba07;
--color-gi-gi-700: #b59106;
--color-gi-gi-800: #8c7004;
--color-gi-gi-900: #6b5603;
--color-gi-gi-950: #3a2e00;
--color-gigi-100: #ffefb2;
--color-green-100: #c7d8bf;
--color-green-200: #acc6a0;
--color-green-300: #86ab75;
--color-green-400: #6e9b5a;
--color-green-50: #edf3ea;
--color-green-500: #4a8231;
--color-green-600: #43762d;
--color-green-700: #355c23;
--color-green-800: #29481b;
--color-green-900: #1f3715;
--color-ice-cream: #f7eaff;
--color-innie: #ececec;
--color-midnight: #381b5e;
--color-moci: #fff5ec;
--color-moss: #514933;
--color-mutant: #b1ff8e;
--color-mutant-100: #e7ffdc;
--color-mutant-200: #dbffcb;
--color-mutant-300: #cbffb3;
--color-mutant-400: #c1ffa5;
--color-mutant-50: #f7fff4;
--color-mutant-500: #b1ff8e;
--color-mutant-600: #a1e881;
--color-mutant-700: #7eb565;
--color-mutant-800: #618c4e;
```

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