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

# WRITER · Design System

> Quiet black canvas, vivid AI, enterprise clarity

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

A high-contrast enterprise AI homepage pairs a nearly black canvas with crisp typography and vivid violet calls to action. Product imagery, customer proof, and restrained section bands make a long page feel cohesive and easy to scan.

## North star

Keep the page grounded in black and white; use violet sparingly to mark the next action, not to decorate every section.

## Overview

WRITER builds its visual identity around a near-black canvas, with white headlines and subdued gray supporting text doing most of the work. The vivid violet accent is reserved for primary actions and small interface highlights, keeping it distinct rather than turning the page into a field of color. Poppins is used throughout, with medium-weight, tightly tracked display and heading styles that give large centered statements a clean editorial presence. The hero combines a centered message and email form with overlapping product imagery; later sections alternate between centered feature introductions, broad image-led showcases, and left-aligned platform content. A charcoal resource band briefly changes the surface before the page returns to black. Product screens, people, and customer proof appear inside rounded panels, often with softly tinted or gradient imagery. Comfortable section spacing and thin gray borders give this dense, long homepage room to breathe without losing its enterprise focus.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Canvas | `#000000` | `--color-deep-canvas` | brand | Dominant page background, hero, navigation, and most section bands. |
| Signal Violet | `#5551ff` | `--color-signal-violet` | accent | Primary CTA fills and selected vivid interface accents. |
| Bright Paper | `#ffffff` | `--color-bright-paper` | neutral | Headlines, primary copy, and light inverse surfaces or button text. |
| Soft Alloy | `#d2d4d7` | `--color-soft-alloy` | neutral | Muted body copy and understated text links on black. |
| Graphite Rule | `#393b40` | `--color-graphite-rule` | semantic | Fine borders around dark cards and interface panels. |
| Cool Mist | `#e4e7ed` | `--color-cool-mist` | neutral | Secondary muted copy and pale interface details. |
| Charcoal Band | `#1a1a1c` | `--color-charcoal-band` | surface | Distinct background band behind the resources section. |
| Footer Silver | `#bdbdbd` | `--color-footer-silver` | neutral | Low-emphasis footer copy. |
| Button Charcoal | `#2d2d2d` | `--color-button-charcoal` | surface | Subtle dark controls and footer interface details. |
| Lavender Mist | `#e8ecff` | `--color-lavender-mist` | surface | Pale inset-card and button detail; secondary to the dark brand palette. |
| Night Panel | `#131315` | `--color-night-panel` | surface | Near-black inset section surface for subtle tonal separation. |
| Ink Panel | `#010101` | `--color-ink-panel` | surface | Near-black product card surface with a thin graphite outline. |
| Interface Periwinkle | `#5b7cfa` | `--color-interface-periwinkle` | accent | Minor border or interface detail; not a defining brand field. |
| Link Ash | `#c7c7c7` | `--color-link-ash` | neutral | Secondary case-study link text. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Canvas) · `--color-surface` → `#ffffff` (Bright Paper) · `--color-surface-2` → `#1a1a1c` (Charcoal Band) · `--color-surface-3` → `#131315` (Night Panel) · `--color-surface-4` → `#010101` (Ink Panel) · `--color-text` → `#ffffff` (Bright Paper) · `--color-text-muted` → `#d2d4d7` (Soft Alloy) · `--color-text-subtle` → `#e4e7ed` (Cool Mist) · `--color-border` → `#393b40` (Graphite Rule) · `--color-accent` → `#5551ff` (Signal Violet) · `--color-on-accent` → `#ffffff` (Bright Paper)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#1a1a1c` | 17.38:1 | AAA |
| `#ffffff` | `#131315` | 18.56:1 | AAA |
| `#d2d4d7` | `#000000` | 14.14:1 | AAA |
| `#d2d4d7` | `#ffffff` | 1.49:1 | fail |
| `#d2d4d7` | `#1a1a1c` | 11.7:1 | AAA |
| `#d2d4d7` | `#131315` | 12.49:1 | AAA |
| `#e4e7ed` | `#000000` | 16.95:1 | AAA |
| `#e4e7ed` | `#ffffff` | 1.24:1 | fail |
| `#e4e7ed` | `#1a1a1c` | 14.03:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Poppins | `--font-body` | webfont | 400, 500, 600 | All measured headings, body copy, navigation, buttons, and links. | Montserrat |

