J.Harris/AI
PRACTITIONER · NOT A VENDOR · V1.04
DESIGN_SYSTEM/NIFLHEIM
APR.19.2026 · LIVE
REV 03 · NEXT.JS PORT
SYSTEM_DOCUMENT · OPEN SPEC · LIVE TWEAKS ENABLED

Niflheimdesign system

Dark brutalism for a practitioner — not a vendor. A single token spine that speaks across internal dashboards, marketing surfaces, and social carousels. This document is the source of truth; every component downstream inherits from it.
SURFACES · 3 (PRODUCT / WEB / SOCIAL)MODE · DARK ONLYTOKENS · LIVE / CSS VARSSTATUS · REV_03 NEXT.JSNEXT · COMPONENT WAVE 3
01Color02Typography02.5Display Accent03Logo04Spacing05Radius06Elevation07Motion08Iconography09Components10Forms
00Brand · Locked v2VOICE · STORY · MESSAGING · PERSONAS · COMPETITIVE

Brand locked v2

The Brand Package is the canonical truth for everything Justin and the agents publish. Five files locked at v2 by Embla, Idun, Snotra, and Bragi. This section mirrors the locked content; the source files in clients/justinharris-ai/brand/ remain the truth. BRAND-VISUALS.md is intentionally empty — Niflheim itself is the visual source.

Positioning · Identity

Identity

NAME
Justin Harris
TITLE
AI Consultant
COMPANY
justinharris.ai
BASED IN
Las Vegas, NV
TAGLINE
Helping businesses turn AI from a buzzword into a revenue driver.
BIO · SHORT
AI Consultant. CEO of JustinHarris.AI. Runs a 50+ agent workforce for B2B professional services firms. Based in Las Vegas, NV.
BIO · LONG
Justin Harris is an AI Consultant and founder of justinharris.ai. With 13 years in commercial sales and marketing, he builds AI-powered systems that recover and generate revenue for businesses. Not strategies that sit in folders. He runs a 50+ agent AI workforce in his own operation, using his business as the proof of concept for every system he builds for clients. Based in Las Vegas, NV.
Voice · Tone · Rules

Voice

TONE

Authoritative but approachable. Trusted advisor who happens to be ahead of the curve.

PERSPECTIVE

First-person as Justin Harris. Never robotic, never generic.

ENERGY

Confident, direct, occasionally provocative. Not salesy, not academic.

Rules

  1. 01Lead with the business outcome, not the technology
  2. 02Use concrete examples and numbers when possible
  3. 03Avoid jargon without explanation. If you say 'RAG pipeline,' explain what it does in plain English.
  4. 04Be direct. No fluff. No filler phrases.
  5. 05Strong opinions held loosely — take a stance but acknowledge nuance
  6. 06Short paragraphs. Punchy sentences. Scannable structure.
  7. 07Always ground claims in specifics: name an industry, give a number, cite an example.
  8. 08Use 'we' on brand surfaces (website, proposals, case studies). Use 'I' for personal thought leadership (LinkedIn, video scripts).
  9. 09On company surfaces, do not reference fitness, weight loss, metal vocals, or heavy music. These live only on /about, personal LinkedIn, podcast appearances, personal social.
  10. 10Arc beats from BRAND-STORY.md retain first-person 'I' voice even on brand surfaces. Do not rewrite 'I' to 'we' inside an arc beat.
Banned · Encouraged Phrases

Phrases

NEVER USE (29)
In today's rapidly evolving landscapeIn today's fast-paced worldIt's no secret thatAt the end of the dayThink about itLet that sink inI'm excited to shareI'm thrilled to announceBuckle upHot takeUnpopular opinionleveragesynergyparadigm shiftgame-changerdisruptiverevolutionarycutting-edgebest-in-classworld-classunlock the power ofharness the potentialdeep divecircle backmove the needlelow-hanging fruitfluffEm dashesExclamation marks
ENCOURAGED (10)
Here's the thing:Here's what actually happens:I just helped a client...I've seen this pattern with...The real question is:What most people get wrong about...Stop paying for... Start building...The math is simple:I tested this. Here's what happened.Nobody's talking about this, but...
Spoken Voice · Video · Podcast

Spoken Voice

Applies to: Video scripts · talking-head · podcast · keynote · voice-over.

PACING

140–160 wpm. Justin's natural cadence is measured, not rapid-fire. Scripts read like he thinks, not like he performs.

BREATH BEATS

Breath beat (line break) every 2–3 sentences. One thought, one breath.

OPEN HOOK · 3 SEC

First 3 seconds carry a pattern interrupt, a number, or a direct accusation of a behavior the viewer recognizes. Never 'Hey everyone' or 'In this video.'

WRITTEN RULES THAT DON'T TRANSLATE
  • Em dash ban: irrelevant aloud
  • Exclamation ban: intonation replaces punctuation
  • Short paragraph rule becomes 'one breath, one thought'
CTA Library · By Awareness Stage

CTA Library

The single biggest automation failure mode is firing a Product Aware CTA at a Problem Aware audience. Match the CTA to the stage. When in doubt, default to Problem Aware language — it works for Problem Aware and Solution Aware audiences. Product Aware language fails backwards.

STAGEBELIEFCTA STRINGDESTINATION
UnawareNo problem consciousnessThe math on this one might surprise you.Lead-in content, not the audit
Problem AwareSomething is wrong, I don't know whatSee where your revenue is going./audit · framed as diagnostic
Solution AwareAI automation is the answer, evaluating whoSee how the audit works./audit · framed as methodology preview
Product AwareKnows Justin exists, evaluating fitUnlock AI Audit./audit · framed as product name
Most AwareReady to buy, just needs termsBook the engagement call./book · or equivalent
NEVER (4)
Book a call NOWLimited time offerDon't miss outClick the link in bio
Personas · 3 Buyers

Personas

These represent the real buyers Justin closes. Use them to write copy that speaks to one person, not “business owners generally,” and to set the awareness stage before writing any headline or CTA.

Marcusproblem aware
CEO / Founder
$400K–$10M+ B2B professional services (law, accounting, insurance, regional services) · age 40–54
WHO

Already tried ChatGPT. Bought a few tools. Nothing stuck. Watching competitors close faster and feeling the gap widen. Skeptical but open.

TRIGGER MOMENT

A 'in the bag' deal didn't close because the team took 4 days to follow up. Or Q1 review showed $80K in uncaptured leads.

TOP PAIN

Deals fall through because follow-up is too slow. AI tools bought, never used.

PROOF NEEDED

Case study with a real number. The free AI Revenue Audit as proof of how Justin thinks. Building-in-public agent stack as proof Justin does this for himself too.

HOW TO SPEAK

Direct. No jargon without plain-English. Lead with what he lost, not what Justin does. CTA is the audit, not a sales call.

Daniellesolution aware
Director of Revenue Ops · VP Sales · Head of Operations
50–200 employees, has existing tech stack · age 33–45
WHO

CEO came back from a conference and decided 'we need an AI strategy.' She owns it with no budget and a team at capacity. Burned by 3-month implementations.

TRIGGER MOMENT

CEO sends her a LinkedIn post about AI follow-up and says 'let's do this.'

TOP PAIN

Needs a result in 60–90 days or funding dies. Worried team will resist.

PROOF NEEDED

Methodology (Revenue Recovery First). Implementations in similar ops complexity. Defined phases. References from ops roles.

HOW TO SPEAK

Process-focused. Acknowledge the constraint before pitching. Specificity beats enthusiasm.

Rayproblem aware
Regional Director · Multi-Location Owner · VP Franchise Ops
Franchise system or multi-location service business (10–50 locations) · age 40–58
WHO

Managing scale that makes individual optimization expensive. Turnover walks training out the door. Inconsistency across locations costs reviews and repeat business.

TRIGGER MOMENT

Corporate conference announces AI initiative. Or two best location managers quit in 90 days.

TOP PAIN

Inconsistency across locations. Lead follow-up: some locations close 70%, others close 20%.

PROOF NEEDED

Franchise-specific case studies. The 5 Star Painting speaking engagement. Per-location ROI math, not enterprise-level.

HOW TO SPEAK

Franchise operators speak in unit economics. Per location, per head, per quarter. Lead with consistency before automation.

Bad Client Profile · 5 Signals

Bad Client Profile

Use this to screen before the audit. If three or more signals appear in a discovery conversation, flag before proceeding.

01Needs constant attention

Daily check-ins. Reassurance on already-made decisions. Treats engagement as management not delivery.

02Undervalues AI-enabled work

