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

# SpatialChat · Design System

> A bright, spatial stage for human connection

**Theme:** light · **Industry:** saas · **Source:** https://spatial.chat/ · **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._

SpatialChat pairs a crisp white SaaS layout with a vivid blue-violet gradient hero and product-led storytelling. Rounded interface imagery, customer proof, and repeated demo actions make the long homepage feel approachable and conversion-focused.

## North star

Keep the page calm and white-led, reserving saturated gradients for immersive product moments and violet for clear actions.

## Overview

The visual identity is built on a white canvas, dark readable headings, muted gray supporting copy, and a strong violet CTA. The hero is the key exception: a luminous cyan-to-blue-to-violet field carries centered white typography and gives the page its immersive, event-like character. Satoshi is used throughout, with large, calm headings and compact body copy; capitalization is restrained outside the measured title treatment. The page alternates centered explanation and logos with left-right product feature blocks, then shifts into pale gray section bands for platform categories, metrics, testimonials, and FAQs. Product imagery is prominent and presented in rounded, dark-framed interface captures rather than decorative illustration. Cards remain mostly flat, defined by delicate gray borders and subtle shadows. Generous section breaks and repeated violet buttons keep the extensive content scannable without losing the consistent product-led rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas, navigation, and most open content sections; also appears in button text and media frames. |
| Event Violet | `#5727e7` | `--color-event-violet` | brand | Primary CTA fill, announcement strip, active category tab, and small interface accents. |
| Slate Copy | `#4b5563` | `--color-slate-copy` | neutral | Muted body text and explanatory copy throughout the white and pale-gray sections. |
| Cloud Panel | `#f9fafb` | `--color-cloud-panel` | surface | Alternating section bands, soft cards, and the platform, stats, testimonial, and FAQ backgrounds. |
| Quiet Line | `#e5e7eb` | `--color-quiet-line` | semantic | Fine card, button, and media borders that separate content without heavy contrast. |
| Midnight Ink | `#030712` | `--color-midnight-ink` | neutral | High-emphasis headings and selected primary text. |
| Sky Current | `#3fa6ff` | `--color-sky-current` | accent | Bright blue component of the immersive hero gradient; not a general page surface. |
| Mist Gray | `#f3f4f6` | `--color-mist-gray` | surface | Secondary card and interface surfaces, used sparingly beneath content. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Minor navigation and link text instances; not the dominant text color. |
| Signal Cyan | `#0caef3` | `--color-signal-cyan` | accent | Small accent button and interface highlights; use sparingly. |
| Vivid Iris | `#6a4cff` | `--color-vivid-iris` | accent | Radial-gradient color in the hero and selected immersive sections. |
| Electric Blue | `#3d9cff` | `--color-electric-blue` | accent | Radial-gradient highlight within the hero’s blue-violet field. |
| Glacier Glow | `#6feaff` | `--color-glacier-glow` | accent | Cyan gradient highlight, mainly within the hero treatment. |
| Azure Pulse | `#3e6dff` | `--color-azure-pulse` | accent | Blue gradient stop supporting the hero’s luminous color transition. |
| Lavender Haze | `#f5f0ff` | `--color-lavender-haze` | surface | Pale gradient tint used as a subtle section or gradient endpoint. |
| Soft Divider | `#d1d5db` | `--color-soft-divider` | semantic | Occasional subdued borders and secondary separators. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9fafb` (Cloud Panel) · `--color-surface-2` → `#f3f4f6` (Mist Gray) · `--color-text` → `#030712` (Midnight Ink) · `--color-text-muted` → `#4b5563` (Slate Copy) · `--color-text-subtle` → `#000000` (Pure Black) · `--color-border` → `#e5e7eb` (Quiet Line) · `--color-accent` → `#5727e7` (Event Violet) · `--color-accent-2` → `#0caef3` (Signal Cyan) · `--color-accent-3` → `#3fa6ff` (Sky Current) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#030712` | `#ffffff` | 20.13:1 | AAA |
| `#030712` | `#f9fafb` | 19.27:1 | AAA |
| `#030712` | `#f3f4f6` | 18.3:1 | AAA |
| `#4b5563` | `#ffffff` | 7.56:1 | AAA |
| `#4b5563` | `#f9fafb` | 7.23:1 | AAA |
| `#4b5563` | `#f3f4f6` | 6.87:1 | AA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f9fafb` | 20.1:1 | AAA |
| `#000000` | `#f3f4f6` | 19.08:1 | AAA |
| `#5727e7` | `#ffffff` | 7.37:1 | AAA |

### Gradients

