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

# North Kingdom · Design System

> A cinematic canvas for bold creative work.

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

North Kingdom’s homepage pairs a near-black canvas with oversized white typography and an immersive, moving hero visual. The restrained interface gives the agency’s gaming-focused work room to command attention.

## North star

Keep the interface nearly black and typographically bold, letting immersive project media provide the color and motion.

## Overview

The visual strategy starts with an almost-black canvas, measured as #050311, that occupies nearly the entire page and lets full-bleed media carry the atmosphere. White is reserved for high-contrast navigation and the enormous North Kingdom wordmark; muted gray appears sparingly in footer text. The first screen is intentionally spare: a compact mark at the upper left and a right-aligned navigation row frame a centered typographic statement, interrupted by a vivid video tile. That tile’s cyan, magenta and blue tones belong to the featured media, not the core brand palette. Typography uses a single regular sans-serif family, with slightly tight tracking and a clean, unembellished character. Large open areas create a cinematic pause around the logo and moving imagery. The result feels immersive without relying on decorative UI: the dark field, crisp type and changing media do the expressive work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#050311` | `--color-midnight-canvas` | brand | Dominant page canvas behind the navigation, wordmark and full-bleed media. |
| Studio White | `#ffffff` | `--color-studio-white` | neutral | High-contrast navigation, logo lettering and primary text. |
| Quiet Gray | `#9b9aa0` | `--color-quiet-gray` | neutral | Muted footer text; a secondary text tone rather than a prominent first-screen color. |

### Semantic aliases