Believes AI involvement should lower price. Negotiates against the method, not the scope.

03Underfunded

Genuine enthusiasm but cannot cover the engagement without stress. The math has to work before starting.

04Thinks they're the AI expert

Will debate the build instead of letting it deliver. Right client says 'I don't know how this works — that's why I hired you.'

05Process-controlling

Wants approval on every step. 30-day deliverable becomes 90 days. Caution isn't the problem; process friction is.

Awareness Stages · 5-Stage Reference

Awareness Stages

Most inbound from content lands at Problem Aware or Solution Aware. The audit converts Solution Aware to Product Aware in one session.

STAGEBELIEVESCONTENT THAT WORKS
UnawareNo problem consciousnessPattern interrupts, surprising statistics
Problem Aware'Something is wrong' but no solution in mindName the problem precisely, connect it to revenue
Solution AwareAI automation is the answer, evaluating whoMethodology, differentiation, proof
Product AwareKnows Justin exists, evaluating fitCase studies, audit offer, testimonials
Most AwareReady to buy, just needs termsClear offer, frictionless next step
Competitive · 5 Archetypes + White Space

Competitive Map

Justin's white space: high commercial background + high technical depth. No competitor occupies this position at the $5K–$25K engagement tier for mid-market businesses.

01AI Strategy Consultants (deck-deliverers)$5K–$50K for strategy engagements
WHO

Independent consultants, boutique firms. McKinsey Digital and Deloitte AI at enterprise tier; solo consultants at SMB.

POSITIONING

We will assess your AI readiness and deliver a roadmap.

JUSTIN'S DIFFERENTIATION

Justin builds the system during the engagement. The system runs after he's gone. No separate implementation phase.

02SaaS AI Tools (self-serve platforms)$50–$5,000/month per seat/tool
WHO

HubSpot AI, Salesforce Einstein, Gong, Outreach, Apollo, Clay.

POSITIONING

Use our platform to automate [workflow].

JUSTIN'S DIFFERENTIATION

The tool is 20% of it. The other 80% is integration, workflow design, rollout. Justin works on the 80%.

03Marketing Agencies Pitching AI$2K–$15K/month retainers
WHO

Digital agencies adding AI to existing retainers. SEO firms, social shops, paid media houses with 'AI' in the menu.

POSITIONING

We run your marketing and now we use AI to do it better.

JUSTIN'S DIFFERENTIATION

Agencies optimize the top of the funnel. I work the middle — where leads turn into revenue or disappear.

04General Business Consultants$500–$5K/month coaching · $10K–$100K projects
WHO

Business coaches, revenue consultants, sales consultants without AI depth.

POSITIONING

I will help you grow your business / fix your sales process.

JUSTIN'S DIFFERENTIATION

13 years in commercial sales and marketing — not a technologist who learned business. Advice comes with the system.

05Technologists Without Commercial Background$100–$300/hour · $10K–$50K project
WHO

Engineers, data scientists, AI developers offering consulting or freelance build.

POSITIONING

I will build AI tools and automations for your business.

JUSTIN'S DIFFERENTIATION

I'm not a technologist who learned business. I'm a businessman who mastered the technology. That reversal is the whole thing.

White Space · 4 Underserved Segments

White Space

Mid-market revenue leak

$400K–$10M+ B2B professional services with revenue leak (not lead problem), AI tools bought but never deployed, need built-and-handed-off systems.

Las Vegas regional

No established AI consultant in this positioning. National competitors absent from local referral networks.

Franchise / multi-location

No competitor with franchise credibility (5 Star Painting, Supercuts, Neighborly) in AI systems for 10–50 location operators.

Norse mythology operating model

50+ agent workforce organized under Norse mythology. The build itself is public content — competitors cannot copy this without years of documented build history.

Differentiation · One-Liners by Competitor

Differentiation

For use when a direct comparison to competitors arises in conversation.

VS · AI strategy decksI build the thing. The system runs after I'm gone. A strategy document doesn't close deals.
VS · SaaS AI toolsThe tool is 20% of it. The other 80% is integration, workflow, rollout. I work on the 80%.
VS · Marketing agenciesAgencies optimize the top of the funnel. I work on the middle — where leads turn into revenue or disappear.
VS · General consultants13 years in commercial sales. Every implementation is designed to recover or generate revenue — not reduce friction in a process that doesn't matter.
VS · TechnologistsI'm not a technologist who learned business. I'm a businessman who mastered the technology. That reversal is the whole thing.
Story · Origin · Conflict · Resolution · Sharp

Story

ORIGIN

13 years in commercial sales and marketing at an agency (Adlava → LSM). Brand Strategist → VP of Business Development. Closed $240K retainers. UFC, Caesars, City of Las Vegas. $360K+ in new business in a single year. February 2026: walked away. No safety net. In under two months, built a 50+ agent AI workforce that runs his entire business.

CONFLICT

Most AI consultants sell a deliverable that looks like progress but functions as a placeholder: a roadmap, a strategy deck, a framework with a 12-week timeline. They take three months and a fee, hand over a document, and leave. The conflict is between the business owner who needs revenue now and a consulting industry that has taught buyers to expect work without producing it.

RESOLUTION

The 50-agent workforce is the proof of concept. Marketing, lead gen, follow-up, content production, reporting, billing — all running while Justin sleeps. When a client engages, they're not buying a plan. They're buying access to someone who already built it. First deliverable live in 30 days. Minimum commitment: six months.

THE “SHARP” POSITIONING

The one word that comes back from word of mouth: sharp. Not friendly, not affordable, not experienced. Sharp. Internal compass words: AI hitman. AI James Bond. Hired for a specific outcome. Precise. No wasted motion. In, execute, out.

Arc Beats · 4 Brand-Level Arcs

Arc Beats

Setup → Conflict → Resolution. Use these as the spine for any video, post, or talk. Arcs retain first-person “I” voice even on brand surfaces — do not rewrite to “we.”

ARC 01The Left-It-All Beat
SETUP

I was VP at a digital agency. Named clients. Real budget. Safe income.

CONFLICT

I looked at what the next 10 years looked like and decided to walk away.

RESOLUTION

In under two months, I built an AI workforce that runs my entire business. That is the proof of concept for everything I build for clients.

USE FOR

Brand intro videos · bio content · origin story hooks · LinkedIn narrative posts

ARC 03The System Beats the Person Beat
SETUP

Your best employee just quit. Or your manager just had a baby. Or your VP got poached.

CONFLICT

Everything they knew just walked out the door with them.

RESOLUTION

Businesses that survive this are not more talented — they are more systematized. The process lives in the system, not the person.

USE FOR

Ray persona · franchise · ops content · high-turnover industries

ARC 04The Sharp Beat
SETUP

People describe what I do in one word: sharp.

CONFLICT

Not efficient. Not experienced. Not affordable. Sharp.

RESOLUTION

I see the problem faster than most, build the solution before the meeting ends, and the system is running before the strategy deck would have been finished.

USE FOR

Authority content · competitive differentiation · multi-vendor evaluations

ARC 05The Paradox Beat
SETUP

People expect one thing when they see me. They get something else.

CONFLICT

The look says I do not need your approval. The work says I am here until your business runs.

RESOLUTION

That gap — between expectation and experience — is the thing that makes people trust fast.

USE FOR

Brand video content · intros that lead with the visual

Proof Points · Locked Numbers

Proof Points

These are the only numbers that go into copy. Do not approximate, inflate, or invent. Same proof on the same platform: max once per 14 days. The “50+ agents” claim is exempt.

POINTNUMBERCONTEXTUSE WHEN
Client close$240KSupercuts retainer, single engagementProving deal size · credibility
Revenue generated$360K+New business in a single year at LSMCommercial track record
Active AI agents50+Running in Justin's own business right nowProving he does this for himself
Career length13 yearsCommercial sales · marketing · opsDepth over enthusiasm
Speaking engagement5 Star PaintingFranchise conference, operators at scaleRay persona · franchise credibility
Client portfolioUFC · Caesars · City of Las VegasLSM client listMarket-level credibility anchor
Revenue range lost$50K–$900KSlow follow-up research rangeMarcus trigger · problem-aware content
Title · Surface Map

Title & Surface Map

The locked title is “AI Consultant.” The geographic qualifier (“Las Vegas AI Consultant”) belongs on local-intent surfaces only. Stripping it from every surface forfeits a winnable regional SERP. Stacking it on every surface dilutes national authority. Split by searcher intent.

