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

# International Magic · Design System

> Quiet space, bold creative work

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

A restrained studio homepage pairs a centered introduction with a vertically paced showcase of richly varied creative projects. A near-white canvas and muted typography keep attention on the work rather than interface decoration.

## North star

Keep the interface visually quiet and let generous space and vivid project imagery carry the experience.

## Overview

The page is anchored by a near-white canvas, #f7f7f7, that extends through the introduction and project sequence. Typography stays within a narrow grayscale range: #4d4d4d carries the prominent introductory statement, #121212 marks stronger text and navigation, while #737373 is used for quieter text and links. A fine #d4d4d4 hairline defines the compact top navigation without introducing heavy framing. Wand UI Pro gives the page a clean, contemporary sans-serif voice; the large centered opening statement is followed by small navigation and caption-like text. The layout is deliberately sparse: generous blank intervals separate isolated project images, letting each image read as an editorial plate. Imagery supplies the page’s strongest color and contrast, including photographic scenes, printed graphics, and dark artwork; those hues belong to project content, not the core interface palette. Subtle image shadows add depth while the surrounding interface remains nearly flat.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#f7f7f7` | `--color-gallery-white` | surface | Continuous page canvas behind the introduction, navigation, and widely spaced project imagery. |
| Soft Graphite | `#4d4d4d` | `--color-soft-graphite` | neutral | Primary muted text, most visibly the large centered studio introduction. |
| Quiet Hairline | `#d4d4d4` | `--color-quiet-hairline` | neutral | Fine border defining the compact navigation bar. |
| Near Black | `#121212` | `--color-near-black` | brand | Strong text and navigation labels; also appears in a muted Updates button. |
| Slate Grey | `#737373` | `--color-slate-grey` | neutral | Secondary text and small link text, including quiet utility links. |

### Semantic aliases

