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

# Creative Giants · Design System

> Immersive creative work, framed with confident restraint.

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

Creative Giants pairs an expansive warm-white canvas with stark black project and contact sections. Oversized condensed lettering, immersive event photography, and bright testimonial cards give the agency homepage a distinctive editorial rhythm.

## North star

Let warm-white space and oversized light typography frame real-world imagery, reserving solid black for focused, high-impact sections.

## Overview

The visual system is built around a warm off-white canvas (#fffef7) and near-total black (#000000), alternating light editorial sections with dramatic dark project and CTA bands. Text is mostly black, with muted gray for supporting copy; bright pink and mint testimonial cards provide controlled color breaks, while berry, green, and pale blue appear as accent text or within specific content rather than defining the whole interface. Switzer’s light sans-serif voice keeps copy airy, while the enormous narrow “CREATIVE GIANTS” wordmark acts as a graphic headline and footer signature. Layouts shift between open, multi-column introductions and tightly framed project imagery, with generous blank intervals separating major blocks. Photography and video show real public activations, installations, and audiences; they are presented directly, not enclosed in decorative frames. Hairline rules and minimal elevation keep the interface flat, while rounded black controls provide small, high-contrast interaction points.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Ivory | `#fffef7` | `--color-gallery-ivory` | brand | Primary page canvas and light-section background; also used for reversed text on black. |
| Stage Black | `#000000` | `--color-stage-black` | brand | Primary text, project and footer bands, dark CTA fields, and filled menu control. |
| Soft Graphite | `#666666` | `--color-soft-graphite` | neutral | Muted supporting text on light surfaces. |
| Smoke Fade | `#333333` | `--color-smoke-fade` | semantic | Dark gradient tone detected in footer and decorative gradient details. |
| Rule Grey | `#aaaaaa` | `--color-rule-grey` | neutral | Subtle borders and form-related hairlines. |
| Powder Blue | `#a5c8eb` | `--color-powder-blue` | accent | Small accent-colored text; not a dominant page surface. |
| Warm Charcoal | `#4d4c4a` | `--color-warm-charcoal` | semantic | Footer border and dark gradient detail. |
| Berry Ink | `#8a0467` | `--color-berry-ink` | accent | Text within the pink testimonial card. |
| Deep Teal | `#03624c` | `--color-deep-teal` | accent | Text within the mint testimonial card. |
| Electric Rose | `#ffacea` | `--color-electric-rose` | surface | Bright testimonial-card background, paired with berry text. |
| Mint Panel | `#a5ebd6` | `--color-mint-panel` | surface | Testimonial-card background, paired with deep teal text. |
| Night Slate | `#101731` | `--color-night-slate` | surface | Inverse-toned card surface detected in measured content. |
| Mid Grey | `#808080` | `--color-mid-grey` | semantic | Grey surface detected in footer content, not a defining brand color. |
| Coal Brown | `#2d2c2b` | `--color-coal-brown` | semantic | Dark footer detail and border tone. |

### Semantic aliases

`--color-canvas` → `#fffef7` (Gallery Ivory) · `--color-surface` → `#000000` (Stage Black) · `--color-surface-2` → `#a5ebd6` (Mint Panel) · `--color-surface-3` → `#101731` (Night Slate) · `--color-surface-4` → `#808080` (Mid Grey) · `--color-text` → `#000000` (Stage Black) · `--color-text-muted` → `#666666` (Soft Graphite) · `--color-text-subtle` → `#fffef7` (Gallery Ivory) · `--color-border` → `#aaaaaa` (Rule Grey) · `--color-accent` → `#a5c8eb` (Powder Blue) · `--color-accent-2` → `#8a0467` (Berry Ink) · `--color-accent-3` → `#03624c` (Deep Teal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fffef7` | 20.77:1 | AAA |
| `#000000` | `#a5ebd6` | 15.45:1 | AAA |
| `#000000` | `#101731` | 1.19:1 | fail |
| `#666666` | `#fffef7` | 5.68:1 | AA |
| `#666666` | `#000000` | 3.66:1 | AA-large |
| `#666666` | `#a5ebd6` | 4.23:1 | AA-large |
| `#666666` | `#101731` | 3.08:1 | AA-large |
| `#fffef7` | `#000000` | 20.77:1 | AAA |
| `#fffef7` | `#a5ebd6` | 1.34:1 | fail |
| `#fffef7` | `#101731` | 17.47:1 | AAA |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0))`
- `linear-gradient(rgb(77, 76, 74), rgb(0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Switzer | `--font-body` | webfont | 300, 400 | Headlines, body copy, navigation, controls, and form text | Inter |

- **Switzer:** Use light 300 weights for most text; tight negative tracking on headings and body. Small labels are uppercase and slightly tracked.

### Type scale — Augmented Fourth (ratio ≈ 1.431, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 84px | 300 | 1 | -0.04em | — | Switzer | Oversized Creative Giants wordmark and major display moments. |
| h1 | 64px | 300 | 1 | -0.04em | — | Switzer | Primary hero and large section headlines. |
| h2 | 54px | 300 | 1 | -0.04em | — | Switzer | Secondary section headings and prominent editorial statements. |
| h3 | 34px | 300 | 1 | -0.04em | — | Switzer | Project names and supporting section titles. |
| h4 | 20px | 300 | 1.4 | -0.04em | — | Switzer | Smaller feature and card headings. |
| body | 14px | 300 | 1.4 | -0.023em | — | Switzer | Descriptions, supporting copy, and form content. |
| caption | 12px | 400 | 1.4 | -0.027em | uppercase | Switzer | Compact uppercase section labels, project metadata, and location. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 1, 2, 6, 8, 10, 12, 16, 24, 32, 48, 64, 80, 112 px.
- Section rhythm 32px · element gap 12px · card padding 48px · max content width 1376px.

The page uses a broad, centered canvas with a measured maximum width of 1376px, but switches to full-bleed media and dark bands where impact matters. Sections alternate between one-column statements, three-column introductory content, project layouts, and split contact/footer arrangements. Alignment is intentionally varied: left-aligned editorial copy contrasts with a centered dark CTA. The overall density is compact within content groups, yet large blank intervals create a slow, cinematic scroll rhythm.

## Shape & elevation

- Radius: button `50%` · pill `9999px`
- Shadow `hairline` (other, button): `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px`
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is predominantly flat: no prominent card shadows or raised surfaces. Separate content through sharp color changes, whitespace, and fine hairline rules. Use the measured subtle white hairline shadow on the dark pill control only where needed; avoid adding depth effects to media or testimonial panels.

## Imagery

Use documentary-style photography and video of installations, public interventions, crowds, and cultural events. The hero uses full-width moving or still imagery beneath the oversized wordmark, while project and news areas use direct rectangular image crops. Keep the media vivid and authentic; avoid decorative filters, illustrations, or product-render styling. Testimonial cards add flat color fields rather than image-led backgrounds.

## Components

### Pill menu control

A compact black, fully rounded control with warm-white text; use the measured subtle white hairline shadow where applicable.

### Wordmark display

Huge, narrow uppercase lettering spans the page width on warm white and returns as a reversed signature across the black footer.

### Project showcase

Dark section with project numbering, large titles, rectangular documentary imagery, metadata, and concise descriptions.

### Testimonial cards

Flat, square-corner pink and mint panels with matching berry and teal text; keep generous internal breathing room.

### News cards

Editorial image-led cards with concise headlines and muted supporting summaries on the warm-white canvas.

### Contact form

Open two-column contact layout with minimal fields, black text, restrained gray rules, and a simple text-led submit action.

### Measured component styles

- **Primary button** (“Menu Close”): background #000000 · text #fffef7 · radius 1440px · padding 14.1px 20px · 300 16px Switzer · shadow rgba(255, 255, 255, 0.2) 0px 0px 0px 1px
- **Secondary button**: transparent background · text #ffffff · border 1px solid #000000 · radius 1440px · padding 8px · 300 16px Switzer
- **Link** (“UNIQUE PUBLIC INTERVENTIONS // IMMERSIVE”): transparent background · text #000000 · radius 0px · padding 0px · 300 16px Switzer
- **Input**: transparent background · text #000000 · radius 0px · padding 8px 12px 0px 0px · 300 16px Switzer
- **Card** (“Working with this team of brilliant, pro”): background #ffacea · text #8a0467 · radius 0px · padding 48px · 300 16px Switzer
- **Navigation item** (“BRIGHTON, UNITED KINGDOM Production, des”): transparent background · text #000000 · radius 0px · padding 0px · 300 16px Switzer

## Do

- Use #fffef7 as the default canvas rather than pure white.
- Alternate light editorial areas with purposeful #000000 sections.
- Set most typography in a light Switzer-like sans-serif.
- Treat the oversized wordmark as a major graphic element.
- Use real event photography and full-bleed video where appropriate.
- Keep testimonial colors limited to distinct flat panels.
- Separate sections with whitespace and fine rules instead of shadows.

## Don't

- Do not introduce gradients as a general page background.
- Do not make every section a card or boxed panel.
- Do not add heavy shadows, borders, or rounded containers.
- Do not use saturated accents across the whole interface.
- Do not center-align all editorial copy.
- Do not replace documentary imagery with generic stock-style renders.

## Agent prompt

Build a new agency page in the Creative Giants visual style. Use Gallery Ivory (#fffef7) as the main canvas and Stage Black (#000000) for focused project, CTA, and footer sections. Set a light, tightly tracked sans-serif close to Switzer; pair small uppercase labels with oversized, narrow-feeling display lettering. Organize content into open editorial layouts, split project showcases, and occasional full-bleed photography or video of real events. Keep surfaces flat and use whitespace, sharp color transitions, and subtle hairlines for separation. Reserve Electric Rose (#ffacea) and Mint Panel (#a5ebd6) for limited testimonial or highlight panels, with Berry Ink (#8a0467) and Deep Teal (#03624c) as their text accents. Use simple black pill controls sparingly, and preserve an unhurried, cinematic section rhythm.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width wordmark above a full-bleed video or image, with overlaid location and headline copy. | immersive media, menu access | oversized wordmark, black pill menu, overlaid location label |
| 2 | feature-split | Open three-column editorial introduction with a large left-aligned statement, supporting copy, and compact statistics. | agency introduction, proof points | large light headline, small uppercase label, inline statistics |
| 3 | product-showcase | Black three-column project area with project titles, large imagery, and compact metadata. | project browsing, view-all link | dark canvas, project numbering, thin divider |
| 4 | gallery | Large black field with centered CTA heading and staggered event imagery in narrow columns. | project discovery, contact CTA | centered light headline, staggered image tiles, subtle vertical rules |
| 5 | testimonials | Horizontal carousel of large colored quote panels followed by a row of client marks. | testimonial carousel, client credibility | pink and mint quote cards, carousel arrows, client logo strip |
| 6 | content-feed | Editorial three-column image-led feed with a heading and carousel-style navigation. | news browsing, article links | image cards, muted summaries, carousel arrows |
| 7 | contact | Two-column contact block with explanatory heading on the left and open form on the right. | project enquiry, form submission | minimal text fields, fine field rules, text-led submit |
| 8 | footer | Black footer split into agency details, vertical navigation, and a discovery-session invitation. | site navigation, contact access | light text, arrow links, compact columns |
| 9 | other | Full-width black canvas with an oversized reversed wordmark. | brand recall | giant light wordmark, high-contrast finish |

## Source CSS custom properties (selected)

```css
--_theme---background-color--background-primary: #fffef7;
--_typography---font--primary-font: Switzer, Arial, sans-serif;
--_theme---text-color--text-primary: black;
--_typography---font-size--main: 1rem;
--_typography---letter-spacing--0-02em: -.02em;
--_typography---font-size--h1: 5.25rem;
--_typography---font-weight--light: 300;
--_typography---letter-spacing--0-04em: -.04em;
--_typography---font-size--h2: 4.625rem;
--_typography---font-size--h3: 4rem;
--_typography---font-size--h4: 3.375rem;
--_typography---font-size--h5: 2.75rem;
--_typography---font-size--h6: 2.125rem;
--_theme---link-color--link-primary: black;
--_theme---text-color--text-secondary: #666;
--_theme---text-color--text-alternate<deleted|relume-variable-text-color-3>: #fffef7;
--_theme---border-color--border-primary: black;
--_typography---font-size--small: .875rem;
--_theme---button-primary--button-border: black;
--_theme---button-primary--button-bg: black;
--_theme---button-primary--button-text: #fffef7;
--_theme---button-link--button-text: black;
--_theme---button-tertiary--button-border: #eee;
--_theme---button-tertiary--button-bg: #eee;
--_theme---button-tertiary--button-text: black;
--brand--white: #fffef7;
--brand--yellow: #ffd001;
--brand--black: black;
--_theme---border-color--border-tertiary: #aaa;
--_typography---font-size--large: 1.125rem;
--_theme---background-color--background-secondary<deleted|relume-variable-background-color-2>: #eee;
--_theme---background-color--background-alternate<deleted|relume-variable-background-color-4>: black;
--_theme---link-color--link-alternate<deleted|relume-variable-link-color-3>: #fffef7;
--_theme---background-color--background-tertiary<deleted|relume-variable-background-color-3>: #aaa;
--_theme---text-color--text-secondary<deleted|relume-variable-text-color-2>: black;
--_theme---background-color--background-success: #ecfdf3;
--_theme---text-color--text-success: #027a48;
--_theme---background-color--background-error: #fef3f2;
--_theme---text-color--text-error: #b42318;
--_projects---secondary: #fffef7;
```

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