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

# Reworkd · Design System

> Calm, precise product storytelling with a luminous blue signal.

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

Reworkd presents automated web data extraction through a spacious light canvas, restrained typography, and large product-interface previews. A dark proof-and-testimonial section and vivid blue gradients add contrast without disrupting the clean SaaS aesthetic.

## North star

Let spacious product-led storytelling carry the page, using electric blue as a precise accent and charcoal as the single major contrast break.

## Overview

The page relies on a white foundation, with a very pale blue wash behind the opening hero and product preview. Ink-dark headings and muted gray copy keep the message crisp; saturated blue appears selectively in the hero headline, primary CTA, interface details, and luminous gradient panels. The typography pairs a distinctive display face for large centered claims with a clean sans for navigation and explanatory copy, while monospaced text is reserved for compact technical labels. Layout moves from a centered hero into a broad browser-like product mockup, then alternates explanatory text, interface imagery, and feature cards. Most sections remain airy and bright, while a full-width charcoal proof section creates a deliberate tonal break. Fine borders and soft shadows frame UI previews; imagery is primarily product interface rather than lifestyle photography. The result feels technical and polished, with color and contrast guiding attention instead of decorative clutter.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas and white card surfaces; also appears in text and gradient treatments. |
| Graphite Ink | `#272c30` | `--color-graphite-ink` | brand | Main headings, navigation, body text, and the large dark proof-section background. |
| Mist Gray | `#f3f4f5` | `--color-mist-gray` | neutral | Quiet surface and hairline border tone across buttons, sections, and interface details. |
| Slate Copy | `#526068` | `--color-slate-copy` | neutral | Muted supporting text and secondary button labels. |
| Action Blue | `#2c65d3` | `--color-action-blue` | accent | Observed on a button detail; use only as a minor product-interface accent. |
| Signal Blue | `#3161df` | `--color-signal-blue` | accent | Blue emphasis in the hero headline and small accent details. |
| Pale Steel | `#a6b4ba` | `--color-pale-steel` | neutral | Low-emphasis text and heading detail, not a dominant brand surface. |
| Midnight Link | `#1b2550` | `--color-midnight-link` | semantic | Sparse dark link or interface detail; not a primary page color. |
| Cloud Border | `#e3e8ea` | `--color-cloud-border` | neutral | Light card, button, and interface outlines. |
| Bright Azure | `#3e79ea` | `--color-bright-azure` | accent | Primary blue CTA and small product-interface action elements. |
| Sky Glint | `#5897f7` | `--color-sky-glint` | accent | Minor button highlight within product UI, not a broad background. |
| Cobalt Edge | `#3872e6` | `--color-cobalt-edge` | accent | Small button or interface accent supporting the blue action palette. |
| Ice Blue | `#e8f1ff` | `--color-ice-blue` | surface | Pale blue gradient and card or section wash behind product-focused content. |
| Neutral Gray | `#666666` | `--color-neutral-gray` | semantic | Measured gradient section detail; not a defining brand color in the screenshots. |
| Blue Gray | `#60737a` | `--color-blue-gray` | neutral | Muted supporting text and interface detail. |
| Mint Signal | `#89ecb0` | `--color-mint-signal` | accent | Small green status or text accent within product-related details. |
| Carbon Panel | `#373d42` | `--color-carbon-panel` | surface | Dark code or data panel nested within the product interface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#272c30` (Graphite Ink) · `--color-surface-2` → `#f3f4f5` (Mist Gray) · `--color-surface-3` → `#373d42` (Carbon Panel) · `--color-text` → `#272c30` (Graphite Ink) · `--color-text-muted` → `#526068` (Slate Copy) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#f3f4f5` (Mist Gray) · `--color-accent` → `#3161df` (Signal Blue) · `--color-accent-2` → `#3e79ea` (Bright Azure) · `--color-accent-3` → `#89ecb0` (Mint Signal) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#272c30` | `#ffffff` | 14.1:1 | AAA |
| `#272c30` | `#f3f4f5` | 12.81:1 | AAA |
| `#272c30` | `#373d42` | 1.28:1 | fail |
| `#526068` | `#ffffff` | 6.5:1 | AA |
| `#526068` | `#272c30` | 2.17:1 | fail |
| `#526068` | `#f3f4f5` | 5.9:1 | AA |
| `#526068` | `#373d42` | 1.69:1 | fail |
| `#ffffff` | `#272c30` | 14.1:1 | AAA |
| `#ffffff` | `#f3f4f5` | 1.1:1 | fail |
| `#ffffff` | `#373d42` | 11:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) 76.58%), none`
- `linear-gradient(rgb(255, 255, 255) 4%, rgb(244, 247, 247) 23%, rgb(242, 246, 255) 41%, rgb(255, 255, 255) 90%)`
- `linear-gradient(rgb(241, 246, 255), rgb(232, 241, 255) 40%, rgb(230, 232, 255) 50%, rgb(227, 237, 255) 60%, rgb(255, 255, 255))`
- `radial-gradient(335.69% 99.21% at 57.77% 0px, rgb(0, 89, 255) 0px, rgba(129, 118, 255, 0.73) 36.5%, rgba(255, 225, 66, 0) 75.65%, rgba(72, 132, 239, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __suisseIntl_a23918 | `--font-body` | webfont | 400, 450, 500, 600 | Primary interface and reading sans: navigation, body copy, links, and UI labels. | Inter |
| __GeistMono_c1e5c9 | `--font-mono` | webfont | 400, 450, 500, 600 | Compact code-like labels and technical captions. | Geist Mono |
| __selecta_a4b3da | `--font-display` | webfont | 500, 400 | Display headlines, including the centered hero statement and section titles. | Manrope |
| __GeistSans_3a0388 | `--font-geistsans-3a0388` | webfont | 500, 600, 700 | Minor supporting UI typography where a slightly more technical sans is needed. | Inter |

- **__suisseIntl_a23918:** Use regular through semibold weights; restrained positive tracking in navigation and links, with natural sentence case.
- **__GeistMono_c1e5c9:** Keep monospaced text small and matter-of-fact, with neutral tracking and no decorative casing.
- **__selecta_a4b3da:** Medium-weight display styling with tight negative tracking; sentence case, strong scale contrast.
- **__GeistSans_3a0388:** Use sparingly at medium to bold weights; retain clean sentence case and compact interface rhythm.

### Type scale — Custom (ratio ≈ 1.788, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 500 | 0.95 | -0.025em | — | __selecta_a4b3da | Oversized centered hero headline and major campaign statements. |
| h1 | 40px | 400 | 1.1 | -0.02em | — | __selecta_a4b3da | Primary page or section headings, set in the display face. |
| h2 | 18px | 500 | 1.33 | -0.01em | — | __selecta_a4b3da | Compact feature titles and secondary section headings. |
| body | 14px | 400 | 1.57 | 0.01em | — | __suisseIntl_a23918 | Explanatory paragraphs, product descriptions, and general copy. |
| caption | 12px | 400 | 1.67 | 0 | — | __GeistMono_c1e5c9 | Small technical captions and secondary product labels. |
| nav | 14px | 400 | 1.43 | 0.02em | — | __suisseIntl_a23918 | Header and footer navigation links. |
| link | 14px | 500 | 1.43 | 0.02em | — | __suisseIntl_a23918 | Inline links and emphasized navigational actions. |
| code | 12px | 400 | 1.67 | 0 | — | __GeistMono_c1e5c9 | Monospaced snippets and data-oriented UI text. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 6, 7, 8, 10, 12, 16, 24, 32, 48, 64 px.
- Section rhythm 80px · element gap 8px · card padding — · max content width 1216px.

A centered desktop composition uses a measured maximum content width of 1216px, with the hero aligned centrally and later explanatory sections shifting to left-aligned content or three-column arrangements. The page alternates generous full-width section bands with constrained product previews and card groups. Measured spacing uses a 4px base and an 80px section gap; keep the density comfortable rather than filling every region. The long page is paced by a pale hero, bright feature content, a deep charcoal proof section, and a simple footer.

## Shape & elevation

- Radius: button `4px` · card `8px` · media `50%` · nav `8px` · link `6px` · xs `1px` · sm `4px` · md `6px` · lg `8px` · xl `10px` · 2xl `12px` · pill `9999px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(39, 44, 48, 0.1) 0px 0px 0px 1px`
- Shadow `sm` (button, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(63, 70, 75, 0.1) 0px 1px 3px 0px, rgba(63, 70, 75, 0.1) 0px 0px 0px 1px`
- Shadow `xl` (other, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(63, 70, 75, 0.1) 0px 21px 44px -32px, rgba(39, 44, 48, 0.2) 0px 26px 30px -23px, rgba(39, 44, 48, 0.05) 0px 14px 40px 0px, rgba`
- Shadow `hairline-2` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 2px, rgba(39, 44, 48, 0.13) 0px 1px 2px 2px`
- Shadow `inset` (nav, link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset, rgba(26, 41, 61, 0.15) 0px 1px 3px 0px, rgba(26, 41, 61, 0.11) 0px 7px 11px -5px, r`
- Shadow `xl-2` (card, media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(63, 70, 75, 0.5) 0px 21px 44px -40px, rgba(39, 44, 48, 0.1) 0px 26px 30px -23px, rgba(39, 44, 48, 0.05) 0px 14px 40px 0px, rgba`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most surfaces remain flat, with pale hairlines separating controls and cards. Product previews receive soft, diffuse shadows and a fine outline to lift them from the white or pale-blue canvas. Use stronger depth sparingly on the hero mockup, floating code panel, and gradient CTA; the charcoal proof band itself stays visually broad and uncluttered.

## Imagery

Imagery is led by detailed browser and dashboard mockups, code panels, data tables, and analytical interface cards rather than photography. Frame previews as large, crisp product windows with subtle outlines and soft lift; keep content readable but treat tiny interface copy as texture. Blue luminous gradients appear in select proof metrics and the closing CTA, while most feature cards stay light and restrained.

## Components

### Announcement strip

A narrow black banner sits above the header, with centered white migration notice copy and an inline email link.

### Header navigation

Brand mark at left, compact centered navigation, and a small raised sign-up control at right over the pale hero wash.

### Centered hero

Large two-line display headline, blue emphasis on the second line, short supporting sentence, and a blue call-booking CTA.

### Browser preview

Wide browser-like product window with a fine border, rounded frame, table controls, and a dark floating code/data panel.

### Feature cards

Light cards combine small interface illustrations, concise titles, and supporting text; use subtle borders rather than heavy fills.

### Proof and CTA band

Charcoal full-width section pairs metrics and a testimonial with a bright blue gradient call-to-action panel.

### Footer columns

A white footer groups the brand/address, navigation, other links, and social destinations into aligned columns.

### Measured component styles

- **Primary button** (“Extract Next”): background #3e79ea · text #ffffff · radius 4px · padding 4px 7px · 500 11px __suisseIntl_a23918 · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Careers - Open Positions”): background #f4f7f7 · text #526068 · border 1px solid #f4f7f7 · radius 6px · padding 2.5px 40px · 400 12px __suisseIntl_a23918
- **Link** (“Features”): transparent background · text #272c30 · radius 0px · padding 0px · 400 14px __suisseIntl_a23918
- **Card** (“Current Public Services Filter results: ”): background #ffffff · text #272c30 · radius 8px · padding 0px · 400 16px __suisseIntl_a23918 · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(63, 70,
- **Navigation item** (“Reworkd”): transparent background · text #272c30 · radius 0px · padding 0px · 400 16px __suisseIntl_a23918

## Do

- Keep the opening hero centered on a pale, nearly white canvas.
- Use Graphite Ink (#272c30) for primary copy and dark proof surfaces.
- Reserve Bright Azure (#3e79ea) and Signal Blue (#3161df) for purposeful emphasis.
- Make product screenshots and interface previews the primary visual evidence.
- Use generous measured section spacing and clear shifts in alignment.
- Frame important UI previews with fine borders and restrained shadows.

## Don't

- Do not make every section dark or saturated.
- Do not use gradients as a default card background.
- Do not replace product-interface imagery with lifestyle photography.
- Do not crowd the hero with secondary links or extra content.
- Do not let decorative accents compete with the headline or CTA.
- Do not add heavy shadows to ordinary text sections or footer content.

## Agent prompt

Build a new Reworkd-style SaaS page with a calm, product-led hierarchy. Use Gallery White (#ffffff) as the main canvas, Graphite Ink (#272c30) for headlines and copy, and Mist Gray (#f3f4f5) or Cloud Border (#e3e8ea) for quiet dividers. Apply Signal Blue (#3161df) and Bright Azure (#3e79ea) selectively to headline emphasis, primary actions, and interface details; keep Ice Blue (#e8f1ff) as a soft wash rather than a saturated block. Use a distinctive tight-tracked display face for large claims, a clean sans for navigation and body, and monospaced text only for technical snippets. Center the hero, then show a large believable dashboard preview. Alternate bright explanatory sections with one charcoal proof band and a luminous CTA. Keep spacing generous, borders fine, shadows restrained, and content readable.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy above a wide product preview on a pale blue-tinted canvas. | announcement notice, primary call-booking action, product proof above the fold | centered display headline, blue text emphasis, browser mockup |
| 2 | logo-cloud | Product preview gives way to investor and supporter names arranged in compact rows. | social proof, supporter attribution | small profile portraits, logo row, quiet divider |
| 3 | feature-split | Left-aligned section heading and explanatory copy with a subdued abstract visual beneath. | problem framing, supporting explanation | stacked headings, muted copy, faint visual texture |
| 4 | faq | A compact sequence of practical scraper questions follows the problem statement. | question-led content, scannable concerns | short text prompts, minimal framing |
| 5 | how-it-works | Introductory copy beside a product dashboard, followed by three benefit columns. | solution explanation, benefit scanning | split text and UI, three-column benefit row, small line icons |
| 6 | feature-grid | Centered section introduction above an uneven grid of product screenshots and feature cards. | feature discovery, visual product evidence | mixed-width card grid, light cards, dark code-preview panel |
| 7 | testimonials | Full-width charcoal band combining headline, metrics, testimonial, and an overlapping blue CTA panel. | usage metrics, customer quote, closing conversion action | dark background, luminous blue gradient, overlapping CTA card |
| 8 | footer | White, three-column footer with brand details at left and grouped links to the right. | site navigation, social destinations, status and copyright | small brand mark, link columns, subtle footer metadata |

## Source CSS custom properties (selected)

```css
--radius: 0.5rem;
--tw-text-opacity: 1;
```

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