---
name: North Kingdom
description: "This site is a strong example of a premium, modern creative agency portfolio that uses bold typography and unique visual masks to create a distinctive and high-quality user experience."
version: alpha

colors:
  background: "#050311"
  primary: "#ffffff"
  neutral: "#4a5464"
  line: "rgba(255, 255, 255, 0.25)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 115px
    lineHeight: 0.95
    fontWeight: 400
    letterSpacing: "-5.75px"
  body:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "-0.24px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A high-end creative agency portfolio with a stark, cinematic dark-mode aesthetic and 3D content showcases.

*A digital art gallery showcasing interactive case studies behind a premium shield logo.*

## Colors

Deep, near-black backgrounds with high-contrast white typography, using muted blue-grey for secondary elements.

- **Background (`#050311`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Muted (`#4a5464`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.25)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Use geometric sans for large, tight-tracked headings.
- Use humanist sans for readable body text and navigation.
- Use monospace for technical details or metadata.

## Layout

Full-width hero sections with centered 3D polygon masks and minimal navigation.

*Rhythm:* Flexible spacing based on a 4px base unit, with significant padding for large hero sections.

## Elevation & Depth

- rgba(0, 0, 0, 0.15) 0px 1px 2px 0px
- Borders: 1px solid rgba(255, 255, 255, 0.25)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Minimal text-based navigation links or ghost buttons with subtle transitions.
- **card:** Interactive 3D polygon-shaped project showcases.
- **chip:** Not prominently featured.
- **input:** Not prominently featured.
- **hero:** Large, immersive full-screen sections with centered 3D visual elements and bold, tight-tracked typography.

## Do's and Don'ts

**Don't:**
- Don't use vibrant accent colors — the screenshot shows a monochromatic dark palette with white text.
- Don't use decorative serif fonts — the typography is strictly clean, geometric, and humanist sans.
- Don't clutter the UI with borders and boxes — the screenshot shows a spacious, borderless layout.
- Don't use rounded rectangles for all elements — the hero showcases use unique polygon masks.
- Don't use heavy drop shadows — the screenshot shows minimal, soft elevation or none at all.
- Don't use bright, high-saturation backgrounds — the screenshot shows a deep, near-black dark mode.

---

## System Prompt (paste into AI agent)

```
This is a high-end creative agency portfolio site featuring a stark, cinematic dark-mode aesthetic. The primary background is a deep, near-black (#050311), with pure white (#ffffff) for primary text and navigation. A muted blue-grey (#4a5464) is used for secondary elements. Typography relies on clean geometric and humanist sans-serif categories with tight letter-spacing for large displays. The layout is spacious and centered, often using unique 3D polygon masks to showcase project imagery. Critical don'ts: avoid vibrant accent colors, decorative serifs, or cluttered UI elements. Focus on minimalism, high contrast, and cinematic presentation.
```