SURFACEEXACT STRINGREASON
Homepage H1AI ConsultantNational positioning. H1 speaks to brand, not SERP.
Homepage meta titleJustin Harris — AI Consultant for B2B Professional ServicesRanks on name, ICP, category.
/audit landing H1AI Revenue AuditProduct page. Geo belongs in meta, not hero.
/audit meta titleAI Revenue Audit — Las Vegas AI Consultant | Justin HarrisLocal commercial intent lives here.
/las-vegas H1Las Vegas AI Consultant#1 target keyword page. Exact-match H1 required.
LinkedIn headlineAI Consultant for B2B Professional Services | CEO, JustinHarris.AILinkedIn weights industry + seniority. Geo kills reach.
Bio short (podcasts/press)AI Consultant. CEO of JustinHarris.AI. Runs a 50+ agent workforce for B2B professional services firms.Thought-leadership surface. No geo.
Google Business ProfileLas Vegas AI ConsultantGBP is pure local — must match.
Governance · Anti-patterns

Governance

EM DASHES

Banned in body copy. Strongest AI tell. See .claude/rules/em-dash-rule.md.

EXCLAMATION MARKS

Never in copy. Energy comes from word choice and structure, not punctuation.

PERSONAL ELEMENTS ON COMPANY SURFACES

Fitness, weight loss, metal vocals, heavy music never appear on /audit, services, proposals, case studies. Personal-only surfaces: /about, personal LinkedIn, podcasts.

TEMPLATE EXEMPTION

Audit deliverables, proposal templates, case studies — copy inside follows ALL voice rules. Templates structure the surface, they don't exempt the copy.

WE vs. I

“We” on brand surfaces (homepage, proposals, case studies). “I” on personal thought leadership (LinkedIn posts, video scripts, social).

ARC BEAT EXCEPTION

Arc beats from BRAND-STORY.md retain “I” voice even on brand surfaces. They are Justin speaking directly. Do not rewrite.

Source Files · Truth Lives Here

Source Files

These files are the canonical truth for the brand package. The design system surface above mirrors them. If anything diverges, the source file wins.

BRAND-VOICE.jsonclients/justinharris-ai/brand/BRAND-VOICE.jsonlocked v2
BRAND-VOICE-COMPACT.mdclients/justinharris-ai/brand/BRAND-VOICE-COMPACT.mdlocked v2
BRAND-MESSAGING.mdclients/justinharris-ai/brand/BRAND-MESSAGING.mdlocked v2
BRAND-PERSONAS.mdclients/justinharris-ai/brand/BRAND-PERSONAS.mdlocked v2
BRAND-STORY.mdclients/justinharris-ai/brand/BRAND-STORY.mdlocked v2
BRAND-COMPETITIVE.mdclients/justinharris-ai/brand/BRAND-COMPETITIVE.mdlocked v2
BRAND-VISUALS.mdclients/justinharris-ai/brand/BRAND-VISUALS.mdpointer · this design system IS the source
16PrimitivesWAVE A

Primitives LAYER

Token-driven building blocks. Every section, dashboard, and software UI in the Niflheim ecosystem composes from these. Sections may not use raw px for radius, padding, gap, or margin — drift from this rule is what made the Brand section break its own system.

16.01Tokens — Radius scale
none0px
xs4px
sm8px
md12px (DEFAULT)
lg20px
pill999px
16.02Tokens — Spacing scale
--space-0
0px
--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-7
32px
--space-8
48px
--space-9
64px
16.03Card — surface primitive

Token-driven surface. Props: pad, radius, tone. Never style raw <div> with bespoke padding/border/radius.

tone="neutral"

Default surface — surface-1 with ghost border.

tone="raised"

Elevated surface — surface-2 with faint border.

tone="ghost"

Transparent — outline only.

tone="accent"

Sage-bordered — for emphasis.

16.04Stack · Row · Grid — layout primitives
<Stack gap="3">
<Row gap="3">
<Grid minColumn={80} gap="2">
16.05Chip — labeled pill
neutralaccentencouragebaninfocaution
sm · neutralsm · accentsm · ban
16.06Heading · Text — typography primitives
Heading level=1 display

Heading L1

Heading level=2

Heading L2

Heading level=3

Heading L3

Text size=md leading=relaxed

Body copy with relaxed line height. The Text primitive handles size, tone, family, weight, and leading via tokens. No raw fontSize in section code.

Text mono (label register)SECTION LABEL · ALL CAPS
16.07SubBar — sub-block divider
00.00Example sub-bar

SubBar replaces every ad-hoc sub-section header in section code.

01Color · Surface & TextBJARMI · 5 SURFACE · 5 TEXT · 4 STATUS

Color tokens

Absolute blacks with desaturated tonal steps, anchored by one true brand color — Bjarmi #87A6A6. Old Norse for faint gleam. Hierarchy comes from value shifts; closer surfaces are lighter. No hard dividers; ghost lines carry structure.

BRAND PRIMITIVE · BJARMI · THE FAINT GLEAM
BRAND / BJARMI
Bjarmi
#87A6A6
TOKEN
--brand-sage
--accent
Default accent alias
VALUES
HEX · #87A6A6
RGB · 135 166 166
HSL · 180° 14% 59%
ROLE
Primary accent
Interactive states
Live data · Active
Section labels
◆ ORIGIN · WHY BJARMIOLD NORSE · FAINT GLEAM · LOCKED 2026-04
ETYMOLOGY

Bjarmi ⟶ Old Norse for faint gleam — the barely-visible glow on the horizon during polar twilight. The light that proves something is there without announcing itself. Pulled from the same mythological well as Niflheimitself: the primordial mist realm where light isn't bright, just present.

WHY THIS COLOR

Restraint over saturation.Niflheim runs on absolute blacks and desaturated greys. Bjarmi is the single warmth anchor — not vibrant enough to be decorative, just present enough to read as intentional. A practitioner's color: it works because it doesn't shout.

CANONICAL ROLE
  • Logo accent variants
  • Primary action glow
  • Focus halos · selection
  • Live status indicators
  • Section labels · eyebrows
  • Display accent word
  • Active link state
PAIRING RULES
  • Pairs with charcoal #222 on light
  • Pairs with offwhite #F5F5F5 on dark
  • Never paired with another saturated color
  • Never paired with pure white #FFF
  • Glow uses 25% alpha · 8–40px blur
  • Min contrast 4.5:1 against background
COLOR SCIENCE
HEX · #87A6A6
RGB · 135 166 166
HSL · 180° 14% 59%
OKLCH · 69% 0.027 195°
CHROMA · desaturated
CONTRAST · 5.2:1 on #1A1A1A
HERITAGE · Bjarmi replaces the previous brand teal #7F9390 as of 2026-04-19. The old hue lived in the AI-source logo files but never reached the design system. Reconciled to one source of truth across logo + tokens + components.
SURFACE RAMP · L0 → L4
L0 · BASE#0A0B0B
Page background
L1 · RAISED#121414
Cards, panels, tables
L2 · NESTED#1B1C1A
Inputs, nested cards
L3 · ACTIVE#1F201E
Interactive, pressed, hover
L4 · OVERLAY#292A28
Modals, popovers, tooltips
TEXT RAMP
TEXT · PRIMARY#E8E8E8
Headlines, emphasis
TEXT · SECONDARY#B8B8B6
Body copy, labels
TEXT · TERTIARY#8A8A8A
Meta, supporting
TEXT · FAINT#5C5D5A
Placeholder, disabled
TEXT · INVERT#0A0B0B
On sage fill, on light
STATUS PALETTE · DESATURATED
NOMINAL
#6B9E7A
Active, healthy, deployed
CAUTION
#C8B07A
Degraded, warning, attention
ALERT
#C08A7A
Blocked, failed, critical
INFO
#8A9EB0
Processing, neutral state
ACCENT OPTIONS · SAME CHROMA / LIGHTNESS
SAGE
#87A6A6
Phosphor CRT · default
OCHRE
#B09572
Desert instrument
PLUM
#9B7D95
Dusted interference
NEUTRAL
#A8A8A6
Monochrome mode
LINE TOKENS · NO HARD BORDERS
GHOST
Default dividers
FAINT
Emphasis dividers
DIAGRAM
Blueprint lines
SAGE/20
Active borders
02Type · Ramp & Pairing14 STOPS · 3 FAMILIES · LOCKED

Typography spec

Three families, four roles. JetBrains Mono handles display only — hero headlines and section openers, used sparingly. Geist handles both headings (H1–H4, structural) and body (paragraphs, lists, UI). IBM Plex Mono handles annotation — labels, numerics, IDs, eyebrows. Same family across headings + body keeps reading editorial; the role separation comes from size and placement, not new fonts.