`--color-canvas` → `#050311` (Midnight Canvas) · `--color-text` → `#ffffff` (Studio White) · `--color-text-muted` → `#9b9aa0` (Quiet Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#050311` | 20.44:1 | AAA |
| `#9b9aa0` | `#050311` | 7.32:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| FKGroteskNeue-Regular | `--font-body` | webfont | 400 | Navigation and body copy, with the same sans-serif voice supporting the page’s oversized wordmark. | Inter |

- **FKGroteskNeue-Regular:** Regular weight, slightly tight tracking, sentence case; keep text clean and unembellished.

### Type scale — Major Third (ratio ≈ 1.25, base 24.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 24.5px | 400 | 1.15 | -0.01em | — | FKGroteskNeue-Regular | Agency introduction and supporting page copy. |
| nav | 24.5px | 400 | 1.15 | -0.01em | — | FKGroteskNeue-Regular | Top-level links: Work, About, Careers and Contact. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 6, 20, 24, 52, 160 px.
- Section rhythm 160px · element gap — · card padding — · max content width 1400px.

Use a spacious, full-bleed composition rather than enclosing the page in cards. The measured page maximum width is 1400px, with a seven-column structure and a 160px section gap in the spacing system. At the opening viewport, place the compact brand mark at the upper left and navigation at the upper right, then center the hero identity across the canvas. Keep alignment crisp and the density low; large areas of dark negative space are an intentional part of the layout.

## Shape & elevation

- Radius: button `50%` · media `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s cubic-bezier(0, 0, 0.6, 1)` on interactive elements.

The interface reads as flat: the measured system has no shadows, gradients or border color. Keep navigation and typography directly on the dark canvas rather than placing them in raised panels. Layer the hero media visually over the wordmark, but avoid adding ornamental borders or card chrome.

## Imagery

Use full-bleed video or rich project media as the page’s expressive counterpoint to the quiet interface. In the hero, a vivid rectangular moving image interrupts the oversized wordmark. Cyan, magenta and blue appear within that media and should not be promoted to core interface colors. Favor immersive, high-contrast framing over decorative illustration.

## Components

### Header navigation

Compact brand mark at the upper left; white Work, About, Careers and Contact links align along the upper right.

### Hero wordmark

Oversized white North Kingdom lettering spans the central hero and is visually interrupted by project media.

### Featured media tile

A prominent video-led visual sits over the wordmark, with a simple play affordance and vivid colors confined to its content.

### Back link

A plain white text link with an upward arrow; keep it flat and consistent with the site’s typographic navigation.

### Footer text

Use muted gray for secondary footer copy, preserving the contrast hierarchy of white primary text on the dark canvas.

### Measured component styles

- **Primary button**: background #ffffff · text #000000 · radius 50% · padding 1px 6px · 400 13.3333px Arial
- **Navigation item** (“Work About Careers Contact”): transparent background · text #ffffff · radius 0px · padding 0px · 400 24.354px FKGroteskNeue-Regular

## Do

- Use #050311 as the dominant canvas.
- Set primary navigation and hero lettering in white.
- Keep the header visually light and direct.
- Give the hero wordmark substantial room to span the composition.
- Let project media supply vivid color and movement.
- Preserve generous dark negative space.

## Don't

- Do not turn media colors into interface accents.
- Do not add card-heavy layouts or decorative borders.
- Do not use shadows to manufacture depth.
- Do not crowd the hero with supporting copy.
- Do not introduce multiple competing typefaces.
- Do not use muted gray for primary navigation.

## Agent prompt

Build a new North Kingdom-style page as a cinematic, dark creative-agency experience. Use Midnight Canvas (#050311) for the dominant background and Studio White (#ffffff) for primary text and navigation; reserve Quiet Gray (#9b9aa0) for secondary footer copy. Use a clean regular sans-serif similar to FKGroteskNeue-Regular, with subtly tight tracking and no decorative treatments. Keep the header compact, with the brand mark left and navigation right. Make the main content spacious and typographically bold, pairing oversized identity text with full-bleed project video or imagery. Let colors inside that media remain content-specific, not UI accents. Keep surfaces flat, avoid shadows and card chrome, and preserve large areas of negative space so the work supplies the energy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark hero; compact top navigation; oversized centered wordmark layered with featured media. | Top-level text navigation, Video play affordance | Near-black canvas, White oversized wordmark, Vivid media tile |

## Source CSS custom properties (selected)

```css
--grid-gap: 20px;
--case-page-element-spacing: 80px;
--ease: ease-in-out;
--ease-in-quad: cubic-bezier(0.55,0.085,0.68,0.53);
--ease-in-cubic: cubic-bezier(0.55,0.055,0.675,0.19);
--ease-in-quart: cubic-bezier(0.895,0.03,0.685,0.22);
--ease-in-quint: cubic-bezier(0.755,0.05,0.855,0.06);
--ease-in-expo: cubic-bezier(0.95,0.05,0.795,0.035);
--ease-in-circ: cubic-bezier(0.6,0.04,0.98,0.335);
--ease-out-quad: cubic-bezier(0.25,0.46,0.45,0.94);
--ease-out-cubic: cubic-bezier(0.215,0.61,0.355,1);
--ease-out-quart: cubic-bezier(0.165,0.84,0.44,1);
--ease-out-quint: cubic-bezier(0.23,1,0.32,1);
--ease-out-expo: cubic-bezier(0.19,1,0.22,1);
--ease-out-circ: cubic-bezier(0.075,0.82,0.165,1);
--ease-in-out-quad: cubic-bezier(0.455,0.03,0.515,0.955);
--ease-in-out-cubic: cubic-bezier(0.645,0.045,0.355,1);
--ease-in-out-quart: cubic-bezier(0.77,0,0.175,1);
--ease-in-out-quint: cubic-bezier(0.86,0,0.07,1);
--ease-in-out-expo: cubic-bezier(1,0,0,1);
--ease-in-out-circ: cubic-bezier(0.785,0.135,0.15,0.86);
--ease-standard: cubic-bezier(0.2,0,0,1);
--ease-standard-decelerate: cubic-bezier(0,0,0,1);
--ease-standard-accelerate: cubic-bezier(0.3,0,1,1);
--ease-emphasized: cubic-bezier(0.2,0,0,1);
--ease-emphasized-decelerate: cubic-bezier(0.05,0.7,0.1,1);
--ease-emphasized-accelerate: cubic-bezier(0.3,0,0.8,0.15);
--transition-duration-short-1: 100ms;
--transition-duration-short-2: 200ms;
--transition-duration-medium: 350ms;
--transition-duration-long-1: 400ms;
--transition-duration-long-2: 500ms;
--transition-duration-extra-long: 800ms;
--color-white: #fff;
--color-white-80: hsla(0,0%,100%,.8);
--color-white-60: hsla(0,0%,100%,.6);
--color-white-50: hsla(0,0%,100%,.5);
--color-white-30: hsla(0,0%,100%,.3);
--color-black: #050311;
--color-black-80: rgba(5,3,17,.8);
```

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