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

# OpenWeb · Design System

> Warm editorial design for open-internet communities

**Theme:** light · **Industry:** media · **Source:** https://www.openweb.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._

OpenWeb pairs a warm, restrained palette and expressive serif typography with a long-form story about audience participation. Community photography, concise proof points, product explanations, testimonials, articles, and a contact form create a clear path from brand introduction to inquiry.

## North star

Let warm editorial typography and generous breathing room make human community the focus, using dark CTAs as clear anchors.

## Overview

The page is grounded in a pale, warm canvas (#f1e9e7), with subtly differentiated off-white panels and near-black text creating contrast without a stark white-and-black feel. Copernicus serif typography defines the identity: oversized centered headlines establish an editorial voice, while smaller serif copy carries the narrative through feature sections and testimonials. DM Sans appears sparingly in lighter supporting roles. The layout is spacious and centered within a measured 1092px maximum content width, alternating broad text-led areas with grids, split product sections, and a restrained logo row. Photography of people and community activity gives the otherwise quiet page human texture; product imagery sits alongside explanatory copy rather than dominating the canvas. Black CTAs remain visually decisive, while blue marks selected links. Cards use pale fills and subtle rounding, with fine dark rules organizing navigation, testimonials, and article cards. The bright magenta measured border color is incidental noise, not a defining page treatment.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Editorial Ink | `#000000` | `--color-editorial-ink` | brand | Primary text, headings, navigation, dark CTA fills, and the fine rules that structure content. |
| Warm Canvas | `#f1e9e7` | `--color-warm-canvas` | surface | Dominant page background across the hero and most long-form sections. |
| Soft Porcelain | `#f8f4f3` | `--color-soft-porcelain` | surface | Light card and link-panel fill, including statistic cards and publisher feature cards. |
| Blush Band | `#efe3e1` | `--color-blush-band` | surface | Subtle alternate section surface that adds a quiet tonal shift to the otherwise continuous warm canvas. |
| Signal Blue | `#0058fe` | `--color-signal-blue` | accent | Selected inline links and publisher feature links; a restrained highlight, not a dominant background. |
| Muted Clay | `#e8dcd6` | `--color-muted-clay` | surface | Minor supporting surface variation; keep its presence subtle and secondary to the main canvas. |
| Incidental Magenta | `#ff3cfe` | `--color-incidental-magenta` | semantic | Measured as a border/text accent but not visually defining; do not apply as a prominent brand color. |

### Semantic aliases

`--color-canvas` → `#f1e9e7` (Warm Canvas) · `--color-surface` → `#f8f4f3` (Soft Porcelain) · `--color-surface-2` → `#efe3e1` (Blush Band) · `--color-surface-3` → `#e8dcd6` (Muted Clay) · `--color-text` → `#000000` (Editorial Ink) · `--color-border` → `#ff3cfe` (Incidental Magenta) · `--color-accent` → `#0058fe` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f1e9e7` | 17.55:1 | AAA |
| `#000000` | `#f8f4f3` | 19.23:1 | AAA |
| `#000000` | `#efe3e1` | 16.75:1 | AAA |
| `#000000` | `#e8dcd6` | 15.64:1 | AAA |
| `#0058fe` | `#f1e9e7` | 4.59:1 | AA |
| `#0058fe` | `#f8f4f3` | 5.02:1 | AA |
| `#0058fe` | `#efe3e1` | 4.38:1 | AA-large |
| `#0058fe` | `#e8dcd6` | 4.09:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Copernicus | `--font-body` | webfont | 400, 700 | Display and editorial type across hero headlines, section headings, body copy, navigation, links, and CTAs. | Libre Baskerville |
| DM Sans | `--font-dm-sans` | webfont | 300, 400 | Small supporting captions and lighter secondary labels. | DM Sans |

- **Copernicus:** Use regular weight for most text and occasional bold; large headings have notably tight negative tracking. Keep natural sentence case.
- **DM Sans:** Use light weight sparingly for captions; keep labels understated and sentence case.

### Type scale — Perfect Fourth (ratio ≈ 1.348, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1.05 | -0.063em | — | Copernicus | Large editorial hero headline and other prominent display statements. |
| h1 | 78px | 400 | 0.97 | -0.064em | — | Copernicus | Primary page headline, centered and broken into expressive lines. |
| h2 | 42px | 400 | 1.05 | -0.06em | — | Copernicus | Major section headings, including system, contact, and editorial introductions. |
| h3 | 36px | 400 | 1.1 | -0.069em | — | Copernicus | Feature and subsection headings within product and information blocks. |
| h4 | 30px | 400 | 1.17 | -0.047em | — | Copernicus | Smaller card and supporting section headings. |
| body | 18px | 400 | normal | -0.01em | — | Copernicus | Main explanatory paragraphs and narrative copy. |
| caption | 16px | 300 | 1.1 | -0.019em | — | DM Sans | Small supporting labels, metadata, and secondary copy. |
| nav | 15px | 400 | normal | -0.012em | — | Copernicus | Header navigation and compact menu labels. |
| link | 18px | 400 | normal | -0.01em | — | Copernicus | Inline calls to action and publisher feature links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 4, 6, 8, 9, 10, 12, 14, 18, 20, 21, 22, 24, 30, 31, 32 px.
- Section rhythm 120px · element gap 14px · card padding 35px · max content width 1092px.

Use a centered content frame with a measured maximum width of 1092px and generous outer margins. The page is spacious and primarily single-column, with centered hero and section introductions leading into two- and three-column feature, statistic, testimonial, and article arrangements. Alternate these with side-by-side product or contact layouts. Preserve the long-form scroll rhythm: sections have substantial separation, while related card content stays grouped. Use centered alignment for brand statements and grids; switch to left alignment for practical copy and form content.

## Shape & elevation

- Radius: button `5px` · card `5px` · link `5px` · xs `5px`
- Shadow `sm` (other): `rgb(128, 128, 128) 0px 0px 5px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Favor flat surfaces over pronounced shadow. Separate content with pale tonal shifts, thin dark rules, and modest rounded card corners rather than floating layers. Cards sit directly on the warm canvas, while imagery and product screenshots provide most of the visual depth. Keep borders quiet and avoid treating the measured magenta as a standard divider.

## Imagery

Use genuine-looking photography of people talking, attending events, or participating in online communities. The hero uses a wide, rounded-corner video/photo area below the text-led introduction; later product imagery pairs a visible interface or campaign example with concise copy. Keep photos naturally colored rather than heavily stylized, and use image cards with restrained framing. Small logos and portraits support proof points and testimonials without competing with the editorial typography.

## Components

### Header navigation

Place the OpenWeb mark and serif navigation on the warm canvas, separated from the page by a thin dark horizontal rule; finish with a compact black Contact us button.

### Hero

Center a large, tightly tracked Copernicus headline, supporting paragraph, and black Let’s Talk CTA above a wide community image or video.

### Proof-point cards

Show three concise metrics in a row of pale #f8f4f3 cards, each with a prominent number and smaller explanatory label.

### Process panel

Present the participation journey inside a light panel, with a centered heading, short introduction, and a horizontally connected sequence of stages.

### Publisher feature cards

Use three evenly arranged pale cards with serif headings, short descriptive copy, and small black arrow buttons.

### Testimonial columns

Set customer quotations in editorial columns with a thin dark rule, recognizable publication mark, and compact speaker attribution.

### Contact form

Pair a large serif invitation and audience selector with a straightforward form using understated underline-style inputs and a black submission CTA.

### Measured component styles

- **Primary button** (“Contact us”): background #000000 · text #ffffff · border 1px solid #000000 · radius 5px · padding 11px 10px · 400 16px Copernicus
- **Link** (“Community Build communities that drive c”): background #f8f4f3 · text #0058fe · border 1px solid · radius 5px · padding 46px 35px · 400 18px Copernicus
- **Input**: transparent background · text #000000 · radius 0px · padding 10px 0px · 400 18px Copernicus
- **Card** (“5.5B Minutes spent on platform”): background #f8f4f3 · text #000000 · radius 5px · padding 40px 33px 34px 33px · 400 18px Copernicus
- **Navigation item** (“OpenWeb Publishers Advertisers Podcast R”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px Copernicus

## Do

- Keep the warm canvas as the dominant page surface.
- Use Copernicus-style serif typography for the editorial voice.
- Give major headings room to breathe and allow expressive line breaks.
- Use black buttons for clear, high-contrast calls to action.
- Reserve Signal Blue for selected links and small accents.
- Use real community imagery to humanize the product story.

## Don't

- Do not replace the warm palette with stark white backgrounds.
- Do not use magenta as a dominant brand accent.
- Do not crowd sections or compress the generous vertical rhythm.
- Do not make every section a card or add heavy drop shadows.
- Do not let product screenshots overpower the people-focused story.
- Do not use generic sans-serif styling for the main display headlines.

## Agent prompt

Build a new OpenWeb-style page as an editorial SaaS experience for community and media products. Use Warm Canvas (#f1e9e7) as the main background, Editorial Ink (#000000) for text and primary CTAs, and Soft Porcelain (#f8f4f3) for selected cards. Keep Blush Band (#efe3e1) and Muted Clay (#e8dcd6) as subtle surface variations; use Signal Blue (#0058fe) only for selective links. Choose a Copernicus-like serif for display, headings, navigation, and body copy, with restrained DM Sans-style captions. Center the main content within the measured 1092px maximum width. Create an oversized, line-broken hero, spacious section transitions, and a mix of editorial text, human community photography, simple grids, product splits, and testimonials. Favor thin rules and flat panels over shadows. Treat #ff3cfe as measurement noise, not a visual motif.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and introduction above a black CTA and wide community video. | Primary contact CTA, Above-the-fold positioning | Oversized serif headline, Centered copy, Wide rounded media |
| 2 | logo-cloud | Centered section heading above a horizontal row of publisher logos. | Social proof | Muted publication marks, Open horizontal row |
| 3 | stats | Three equal columns of metric cards beneath the publisher logo row. | Proof points | Pale cards, Large numerals, Compact labels |
| 4 | feature-split | Sparse horizontal brand-and-message composition across a tonal section band. | Brand reinforcement | Logo lockup, Thin divider, Short statement |
| 5 | how-it-works | Centered explanatory panel with a horizontal sequence of five connected stages. | Process explanation, Progression | Light panel, Connected stage markers, Compact captions |
| 6 | feature-grid | Centered section introduction followed by three equal feature cards. | Explore product capabilities | Three-column cards, Serif titles, Arrow CTAs |
| 7 | product-showcase | Two-column split pairing a product example on the left with explanatory copy on the right. | Product education, Learn-more CTA | Interface imagery, Editorial heading, Black arrow button |
| 8 | testimonials | Two editorial testimonial columns with publication marks and speaker details. | Customer validation | Quotation copy, Thin horizontal rules, Portrait attribution |
| 9 | contact | Two-column contact area with an editorial introduction beside a structured inquiry form. | Audience selection, Lead capture, Contact submission | Large serif heading, Underline-style fields, Black form CTA |
| 10 | footer | Multi-column navigation beneath social links and a thin top divider. | Explore site sections, Legal navigation | Compact link columns, Small brand marks, Fine divider |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--nh-fg: #000000;
--nh-card-bg: #f8f4f3;
--nh-card-fg: #000000;
--nh-cta-bg: #000000;
--nh-cta-fg: #ffffff;
--nh-accent: #ff3cfe;
--nh-radius: 5px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--color--blue: #0058fe;
--wp--preset--color--peach: #f1e9e7;
--wp--preset--color--gray: #7b7f83;
--wp--preset--color--pink: #ff3cfe;
--wp--preset--color--green: #00e600;
--wp--preset--color--orange: #fe4f00;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
```

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