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

# Riverside · Design System

> A dark studio for human conversations

**Theme:** dark · **Industry:** saas · **Source:** https://riverside.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._

Riverside pairs a dark, restrained SaaS interface with warm, cinematic recording-studio imagery. A vivid purple CTA and generous typography lead visitors through recording, AI editing, publishing, and live-streaming features.

## North star

Keep the interface quiet and dark so real recording imagery leads, while purple marks the next action.

## Overview

The page alternates between a near-black product canvas and pale studio-quality feature bands, using white and muted gray typography to keep dense feature explanations legible. Purple is reserved for the primary conversion button, so it stands out without competing with the content. The hero breaks from the otherwise dark system: a full-bleed, warmly toned studio photograph carries the navigation, oversized centered headline, supporting copy, selectable use-case chips, CTA, and customer logos. Sharp Grotesk gives display and H1 text a spacious, human feel; Instrument Sans handles navigation, body copy, and feature labels with practical clarity. Large media panels show real people, the recording interface, and editing software rather than abstract decoration. Sections shift between centered statements, split layouts, and full-width demonstrations, with comfortable separation and rounded cards. The overall strategy is cinematic but product-specific: let evidence of recording quality and workflow capability do the visual selling.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio White | `#ffffff` | `--color-studio-white` | neutral | Headlines, navigation, button labels, selected borders, and text on dark sections. |
| Deep Canvas | `#111111` | `--color-deep-canvas` | surface | Main dark canvas beneath product demonstrations and most feature sections. |
| Signal Violet | `#9671ff` | `--color-signal-violet` | accent | Primary filled Start for Free buttons; use sparingly against the dark interface. |
| Soft Silver | `#d2d2d2` | `--color-soft-silver` | neutral | Secondary explanatory copy and supporting text on dark backgrounds. |
| Graphite Panel | `#1d1d1d` | `--color-graphite-panel` | surface | Cards, dark panels, and some interface surfaces, subtly distinct from the canvas. |
| Cloud Paper | `#f6f6f6` | `--color-cloud-paper` | surface | Light feature bands for recording-quality demonstrations and their accompanying copy. |
| Slate Text | `#383838` | `--color-slate-text` | semantic | Low-emphasis text and heading details; not a defining brand surface. |
| Dim Charcoal | `#555555` | `--color-dim-charcoal` | semantic | Occasional subdued text; secondary measured color, not a primary interface color. |

### Semantic aliases

`--color-canvas` → `#111111` (Deep Canvas) · `--color-surface` → `#ffffff` (Studio White) · `--color-surface-2` → `#f6f6f6` (Cloud Paper) · `--color-surface-3` → `#1d1d1d` (Graphite Panel) · `--color-text` → `#ffffff` (Studio White) · `--color-text-muted` → `#d2d2d2` (Soft Silver) · `--color-text-subtle` → `#1d1d1d` (Graphite Panel) · `--color-border` → `#ffffff` (Studio White) · `--color-accent` → `#9671ff` (Signal Violet) · `--color-on-accent` → `#ffffff` (Studio White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#111111` | 18.88:1 | AAA |
| `#ffffff` | `#f6f6f6` | 1.08:1 | fail |
| `#ffffff` | `#1d1d1d` | 16.86:1 | AAA |
| `#d2d2d2` | `#111111` | 12.49:1 | AAA |
| `#d2d2d2` | `#ffffff` | 1.51:1 | fail |
| `#d2d2d2` | `#f6f6f6` | 1.4:1 | fail |
| `#d2d2d2` | `#1d1d1d` | 11.15:1 | AAA |
| `#1d1d1d` | `#111111` | 1.12:1 | fail |
| `#1d1d1d` | `#ffffff` | 16.86:1 | AAA |
| `#1d1d1d` | `#f6f6f6` | 15.6:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0), rgb(17, 17, 17))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Instrument Sans | `--font-body` | webfont | 400, 500, 600, 700 | Navigation, body copy, captions, cards, and most interface labels. | Inter |
| Sharp Grotesk | `--font-display` | webfont | 400 | Display headlines and primary hero heading. | Space Grotesk |