`--color-canvas` → `#f7f7f7` (Gallery White) · `--color-text` → `#121212` (Near Black) · `--color-text-muted` → `#4d4d4d` (Soft Graphite) · `--color-text-subtle` → `#737373` (Slate Grey) · `--color-border` → `#d4d4d4` (Quiet Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121212` | `#f7f7f7` | 17.49:1 | AAA |
| `#4d4d4d` | `#f7f7f7` | 7.89:1 | AAA |
| `#737373` | `#f7f7f7` | 4.43:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Wand UI Pro | `--font-body` | webfont | 500, 475 | All measured text: introduction, navigation, body copy, captions, buttons, and links. | Inter |

- **Wand UI Pro:** Medium weight throughout; restrained sentence case, slightly tight headline tracking and lightly open body tracking.

### Type scale — Custom (ratio ≈ 2.133, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 500 | 1.2 | -0.01em | — | Wand UI Pro | Centered introductory studio statement. |
| body | 15px | 500 | 1.2 | 0.013em | — | Wand UI Pro | Project names, supporting copy, and general interface text. |
| caption | 11px | 500 | 1.6 | 0.025em | — | Wand UI Pro | Small project metadata and quiet supporting labels. |
| button | 15px | 500 | 1.25 | 0.013em | — | Wand UI Pro | Navigation or utility actions such as Updates. |
| link | 11px | 500 | 1.6 | 0.025em | — | Wand UI Pro | Small secondary links such as Privacy. |

OpenType features in use: `"ordn", "ss01"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 8, 10, 12, 16, 20 px.
- Section rhythm — · element gap 10px · card padding — · max content width 1432px.

The page uses a single-column, editorial composition within a measured maximum width of 1432px. The compact navigation sits centered near the top, while the introductory statement is centered below it. Project images are presented individually rather than in a dense grid, with substantial blank intervals establishing a slow vertical rhythm. Image widths and placements vary, creating a curated sequence rather than a rigid card system. Comfortable density and broad surrounding whitespace are defining features.

## Shape & elevation

- Radius: button `3px` · card `3px` · xs `3px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.25) 0px 64px 72px 0px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.12) 0px 12px 32px 0px`
- Motion: standard transition `0.15s ease` on interactive elements.

The interface is predominantly flat, without filled cards or prominent shadows. A fine grey hairline outlines the navigation, while project images may have a deep, diffuse shadow that separates artwork from the canvas. Keep borders and layering limited to these restrained cues.

## Imagery

Project imagery is the main source of color and visual contrast: photographed installations, printed design, campaign imagery, and dark graphic compositions. Frames sit directly on the pale canvas, with varied image proportions and occasional subtle shadows. Bright hues and black backgrounds occur within the artwork itself; they should not be generalized into interface accents.

## Components

### Compact top navigation

A centered, lightly outlined horizontal bar with Projects and Studio at the sides and the International Magic wordmark centered; labels use Wand UI Pro.

### Introductory statement

A large centered block of muted grey copy on the canvas, serving as the homepage’s primary introduction.

### Project image plate

An isolated project image positioned within the open single-column flow; image content supplies its own palette and contrast.

### Utility Updates control

A compact, pale-grey button with near-black text, a subtle 3px corner radius, and horizontal padding.

### Project label

Small, understated text identifying work such as State of Fashion or Martine Rose × Nike, with ample space around the associated image.

### Quiet text link

Small grey utility link such as Privacy, without a filled background or visible border.

### Measured component styles

- **Primary button** (“Updates”): background #e7e7e7 · text #121212 · radius 3px · padding 0px 20px · 500 15px Wand UI Pro
- **Link** (“International Magic”): transparent background · text #121212 · radius 0px · padding 0px · 500 15px Wand UI Pro
- **Card**: transparent background · text #121212 · radius 3px · padding 0px · 400 16px Wand UI Pro · shadow rgba(0, 0, 0, 0.25) 0px 64px 72px 0px

## Do

- Use #f7f7f7 as the uninterrupted page canvas.
- Center the opening studio statement.
- Keep navigation compact and lightly outlined.
- Let project images introduce their own colors.
- Separate project plates with generous blank space.
- Use Wand UI Pro or a close sans-serif substitute.

## Don't

- Do not add colorful interface accents.
- Do not compress projects into a dense grid.
- Do not place heavy card backgrounds behind images.
- Do not use oversized decorative headings in navigation.
- Do not mistake colors inside artwork for brand palette colors.
- Do not add strong borders or pronounced interface shadows.

## Agent prompt

Build a new creative-studio page with the quiet editorial character of International Magic. Use Gallery White (#f7f7f7) as the continuous canvas, Soft Graphite (#4d4d4d) for the centered introductory statement, Near Black (#121212) for strong labels, Slate Grey (#737373) for quieter links, and Quiet Hairline (#d4d4d4) for delicate framing. Use Wand UI Pro, or Inter as a free substitute, with restrained medium-weight typography. Keep the navigation compact and centered, then give the opening copy generous breathing room. Present projects as a vertical sequence of individually framed images, varying their proportions and allowing artwork to bring its own color. Favor large blank intervals, subtle image shadows, and an otherwise flat interface; avoid dense grids, decorative gradients, and loud controls.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered introductory statement on a near-white canvas beneath compact top navigation. | Studio overview, Primary orientation | Centered text, Minimal top navigation, Fine outline |
| 2 | gallery | Single-column project sequence with isolated imagery and substantial vertical whitespace. | Browse featured work, Scroll-led discovery | Variable image proportions, Soft image shadows, Minimal project labels |
| 3 | gallery | Open vertical gallery with large image plates separated by generous blank intervals. | Continue portfolio browsing, Visual project discovery | Editorial image framing, Canvas-colored surroundings, Subtle depth |
| 4 | gallery | Single-column editorial presentation of project imagery with ample breathing room. | Browse brand work, Scroll to explore | Image-led presentation, Minimal framing, Open spacing |

## Source CSS custom properties (selected)

```css
--ui-accent: #1a66ff;
--ui-accent-translucent: rgba(25,102,255,.5);
--ui-accent-rgb: 26,102,255;
--ui-accent-translucent-rgb: 26,102,255;
--ui-primary-text-emphasis: #052c65;
--ui-secondary-text-emphasis: #2b2f32;
--ui-success-text-emphasis: #19422e;
--ui-info-text-emphasis: #055160;
--ui-warning-text-emphasis: #640;
--ui-danger-text-emphasis: #661e0a;
--ui-light-text-emphasis: #495057;
--ui-dark-text-emphasis: #495057;
--ui-primary-bg-subtle: #cfe2ff;
--ui-secondary-bg-subtle: #e2e3e5;
--ui-success-bg-subtle: #d9ede3;
--ui-info-bg-subtle: #cff4fc;
--ui-warning-bg-subtle: #fec;
--ui-danger-bg-subtle: #ffdbd1;
--ui-light-bg-subtle: #fcfcfd;
--ui-dark-bg-subtle: #ced4da;
--ui-primary-border-subtle: #9ec5fe;
--ui-secondary-border-subtle: #c4c8cb;
--ui-success-border-subtle: #b2dbc7;
--ui-info-border-subtle: #9eeaf9;
--ui-warning-border-subtle: #fd9;
--ui-danger-border-subtle: #ffb7a3;
--ui-light-border-subtle: #e9ecef;
--ui-dark-border-subtle: #adb5bd;
--ui-font-sans-serif: "Wand UI Pro",sans-serif;
--ui-font-monospace: monospace;
--ui-body-font-family: "Wand UI Pro",sans-serif;
--ui-body-font-size: 1rem;
--ui-body-font-weight: normal;
--ui-body-color: #f7f7f7;
--ui-body-color-rgb: 247,247,247;
--ui-body-bg: #0d0d0d;
--ui-body-bg-rgb: 13,13,13;
--ui-emphasis-color: #000;
--ui-emphasis-color-rgb: 0,0,0;
--ui-secondary-color: hsla(0,0%,97%,.75);
```

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