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

# Symbolic · Design System

> Editorial clarity on a warm, quiet canvas

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

Symbolic pairs a warm, almost-white canvas with elegant serif headlines and restrained black calls to action. Product imagery, editorial mockups, and generous whitespace make a complex publishing platform feel calm and legible.

## North star

Keep the page calm and editorial: warm near-white space, literary centered headlines, restrained black actions, and product evidence that never overwhelms the content.

## Overview

The page is anchored by a creamy off-white canvas (#fdfcf5), used consistently from the opening hero through the feature sections, so the long homepage reads as one continuous editorial surface. Black (#000000) gives headlines and primary buttons crisp contrast; muted charcoal (#333231) and softer gray (#656562) carry navigation, body copy, and supporting labels. Suisse Works brings a literary, publication-like character to large centered headings, while Open Runde keeps navigation, descriptions, and interface text approachable. The layout alternates centered introductions with broad product imagery, editorial document mockups, and compact metric cards. Wide vertical pauses separate major ideas rather than relying on strong background bands. Cards remain light and gently lifted by subtle shadows; fine cream hairlines define navigation and footer boundaries. A vivid red accent appears sparingly in a small announcement-card detail, not as a dominant interface color.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Cream | `#fdfcf5` | `--color-gallery-cream` | brand | Dominant page canvas across the hero and feature sections; creates the warm, continuous editorial backdrop. |
| Soft Charcoal | `#333231` | `--color-soft-charcoal` | neutral | Primary muted tone for navigation, links, and much of the supporting copy. |
| Quiet Graphite | `#656562` | `--color-quiet-graphite` | neutral | Secondary gray for lower-emphasis body text and explanatory copy. |
| Editorial Ink | `#000000` | `--color-editorial-ink` | brand | Headings, footer text, and high-contrast primary CTA backgrounds. |
| Linen Hairline | `#f5f3e9` | `--color-linen-hairline` | surface | Fine separators and subtle card or footer edges against the cream canvas. |
| Pale Type | `#989894` | `--color-pale-type` | neutral | Occasional faint supporting text and low-priority interface details. |
| Footer Oat | `#eeece1` | `--color-footer-oat` | surface | Subtle footer-related boundary and background detail; keep it secondary to the main canvas. |
| Signal Vermilion | `#ff282d` | `--color-signal-vermilion` | accent | Small decorative detail in an announcement card; use sparingly, not as a broad UI fill. |

### Semantic aliases

`--color-canvas` → `#fdfcf5` (Gallery Cream) · `--color-text` → `#000000` (Editorial Ink) · `--color-text-muted` → `#333231` (Soft Charcoal) · `--color-text-subtle` → `#656562` (Quiet Graphite) · `--color-border` → `#f5f3e9` (Linen Hairline) · `--color-accent` → `#ff282d` (Signal Vermilion)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fdfcf5` | 20.42:1 | AAA |
| `#333231` | `#fdfcf5` | 12.44:1 | AAA |
| `#656562` | `#fdfcf5` | 5.69:1 | AA |
| `#ff282d` | `#fdfcf5` | 3.65:1 | AA-large |

### Gradients

- `linear-gradient(rgb(255, 255, 255), rgb(253, 252, 245))`
- `linear-gradient(rgb(245, 243, 233), rgb(253, 252, 245))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Open Runde | `--font-body` | webfont | 400, 600, 500 | Navigation, body copy, links, captions, and buttons. | Nunito Sans |
| Suisse Works | `--font-display` | webfont | 450, 400 | Display headlines and section headings. | Source Serif 4 |

- **Open Runde:** Use measured regular and medium weights for compact, readable interface text; casing stays natural.
- **Suisse Works:** Use measured regular-style weights for refined editorial headings, generally centered and set in sentence case.

### Type scale — Perfect Fifth (ratio ≈ 1.536, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 58px | 450 | 1.31 | 0 | — | Suisse Works | Large editorial hero headline, centered above supporting copy. |
| h1 | 36px | 450 | 1.5 | 0 | — | Suisse Works | Primary page and major section headlines. |
| h2 | 28px | 450 | 1.5 | 0 | — | Suisse Works | Secondary section titles and feature headings. |
| body | 16px | 400 | 1.63 | 0 | — | Open Runde | Explanatory paragraphs and standard content. |
| caption | 14px | 400 | 1.71 | 0 | — | Open Runde | Small labels, notes, and supporting metadata. |
| button | 16px | 500 | 1.6 | 0 | — | Open Runde | Primary CTA and compact action labels. |
| nav | 16px | 400 | 1.63 | 0 | — | Open Runde | Header navigation links. |
| link | 16px | 400 | 1.63 | 0 | — | Open Runde | Inline and footer links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 15, 16, 19, 20, 24, 40, 50, 80, 100 px.
- Section rhythm 50px · element gap 8px · card padding 21px · max content width 800px.

A centered, single-page flow uses a measured maximum content width of 800px, with wider media allowed to create visual impact. The header spans the viewport; the hero and most section introductions are centered. Later sections mix three-column metrics and process cards with full-width video or product-showcase areas. Sections are separated by generous vertical pauses, while text and controls remain comfortably spaced rather than dense. The footer shifts to a two-column, left-aligned link layout.

## Shape & elevation

- Radius: button `16px` · card `24px` · nav `8px` · xs `8px` · sm `12px` · md `16px` · lg `24px`
- Shadow `sm` (card): `rgba(213, 208, 184, 0.4) 0px 2px 6px 0px`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0.03) 0px 1px 2px 0px`

Most sections sit flat on the shared canvas, with fine cream-toned hairlines instead of strong outlines. Metric and content cards use a soft, low-contrast shadow; document mockups create depth through overlap and paper framing. Keep the header shadow barely perceptible and avoid pronounced elevation or dark card fills.

## Imagery

Use large editorial document mockups to show the same source story transformed into multiple publishing formats, with overlapping sheets and subtle paper-like edges. Place real team photography in a wide rounded frame and product UI screenshots within feature sections. Keep imagery natural and legible against the cream canvas; do not add decorative gradients or heavy image treatments. A few diagrams or interface illustrations can explain workflows.

## Components

### Header navigation

Full-width header with a small multicolor mark, compact Open Runde links, a faint bottom hairline, and a black rounded Sign up button.

### Primary CTA

Black button with white medium-weight Open Runde text, measured 16px type, and 16px corner radius.

### Hero introduction

Centered Suisse Works headline, concise centered supporting copy, and a single black demo-request action above the document showcase.

### Editorial mockup stack

Overlapping memo, newspaper, newsletter, and publishing-package sheets that demonstrate one story adapted to several formats.

### Metric cards

Three compact proof-point cards on the cream canvas, using restrained iconography, black figures, and subtle shadows.

### Feature cards

Light, rounded content cards with modest padding and soft shadows; use product UI or concise process copy as evidence.

### Footer columns

Quiet, subtly differentiated footer with two left-aligned link groups, compact Open Runde text, and a restrained brand sign-off.

### Measured component styles

- **Primary button** (“Sign up”): background #000000 · text #ffffff · radius 16px · padding 8px 20px · 500 16px Open Runde
- **Link** (“Read more…”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Open Runde
- **Card** (“Content publishing teams 2,000+”): transparent background · text #000000 · radius 24px · padding 20px 20px 24px 20px · 400 16px Open Runde · shadow rgba(213, 208, 184, 0.4) 0px 2px 6px 0px
- **Navigation item** (“Team News Security Pricing Log in Sign u”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Open Runde

## Do

- Use #fdfcf5 as the continuous page canvas.
- Set display headlines in a literary serif style.
- Keep navigation, body copy, and controls in a clean sans serif.
- Center section introductions and preserve generous vertical pauses.
- Use #000000 for primary actions and strong text contrast.
- Show publishing workflows through realistic document and product imagery.
- Reserve #ff282d for a small illustrative accent.

## Don't

- Do not introduce saturated color bands across sections.
- Do not replace the warm canvas with stark white or dark backgrounds.
- Do not make every section a bordered card.
- Do not crowd headings, copy, and media together.
- Do not use heavy shadows or thick outlines.
- Do not use the red accent as a default button color.
- Do not let product imagery overpower the editorial hierarchy.

## Agent prompt

Build a new Symbolic-style page as a calm editorial experience for a professional AI publishing product. Use Gallery Cream (#fdfcf5) as the continuous canvas, Editorial Ink (#000000) for headings and primary CTA fills, Soft Charcoal (#333231) and Quiet Graphite (#656562) for navigation and supporting copy, and Linen Hairline (#f5f3e9) for subtle dividers. Use a Suisse Works-like serif for centered, sentence-case headlines and an Open Runde-like sans serif for interface text. Keep the page centered and spacious, with a restrained full-width header, clear section introductions, occasional three-column proof points, and realistic publishing mockups or product UI. Add gentle shadows only to selected cards. Use Signal Vermilion (#ff282d) only as a small decorative detail. Avoid loud backgrounds, dense layouts, and heavy effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Full-width header with brand mark at left and compact links plus a CTA at right. | persistent wayfinding, account entry | fine bottom hairline, black rounded CTA, compact sans-serif links |
| 2 | hero | Centered hero copy above a broad, overlapping editorial document showcase. | demo request, format transformation preview | serif headline, centered copy, black primary button, layered mockups |
| 3 | video | Centered section heading and description, wide team video, then an announcement card. | credibility building, video storytelling, read more | rounded media frame, light announcement card, small red illustration detail |
| 4 | stats | Centered heading above three evenly distributed metric cards. | proof points, quick scanning | three-column cards, small icons, subtle shadows |
| 5 | how-it-works | Centered section title followed by three columns for research, writing, and publishing. | workflow explanation, step-by-step scanning | numbered headings, three-column cards, brief descriptions |
| 6 | feature-split | Centered feature introduction above a wide product-interface demonstration. | verification overview, interface inspection | serif title, product screenshot, light interface details |
| 7 | feature-split | Centered text-led feature section with generous open space for product or workflow media. | explain task routing, quality assurance | centered heading, short supporting copy, minimal media treatment |
| 8 | feature-split | Centered feature heading and explanatory copy with a broad, spacious visual area. | reuse best practices, organizational learning | centered introduction, restrained feature illustration |
| 9 | feature-grid | Centered section intro, four compact assurance items, and a read-more action. | security reassurance, policy exploration | four-column assurances, small line icons, black CTA |
| 10 | footer | Subtly differentiated footer with two left-aligned link columns and a brand sign-off. | secondary navigation, company and product discovery | two-column link groups, compact labels, quiet background shift |

## Source CSS custom properties (selected)

```css
--radius-button: 16px;
--radius-field: 10px;
--shadow: 0 2px 6px #d5d0b866;
```

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