- **Instrument Sans:** Use regular to bold weights; compact navigation and body copy stay sentence case, with subtly open tracking.
- **Sharp Grotesk:** Use regular weight for large display text; keep tracking neutral and line breaks deliberate.

### Type scale — Augmented Fourth (ratio ≈ 1.446, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 70px | 400 | 1.25 | 0 | — | Sharp Grotesk | Largest campaign-style statements and prominent feature headlines. |
| h1 | 50px | 400 | 1.25 | 0 | — | Sharp Grotesk | Main hero headline and major page-level heading. |
| h2 | 30px | 500 | 1.35 | 0 | — | Instrument Sans | Section headings introducing feature groups and demonstrations. |
| h3 | 24px | 500 | 1.25 | 0 | — | Instrument Sans | Feature titles and smaller product-story headings. |
| body | 16px | 400 | 1.55 | 0.01em | — | Instrument Sans | Explanatory copy, feature descriptions, and card content. |
| caption | 14px | 400 | 1.55 | 0.011em | — | Instrument Sans | Supporting labels, metadata, and small explanatory text. |
| nav | 14px | 400 | 1.55 | 0.011em | — | Instrument Sans | Header navigation and compact menu labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 5, 6, 7, 8, 10, 12, 14, 16, 20, 23, 24, 26, 30, 31, 32 px.
- Section rhythm 80px · element gap 10px · card padding 33px · max content width 1280px.

The page uses a measured maximum content width of 1280px, with sections that move between centered headline compositions, two-column feature splits, and broad media demonstrations. The first viewport is an immersive full-bleed photographic hero; below it, dark and pale bands establish clear changes in content context. Measured section spacing is generous, while card groups and inline controls remain compact. Align feature copy to the start of its column, reserve centered alignment for campaign statements, and keep the overall density comfortable.

## Shape & elevation