◆ HEADLINE STACK · DISPLAY + LABEL + BODY
— PRACTITIONER_NOTE_07
Ship
The Thing.
Most AI spend dies in the gap between prototype and production. We close that gap — in code, with your team, against your constraints. No white-paper decks. No pilot theater.
ROLE 01 · DISPLAYFAMILY · JETBRAINS MONO
USE ONCE OR TWICE PER PAGE · 600 / 300 ACCENT
Ship the thing.
HERO · SECTION OPENER · CAMPAIGN MOMENT — never a heading. Never body.
ROLE 02 · HEADINGSFAMILY · GEIST
STRUCTURAL · H1 → H4 · MAX WEIGHT 500
H1 · 48px

Infrastructure, not vendor.

H2 · 32px

The math is simple.

H3 · 24px

What most people get wrong about AI ops.

H4 · 18px

Three families. Four roles. One spine.

ROLE 03 · BODYFAMILY · GEIST
DEFAULT 400 · LEDE 300 · INLINE EMPHASIS 500
◆ EDITORIAL BLOCK · LIVE COPY EXAMPLE

Infrastructure, not vendor.

Most AI consultants sell you a roadmap. I build the system, hand you the keys, and stay on call when it breaks.

Here's what actually happens when most companies adopt AI. They buy a tool. They watch a demo. Six months later, the tool is gathering dust because nobody wired it into the work that actually generates revenue. The tool isn't the problem. The integration is the problem.

I run a stack of 43 AI agents for my own business. Same agents I deploy for clients. The same Slack listener that notifies me when a prospect signs is the one that pings your team when a customer churns. The math is simple: agents that work for me first will work for you.

↳ UNLOCK AI AUDIT · /audit
LEDE · 18 / 300

Lede paragraphs sit just under headings and breathe with extra leading. Always 300-weight Geist for that engineered, almost-italic readability.

DEFAULT · 15 / 400

Body copy in Geist 400 at 15px is the default reading size across product, marketing, and editorial. Hierarchy is carried by size, leading, and color — never by adding weight.

EMPHASIS · 500

For inline emphasis, bump weight to 500 only. Never bold. Never italic. The cap is locked.

DENSE · 13 / 400

Use 13/400 for dense UI surfaces — table rows, sidebars, dashboard panels — where vertical rhythm matters more than reading flow.

ROLE 04 · ANNOTATIONFAMILY · IBM PLEX MONO
LABELS · NUMERICS · IDS · MAX WEIGHT 500
EYEBROW · 9
◆ SECTION OPENER LABEL
LABEL_S · 10
FOUNDATIONS · TYPOGRAPHY · LOCKED
LABEL_M · 11
DOWNLOAD LOGO PACKAGE
DATA · 13
14.02.38Z · $48,200 · 214MS · UID_8821C
MICRO · 9
— BLUEPRINT_LINE_ANNOTATION
◆ TYPE WEIGHT RULES · LOCKED
● JETBRAINS 600 / 300 · GEIST MAX 500 · REFINED
JetBrains Mono · Display
Ship the thing. SHIP THE THING.
600 · Main300 · Bjarmi accent
Geist · Sans
Ship the thing. Ship the thing.
500 · Max headline300 · Body / supporting
TOKENSIZEWEIGHTFAMILYPREVIEW
DISPLAY_XXL120px600JetBrains MonoShip the thing.
DISPLAY_XL96px600JetBrains MonoShip the thing.
DISPLAY_L72px600JetBrains MonoShip the thing.
HEADING_XL48px500GeistInfrastructure, not vendor.
HEADING_L32px500GeistInfrastructure, not vendor.
HEADING_M24px500GeistInfrastructure, not vendor.
HEADING_S18px500GeistInfrastructure, not vendor.
BODY_L18px300GeistInfrastructure, not vendor.
BODY15px400GeistInfrastructure, not vendor.
BODY_S13px400GeistInfrastructure, not vendor.
LABEL_M11px500IBM Plex MonoLABEL_M
LABEL_S10px500IBM Plex MonoLABEL_S
MICRO9px400IBM Plex Mono— BLUEPRINT_LINE_ANNOTATION
DATA13px400IBM Plex Mono14.02.38Z · $48,200 · 214MS
LOCKED FAMILIES · NOT SWAPPABLE
DISPLAY
● LOCKED
Ship it.
JetBrains Mono
Code lineage · brutal at scale
BODY · SANS
● LOCKED
Infrastructure.
Geist
Engineered · neutral · sharp
ANNOTATION
● LOCKED
14.02.38Z · 214MS
IBM Plex Mono
Heartbeat · labels · numerics
02.5Display Accent · Locked pairing600 / 300 · FILL · SAGE

Display Accent locked

Locked. Display headlines pair a 600-weight main word with a 300-weight sage accent word. The weight contrast carries the hierarchy — the color confirms it. Treatment is fill. Same family (JetBrains Mono), same tracking, same scale.

● LOCKED600 / 300 · FILL
SYSTEM DEFAULT
Niflheim system
ROLETOKENVALUENOTE
Main word--display-weight600Primary display text — the subject
Accent word--display-accent-weight300The sage partner — 300 pts lighter
Accent color--accent#87A6A6Sage — fill only, no outline/underline
Main color--text-hi#E8E8E8Primary text ramp
Family--font-displayJetBrains MonoSame family for both — locked
Tracking--display-tracking-0.04emTight — adds mass at display scale
CaseUPPERCASEAll display headlines uppercase
DO
Pair main noun with modifier
Keep both words same family
Let weight carry hierarchy
DON'T
Add outline or underline
Mix families within headline
Use at body scale (≤ 32px)
WHEN
Hero headlines
Section openers
Campaign moments
04Spacing · 4px baseGEOMETRIC · 11 STOPS

Spacing grid

Every gap, padding, and margin snaps to the 4px rhythm. Tight for dense product UI; loose for editorial moments.

SPACE_14px
SPACE_28px
SPACE_312px
SPACE_416px
SPACE_524px
SPACE_632px
SPACE_748px
SPACE_864px
SPACE_996px
SPACE_10128px
05Radius · Corner curvature6 STOPS · LOCKED · DEFAULT 12PX

Radius locked

Locked scale. Default is 12px (--r-md) — sharp enough to feel engineered, soft enough to breathe. Six stops: 0 / 4 / 8 / 12 / 20 / 999.

NONE
0px
--r-none
XS
4px
--r-xs
SM
8px
--r-sm
MD · DEFAULT
12px
--r-md
LG
20px
--r-lg
PILL
999px · pill
--r-pill
TOKENVALUENAMEAPPLIED TO
--r-none0pxNONETables, data rows, flush edges
--r-xs4pxXSPills, inline chips, tight controls
--r-sm8pxSMButtons, inputs, nested surfaces
--r-md12pxMD · DEFAULTCards, panels, modals — DEFAULT
--r-lg20pxLGHero blocks, feature cards
--r-pill999pxPILLStatus pills, avatars, tag chips
06Elevation · Tonal stackingNO SHADOWS · VALUE SHIFTS

Elevation levels

Surfaces rise by getting lighter, not by casting shadows. The only glow allowed is the sage ambient on primary actions — a radioactive self-illumination, not a drop shadow.

L0
Page base
L1
Card / raised
L2
Nested / input
L3
Interactive
L4
Overlay / modal
AMBIENT GLOW · PRIMARY ONLY
07Motion · Duration & Easing5 DURATIONS · 4 CURVES

Motion tokens

Motion is instrumental, not decorative. Entrances are quick and confident; exits fade without ceremony. Everything snaps to a predictable ramp.

DURATIONS
DUR_INSTANT80ms
DUR_FAST160ms
DUR_BASE240ms
DUR_SLOW400ms
DUR_DELIBERATE600ms
EASING CURVES
EASE_STANDARD0.2, 0, 0, 1
EASE_EMPHASIZED0.2, 0, 0, 1.2
EASE_ENTER0, 0, 0, 1
EASE_EXIT0.3, 0, 1, 1
08Iconography · Lucide44 CURATED · 1.5px STROKE · 24px BASE

Icons set

Lucide with a 1.5px stroke — technical without being cold. Use sparingly; never decoratively. Always paired with a label in product UI.