- **Poppins:** Use medium weights for prominent headings, bold navigation, and compact uppercase, tracked eyebrow labels; headings use tight negative tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.337, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1 | -0.031em | — | Poppins | Oversized hero statement and major brand-level messaging. |
| h1 | 44px | 500 | 1.25 | -0.02em | — | Poppins | Primary page or section headline, especially hero messaging. |
| h2 | 40px | 500 | 1.2 | -0.02em | — | Poppins | Large section titles for feature and resource introductions. |
| h3 | 25px | 500 | 1.2 | -0.02em | — | Poppins | Card and subsection headings within showcases and content blocks. |
| h4 | 20px | 400 | 1.6 | 0 | — | Poppins | Small supporting headings and resource titles. |
| body | 15px | 400 | 1.4 | 0 | — | Poppins | Default explanatory copy, product descriptions, and card text. |
| caption | 12px | 400 | 1.66 | 0 | — | Poppins | Small metadata, fine print, and compact supporting labels. |
| button | 16px | 500 | 1.6 | 0 | — | Poppins | Primary and secondary action labels. |
| nav | 14px | 600 | 1.5 | 0 | — | Poppins | Top navigation items and prominent menu labels. |
| link | 12px | 600 | 1.66 | 0 | — | Poppins | Compact resource and case-study links. |
| eyebrow | 14px | 500 | 1.2 | 0.077em | uppercase | Poppins | Uppercase section markers and category labels. |

OpenType features in use: `"clig" 0, "liga" 0`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 8, 9, 10, 12, 14, 15, 16, 18, 20, 24, 25, 28 px.
- Section rhythm 60px · element gap 4px · card padding — · max content width 1050px.

The measured content max width is 1050px, with a comfortable density and generous separation between major sections. The first viewport centers the hero headline and email form above layered imagery; subsequent blocks mix centered introductions, two-column showcases, a three-column platform row, and a four-column footer. Most sections remain black, while the resources area uses a charcoal band. Use the measured spacing scale and section rhythm rather than introducing arbitrary dimensions; align dense content to a clear grid and let image panels carry visual weight.

## Shape & elevation