- Radius: button `9999px` · card `8px` · media `4px` · link `9999px` · xs `4px` · sm `8px` · pill `9999px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.25) 0px 4px 15px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat, relying on dark-versus-light section changes and media placement for hierarchy. Cards use a subtly distinct graphite surface with rounded corners; measured cards have an 8px radius. A moderate shadow appears on a product-style card, while borders are limited and light. Use layering mainly for controls and interface mockups over video or photography.

## Imagery

Use documentary-style video and photography of people recording, editing, and presenting. The opening studio image is warm, full-bleed, and atmospheric; later sections show faces, recording setups, and recognizable product UI in framed demonstrations. Maintain natural skin tones and realistic environments. Product imagery should explain workflow or quality, not become abstract decoration; the customer logo row is a supporting proof point.

## Components

### Primary CTA

Filled Signal Violet (#9671ff) pill button with white Instrument Sans text; the repeated Start for Free action.

### Outlined CTA

Compact dark-background option with white text and a thin white outline, using a pill silhouette.

### Header navigation

A restrained horizontal row of small Instrument Sans links over the hero image, ending with a pill-shaped action.

### Use-case chips

Translucent, rounded selectors grouped beneath the hero copy, with a small outlined square icon and white label.

### Feature card

Graphite (#1d1d1d) card with white text, rounded corners, and measured padding around 33px.

### Product demonstration

Large video or interface image framed as evidence of recording quality, editing capability, or live production.

### Customer logo strip

White customer marks placed over the darker lower edge of the hero photograph as compact trust signals.

### Measured component styles

- **Primary button** (“Start for Free”): background #9671ff · text #ffffff · border 1px solid · radius 100px · padding 20px 40px · 500 16px Instrument Sans
- **Secondary button** (“Start for Free”): transparent background · text #ffffff · border 1px solid #ffffff · radius 300px · padding 11px · 500 14px Instrument Sans
- **Link** (“Start for Free”): transparent background · text #ffffff · radius 100px · padding 0px · 500 16px Instrument Sans
- **Card** (“Stream everywhere. All at once. Go live ”): background #1d1d1d · text #ffffff · radius 8px · padding 34px 32px · 400 16px Instrument Sans
- **Navigation item** (“Platform Solutions Use cases Podcasts Vi”): transparent background · text #1d1d1d · radius 0px · padding 0px · 400 16px Instrument Sans

## Do

- Use #111111 as the main interface canvas.
- Reserve #9671ff for high-priority actions.
- Set display headlines in Sharp Grotesk or a close substitute.
- Use real people and product UI as feature evidence.
- Alternate dark sections with clearly bounded pale bands.
- Keep cards rounded and visually quieter than media.

## Don't

- Do not add unmeasured brand colors to the core interface.
- Do not make every section a card grid.
- Do not compete with the hero photograph using extra decoration.
- Do not use purple for large background areas.
- Do not flatten the page into one continuous dark block.
- Do not replace product demonstrations with generic abstract graphics.

## Agent prompt

Build a new Riverside-style SaaS page with a restrained, cinematic product aesthetic. Use Deep Canvas (#111111) for the main dark sections, Graphite Panel (#1d1d1d) for cards, Cloud Paper (#f6f6f6) for occasional light feature bands, and Studio White (#ffffff) for high-contrast headings and controls. Keep Signal Violet (#9671ff) for the primary CTA only. Use a Sharp Grotesk-like display face for large headlines and an Instrument Sans-like sans serif for navigation, body, and UI. Favor wide media demonstrations, real people, recording environments, and believable product screens. Vary centered statements with split feature layouts and full-width imagery; keep content within a measured 1280px maximum width and section rhythm comfortable. Use rounded pills for actions, subtle card corners, minimal borders, and little shadow. Make each section explain a distinct product capability.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed studio photograph with overlaid navigation, centered hero copy, chips, CTA, and logo row. | Use-case selection chips, Primary free-start CTA, Customer trust marks | Warm photographic backdrop, Centered white headline, Purple pill button, Overlay navigation |
| 2 | how-it-works | Dark two-column feature section with centered heading, workflow content, and product media. | Sequential workflow overview, Free-start CTA | Dark canvas, Centered section title, Feature steps, Embedded media |
| 3 | gallery | Centered title above a wide, multi-column strip of creator content. | Browse customer examples | Dark background, Horizontal media gallery, Varied content thumbnails |
| 4 | feature-split | Pale band with a large left-aligned heading and supporting copy in a second column. | Explain local recording quality | Light surface, Two-column text, High-contrast dark copy |
| 5 | product-showcase | Pale two-column media composition with a large participant view and smaller recording details. | Inspect separate tracks, View recording quality | Large video frame, Stacked interface previews, Light band |
| 6 | feature-split | Light full-bleed feature block with copy above a wide audio comparison demonstration. | Listen to audio sample | Pale background, Audio comparison panel, Small listening control |
| 7 | cta | Short dark transition band with a single statement. | Build anticipation for AI tools | Dark canvas, Standalone headline |
| 8 | product-showcase | Dark feature section with introductory headline, copy, and a wide product media composition. | Preview finished episode, Review generated materials | Dark canvas, Video preview, Clips and show-notes panels |
| 9 | video | Full-width video-led interstitial on the dark canvas. | Watch product demonstration | Full-bleed video, Dark surroundings |
| 10 | feature-split | Dark two-column section with feature list on one side and a large participant video on the other. | Choose editing capability, Listen to sample, Free-start CTA | Feature navigation list, Large video frame, Dark interface |
| 11 | product-showcase | Tall photographic product showcase centered on an editing laptop and workflow details. | Explore editing interface, Read customer endorsement | Warm desk photography, Laptop product image, Overlaid testimonial |
| 12 | feature-split | Dark section with a media illustration alongside stacked explanatory feature copy. | Understand distribution, Review audience analytics, Free-start CTA | Dark canvas, Platform-icon illustration, Stacked feature headings |
| 13 | feature-grid | Dark full-width section with a large heading, feature cards, live interface image, and testimonial. | Stream to multiple platforms, Manage audience interaction, Review testimonial | Feature card rows, Live-stream interface, Dark background, Purple CTA |

## Source CSS custom properties (selected)

```css
--brand-black: #1d1d1d;
--tech-gray-text: #d2d2d2;
--primary-purple: #9671ff;
--_site-settings---color: white;
--secondary--black-2: #2c2c2c;
--secondary-c150: #dbdbdb;
--secondary-purple: #ad98fa;
--secondary-c300: #888;
--primary-500: #b196ff;
--_text-colors---color: white;
--_text-styles---font-size: 16px;
--_text-styles---line-height: 22px;
--_typography---font-size--text_18_16: clamp(16px,((16px - ((18px - 16px)/(1440px - 375px)*375px)) + ((18px - 16px)/(1440px - 375px))*100vw),18px);
--_typography---line-height--text_18_16: clamp(24px,((24px - ((26px - 24px)/(1440px - 375px)*375px)) + ((26px - 24px)/(1440px - 375px))*100vw),26px);
--_typography---font-size--h_80_42: clamp(42px,((42px - ((80px - 42px)/(1440px - 375px)*375px)) + ((80px - 42px)/(1440px - 375px))*100vw),80px);
--_typography---font-size--h_80_40: clamp(40px,((40px - ((80px - 40px)/(1440px - 375px)*375px)) + ((80px - 40px)/(1440px - 375px))*100vw),80px);
--_typography---font-size--h_56_30: clamp(30px,((30px - ((56px - 30px)/(1440px - 375px)*375px)) + ((56px - 30px)/(1440px - 375px))*100vw),56px);
--_typography---font-size--h_58_30: clamp(30px,((30px - ((58px - 30px)/(1440px - 375px)*375px)) + ((58px - 30px)/(1440px - 375px))*100vw),58px);
--_typography---font-size--h_50_30: clamp(30px,((30px - ((50px - 30px)/(1440px - 375px)*375px)) + ((50px - 30px)/(1440px - 375px))*100vw),50px);
--_typography---font-size--h_40_30: clamp(30px,((30px - ((40px - 30px)/(1440px - 375px)*375px)) + ((40px - 30px)/(1440px - 375px))*100vw),40px);
--_typography---font-size--h_40_22: clamp(22px,((22px - ((40px - 22px)/(1440px - 375px)*375px)) + ((40px - 22px)/(1440px - 375px))*100vw),40px);
--_typography---font-size--h_40_27: clamp(27px,((27px - ((40px - 27px)/(1440px - 375px)*375px)) + ((40px - 27px)/(1440px - 375px))*100vw),40px);
--_typography---font-size--h_30_24: clamp(24px,((24px - ((30px - 24px)/(1440px - 375px)*375px)) + ((30px - 24px)/(1440px - 375px))*100vw),30px);
--_typography---font-size--h_30_28: clamp(28px,((28px - ((30px - 28px)/(1440px - 375px)*375px)) + ((30px - 28px)/(1440px - 375px))*100vw),30px);
--_typography---font-size--h_24_18: clamp(18px,((18px - ((24px - 18px)/(1440px - 375px)*375px)) + ((24px - 18px)/(1440px - 375px))*100vw),24px);
--_typography---font-size--h_24_20: clamp(20px,((20px - ((24px - 20px)/(1440px - 375px)*375px)) + ((24px - 20px)/(1440px - 375px))*100vw),24px);
--_typography---font-size--text_24_16: clamp(16px,((16px - ((24px - 16px)/(1440px - 375px)*375px)) + ((24px - 16px)/(1440px - 375px))*100vw),24px);
--_typography---line-height--text_24_16: clamp(24px,((24px - ((30px - 24px)/(1440px - 375px)*375px)) + ((30px - 24px)/(1440px - 375px))*100vw),30px);
```

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