activity
alert-circle
alert-triangle
arrow-right
bar-chart-3
box
check
check-circle
chevron-down
chevron-right
circle
clock
corner-down-left
cpu
database
download
external-link
file
file-text
filter
flag
git-branch
grid
info
layers
link
list
lock
mail
maximize
play
plus
radio
search
server
settings
shield
sliders
target
terminal
trending-up
upload-cloud
user
x
zap
STROKE · 1.5pxGRID · 24pxLINECAP · ROUNDUSAGE · ALWAYS WITH LABEL
09VisualizationIN PROGRESS

Visualization DATA

Chart library research, recommendation, and live samples. Recharts is the recommended pick — themed end-to-end on Niflheim tokens. Comparison table at the top documents alternatives.

09.01Library Comparison · Sindri's Recommendation

Five candidates evaluated for the Niflheim chart layer. Recharts wins on React 19 stability, brand fit, and composability. Live samples below.

LibraryVerdictBundleReact 19Brand FitBest For
RechartsPICK~150KBStable (v3.8+)High — declarative, themeable, composes well with primitivesDefault for every Niflheim chart. Line, bar, area, donut, sparkline.
VisxCONSIDER~modularv4 alpha onlyHighest — D3-level controlBespoke chart types (Sankey, hierarchy, custom geometry). Defer until v4 stable.
NivoCONSIDER~250KB+StableMedium — strong defaults, theme override needed for dark+sageBackup if Recharts hits a wall on a specific chart type.
TremorSKIP~heavyStableLow — opinionated Tailwind styling clashes with our token integrity ruleNot a fit. Brings its own design system.
EChartsSKIP~900KBStable (wrapper)Low — imperative API, anti-pattern vs our composable ReactSkip. Powerful but heavy; not idiomatic React.
09.02Color in Data — Niflheim chart palette

Sage (Bjarmi) leads. Status hues fill out the categorical scale. Sequential and diverging scales remain to be locked — Embla decision when we lock.

Primary · Sage--accent
Success--status-success
Info--status-info
Caution--status-caution
Alert--status-alert
09.03Line Chart — multi-series time series
Sample · agent routine outcomes by day (last 7 days)
09.04Area Chart — single-series with sage glow
Sample · LLM token spend ($) by day
09.05Bar Chart — categorical with stacked variant
Sample · routine outcomes by day (stacked)
09.06Donut Chart — categorical distribution
Sample · Aesir agent distribution by tier (45 agents)
09.07Sparkline — inline trend (used in stat cards + tables)
Routines fired

1,151

Failed

18

Token spend

$53.20

10The Aesir · Roster45 AGENTS · 4 TIERS · LUCIDE ICONS

The Aesir roster

45 agents named after Old Norse mythology. Each owns a specific function. Tier indicates dependency depth — Foundation agents are what every other agent reads from. Click any card for the full agent record. Avatars are placeholders until Baldr's B&W edit pipeline ships the real portraits.

Foundation
9
Creative
5
Specialist
19
Operational
12

Foundation

9 AGENTS

The 9 agents the rest of the system depends on. Brand, knowledge, infrastructure, command, voice.

Creative

5 AGENTS

Owners of every published artifact. Design, copy, social, video.

Specialist

19 AGENTS

Domain expertise — sales, research, vertical industries, finance, healing.

Operational

12 AGENTS

The discipline layer. Project flow, reporting, audits, billing, internal ops.

11Pattern LibraryMIST · FORGE · 6 PATTERNS

Pattern Library locked

Two families, locked subtlety, no cultural overlay. Mist is CSS-native ambient texture (gradients, scan lines, grids). Forge is subtle materials generated via SVG filters — slate, iron, basalt. Every pattern routes through <TexturedSurface> which clamps opacity at 8%.

◆ SUBTLETY GOVERNANCE · LOCKED
DEFAULT OPACITY
0.05
HARD CAP
0.08
ENFORCEMENT
<TexturedSurface> clamps requested opacity at the component layer. Cannot be bypassed.
COMPOSITION RULE
One pattern per surface. No stacking.

Cultural texture (knotwork, runes, Elder Futhark) was explored on 2026-04-19 and intentionally excluded from the brand surface. Aesir/Niflheim names live as internal system architecture only — never as decorative motif on Justin's public-facing brand. Seeexploration/_archive/aesir-brand-explore/.

Mist

3 PATTERNS

CSS-native ambient. Gradients, scan lines, grids, halos. Zero asset weight. The base layer.

Sage GlowOPACITY 0.08

Soft Bjarmi radial in one corner. The ambient signature behind every hero, header, and CTA surface.

USE FOR
  • Hero backgrounds
  • CTA card upper-right
  • Loading state ambient
background: radial-gradient(circle at 80% 20%, var(--accent-glow), transparent 60%);
Ambient HaloOPACITY 0.06

Diffuse radial centered. Spotlight effect for the focal element on a dark surface.

USE FOR
  • Modal backdrop
  • Featured card
  • Single-CTA pages
  • Loading state center
background: radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 70%);
SandOPACITY 0.05

The canonical ambient grain. Very fine isotropic particle noise. Use this — or use nothing.

USE FOR
  • Default ambient overlay
  • Card surfaces
  • Section backgrounds
  • Anywhere flat needs life