- `radial-gradient(circle at 70% 85%, rgb(106, 76, 255), rgba(0, 0, 0, 0) 45%), radial-gradient(circle at 80% 30%, rgb(61, 156, 255), rgba(0, 0, 0, 0) 40%), radial-gradient(circle at 0px 1%, rgb(111, 234, 255), rgba(0, 0, 0`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Satoshi | `--font-body` | webfont | 400, 500, 700 | All page typography, including navigation, headings, body copy, buttons, and links. | Manrope |

- **Satoshi:** Webfont in regular, medium, and bold weights; headings are large and clean, with no tracking shift. Button and navigation labels stay medium-weight.

### Type scale — Major Third (ratio ≈ 1.272, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 700 | 1.3 | 0 | — | Satoshi | Largest hero or high-impact display statements. |
| h1 | 48px | 500 | 1.3 | 0 | capitalize | Satoshi | Primary page and major section headings. |
| h2 | 44px | 500 | 1.3 | 0 | — | Satoshi | Prominent section titles such as platform and proof headings. |
| h3 | 40px | 500 | 1.3 | 0 | — | Satoshi | Feature and supporting section headings. |
| h4 | 32px | 500 | 1.3 | 0 | — | Satoshi | Card or subsection titles within feature content. |
| body | 18px | 400 | 1.5 | 0 | — | Satoshi | Explanatory paragraphs and feature descriptions. |
| caption | 16px | 400 | 1.4 | 0 | — | Satoshi | Compact supporting labels and testimonial details. |
| button | 16px | 500 | 1.5 | 0 | — | Satoshi | CTA labels and compact action controls. |
| nav | 16px | 500 | 1.6 | 0 | — | Satoshi | Header navigation links and menu labels. |
| link | 16px | 500 | 1.5 | 0 | — | Satoshi | Inline links and secondary navigation actions. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 15, 16, 20, 24, 25, 32, 40, 60, 64 px.
- Section rhythm 80px · element gap 16px · card padding 14px · max content width 1200px.

The measured content uses a 1200px maximum-width frame with comfortable density and a 4px base spacing unit. The navigation and hero begin with centered alignment; the homepage then alternates centered logo and product sections with two-column feature stories. Pale bands distinguish selected content groups. Repeated section breaks create a spacious long-scroll rhythm, while cards, metric tiles, and FAQ rows keep dense information organized. A consistent 16px element gap supports compact internal groupings.

## Shape & elevation

- Radius: button `12px` · card `16px` · media `50%` · nav `8px` · xs `8px` · sm `12px` · md `16px` · lg `18px` · xl `24px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.06) 0px 4px 28px 0px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0.06) 0px 1px 2px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.06) 0px 4px 16px 0px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0.06) 0px 4px 8px 0px`
- Shadow `lg-2` (card): `rgba(0, 0, 0, 0.1) 0px 4px 44px 0px`
- Shadow `sm-2` (media): `rgba(0, 0, 0, 0.2) 0px 2px 5px 0px`
- Motion: standard transition `0.35s ease-in-out` on interactive elements.

The interface favors flat white and pale-gray surfaces. Fine gray borders define cards and media, while cards receive restrained soft shadows rather than strong elevation. Product screenshots have darker frames and stronger visual weight, separating them from surrounding copy. Rounded corners soften CTA buttons, navigation controls, and cards without making the page feel ornamental.

## Imagery

Product imagery is the main visual proof: dark-framed screenshots show virtual rooms, meetings, and event interfaces, often with participant avatars and controls. A video-style interface capture anchors the early product explanation. Customer logos, testimonial cards, and event photography add evidence and human context. Images sit in rounded media frames; the hero itself is primarily a broad gradient field rather than a photographic backdrop.

## Components

### Announcement bar

A full-width violet strip above the navigation, with centered white linked text and a close control.

### Primary CTA

Violet fill, white medium-weight Satoshi label, 12px radius, and measured vertical padding of 12px.

### Navigation

White horizontal header with brand mark, compact text links, outlined secondary actions, and a violet free-start action.

### Feature card

Pale-gray surface, fine #e5e7eb border, rounded corners, and concise dark heading with supporting text.

### Product media

Large rounded, dark-framed virtual event or meeting screenshot, shown beside or beneath explanatory copy.

### Proof tiles

Logo, metric, or testimonial content grouped in clean cards with ample white space and subtle separators.

### FAQ row

A simple question row on a pale section band, separated by light rules and ending in a plus affordance.

### Measured component styles

- **Primary button** (“Book a Demo”): background #5727e7 · text #ffffff · border 1px solid #5727e7 · radius 12px · padding 12px 24px · 500 16px Satoshi
- **Secondary button** (“Webinars”): transparent background · text #222222 · border 1px solid #e5e7eb · radius 12px · padding 12px · 400 16px Satoshi · shadow rgba(0, 0, 0, 0.06) 0px 1px 2px 0px
- **Link** (“SpatialChat Acquires Teemyco to Accelera”): transparent background · text #ffffff · radius 0px · padding 15px 0px · 500 16px Satoshi
- **Card** (“2x Engagement”): background #f9fafb · text #333333 · border 1px solid #e5e7eb · radius 12px · padding 14px · 500 18px Satoshi
- **Navigation item** (“Platform Solutions Pricing Resources Spa”): transparent background · text #333333 · radius 0px · padding 0px · 500 18px Satoshi

