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

# Worth Agency · Design System

> Soft pink canvas, bold type, considered work.

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

Worth Agency pairs a soft pink canvas with oversized coral lettering and a restrained portfolio layout. Rounded white surfaces, quiet black typography, and vivid project imagery keep the page expressive without feeling crowded.

## North star

Let the blush canvas and oversized coral typography set the tone, then give each project image generous room to speak.

## Overview

A blush-pink canvas establishes the page’s identity, while large coral-red display lettering creates an immediate focal point. The opening combines this oversized wordmark with a translucent sculptural form and a short, centered agency introduction. Nunito Sans carries the system throughout: light weights and tight tracking keep headlines airy and contemporary, while darker text anchors small captions and supporting copy. Broad white and near-white bands separate the hero, portfolio, and contact areas; generous open space lets the project imagery read clearly. Work is presented in an uneven editorial grid, alternating compact tiles and larger landscape images rather than uniform cards. A pink contact panel returns to the hero palette, with white rounded form fields and a black submit button. The overall strategy is soft and approachable, with carefully placed high-contrast accents instead of heavy borders or decorative UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Primary headings, body text, footer area, and the dark submit control. |
| Quiet White | `#f9f9f9` | `--color-quiet-white` | surface | Large pale section bands and light footer or content surfaces. |
| Blush Canvas | `#f8d4d4` | `--color-blush-canvas` | brand | Dominant page background, hero field, and the contact panel. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Rounded navigation capsule, form fields, and broad section surfaces. |
| Signal Coral | `#eb4726` | `--color-signal-coral` | accent | Oversized hero lettering and small emphasis accents. |
| Leaf Green | `#65ab65` | `--color-leaf-green` | semantic | A sparse text accent; not a defining surface colour in the screenshots. |

### Semantic aliases

`--color-canvas` → `#f9f9f9` (Quiet White) · `--color-surface` → `#f8d4d4` (Blush Canvas) · `--color-surface-2` → `#ffffff` (Gallery White) · `--color-surface-3` → `#000000` (Studio Ink) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#f9f9f9` (Quiet White) · `--color-accent` → `#eb4726` (Signal Coral) · `--color-accent-2` → `#65ab65` (Leaf Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f9f9f9` | 19.95:1 | AAA |
| `#000000` | `#f8d4d4` | 15.36:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#f9f9f9` | `#f8d4d4` | 1.3:1 | fail |
| `#f9f9f9` | `#ffffff` | 1.05:1 | fail |
| `#f9f9f9` | `#000000` | 19.95:1 | AAA |
| `#eb4726` | `#f9f9f9` | 3.65:1 | AA-large |
| `#eb4726` | `#f8d4d4` | 2.81:1 | fail |
| `#eb4726` | `#ffffff` | 3.84:1 | AA-large |
| `#eb4726` | `#000000` | 5.46:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Nunito Sans | `--font-body` | webfont | 300, 600 | Display, headings, body copy, captions, and form text across the page. | Nunito Sans |

- **Nunito Sans:** Use measured light and semibold weights; headings and body copy use tight negative tracking, with natural sentence case.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 300 | 1 | -0.04em | — | Nunito Sans | Oversized hero wordmark, set as the dominant visual statement. |
| h1 | 48px | 300 | 1.16 | -0.03em | — | Nunito Sans | Primary page or section headlines and large introductory statements. |
| h2 | 32px | 600 | 1.2 | -0.02em | — | Nunito Sans | Prominent portfolio or contact section headings. |
| h3 | 24px | 300 | 1.3 | -0.02em | — | Nunito Sans | Project names and smaller supporting headings. |
| body | 16px | 300 | 1.4 | -0.02em | — | Nunito Sans | Agency introduction, project descriptions, and form instructions. |
| caption | 13px | 300 | 1.4 | -0.02em | — | Nunito Sans | Compact project details, labels, and understated utility copy. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 16, 20, 24, 32, 36, 48, 60, 72, 96 px.
- Section rhythm 72px · element gap 10px · card padding — · max content width 1392px.

The page uses a centered composition and a measured maximum content width of 1392px, with comfortable density and a 72px section rhythm. The hero is spacious and centrally aligned; the portfolio shifts into an asymmetric image grid with varied project footprints. White and near-white bands create clear transitions between the pink opening, work gallery, and contact area. Keep captions close to their images, while preserving broad areas of breathing room around major blocks.

## Shape & elevation

- Radius: button `24px` · link `9999px` · xs `24px` · sm `32px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is largely flat, with no measured shadow system or prominent hairlines. Separate content through changes in background colour and generous whitespace. Use rounded white surfaces and image corners for softness; keep the hero 3D object layered over the coral lettering as the page’s intentional depth effect.

## Imagery

Project photography and mockups form the portfolio’s main visual content, including websites on devices, packaging, food, and brand marks. Use crisp rectangular crops with softly rounded corners, and let the source image supply most of its colour. The hero’s translucent sculptural object is a distinctive 3D accent; treat it as a visual overlay, not a recurring card illustration.

## Components

### Top capsule navigation

A compact white rounded capsule near the top center, containing the Agency label and a simple plus-shaped mark.

### Hero wordmark

Oversized coral lettering spans the pink opening, layered with a translucent sculptural 3D shape and a centered short introduction.

### Portfolio tiles

An editorial, uneven grid of project images with concise titles and subdued descriptions positioned close to each image.

### Contact panel

A rounded blush panel nested within a white section, pairing a large two-line invitation with a compact form.

### Form fields

White rounded fields for name, email, budget, service, and project details sit against the pink contact surface.

### Submit button

A black rounded submit control provides a small, high-contrast endpoint to the form.

### Measured component styles

- **Primary button** (“Submit”): background #000000 · text #000000 · radius 32px · padding 24px · 400 12px sans-serif
- **Secondary button**: background #ffffff · text #0000ee · radius 24px · padding 6px · 400 12px sans-serif
- **Link** (“Sharjah Innovation Park Website redesign”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Input** (“Estimated Budget Still defining 5K–10K U”): transparent background · text #000000 · radius 0px · padding 24px · 300 16px Nunito Sans

## Do

- Use Blush Canvas (#f8d4d4) as the dominant brand field.
- Make the hero lettering oversized and coral.
- Keep typography light, clean, and tightly tracked.
- Build the project gallery as an asymmetric editorial grid.
- Use white bands to separate major page regions.
- Give project imagery clear space and restrained captions.

## Don't

- Do not turn the gallery into uniform boxed cards.
- Do not introduce gradients or heavy shadows.
- Do not use Leaf Green as a dominant surface colour.
- Do not crowd the hero with navigation or supporting copy.
- Do not add decorative borders where whitespace already separates content.
- Do not let project-image colours replace the page’s pink-and-coral identity.

## Agent prompt

Build a new creative-agency page in Worth Agency’s visual style. Use Blush Canvas (#f8d4d4) as the main canvas, Studio Ink (#000000) for text, Gallery White (#ffffff) and Quiet White (#f9f9f9) for rounded surfaces and section bands, and Signal Coral (#eb4726) for a bold focal accent. Use Nunito Sans with light, tightly tracked headings and body copy; reserve semibold weight for selective emphasis. Create a spacious centered opening, then an asymmetric project-image gallery with restrained captions and varied image sizes. Add a clearly separated contact section with a blush panel, white rounded fields, and a black submit control. Keep the UI flat, use whitespace instead of borders, and avoid inventing extra palette colours or decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Black full-width closing section with two left-aligned content columns. | Social profile links, Download agency profile | Black background, Light headings, Two-column layout |

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