<!-- via SVG filter, see ForgeFilters -->
filter: url(#niflheim-sand);
opacity: 0.05;

Forge

3 PATTERNS

Subtle material textures generated via SVG filters. Slate, iron, basalt. Adds physicality without imagery.

SlateOPACITY 0.05

Subtle stone-like surface noise. Quiet weight under content blocks. SVG-generated, zero asset weight.

USE FOR
  • Card surfaces
  • Audit headers
  • Heavy-content sections
<!-- inline SVG filter, see Slate component -->
background: var(--surface-1);
filter: url(#niflheim-slate);
IronOPACITY 0.04

Brushed metal grain. Linear high-frequency noise — directional, industrial.

USE FOR
  • Footer backgrounds
  • Navigation rails
  • Heavy-tooling surfaces
<!-- inline SVG filter with feTurbulence + matrix -->
background: var(--surface-2);
filter: url(#niflheim-iron);
BasaltOPACITY 0.06

Coarse volcanic-grain texture. Heaviest material register. Use sparingly.

USE FOR
  • Hero corner accents
  • Drama surfaces
  • Limited-edition pages
<!-- inline SVG filter, coarser turbulence -->
background: var(--surface-1);
filter: url(#niflheim-basalt);

Composition

ONE PATTERN PER SURFACE

Real-world surfaces composed with a single pattern. Stacking two patterns is forbidden — it creates noise. Pick one, set opacity ≤ 0.08, move on.

NIFLHEIM
Hero · Sage Glow ambient
AUDIT · 2026-Q2
4.8 / 10
Card · Slate forge
Default surface · Sand grain
12Photography · Locked B&W · Pipeline · PoolsSCHEMA · AWAITING DECISIONS

Photography locked b&w

Locked rule: every published Niflheim image is black & white. Source material may be in color — anything that ships passes through Baldr's edit pipeline first. The schema below defines every decision slot. Values marked TBD await brand direction; once decided, they drop in as data updates without code changes. End-state: an automation can read a photo, route it through the pipeline, and publish without human visual judgment.

● LOCKED · NON-NEGOTIABLE
Black & White only.
Every image published under the Niflheim brand is monochrome. Sources from Content Pools may be in color — they route through the edit pipeline (step 03 below) before they're publishable. The only exception is the Bjarmi accent overlay (step 06): a single colored highlight on top of an otherwise B&W image. Never a fill. Never a tint over the whole image.
DIRECTION · COMPOSITION & LIGHT
LIGHTING
Source countTBD
Source angleTBD
HardnessTBD
DirectionTBD
Color temp noteN/A — output is B&W
COMPOSITION
Subject placementTBD
Negative spaceTBD
Crop philosophyTBD
Symmetry ruleTBD
Foreground / depthTBD
JUSTIN AVATARS · 5 VARIANTS
1:1 · PLACEHOLDER
SquareTBD
Profile pics, app icons, social avatars
1:1 · PLACEHOLDER
Round CropTBD
Circular masks (LinkedIn, agent badges)
16:9 · PLACEHOLDER
WideTBD
Hero blocks, video thumbnails
9:16 · PLACEHOLDER
Talking HeadTBD
Reels, TikTok, Shorts intros
4:5 · PLACEHOLDER
EditorialTBD
About page, long-form bylines
CONTENT POOLS · 6 SOURCES · LIVE COUNTS
POOLSOURCE PATHNAMINGEDIT STATUSFILES
Lifestylecreative/Content/Content Pools/LifestyleTBDraw0
Mythoscreative/Content/Content Pools/MythosTBDmixed71
Singingcreative/Content/Content Pools/SingingTBDraw4
Trainingcreative/Content/Content Pools/TrainingTBDmixed138
Workingcreative/Content/Content Pools/WorkingTBDmixed16
Uneditedcreative/Content/Content Pools/UneditedTBDraw1
PILLAR MAPPING · 7 PILLARS × 6 POOLS
PILLAR ↓ / POOL →LifestyleMythosSingingTrainingWorkingUnedited
AI Revenue● PRIMARY
AI Authority● PRIMARY
Client Results● PRIMARY
Builder's Log● PRIMARY
Mindset● PRIMARY○ 2°
Lifestyle● PRIMARY○ 2°
Fitness● PRIMARY
EDIT PIPELINE · LOCKED SEQUENCE · 8 STEPS
01Raw SourceLOCKED

Original capture — color or B&W, any aspect, any device. Goes into a Content Pool.

02Crop & RecomposeLOCKED

Re-crop to one of the 4 locked aspect ratios per surface. Subject placement follows composition rule.

aspectRatios16:9 · 1:1 · 4:5 · 9:16
03B&W ConversionLOCKED

Mandatory. Every image published is B&W. Color sources are converted here.

contrastTBD
highlightRolloffTBD
shadowLiftTBD
channelMixTBD
04GrainLOCKED

Filmic grain to break digital cleanness.

intensityTBD
sizeTBD
05VignetteLOCKED

Subtle vignette to focus the subject.

intensityTBD
falloffTBD
06Bjarmi Accent OverlayLOCKED

Optional — only on feature surfaces. Bjarmi #87A6A6 used as a colored highlight on a single element (a mono label, a status dot, an arrow callout). Never as a fill.

useCaseTBD
opacityTBD
blendModeTBD
placementTBD
07ExportLOCKED

Dual export: WebP for web, JPG for social uploaders that don't accept WebP.

formatWebP + JPG
qualityTBD
longEdgeTBD
08PublishLOCKED

Tag with pillar, drop into the publish queue, schedule via Mani.

ASPECT RATIO × SURFACE
RATIOSURFACESUSAGE
16:9Marketing hero · Blog cover · YouTube thumbnail · Slide deckLandscape moments — wide framing, environmental context
1:1LinkedIn post · Instagram square · AvatarDefault social. Subject centered or rule-of-thirds.
4:5Instagram portrait · Carousel slidesMaximum vertical real estate before going full vertical
9:16Reels · Stories · TikTok · YouTube ShortsVertical video + portrait stills for stories
DO / DON'T · AWAITING DIRECTION
● DO
Rule 1TBD
Rule 2TBD
Rule 3TBD
Rule 4TBD
Rule 5TBD
✕ DON'T
Rule 1TBD
Rule 2TBD
Rule 3TBD
Rule 4TBD
Rule 5TBD
13Social Media · Platforms · Pillars · TemplatesSCHEMA · SNOTRA + BALDR

Social Media schema

Snotra and Baldr's home in Niflheim. Every social decision lives here as a structured slot — when a value is decided it drops in as data, no code changes. Platforms (LinkedIn · Instagram · TikTok · YouTube — never X), the seven Content Pillars, the six Content Pools, post templates, caption style (references Brand · Voice), the hashtag library, posting cadence, and visual treatment. End-state: an automation receives a prompt ("post about Tuesday's training session") and walks the schema to publish without human visual judgment.

PLATFORMS · 4 ACTIVE · X EXCLUDED
LinkedIn● ACTIVE
PostCarouselArticleNewsletterDocument
dim · post1200×1200
dim · carousel1080×1080
dim · document1080×1350
chars · post3000
chars · headline220
chars · comment1250
CadenceTBD
Optimal timesTBD
Hashtag cap3
Link policyFirst comment, never in body
Instagram● ACTIVE
PostCarouselReelStory
dim · post1080×1080
dim · portrait1080×1350
dim · reel1080×1920
dim · story1080×1920
chars · caption2200
CadenceTBD
Optimal timesTBD
Hashtag cap3
Link policyBio link only — never in caption
TikTok● ACTIVE
VideoCarousel
dim · video1080×1920
dim · carousel1080×1350
chars · caption2200
CadenceTBD
Optimal timesTBD
Hashtag cap3
Link policyBio link only
YouTube● ACTIVE
Long-formShortLive
dim · video1920×1080
dim · short1080×1920
dim · thumbnail1280×720
chars · title100
chars · description5000
CadenceTBD
Optimal timesTBD
Hashtag cap3
Link policyDescription + pinned comment
X / Twitter✕ EXCLUDED
Excluded by brand rule. Do not propose content for this platform.
CONTENT PILLARS · 7
AI Revenueactive
ai-revenue
PurposeTBD
Voice registerTBD
Primary poolWorking
Secondary poolTBD
TreatmentTBD
FrequencyTBD
AI Authorityactive
ai-authority
PurposeTBD
Voice registerTBD
Primary poolWorking
Secondary poolTBD
TreatmentTBD
FrequencyTBD
Client Resultsactive
client-results
PurposeTBD
Voice registerTBD
Primary poolWorking
Secondary poolTBD
TreatmentTBD
FrequencyTBD
Builder's Logactive
builders-log
PurposeTBD
Voice registerTBD
Primary poolWorking
Secondary poolTBD
TreatmentTBD
FrequencyTBD
Mindsetactive
mindset
PurposeTBD
Voice registerTBD
Primary poolLifestyle
Secondary poolMythos
TreatmentTBD
FrequencyTBD
Lifestyleactive
lifestyle
PurposeTBD
Voice registerTBD
Primary poolLifestyle
Secondary poolMythos
TreatmentTBD
FrequencyTBD
Fitnessactive
Fitness
PurposeTBD
Voice registerTBD
Primary poolTraining
Secondary poolTBD
TreatmentTBD
FrequencyTBD
CONTENT POOLS · 6 SOURCES
Lifestyle0
raw
Mythos71
mixed
Singing4
raw
Training138
mixed
Working16
mixed
Unedited1
raw
POST TEMPLATES · 6 FORMATS
Square Postplanned
Static
1080×1080
Safe areaTBD
Bjarmi placementTBD
Text overlay zoneTBD
Mono label zoneTBD
Portrait Postplanned
Static
1080×1350
Safe areaTBD
Bjarmi placementTBD
Text overlay zoneTBD
Mono label zoneTBD
Carouselplanned
Multi
1080×1080 ×N
Safe areaTBD
Bjarmi placementTBD
Text overlay zoneTBD
Mono label zoneTBD
Story / Reel Coverplanned
Vertical
1080×1920
Safe areaTBD
Bjarmi placementTBD
Text overlay zoneTBD
Mono label zoneTBD
Reel Frameplanned
Vertical Video
1080×1920
Safe areaTBD
Bjarmi placementTBD
Text overlay zoneTBD
Mono label zoneTBD
YouTube Thumbnailplanned
Static
1280×720
Safe areaTBD
Bjarmi placementTBD
Text overlay zoneTBD
Mono label zoneTBD
CAPTION STYLE · 4-SLOT TEMPLATE
OpenerUse one of the 5 locked openers (see Brand · Voice). Never start with 'In today's...' or 'I'm excited to...'TBD
BodyShort paragraphs. Punchy sentences. Concrete numbers. No corporate vocabulary. No em dashes.TBD
CTASoft invitation only. Primary: 'Unlock AI Audit' → /audit. Never 'Book a call NOW' or 'Limited time'.TBD
HashtagsMax 3. Pull from locked library. Pillar-specific additions allowed if they exist in the per-pillar list.TBD
HASHTAG LIBRARY · MAX 3 PER POST
#AIConsultingALL PILLARS
#RevenueOperationsai-revenue
#AIAutomationai-authority
#BusinessAIALL PILLARS
POSTING CADENCE · PLATFORM × PILLAR
PILLAR ↓ / PLATFORM →LinkedInInstagramTikTokYouTube
AI Revenue
TBD
TBD
TBD
TBD
AI Authority
TBD
TBD
TBD
TBD
Client Results
TBD
TBD
TBD
TBD
Builder's Log
TBD
TBD
TBD
TBD
Mindset
TBD
TBD
TBD
TBD
Lifestyle
TBD
TBD
TBD
TBD
Fitness
TBD
TBD
TBD
TBD
VISUAL TREATMENT · LOCKED TO PHOTOGRAPHY PIPELINE
Every social asset inherits the Photography · Edit Pipeline— B&W base, optional Bjarmi accent overlay, IBM Plex Mono annotations, brutalist crop. No exceptions per platform. No alternate treatments "just for Instagram".
Base treatment↳ See Photography pipeline
Annotation fontIBM Plex Mono · max weight 500
Bjarmi accent ruleSingle highlight per asset · never fill
Crop philosophyTBD
ASSET LIBRARY · LIVE FROM CONTENT POOLS
◆ LIVE GALLERY · COMING IN A SUBSEQUENT SESSION
This panel will render finished posts pulled live from each Content Pool, pillar-tagged, with the edit-pipeline status visible per asset. Build sequence: file ingest → pool tagging → pipeline run → pillar assignment → publish queue.
14Components · Wave 1STAT CARDS · DATA TABLE · BUTTON PAIR

Components wave 1

First wave: the core dashboard vocabulary. Every value here resolves through the token layer above — accent, radius, density, and display font cascade live through the tweaks panel.

STAT CARDS · LIVE · SPARK · GAUGE
ACTIVE ENGAGEMENTS
07clients
14.4%vs LAST Q
SRC / CRM.SYNC
INFERENCE SPEND / 30D30D ROLLING
$12.4KUSD
TRACKING +8.2% ABOVE BASELINE — RE-EVAL ROUTING
MODEL UTIL / PRODnominal
68/ 100rps
68% UTILp95 214ms
DATA TABLE · ENGAGEMENT LEDGER
Engagement Ledger
LIVE · AUTO-SYNCED FROM CRM · 14:02:38Z
ENGAGEMENTSECTORRUN COSTΔLATENCYSTATUS
ENG_014LLM cost-basis audit
FIN.SVCS$48,200-180msSHIPPED
ENG_013RAG eval harness
HEALTHCARE$62,400-92msIN-FLIGHT
ENG_012Agent observability pilot
LOGISTICS$38,100+14msIN-FLIGHT
ENG_011Synthetic data gen / redaction
LEGAL$24,800-44msSCOPING
ENG_010Inference routing rebuild
B2B.SAAS$71,500-312msSHIPPED
ENG_009Fine-tune throughput regression
INDUSTRIAL$18,200+206msBLOCKED
ENG_008Voice agent eval playbook
RETAIL$33,9000msARCHIVED
7 OF 47 RECORDS · SYNCED 14:02:38Z
BUTTON PAIR · PRIMARY + SECONDARY · 3 STATES
Default
Hover
Disabled
Primary
Secondary
15Components · Wave 2 · Forms10 CONTROLS · BUILT ON FOUNDATION TOKENS

Forms wave 2

Ten form controls, each with the states they ship in. The sage halo at focus, the 1px ghost border, the mono-uppercase micro-labels — that's the form language of this system. Everything inherits from the foundation tokens above; change the accent in the Tweaks panel and every halo follows.

09.1

Text Input

SINGLE-LINE · 6 STATES
Default
OPTIONAL
Filled
Focused
ACTIVE — SAGE HALO + RING AT 4PX
With icons
Success
VALID · AVAILABLE
Error
INVALID FORMAT — REQUIRES TLD
Disabled
09.2

Textarea

MULTI-LINE · COUNTER · RESIZE
Default
1–280 CHARS
0 / 280
Filled
139 / 280
Near limit
288 / 280
09.3

Select

CUSTOM CHEVRON · SAGE ACTIVE
Closed · empty
With value
Disabled
LOCKED — ENGAGEMENT PAST CLOSE
09.5

Checkbox

UNCHECKED · CHECKED · INDETERMINATE
Standalone
With description
09.6

Radio

MUTUALLY EXCLUSIVE · 3 PATTERNS
Simple
With descriptions
09.7

Toggle

BINARY · INSTANT-APPLY
Row layout
09.8

Slider

NUMERIC · TICKS · DISABLED
Continuous
01240050000
CURRENT ACTUAL — DRAG TO ADJUST BUDGET
With ticks
147
LOW23MID56HIGH
Disabled
0%35%100%
LOCKED FOR DETERMINISTIC RUNS
09.9

File Drop

DRAG · PROGRESS · ERROR
Empty
Drop files here
OR CLICK TO BROWSE · PDF · DOCX · CSV · ≤ 25MB
Dragging
Release to upload
OR CLICK TO BROWSE · PDF · DOCX · CSV · ≤ 25MB
With files
Drop files here
OR CLICK TO BROWSE · PDF · DOCX · CSV · ≤ 25MB
rag-eval-harness.pdf
2.4 MB · COMPLETE
inference-audit-q2.csv
18.2 MB · 64% UPLOADED
Error
Upload failed
FILE EXCEEDS 25MB LIMIT
REMOVE OR COMPRESS FILE BEFORE RETRYING
09.10

Form Layout

NEW ENGAGEMENT · FULL COMPOSITION
STEP 1 / 323NEW_ENGAGEMENT · 04:12 ELAPSED

Engagement details

Everything on this step is editable until you advance to Step 2.

1–280 CHARS
112 / 280
01800050000
PREFERENCES
CHANGES AUTOSAVE · LAST SAVED 00:14 AGO
17Interactive PrimitivesLAYER 1 · DONE

Interactive LAYER 1

20 token-driven interactive primitives — buttons, atoms, hover/positional, disclosure, overlays. Every dashboard, modal, toolbar, and command surface across Valhalla, the LLM mission control, and every future product UI composes from these.

17.01Button — variants · sizes · states
VARIANTS
SIZES
STATES
WITH ICONS
17.02IconButton — toolbar + table-row actions
VARIANTS
SIZES
17.03Badge — numeric counts + status tags
12OK42399+draft
smmd·dot variant
17.04Kbd — keyboard shortcuts
Kescshift + + shift + P
17.05Separator — horizontal + vertical dividers
Section A
Section B
Section C
Inline
items
separated
17.06Avatar — user · agent · status
JHJHJHJHJH
OSLHS
17.07Skeleton — animated loading placeholders
TEXT · 3 LINES
BLOCK
CIRCLE + TEXT
17.08Spinner · ProgressBar · ProgressRing
SPINNER
PROGRESSBAR · DETERMINATE
last bar = indeterminate
PROGRESSRING
25%
60%
88%
17.09EmptyState — zero-data · error · 404

No agents firing

No routines have run in the last 24 hours. Trigger one manually to see live data.

Connection lost

Could not reach the JHAI scheduler. Check Mac Mini status or retry.

17.10Tooltip — hover hints
Always-on
17.11Popover — click-triggered floating panel
17.12Menu — dropdown action menu
17.13Breadcrumb — navigation context
17.14Pagination — page-number navigation
Active page: 4
17.15Tabs — underline + pill variants
UNDERLINE
Overview content goes here.
PILL
Week view.
17.16Accordion — collapsible disclosure stack
The 4px grid maps to the locked --space-* tokens. Every padding, gap, and margin in the system resolves to a multiple of 4px, which keeps vertical rhythm consistent at any density level.
17.17Modal — dialog with backdrop · escape · scroll lock
17.18Drawer — side-panel inspector
17.19Toast — async feedback · auto-dismiss · action support
17.20Command palette — universal ⌘K · Valhalla foundation
or press K
18Data DisplayLAYER 2 · DONE

Data Display LAYER 2

9 token-driven primitives for structured data — KPIs, timelines, code, JSON, diffs, trees, logs, tables. Charts live under Visualization (#09). Together these form the data layer Valhalla and the LLM mission control consume.

18.01KeyValueList — metadata display
INLINE
Agent
Ratatoskr (seo-specialist)
Status
running
Last fired
2026-04-19 09:00 UTC
Next run
2026-04-20 09:00 UTC
Cron
0 9 * * *
STACKED
Build URL
design-system.justinharris.ai
Deploy SHA
abc12def...
Region
iad1 · Washington DC
18.02Stat — KPI display · semantic tones · trend
Routines fired
1,151 +12%
Failed
18 -3
Token spend
$53.20 +$8.91
Uptime
99.94% 0
Active
42
Active
42
Active
42
Per Sage Doctrine: tone="primary" only on the headline metric of a panel.
18.03Timeline — event stream · activity feed
DEPLOY HISTORY
  1. Production deployDEPLOY14:32
    design-system v1.4 · 38s build
  2. TypeScript check passed14:18
  3. Layer 2 primitives written14:15
    9 components · 1,400 lines
  4. Sage doctrine added to INTEGRITY.mdRULE13:51
  5. Tabs underline regression spotted13:32
    User feedback during Layer 1 review
AGENT ACTIVITY · COMPACT
  1. RRatatoskr firedCRON09:00:02
  2. RGSC snapshot complete09:00:34
  3. SSaga briefing prepared09:01:12
  4. SSlack post failed09:01:45
    rate limit exceeded
  5. SRetry queued09:02:01
18.04CodeBlock — mono code with optional copy + line numbers
tscomponents/system/primitives/Stat.tsx
1export function Stat({ label, value, tone }: StatProps) {2  return (3    <div>4      <span>{label}</span>5      <span>{value}</span>6    </div>7  );8}
bash
# deploy production
cd builds/design-system && vercel --prod --yes
# verify with playwright
python3 verify.py
18.05JsonViewer — collapsible JSON tree with type-color tokens
"routine": {
"ratatoskr",
"0 9 * * *",
true,
"last_run": {
"2026-04-19T09:00:02Z",
"success",
1842,
"output": { 2 keys }
}
,
"2026-04-20T09:00:00Z",
null
}
18.06DiffViewer — line-by-line · inline + split layouts
agent_routines/ratatoskr.yaml+32
1 name: ratatoskr
2 cron: "0 9 * * *"
3 enabled: true
4retries: 0
5timeout: 30
6+retries: 3
7+timeout: 60
8+notify_on_failure: true
ratatoskr.yaml — split+32
name: ratatoskr name: ratatoskr
cron: "0 9 * * *" cron: "0 9 * * *"
enabled: true enabled: true
retries: 0
timeout: 30
+retries: 3
+timeout: 60
+notify_on_failure: true
18.07TreeView — nested expandable hierarchy
Foundation
Creative
Iduncopywriter
Sifgraphic-designer
Baldrvideo-editoron
Bragiscriptwriter
Specialist
SELECTEDbaldr
18.08LogViewer — mono log stream · level filter · search
9 / 9
14:32:01.421ischedulerRoutine ratatoskr fired
14:32:02.103·schedulerLoading SKILL.md from agents/seo-specialist/
14:32:02.847iRratatoskrGSC API authenticated · justinharris.ai
14:32:04.211iRratatoskrSnapshot saved · 47 keywords
14:32:04.998!SsagaSlack post throttled · retry in 30s
14:32:35.412×SsagaSlack post failed: rate_limited (status 429)
14:32:35.500ischedulerFailure logged → fix_requests queue
14:32:36.001·schedulerDiagnostic claude session spawned (pid 4821)
14:33:12.244iSsagaSlack post retried · success
18.09DataTable — sortable · selectable · token-driven
RoutineAgentCronLast runStatusDuration
Slack post outboundSsaga*/15 * * * *2026-04-19 14:30failed312 ms
Lead enrichmentFfenrir0 */4 * * *2026-04-19 12:00running0 ms
Daily SEO snapshotRratatoskr0 9 * * *2026-04-19 09:00success1842 ms
GSC coverage checkRratatoskr0 6 * * *2026-04-19 06:00success988 ms
Weekly briefingSsaga0 8 * * MON2026-04-15 08:00success4120 ms
Knowledge backfillKkvasir0 3 * * SUN2026-04-14 03:00success12831 ms
Selected: 1
19Application ShellLAYER 3 · DONE

App Shell LAYER 3

7 product-chrome modules. Wraps every internal product — Valhalla, the LLM mission control, Bifrost monitor. Composes Sidebar + Topbar + Main + optional RightRail into a single AppShell frame. Full live preview below.

19.01AppShell — full frame · Sidebar + Topbar + Main + RightRail

Mission Control

Live status of every Niflheim agent, routine, and deploy. Click an agent for the full inspector.

42 online2 retrying1 failed
Routines fired
1,151 +12%
Failed
18 -3
Uptime
99.94%
Token spend
$53.20 +$8.91
The shell above is the exact composition Valhalla and the LLM dashboard will use — Sidebar (product), Topbar (with WorkspaceSwitcher + search + notifications), Main content, and RightRail (toggleable).
19.02PageHeader — product title bar · Geist sans (not display font)
R

Ratatoskr

SEO specialist agent. Monitors keyword positions across 5 domains, snapshots GSC coverage daily, emits briefings on ranking changes.

onlineseo-specialist·v2.3.1
Main content area begins here.
19.03SectionHeader — nested section divider · primary + secondary weights

Recent routines

12 / last 24h

All routines that fired in the last day, sorted newest first.

Content under primary-weight section.

Today

6 runs
Content under secondary-weight section.
19.04WorkspaceSwitcher — tenant selector · Popover-based
Current: JustinHarris.AI
19.05Topbar — leading · center · trailing three-slot layout
(search slot)
JH
19.06Sidebar — product nav · grouped · badge-aware
VValhalla
JH

Justin Harris

justin@justinharris.ai

Active item: home
19.07RightRail — contextual inspector panel
Main content area

Event details

Routine fired at 14:32:01.421

Agent
ratatoskr
Duration
1,842 ms
Status
success
20VALHALLA · MISSION CONTROL · A/B/CLAYER 4 · DOMAIN MODULE

Valhalla Sample rhythm

Same dashboard, three rhythms. A strips almost everything — ghost buttons, no card borders, sage only on status dots + agent identity. B keeps bordered structure but drops decoration. C is the current Niflheim cadence. Toggle below.

Variantghost everything · spacing-defined · status-only accent
SidebarSimulates app with left-rail visible
Valhalla
JH
Justin Harris
Operator
Workspace/Valhalla/Mission Control
All Systems Nominal

Mission Control

MRR$14.2K+8% · this month
Pipeline$38.5K4 open deals
Active Agents
42
+2
Tasks Today
187
+14%
Events / Hour
1.2K
+8%
System Load
34%
−3%
Agent Activity6 ACTIVE
R
Ratatoskr
S
Saga
F
Fenrir
K
Kvasir
S
Sindri
I
Idun
Event StreamLIVE
10:42:18Ratatoskr Indexed 847 pages · justinharris.aiView →
10:41:52Saga Digest compiled · 14 threadsView →
10:41:03Fenrir Prospect identified · Quotible → HermodView →
10:40:14Kvasir Vector DB sync · 214 new embeddingsView →
10:39:02Idun Draft v2 · Niflheim launch postView →
Scheduled Routines5 SHOWN
RoutineOwnerLast RunNext RunStatus
SEO SnapshotRatatoskr09:00Tomorrow 09:00
Content WaterfallIdun07:14Tomorrow 07:00
Lead ScanFenrir10:3211:00
KB ConsolidateKvasir04:00Tomorrow 04:00
Slack DigestSaga08:00Tomorrow 08:00
21More Domain Modules · PlannedPLANNED

More Domain Modules LAYER 4

Additional product surfaces after Valhalla — AgentCard, AgentMonitor, RoutineDashboard, LLMPlayground, LLMUsageDashboard, KBExplorer, EventStream, DeployStatus. Built on Layers 1-3.

◆ COMING IN A SUBSEQUENT SESSION
9 ITEMS PLANNED
MissionControlValhalla · system status grid · alert stream · ops overviewplanned
AgentCard (product)Live status · last fired · on-call · distinct from Aesir marketing cardplanned
AgentMonitorReal-time agent stream · success/fail rates · retry queueplanned
RoutineDashboardJHAI scheduler · cron list · last run · next run · statusplanned
LLMPlaygroundModel select · system prompt · message thread · run + replayplanned
LLMUsageDashboardToken spend · cost by model · cost by agentplanned
KBExplorerSemantic search + faceted filter on vector KBplanned
EventStreamBifrost agent_events live tailplanned
DeployStatusVercel deploys + verification pingsplanned
11Next Passes · Wave PlanBUILT ON TOKENS ABOVE

Coming roadmap

Everything below inherits from the foundations above. Tokens don't change; components multiply.

WAVE_03
Navigation
Sidebar variants, topbar, tabs, breadcrumbs, pagination
WAVE_04
Feedback & State
Alerts, toasts, banners, empty states, loading, skeletons
WAVE_05
Data Viz
Line, bar, gauge, heatmap, status grid (extending sparkline pattern)
WAVE_06
Overlays
Modal, drawer, popover, tooltip, command palette
WAVE_07
Content Blocks
Hero, feature grid, case study, CTA, pricing, testimonial, footer
WAVE_08
Cards & Containers
Profile, log entry, timeline, kanban, file row
WAVE_09
Social · LinkedIn
Carousel 4:5 (title, stat, quote, CTA slides), post card
— END DOCUMENT —NIFLHEIM · REV_03 · NEXT.JSSYSTEM_STATUS ● NOMINAL