---
name: brand-visuals
version: v2
status: locked
date: 2026-04-19
canonical_source: https://design-system.justinharris.ai
---

# Brand Visuals

**The visual brand IS the Niflheim design system.** This file is a pointer; the truth is the live system.

## Where the visual brand lives

**Live, canonical, always current:** [design-system.justinharris.ai](https://design-system.justinharris.ai)

That URL is the authoritative source for every visual decision: color tokens, typography stack, spacing scale, radius, motion, iconography, photography rules, pattern library, components, forms, and the Aesir agent roster.

If a visual decision is not surfaced at design-system.justinharris.ai, it is not locked. If a visual decision contradicts what's at design-system.justinharris.ai, the design system wins.

## Why this file is short

Earlier brand process expected a long static markdown document defining colors, fonts, etc. That model breaks the moment a single token changes. Markdown copies of design decisions go stale within a week of the system being used.

The Niflheim design system is the source of truth instead. It renders every token live. Updates ship the moment the underlying tokens change. There is no static document to keep in sync because there is no static document.

## How agents reference visual decisions

For any deliverable that requires a brand visual decision (color, type, spacing, photography treatment, motion, components):

1. Open the relevant section at design-system.justinharris.ai
2. Use the rendered token, the locked rule, or the copy-paste recipe shown there
3. If the system does not yet render the decision you need, it is not yet locked. Escalate to Justin before publishing.

## What this file is not

- A duplicate of the design system content (would go stale)
- A static brand book (the design system replaces this)
- A list of hex codes and font names (read them from the live tokens)

## Repository pointer

The design system source code lives at:
`clients/justinharris-ai/builds/design-system/`

- Tokens: `components/system/tokens.css`
- Sections: `components/system/sections/`
- Schemas: `components/system/{aesir,brand,patterns,roadmap,social,...}.ts`

If you need the underlying code, that's where it is. If you need the brand decision, use the live URL.