- Radius: button `50%` · input `9999px` · card `12px` · media `12px` · xs `4px` · sm `10px` · md `12px` · pill `9999px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.22) 0px 12px 40px 0px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.25) 0px 4px 16px 0px`
- Shadow `md-2` (other): `rgba(0, 0, 0, 0.22) 0px 6px 20px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The page is mostly flat: black and charcoal surfaces, thin graphite card borders, and rounded media panels establish structure. Use layering where product cards overlap hero imagery, not as a general decoration. Measured card and button shadows are soft and dark, so keep them subtle against the black canvas.

## Imagery

Use polished product UI, customer portraits, and workplace photography as evidence of the platform in use. Hero media is layered with translucent interface cards, while feature showcases place screenshots and portraits inside broad rounded panels. Some product visuals carry colorful soft gradients, but these belong to the imagery rather than the brand canvas. Keep real people and UI legible, with dark surroundings and restrained crops.

## Components

### Primary CTA

Use a pill-shaped Signal Violet (#5551ff) button with white Poppins text; the measured actions include Request a demo and Try for free.

### Hero email form

A wide rounded email field sits directly beside a violet Request a demo action, centered below the headline.

### Top navigation

Compact white Poppins menu labels align across the top, with the brand mark at left and a violet Try for free action at right.

### Product showcase card

Combine a dark card, fine Graphite Rule (#393b40) border, rounded media, and embedded product UI or colorful imagery.

### Section eyebrow

Small uppercase Poppins label with increased tracking precedes centered or left-aligned section headlines.

### Customer proof card

Present a customer logo, outcome or statistic, portrait, and compact case-study link in a dense visual panel.

### Resources band

Separate educational content with a Charcoal Band (#1a1a1c), then arrange a featured resource beside a compact feed.

### Measured component styles

- **Primary button** (“→ AI research lab”): background #5551ff · text #ffffff · radius 60px · padding 14px 24px · 500 16px Poppins
- **Secondary button** (“Watch Now”): background #ffffff · text #000000 · radius 9999px · padding 13px 36px · 500 16px Poppins · shadow rgba(0, 0, 0, 0.25) 0px 4px 16px 0px
- **Link** (“Get the guide”): transparent background · text #d2d4d7 · radius 0px · padding 0px · 600 12px Poppins
- **Input**: background #333333 · text #ffffff · radius 72px · padding 1px 50px 1px 27px · 400 16px Poppins
- **Card** (“CAMPAIGN CREATION Every brief starts sma”): background #010101 · text #ffffff · border 1px solid #393b40 · radius 12px · padding 0px · 400 16px CanelaDeck
- **Navigation item** (“Product Solutions Research Plans Custome”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px CanelaDeck

## Do

- Keep the main page canvas near-black.
- Use white for primary headings and clear text.
- Reserve violet for high-priority actions.
- Use muted grays for supporting copy and links.
- Pair product UI with real customer or team imagery.
- Use charcoal only to distinguish selected section bands.
- Preserve generous space around major content groups.

## Don't

- Do not introduce unmeasured brand colors.
- Do not make every section a different color.
- Do not use violet as a large decorative background.
- Do not flatten all product imagery into generic icon grids.
- Do not crowd headings against card edges.
- Do not make borders brighter than the content they contain.
- Do not add strong shadows to every panel.

## Agent prompt

Build a new enterprise AI page in WRITER’s restrained dark visual system. Use Deep Canvas (#000000) for the main background, Bright Paper (#ffffff) for primary headings, and Soft Alloy (#d2d4d7) for supporting copy. Signal Violet (#5551ff) is for primary actions, not decorative fills; use Graphite Rule (#393b40) for quiet card outlines and Charcoal Band (#1a1a1c) for occasional section contrast. Set all text in Poppins or a close sans-serif substitute, with tight, medium-weight large headings and tracked uppercase eyebrows. Follow the measured 1050px content maximum and comfortable section rhythm. Combine centered introductions, clear grid-based content, polished product screenshots, and authentic people imagery. Keep panels rounded and mostly flat, with restrained shadows and layered media only where useful.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and email form above a two-column, layered product image composition. | Email capture, Request-demo action, Persistent video close control | Black canvas, Large white headline, Violet CTA, Overlapping product cards |
| 2 | logo-cloud | Compact, centered trust statement and a horizontal row of customer logos. | Trust signaling | Monochrome logo row, Black background, Centered label |
| 3 | feature-grid | Centered section introduction above a broad feature showcase and supporting cards. | Feature exploration, Stage-by-stage product explanation | Eyebrow label, Product UI panel, Dark cards, Colorful embedded media |
| 4 | product-showcase | Centered copy and action above a wide product image. | Product education, Explore-agent link | Centered headline, Short supporting copy, Rounded media panel |
| 5 | feature-grid | Centered introduction followed by a two-column grid of product capability cards. | Capability scanning, Product discovery | Dark card headers, Embedded interface screenshots, Rounded image panels |
| 6 | testimonials | Centered headline above a horizontal carousel of customer outcome cards. | Case-study navigation, Carousel controls | Customer portraits, Large metrics, Compact links, Dark cards |
| 7 | feature-split | Left-aligned introduction followed by three wide, vertically stacked feature panels. | Benefit-led scanning, Feature comparison by outcome | Split text and media, People imagery, Layered product interfaces |
| 8 | feature-grid | Left-aligned heading above three columns of platform capability descriptions. | Enterprise capability review, Direct feature links | Three-column layout, Small uppercase labels, Violet pill actions |
| 9 | content-feed | Charcoal band with a centered heading and two-column resource content. | Resource discovery, Read and watch links | Charcoal surface, Featured learning card, Compact content feed |
| 10 | cta | Centered closing message with two adjacent action links. | Free-trial entry, Demo request | Black background, Centered heading, Contrasting pill actions |
| 11 | footer | Multi-column navigation above newsletter signup and a compact legal and social row. | Newsletter signup, Footer navigation, Social links | Black background, Column link lists, Thin dividers, Rounded signup field |

## 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;
--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--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

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