## Do

- Use white as the default canvas and let content breathe.
- Reserve the blue-violet gradient for immersive hero-like moments.
- Use #5727e7 consistently for the main action.
- Set product screenshots in rounded, dark media frames.
- Alternate centered introductions with paired feature layouts.
- Use pale-gray bands to signal changes in content grouping.

## Don't

- Do not turn every section into a gradient panel.
- Do not replace product evidence with generic decorative art.
- Do not use heavy shadows or thick borders on ordinary cards.
- Do not crowd the centered hero with extra content.
- Do not introduce unrelated accent colors beyond the measured palette.
- Do not make secondary copy compete with the headings or CTAs.

## Agent prompt

Build a new SpatialChat-style SaaS page with a bright, product-led feel. Use Gallery White (#ffffff) for the main canvas, Midnight Ink (#030712) for headings, Slate Copy (#4b5563) for supporting text, and Cloud Panel (#f9fafb) for selected section bands. Make the primary action Event Violet (#5727e7), with white text and rounded corners. Use a wide cyan-blue-violet gradient sparingly for an immersive hero or product moment, not as a default section background. Set all text in Satoshi or a close sans-serif substitute such as Manrope. Structure content with a centered intro, paired feature stories, product screenshots in dark rounded frames, customer proof, metrics, and a restrained FAQ. Keep borders delicate, shadows subtle, and spacing comfortable.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Announcement strip above a full-width horizontal navigation bar. | Announcement link, Primary and secondary actions, Close control | Violet announcement band, White navigation, Outlined and filled buttons |
| 2 | hero | Centered text and actions over a broad full-width gradient field. | Book a demo, Try for free, Trust proof | Blue-violet gradient, Large white heading, Compact badges |
| 3 | logo-cloud | Centered heading above a single horizontal row of organization logos. | Social proof | White canvas, Logo tiles, Even horizontal distribution |
| 4 | video | Centered heading and copy above a large product video or interface capture. | Product explanation, Video demonstration | Centered intro, Dark rounded media frame |
| 5 | integrations | Centered title above a horizontal row of LMS marks and a small action. | Browse integrations | Logo strip, Violet action button |
| 6 | product-showcase | Centered heading, category tabs, then a wide product interface image. | Switch product categories, Explore platform | Pale-gray section band, Active violet tab, Dark screenshot frame |
| 7 | feature-split | Long sequence of paired text and product imagery, alternating sides. | Feature discovery, Metric proof, Explore feature links | White canvas, Small feature labels, Violet buttons, Rounded media |
| 8 | feature-split | Two-column customer story card with copy on one side and event imagery on the other. | Read customer story | Pale bordered card, Rounded image, Compact CTA |
| 9 | stats | Centered section title followed by four evenly distributed metric tiles. | Quantified trust | Pale-gray band, Large numerals, Quiet card divisions |
| 10 | testimonials | Centered heading and short lead-in above a horizontally arranged testimonial sequence. | Customer validation | Pale surface, Card-based quotes |
| 11 | testimonials | Horizontal row of testimonial cards with quotes and customer identities. | Scan customer quotes, Recognize organizations | White cards, Logo marks, Portraits and attribution |
| 12 | pricing | Two-column feature card with event image beside text and pricing action. | View pricing | Pale lavender-tinted panel, Rounded image, Violet button |
| 13 | integrations | Wide split panel with explanatory copy and app marks. | View integrations | Soft neutral panel, Tool logos, Compact CTA |
| 14 | feature-grid | Centered heading and introduction above a three-column, two-row card grid. | Review security assurances | White cards, Small violet icons, Fine separators |
| 15 | faq | Centered heading above a narrow vertical stack of question rows. | Expand answers, Scan common concerns | Pale-gray band, White rows, Plus affordances |
| 16 | logo-cloud | Centered label above a single row of publication marks. | Publication proof | White canvas, Monochrome media logos |

## Source CSS custom properties (selected)

```css
--text-color: #333c;
--primary-4: #d1eef6;
--primary-1: #5727e7;
--box-bg: #b3b3b31a;
--box-bg-for-dark: #ffffff26;
--border: #0000001a;
--grey-text: #8b8b8bcc;
--primary-3: #f54848;
--modal-bg: #000000b3;
--radius-big: 24px;
--primary-2: #18c77e;
```

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