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

# Moxie PR · Design System

> Editorial storytelling against a confident black canvas

**Theme:** dark · **Industry:** agency · **Source:** https://www.moxiegrouppr.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._

Moxie’s homepage pairs refined editorial typography with a near-black canvas and selectively applied periwinkle accents. A generous hero leads into client logos, a mosaic of campaign media, service information, testimonials and a compact team showcase.

## North star

Keep the page quiet and spacious, then let editorial serif headlines, vivid client imagery and a few blue accents create the emphasis.

## Overview

The page is anchored by a predominantly black canvas (#000000), letting warm ivory (#f4efd4) typography carry the visual identity. Periwinkle blue (#84acfb) is a deliberate signal rather than a broad surface colour: it picks out the final phrase in the hero and the primary client CTA. IBM Plex Serif supplies the lightweight, editorial headline voice, while IBM Plex Sans keeps navigation, service lists, captions and supporting copy direct and compact. The centered hero has generous breathing room; below it, client logos and case-study media introduce denser visual sequences. The case-study gallery uses an asymmetric mosaic of colorful photography and video, with dark gutters and rounded image corners. Service information shifts to a multi-column arrangement with fine, low-contrast curved linework. Testimonials use charcoal panels against black, while team portraits are presented as grayscale cards. Keep section backgrounds mostly continuous and use hairlines and restrained contrast instead of heavy elevation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Ivory | `#f4efd4` | `--color-warm-ivory` | brand | Primary text, logo, headings, navigation and footer details on the black canvas. |
| Stage Black | `#000000` | `--color-stage-black` | neutral | Dominant page canvas and continuous background across the hero and content sections. |
| Soft Charcoal | `#1a1a1a` | `--color-soft-charcoal` | surface | Subtle raised content surfaces, most apparent in testimonial cards and dark media framing. |
| Periwinkle Signal | `#84acfb` | `--color-periwinkle-signal` | accent | Primary CTA fill and selective emphasized headline text, including the hero’s closing phrase. |
| Muted Olive | `#626055` | `--color-muted-olive` | semantic | Subdued button outlines and fine separators; keep borders low-contrast against black. |

### Semantic aliases

`--color-canvas` → `#000000` (Stage Black) · `--color-surface` → `#1a1a1a` (Soft Charcoal) · `--color-text` → `#f4efd4` (Warm Ivory) · `--color-border` → `#626055` (Muted Olive) · `--color-accent` → `#84acfb` (Periwinkle Signal) · `--color-on-accent` → `#f4efd4` (Warm Ivory)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f4efd4` | `#000000` | 18.14:1 | AAA |
| `#f4efd4` | `#1a1a1a` | 15.04:1 | AAA |
| `#84acfb` | `#000000` | 9.28:1 | AAA |
| `#84acfb` | `#1a1a1a` | 7.69:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| IBM Plex Sans | `--font-body` | webfont | 300, 400, 500 | Navigation, body copy, service lists, captions, buttons and supporting text. | Inter |
| IBM Plex Serif | `--font-display` | webfont | 300, 500, 400 | Large editorial hero and section headlines. | Lora |

- **IBM Plex Sans:** Use light weights for body and navigation, regular for compact captions and buttons; keep tracking neutral and casing natural.
- **IBM Plex Serif:** Use light weight and airy line breaks; occasional italic blue emphasis adds contrast without changing the restrained case style.

### Type scale — Augmented Fourth (ratio ≈ 1.376, base 15.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 55.5px | 300 | 1.1 | 0 | — | IBM Plex Serif | Centered, multi-line hero statement with an italic blue closing phrase. |
| h2 | 43.5px | 300 | 1.1 | 0 | — | IBM Plex Serif | Large editorial section titles, including services and client feedback. |
| h3 | 27.5px | 300 | 1.1 | 0 | — | IBM Plex Serif | Secondary feature or team headings. |
| h4 | 26px | 300 | 1.1 | 0 | — | IBM Plex Serif | Smaller service and content subsection headings. |
| body | 15.5px | 300 | 1.5 | 0 | — | IBM Plex Sans | Light supporting copy, testimonials, service details and team introduction. |
| caption | 14px | 400 | 1.2 | 0 | — | IBM Plex Sans | Compact names, roles and media labels. |
| nav | 14px | 300 | 1.5 | 0 | — | IBM Plex Sans | Small, understated menu and header navigation text. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 7, 9, 14, 17, 19, 21, 28, 31, 35, 48, 52, 76, 87, 93 px.
- Section rhythm 35px · element gap 21px · card padding — · max content width 1142px.

Use a centered content frame with a measured maximum width of 1142px, while preserving broad black margins and generous open space. The hero is centered and narrow in feel; client marks form a horizontal band beneath it. Case-study media uses a three-column, asymmetric mosaic rather than uniform tiles. Services spread across four columns, testimonials form a horizontal card rail, and the team section pairs introductory copy with portrait cards. Keep section transitions spacious and alignment deliberate.

## Shape & elevation

- Radius: button `50%` · nav `9999px` · xs `9px` · sm `14px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.6s cubic-bezier(0.42, 0, 0.58, 1)` on interactive elements.

The design is mostly flat: black sections flow together without visible elevation or drop shadows. Use charcoal panels to distinguish testimonial cards and fine olive-gray borders for outlined pill controls. Image tiles provide their own depth through photography, rounded corners and close dark gutters; keep overlays and layered effects minimal.

## Imagery

Client logos appear as a restrained horizontal proof strip. The case-study gallery is the most image-rich area: mix portrait and landscape campaign stills, product imagery and video thumbnails in an asymmetric collage. Preserve the original media’s color rather than adding a uniform filter. Team portraits are monochrome, tightly framed cards; avoid decorative illustration outside the fine service-section linework.

## Components

### Header

Sparse black header with a small menu icon at left, centered Moxie wordmark, and a right-aligned periwinkle pill CTA.

### Hero statement

Centered IBM Plex Serif headline in warm ivory, broken into short lines and finished with italic periwinkle emphasis.

### Client logo band

Horizontal row of client marks beneath the hero; logos retain their individual treatments against the black background.

### Case-study mosaic

Asymmetric three-column media collage combining varied tile widths, campaign stills, video previews and rounded corners.

### Service framework

Four-column service content framed by subtle curved hairlines; use ivory headings and compact supporting lists.

### Testimonial rail

Horizontal row of dark charcoal quote cards with small ivory copy, restrained blue quotation marks and compact attribution.

### Team portrait cards

Editorial team section pairing introductory copy with grayscale portrait cards and small name-and-role captions.

### Footer

Compact black footer with the Moxie wordmark and understated location, contact, social and legal links.

### Measured component styles

- **Primary button** (“Become a Client”): background #84acfb · text #f4efd4 · border 1px solid #161519 · radius 1000px · padding 6.9px 20.8px · 400 12.1115px IBM Plex Sans
- **Secondary button** (“Meet the team”): background #0e0e0c · text #f4efd4 · border 1px solid #626055 · radius 1000px · padding 6.9px 17.3px · 400 13.8417px IBM Plex Sans
- **Navigation item** (“Go Home page Become a Client”): transparent background · text #f4efd4 · radius 0px · padding 0px · 300 13.8417px IBM Plex Sans

## Do

- Use #000000 as the continuous primary canvas.
- Set editorial headlines in a light serif style.
- Reserve #84acfb for decisive emphasis and the primary CTA.
- Let colorful client media supply most of the image-led contrast.
- Keep navigation and supporting copy compact and understated.
- Use asymmetric media tiles and generous negative space.
- Keep borders and section linework subtle.

## Don't

- Do not introduce broad bright section backgrounds.
- Do not use heavy shadows or conspicuous gradients.
- Do not make every headline blue or italic.
- Do not force campaign imagery into uniform square tiles.
- Do not crowd the hero with supporting controls.
- Do not replace fine linework with bold dividers.

## Agent prompt

Build a new agency page in Moxie’s editorial visual language. Use Stage Black (#000000) as the continuous canvas and Warm Ivory (#f4efd4) for most text. Set large statements in a light IBM Plex Serif style, with IBM Plex Sans for navigation, body copy, labels and controls. Introduce Periwinkle Signal (#84acfb) sparingly for a primary pill CTA and short headline emphasis. Keep the header sparse, the hero centered with ample negative space, and content inside a measured 1142px maximum frame. Use an asymmetric media mosaic that preserves the imagery’s own colors, then organize service details into columns and testimonials into charcoal cards. Use Muted Olive (#626055) only for subtle outlines or hairlines. Avoid shadows, bright section bands and excessive decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered editorial headline on black, followed by a horizontal client-logo band and expansive negative space. | Primary client CTA in header, Client proof beneath hero | Light serif headline, Italic blue emphasis, Sparse dark header, Horizontal logo row |
| 2 | category-nav | Single centered heading and a concise consumer, enterprise and venture category sequence. | Communicates areas of focus | Centered serif heading, Blue highlighted category |
| 3 | gallery | Three-column asymmetric mosaic of mixed media tiles on the black canvas. | Clickable client case studies, Mixed image and video previews | Varied tile proportions, Rounded media corners, Brand labels on imagery |
| 4 | cta | Short, centered editorial statement with generous black space around it. | Reinforces agency positioning | Centered serif text, Minimal decoration |
| 5 | feature-grid | Four service columns within a broad section, accented by understated curved hairlines. | Scannable service categories | Multi-column lists, Fine curved linework, Low-contrast dividers |
| 6 | testimonials | Horizontal testimonial cards with small navigation controls. | Horizontal testimonial browsing, Previous and next controls | Charcoal cards, Quote accents, Compact attribution |
| 7 | team | Introductory copy alongside a portrait-card grid, with names and roles below images. | Team introduction, Meet-the-team link | Grayscale portraits, Editorial text block, Small portrait captions |
| 8 | footer | Single compact row containing the wordmark, contact links, locations and legal navigation. | Contact access, Social and legal navigation | Small text links, Wordmark at left, Black background |

## Source CSS custom properties (selected)

```css
--link-color--link-yellow: #f4efd4;
--background-color--background-blue: #84acfb;
--base-brand--yellow: #f4efd4;
--background-color--background-yellow: #f4efd4;
--background-color--background-black: #000;
--text-color--text-yellow: #f4efd4;
--text-color--text-black: #000;
--text-color--text-blue: #84acfb;
--border-color--border-primary: #eee;
--background-color--background-lavander: #dbcbf2;
--_size---radius--full: 1000px;
--background-color--background-white: #fff;
--background-color--background-error: #f8e4e4;
--text-color--text-error: #cc2727;
--_button---bg-radial: rgba(0, 0, 0, 0);
--base-brand--lavander: #dbcbf2;
--_button---border: color-mix(in srgb, #f4efd4 40%, transparent);
--_button---bg: color-mix(in srgb, #f4efd4 6%, transparent);
--_button---color: #f4efd4;
--background-color--background-warning: #fcf8d8;
--text-color--text-warning: #5e5515;
--link-color--link-blue: #84acfb;
--text-color--text-white: #fff;
--text-color--text-lavander: #dbcbf2;
--_size---radius--10px: .625rem;
--_size---radius--8px: .5rem;
--_size---radius--16px: 1rem;
--_button---bg-hover: color-mix(in srgb, #f4efd4 12%, transparent);
--base-brand--blue: #84acfb;
--_button---bg-radial-hover: transparent;
--_button---border-hover: color-mix(in srgb, #f4efd4 65%, transparent);
--background-color--background-success: #cef5ca;
--border-color--border-secondary: #f4efd4;
--border-color--border-alternate: #222;
--link-color--link-black: #000;
--link-color--link-white: #fff;
--text-color--text-success: #114e0b;
--glow-border: transparent 0deg, transparent 45deg, rgba(219, 203, 242, 0.5) 90deg, transparent 135deg, transparent 360deg;
--glow-radial-color-1: rgba(219, 203, 242, 0.24);
--ease-button: cubic-bezier(0.42, 0, 0.58, 1);
```

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