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

# Zeus Jones · Design System

> Warm editorial restraint meets expressive brand work.

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

Zeus Jones pairs a quiet, warm canvas with oversized editorial typography and a compact portfolio of vivid client work. The page moves from a spacious brand statement through selected projects, services, a newsletter feature, client names, and a restrained contact footer.

## North star

Keep the page quiet and typographic so vivid project imagery, not decorative UI, carries the contrast.

## Overview

The page is anchored by Gallery Cream (#fcfaf3), a warm near-white canvas that occupies most of the experience and gives the work a calm editorial frame. Ink (#1a1c2c) supplies the logo, navigation, headings, body copy, links, hairlines, and dark pill CTAs; Pale Stone (#ebe9e4) is reserved for the newsletter card rather than used as a broad section band. Large, expressive headlines combine a light serif with a clean sans, including selectively underlined words and italic serif emphasis. A small logo and menu sit at the top, while the hero statement is left aligned with substantial surrounding whitespace. The portfolio uses a compact multi-column rhythm and colorful, rounded project imagery as contrast against the restrained shell. Service and client-list sections return to typography-led layouts, and the footer stays sparse and functional. Rounded media and pill buttons soften the otherwise flat, high-contrast composition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#1a1c2c` | `--color-studio-ink` | brand | Logo, headings, body copy, navigation, links, fine rules, and dark primary pill buttons. |
| Gallery Cream | `#fcfaf3` | `--color-gallery-cream` | neutral | Dominant page canvas and light button fill; preserve its warm, low-contrast editorial atmosphere. |
| Pale Stone | `#ebe9e4` | `--color-pale-stone` | surface | Newsletter feature card surface; a quiet contrast against the cream canvas. |

### Semantic aliases

`--color-canvas` → `#fcfaf3` (Gallery Cream) · `--color-surface` → `#1a1c2c` (Studio Ink) · `--color-surface-2` → `#ebe9e4` (Pale Stone) · `--color-text` → `#1a1c2c` (Studio Ink) · `--color-border` → `#1a1c2c` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1c2c` | `#fcfaf3` | 16.13:1 | AAA |
| `#1a1c2c` | `#ebe9e4` | 13.89:1 | AAA |

### Gradients

- `linear-gradient(140deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ZJSansDisplay | `--font-body` | webfont | 400, 500 | Primary sans for display, navigation, headings, body, links, labels, and buttons. | Inter |
| FeatureDeckLight | `--font-display` | webfont | 100 | Light serif voice in the hero and editorial display headings. | Cormorant Garamond |

- **ZJSansDisplay:** Mostly regular weight with occasional medium uppercase eyebrow and caption labels; keep tracking restrained.
- **FeatureDeckLight:** Use a delicate, low-weight editorial contrast; italic styling appears in the hero for emphasis.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 90px | 400 | 1.11 | -0.02em | — | ZJSansDisplay | Oversized hero statement, combining expressive serif and sans emphasis. |
| h1 | 60px | 100 | 1.07 | 0 | — | FeatureDeckLight | Light serif editorial headline treatment. |
| h2 | 48px | 400 | 1.6 | 0 | — | ZJSansDisplay | Large section or service heading in the primary sans. |
| h3 | 40px | 400 | 1.2 | 0 | — | ZJSansDisplay | Project and content feature headings. |
| h4 | 24px | 400 | 1.25 | 0 | — | ZJSansDisplay | Compact card or subsection heading. |
| body | 18px | 400 | 1.6 | 0 | — | ZJSansDisplay | Project descriptions, service copy, and supporting paragraphs. |
| caption | 12px | 500 | 1 | 0.05em | uppercase | ZJSansDisplay | Small uppercase project labels and metadata. |
| button | 16px | 400 | 1 | 0 | — | ZJSansDisplay | Pill CTA and newsletter sign-up labels. |
| nav | 48px | 400 | 1.6 | 0 | — | ZJSansDisplay | Large menu links when the navigation is opened. |
| link | 18px | 400 | 1.6 | 0 | — | ZJSansDisplay | Inline project, editorial, and utility links. |
| eyebrow | 12px | 500 | 1 | 0.05em | uppercase | ZJSansDisplay | Small uppercase labels introducing content sections. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 7, 8, 10, 12, 15, 16, 20, 24, 32, 40, 64, 120 px.
- Section rhythm 120px · element gap — · card padding — · max content width 1424px.

Use a wide, spacious canvas with a measured page max width of 1424px and left-aligned content. The opening hero gives the statement generous breathing room before a thin divider introduces the project gallery. The work section uses a responsive multi-column grid; later service and client-list blocks return to simpler editorial layouts. Keep the section rhythm spacious, with a measured section gap of 120px, and avoid filling every area with cards or controls.

## Shape & elevation

- Radius: button `9999px` · card `20px` · media `20px` · xs `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is predominantly flat, with no measured shadows. Separate major content through whitespace and occasional thin Ink rules rather than stacked surfaces. Use the Pale Stone card surface for the newsletter feature and soft rounded corners on cards and media; reserve pill-shaped rounding for buttons.

## Imagery

Use client work as the page’s main source of visual variation: colorful packaging, campaign imagery, and brand-led photography sit in rounded media frames against the restrained canvas. The newsletter feature pairs a graphic cover image with copy in a light card. Favor vivid, art-directed crops with simple framing; the color variety inside the work is illustrative content, not an expanded interface palette.

## Components

### Header

Compact brand mark at the upper left and a simple menu control at the upper right, both in Studio Ink on Gallery Cream.

### Hero statement

Large, left-aligned editorial headline with mixed sans and light serif voices, selective italics, and underlined emphasis.

### Project gallery

Recent work presented as a multi-column set of linked image cards with rounded media, small uppercase client labels, and concise descriptions.

### Service carousel

One service at a time, with a numbered progress cue, heading, short explanation, dark pill contact CTA, and next control.

### Newsletter feature

Rounded Pale Stone card pairing a cover visual with a headline, short copy, and a simple subscription link.

### Client list

A typography-led roster of client names introduced by a small eyebrow and short rule.

### Footer signup

Sparse two-column contact and newsletter details with a minimal email field, dark Sign up pill, and certification note.

### Measured component styles

- **Primary button** (“Explore our thinking”): background #fcfaf3 · text #1a1c2c · border 2px solid #fcfaf3 · radius 1584px · padding 12px 20px · 400 16px ZJSansDisplay
- **Secondary button** (“Interested? let’s talk”): background #1a1c2c · text #fcfaf3 · border 2px solid #1a1c2c · radius 1782px · padding 16px 32px · 400 18px ZJSansDisplay
- **Link** (“OOBLI Restoring the joy of sweetness tha”): transparent background · text #1a1c2c · radius 0px · padding 0px · 400 18px ZJSansDisplay
- **Input**: transparent background · text #1a1c2c · radius 0px · padding 0px 0px 8px 0px · 400 18px ZJSansDisplay
- **Card** (“See how emotion and imagination are subv”): background #ebe9e4 · text #1a1c2c · radius 20px · padding 0px · 400 18px ZJSansDisplay
- **Navigation item** (“Open Menu”): transparent background · text #1a1c2c · radius 0px · padding 0px · 400 18px ZJSansDisplay

## Do

- Use Gallery Cream (#fcfaf3) as the dominant page canvas.
- Set core text, links, and rules in Studio Ink (#1a1c2c).
- Pair the clean sans with a light editorial serif for display contrast.
- Let whitespace create section separation instead of decorative panels.
- Use rounded frames for portfolio media and the newsletter feature.
- Keep CTAs simple, high-contrast pills with concise labels.

## Don't

- Do not introduce unmeasured brand colors into interface surfaces.
- Do not make every section a card or add unnecessary shadows.
- Do not center all content; preserve the left-aligned editorial flow.
- Do not let project imagery dictate the site-wide interface palette.
- Do not replace the mixed-type hero with a uniform heavy sans.
- Do not crowd the header or add dense navigation to the resting view.

## Agent prompt

Build a new page in the Zeus Jones visual style: a spacious, editorial agency canvas using Gallery Cream (#fcfaf3) as the dominant background and Studio Ink (#1a1c2c) for text, links, rules, and primary CTA fills. Use Pale Stone (#ebe9e4) only for a quiet feature surface. Pair a clean sans similar to Inter with a light editorial serif similar to Cormorant Garamond; make the main statement large, left aligned, and selectively emphasize words with serif italics or underlining. Keep the header minimal, sections clearly separated by generous whitespace, and project imagery vivid but contained in rounded media frames. Favor typography-led service and client sections, subtle hairlines, and flat surfaces without shadows. Use simple pill buttons and keep controls secondary to the content.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed cream opening with compact logo and menu above a large, left-aligned statement. | minimal menu trigger, expressive headline | warm canvas, mixed serif and sans, underlined emphasis |
| 2 | product-grid | Recent-work introduction followed by a responsive multi-column gallery of linked client projects. | linked project cards, scan client labels | rounded imagery, compact captions, thin section rule |
| 3 | feature-grid | Single-column service presentation with a progress indicator, supporting copy, CTA, and next control. | numbered progression, next-service control, contact CTA | large sans heading, dark pill button, open cream canvas |
| 4 | newsletter | Compact feature card combining a cover image and editorial copy. | subscribe link | Pale Stone surface, rounded media and card, two-part composition |
| 5 | logo-cloud | Small introductory label above a large, multi-line typographic client roster. | browse client names | serif-led name list, short hairline, generous whitespace |
| 6 | footer | Sparse two-column footer for address and social details, newsletter signup, and certification. | email signup, contact links, legal links | understated field rule, dark pill submit, small utility text |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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