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

# STRUT · Design System

> Warm editorial clarity with a sharp lime signal.

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

STRUT presents its AI writing workspace through a warm, editorial layout grounded in oversized typography and restrained product-interface imagery. A vivid lime CTA, black feature bands, and compact content grids give the long homepage a clear visual rhythm.

## North star

Build a calm editorial canvas, then use oversized type, real product context, and lime accents to direct attention.

## Overview

The visual system is built around a warm ivory canvas (#f3f0e8), near-black text, and a vivid lime signal reserved for primary actions and occasional emphasis. Dark bands interrupt the pale editorial flow to frame product context, learning resources, and the final conversion moment. Manrope carries nearly all interface and headline work: headings are heavy, tightly tracked, and deliberately oversized, while body copy stays compact and muted. Newsreader and Georgia provide italic serif contrast in selected headline phrases, lending a print-like, long-form character. The hero pairs a large asymmetric text column with a tactile overhead collage; later sections alternate full-width product imagery, split feature cards, article thumbnails, and thinly bordered content grids. Spacing is generous around major sections but denser inside resource cards and footer navigation. Surfaces remain mostly flat, with crisp rules and square corners rather than soft elevation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Lime | `#dfff3f` | `--color-signal-lime` | accent | Primary CTA fill, closing conversion section, and small emphasis marks. |
| Draft Ink | `#151515` | `--color-draft-ink` | brand | Primary text, dark content sections, product card outlines, and prominent links. |
| Warm Paper | `#f3f0e8` | `--color-warm-paper` | surface | Main page canvas and the majority of editorial sections. |
| Lime Wash | `#e7fc73` | `--color-lime-wash` | accent | Measured highlight gradient; use sparingly for highlighted words, not as a dominant page fill. |
| Soft Graphite | `#4f4d48` | `--color-soft-graphite` | neutral | Muted body copy and secondary explanatory text. |
| Quiet Taupe | `#6c6a64` | `--color-quiet-taupe` | neutral | Lower-emphasis links and supporting text. |
| Footer Black | `#111111` | `--color-footer-black` | surface | Deep footer and dark CTA surfaces, with white or subdued text. |
| Card White | `#ffffff` | `--color-card-white` | surface | Writing-interface mockups and white feature or content cards. |
| Paper Rule | `#cbc7bd` | `--color-paper-rule` | semantic | Fine dividers, navigation rules, and subtle card or badge borders. |
| Footer Silver | `#bbbbbb` | `--color-footer-silver` | neutral | Low-priority footer text and small legal details. |
| Pale Linen | `#f7f5ef` | `--color-pale-linen` | surface | Occasional subtly lighter section canvas behind product-context content. |
| Mockup Umber | `#211d1c` | `--color-mockup-umber` | semantic | Small dark product-card or interface detail; not a defining brand surface. |
| Button Charcoal | `#191919` | `--color-button-charcoal` | neutral | Secondary interface labels, selected controls, and compact links. |
| Violet Panel | `#7e57ff` | `--color-violet-panel` | accent | Feature-card illustration color, visible in the feature showcase rather than core UI. |
| Muted Silver | `#aaaaaa` | `--color-muted-silver` | neutral | Minor subdued text detail, not a primary text color. |
| Rule Charcoal | `#444444` | `--color-rule-charcoal` | semantic | Occasional dark borders or interface marks within mockups. |
| Apricot Panel | `#e6a868` | `--color-apricot-panel` | accent | Warm feature-card illustration fill, not a recurring brand-wide accent. |
| Sky Panel | `#b8d8fe` | `--color-sky-panel` | accent | Blue feature-card illustration fill, isolated to the feature showcase. |

### Semantic aliases

`--color-canvas` → `#f3f0e8` (Warm Paper) · `--color-surface` → `#151515` (Draft Ink) · `--color-surface-2` → `#111111` (Footer Black) · `--color-surface-3` → `#ffffff` (Card White) · `--color-surface-4` → `#f7f5ef` (Pale Linen) · `--color-text` → `#151515` (Draft Ink) · `--color-text-muted` → `#4f4d48` (Soft Graphite) · `--color-text-subtle` → `#6c6a64` (Quiet Taupe) · `--color-border` → `#cbc7bd` (Paper Rule) · `--color-accent` → `#7e57ff` (Violet Panel) · `--color-accent-2` → `#e6a868` (Apricot Panel) · `--color-accent-3` → `#b8d8fe` (Sky Panel)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#151515` | `#f3f0e8` | 16.04:1 | AAA |
| `#151515` | `#111111` | 1.03:1 | fail |
| `#151515` | `#ffffff` | 18.26:1 | AAA |
| `#4f4d48` | `#f3f0e8` | 7.41:1 | AAA |
| `#4f4d48` | `#151515` | 2.16:1 | fail |
| `#4f4d48` | `#111111` | 2.24:1 | fail |
| `#4f4d48` | `#ffffff` | 8.44:1 | AAA |
| `#6c6a64` | `#f3f0e8` | 4.75:1 | AA |
| `#6c6a64` | `#151515` | 3.38:1 | AA-large |
| `#6c6a64` | `#111111` | 3.49:1 | AA-large |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 45%, rgba(223, 255, 63, 0.7) 45%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Manrope | `--font-body` | webfont | 400, 700, 600, 800, 900 | Primary headlines, navigation, body copy, cards, and buttons | Plus Jakarta Sans |
| DM Mono | `--font-mono` | webfont | 400, 500 | Tiny code-like labels and technical interface details | Space Mono |
| Georgia | `--font-georgia` | system | 400 | Occasional serif fallback and editorial italic contrast | Lora |
| Newsreader | `--font-newsreader` | webfont | 500 | Editorial serif accents within display and section headlines | Newsreader |

- **Manrope:** Heavy bold headlines use tight negative tracking; body copy is regular and compact, with medium-weight controls.
- **DM Mono:** Use sparingly for small utility labels; retain monospace character and measured open tracking.
- **Georgia:** Use selectively alongside sans headlines, particularly for italic emphasis.
- **Newsreader:** Use medium-weight italic phrases to contrast the strong geometric sans.

### Type scale — Perfect Fifth (ratio ≈ 1.457, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 92px | 700 | 0.88 | -0.075em | — | Manrope | Oversized hero headline and key editorial statements. |
| h1 | 72px | 700 | 0.95 | -0.06em | — | Manrope | Main hero title and major page-level headings. |
| h2 | 48px | 700 | 1.05 | -0.045em | — | Manrope | Section titles for features, resources, and FAQ. |
| h3 | 27px | 700 | 1.15 | 0 | — | Manrope | Feature, guide, and audience-card headings. |
| h4 | 24px | 700 | 1.17 | 0 | — | Manrope | Smaller content-card and utility headings. |
| body | 14px | 400 | 1.65 | 0 | — | Manrope | Descriptions, explanatory copy, and paragraph text. |
| caption | 13px | 400 | 1.65 | 0 | — | Manrope | Metadata, image labels, and subdued supporting details. |
| button | 13px | 600 | 1 | 0 | — | Manrope | Primary and secondary CTA labels. |
| link | 17px | 700 | 1.65 | -0.02em | — | Manrope | Prominent text links and navigation destinations. |
| code | 10px | 400 | normal | 0.12em | — | DM Mono | Tiny utility or technical labels in product contexts. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 4, 6, 7, 8, 9, 10, 12, 13, 14, 16, 18, 20, 22, 24, 28 px.
- Section rhythm 120px · element gap 10px · card padding 26px · max content width 1278px.

A spacious single-page sequence uses a broad centered content area capped at the measured page width, with strong left alignment and occasional asymmetric splits. The hero divides text and collage imagery into contrasting columns. Large section gaps separate alternating pale and near-black bands; feature cards, article thumbnails, audience tables, and FAQ rows become denser within each band. Thin rules organize grids without adding heavy containers. Keep broad outer margins and generous breathing room around headline blocks, while letting the footer hold dense, multi-column navigation.

## Shape & elevation

- Radius: button `4px` · link `4px` · xs `4px`
- Shadow `hairline` (card): `rgba(0, 0, 0, 0.22) 8px 10px 0px 0px`
- Shadow `lg` (button): `rgba(0, 0, 0, 0.28) 0px 10px 30px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most surfaces are flat, with square-edged cards and fine measured borders doing the organizational work. Product-interface imagery supplies depth through its own layered paper and screen details. Use the measured hard card shadow only as a restrained exception; avoid generalized soft shadows, pills, or rounded containers.

## Imagery

The hero uses a tactile overhead collage of paper, notes, geometric scraps, and a hand-drawn lime mark. Product sections show the writing interface in context, framed as a wide, legible workspace rather than a floating device mockup. Article thumbnails use colorful, abstract editorial imagery. Keep imagery rectangular and integrated into the page grid; bright colors inside feature cards and thumbnails are illustrative, not replacements for the core palette.

## Components

### Primary CTA

Square-corner button in Signal Lime (#dfff3f) with dark label; the alternate CTA is Draft Ink (#151515) with white text.

### Navigation

Minimal header with STRUT wordmark, compact Manrope links, and a contrasting writing CTA.

### Editorial hero

Large, tightly tracked sans headline with selective serif italic phrase, supporting copy, CTA, and a tactile collage image.

### Feature cards

Rectangular blocks with thin dark outlines; selected cards use violet, apricot, or blue illustration fills.

### Resource cards

Compact white or canvas cards pairing concise titles, brief descriptions, and understated text links.

### FAQ rows

Left-aligned question rows separated by pale hairlines, with a compact expand indicator.

### Dark footer

Near-black closing area with a white headline, lime CTA, and dense, subdued multi-column link groups.

### Measured component styles

- **Primary button** (“Start writing — it's free”): background #dfff3f · text #111111 · border 1px solid #dfff3f · radius 0px · padding 13px 18px · 600 13px Manrope
- **Secondary button** (“Start writing”): background #151515 · text #ffffff · border 1px solid #151515 · radius 0px · padding 13px 18px · 600 13px Manrope
- **Link** (“Journalists”): transparent background · text #151515 · radius 0px · padding 0px · 700 17px Manrope
- **Card** (“Journalists Reported writing lives or di”): background #ffffff · text #151515 · radius 0px · padding 28px 24px · 400 16px Manrope
- **Badge** (“Export”): transparent background · text #666666 · border 1px solid #cfcbc1 · radius 0px · padding 4px 7px · 400 9px Manrope
- **Navigation item** (“Product”): transparent background · text #151515 · radius 0px · padding 0px · 600 13px Manrope

## Do

- Keep the warm paper canvas dominant.
- Use lime for primary actions and rare emphasis.
- Set headlines in heavy, tightly tracked Manrope.
- Mix serif italics into selected editorial phrases.
- Alternate pale sections with deliberate dark bands.
- Use square cards and fine rules to organize content.
- Show the product interface in a believable workspace context.

## Don't

- Do not turn every section into a dark block.
- Do not use gradients as the main visual language.
- Do not round cards into pills or soft containers.
- Do not promote illustration colors to core brand accents.
- Do not crowd major headlines with dense copy.
- Do not add decorative shadows to every card.
- Do not make the interface imagery look like generic stock art.

## Agent prompt

Build a new STRUT page in a warm editorial SaaS style. Use Warm Paper (#f3f0e8) as the main canvas, Draft Ink (#151515) for headings and dark bands, and Signal Lime (#dfff3f) only for primary actions or precise emphasis. Set most text in Manrope, with bold, tightly tracked display headings and selective Newsreader-style italic phrases. Compose generous, left-aligned sections with asymmetric splits, thin rules, square cards, and occasional full-width dark interruptions. Use realistic writing-workspace imagery and restrained editorial thumbnails; treat Violet Panel (#7e57ff), Apricot Panel (#e6a868), and Sky Panel (#b8d8fe) as isolated illustration fills. Keep body copy compact and muted, layouts spacious, surfaces flat, and the footer dense but orderly.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Header above asymmetric two-column hero: text left, tactile collage right. | primary writing CTA, demo link, free-plan reassurance | oversized headline, italic serif phrase, collage image |
| 2 | how-it-works | Pale editorial section with a large left headline and ordered steps alongside. | step-by-step explanation, progressive workflow | numbered or labeled steps, fine horizontal dividers |
| 3 | product-showcase | Full-width dark band with a headline, short copy, and broad interface image. | product context, feature demonstration | dark background, wide workspace screenshot |
| 4 | feature-grid | Pale inset feature area with one large colored card and stacked smaller cards. | feature discovery, explore links | outlined rectangular cards, violet, apricot, and blue fills |
| 5 | other | Short pale transition band with a large heading and a small aligned link. | browse all features | headline-led section, understated text link |
| 6 | feature-split | Pale section combining a large feature headline with supporting content blocks. | feature explanation, follow-up pathways | editorial heading, text links |
| 7 | stats | Compact full-width dark strip with headline, lime statistic, and browse action. | resource discovery, library navigation | high-contrast number, dark band |
| 8 | other | Short pale title band with a prominent heading and a small right-side link. | tool discovery | editorial heading, minimal link |
| 9 | product-grid | Pale area with a row of compact, outlined tool cards. | open tool, compare utilities | three-column cards, brief summaries |
| 10 | other | Pale transition band with a large editorial title and browse link. | browse guides | large heading, understated text link |
| 11 | content-feed | Pale multi-column article grid with thumbnail images, titles, and metadata. | read guide, scan by topic | color-treated thumbnails, compact metadata |
| 12 | other | Pale headline transition into a structured audience comparison grid. | compare workflows | large headline, compact link |
| 13 | comparison | Pale-backed audience grid with bordered cells and concise descriptions. | scan by profession, view workflow | thin grid borders, text-only cards |
| 14 | feature-grid | Dark feature section with a headline and a row of compact bordered principles. | build trust, explain safeguards | dark canvas, small white cards |
| 15 | faq | Pale FAQ section with a large heading and vertically divided question rows. | expand answers, read full guide | hairline separators, plus indicators |
| 16 | cta | Full-width lime band with left-aligned message and right-aligned actions. | create account, preview demo | lime canvas, black primary button |
| 17 | cta | Near-black horizontal band with white headline and lime signup button. | final signup action | high-contrast type, lime button |
| 18 | footer | Large near-black footer with brand summary, grouped columns, and a subdued bottom rule. | navigate product resources, browse audiences, legal navigation | multi-column links, muted text, thin bottom divider |

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