J.Harris/AI
Design System/Niflheim/Overview
LiveRev 04Apr.21.2026
Live spec · Open system · Tweaks enabled

Niflheim design 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.
3
Surfaces · Product / Web / Social
1
Mode · Dark only
100
Tokens · Live CSS variables
04
Revision · Next.js port
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 knowledge/rules-library/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

Two families, four roles. Geist (variable, 100..900) handles display, headings, and body — one family, full weight range, hierarchy carried by size, placement, and weight contrast (500 main / 275 accent). IBM Plex Mono handles annotation — labels, numerics, IDs, eyebrows. JetBrains Mono retired from the brand on 2026-04-21; the heavier 600/300 display stack read as chunky at Instagram and hero scale.

Headline stack · display + label + body
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 · GEIST · VARIABLE
USE ONCE OR TWICE PER PAGE · 500 / 275 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
● GEIST VARIABLE · DISPLAY 500 / 275 · MAX 500 · REFINED
Geist · Display (variable)
Ship the thing. Ship the thing.
500 · Main275 · Bjarmi accent
Geist · Sans (variable)
Ship the thing. Ship the thing.
500 · Max headline275 · Body / supporting
TOKENSIZEWEIGHTFAMILYPREVIEW
DISPLAY_XXL120px500GeistShip the thing.
DISPLAY_XL96px500GeistShip the thing.
DISPLAY_L72px500GeistShip 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.
Geist · Display
Variable · 500 main · 275 accent
BODY · SANS
● LOCKED
Infrastructure.
Geist · Sans
Engineered · neutral · sharp
ANNOTATION
● LOCKED
14.02.38Z · 214MS
IBM Plex Mono
Heartbeat · labels · numerics
02.5Display Accent · Locked pairing500 / 275 · WEIGHT CONTRAST

Display Accent locked

Locked (2026-04-21). Display headlines pair a 500-weight main word with a 275-weight modifier word in text-mid. Hierarchy is carried by weight contrast; the second color is a dim grey, not sage. Sage is reserved for status dots, section eyebrows, and CTA buttons — not display accent words. Same family, same tracking, same scale.

LOCKED500 / 275 · WEIGHT CONTRAST
SYSTEM DEFAULT
Niflheim system
ROLETOKENVALUENOTE
Main word--display-weight500Primary display text — the subject
Accent word--display-accent-weight275The modifier — 225 pts lighter
Accent color--display-accent-colorvar(--text-mid)text-mid — NOT sage. Weight pairing, not color contrast.
Main color--text-hi#E8E8E8Primary text ramp
Family--font-displayGeist (variable)Same family for both — locked
Tracking--display-tracking-0.04emTight — adds mass at display scale
CaseMIXEDSample-approved mixed case (2026-04-21)
DO
Pair main noun with modifier
Keep both words same family
Let weight carry hierarchy
Accent word in text-mid, NOT sage
DON'T
Color the accent word sage
Mix families within headline
Use at body scale (≤ 32px)
Bold-heavy beyond 500
WHEN
Hero headlines
Dashboard titles
Section openers
03.5Brand · Animated MarkSMIL SVG · 3.5s LOOP · 9 BJARMI BANDS · REDUCED-MOTION HONORED

Animated mark motion · brand

Vector animation of the JH monogram. Nine Bjarmi #87A6A6 bands cascade bottom-to-top through the mark over a 3.5s loop, clipped to glyph geometry. Pure SVG with native <animate> — no JS dependency, 3KB on the wire, hardware-accelerated. Used in email signatures, brand site, and any large surface where a static logomark would feel inert.

Black mark
Light surfaces — bjarmi bands on charcoal
White mark
Dark surfaces — bjarmi bands on white

Honors prefers-reduced-motion: the animated band group is hidden via display: none and the static mark renders alone. Email-signature GIF and MP4 variants live in the brand drive at creative/Branding/Email/Gmail Signature/animated/final/. Component: components/system/primitives/AnimatedMark.tsx. Assets: public/brand/jh-mark-animated-{black|white}.svg.

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 curvatureCURVES BY DEFAULT · --r-md IS CANONICAL · 04.25

Radius locked

Locked. Every surface defaults to curved (12px) viaborderRadius: var(--r-md)applied inline on each component. Flat surfaces require an explicit borderRadius: 0 or the .ds-r-none class. The earlier nuclear * { border-radius: 0 } reset was removed on 2026-04-25 — flat is no longer the default.

XS
4px
--r-xs
SM
8px
--r-sm
MD · DEFAULT
12px
--r-md
LG
20px
--r-lg
PILL
999px
--r-pill
CIRCLE
50%
50%
FLAT
0px
--r-none
TOKENVALUENAMEAPPLIED TO
--r-xs4pxXSMicro badges, inline code chips, tooltip arrows.
--r-sm8pxSMInput fields, select boxes, secondary tags.
--r-md12pxMD · DEFAULTCards, panels, modals, tiles, Buttons, IconButtons. The canonical surface radius.
--r-lg20pxLGHero banners, large modal overlays, feature callout blocks.
--r-pill999pxPILLTags, scrollbar thumbs, progress bars, true pill containers.
50%50%CIRCLEAvatars, status dots, pulses, spinner rings, radio markers, toggle thumbs.
--r-none0pxFLATIntentionally flat surfaces only. Must be applied explicitly — 0 is never the default.
06Elevation · Tonal stackingNO SHADOWS · VALUE SHIFTS

Elevation levels

Surfaces rise by getting lighter, not by casting shadows. Product UI is flat — no glow, no motion. Marketing surfaces may add a hyper-subtle sage ambient on the Ghost Bjarmi CTA hover only. It's the kind of glow you notice when it's missing, not when it's there.

L0
Page base
L1
Card / raised
L2
Nested / input
L3
Interactive
L4
Overlay / modal
Product · No Glow
Marketing · Subtle Glow on Hover
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

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 RevenuePRIMARY
AI AuthorityPRIMARY
Client ResultsPRIMARY
Builder's LogPRIMARY
MindsetPRIMARY
LifestylePRIMARY
FitnessPRIMARY
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 · CTA PAIR

Components wave 1

First wave: the core dashboard vocabulary. Stat cards sit in a hairline-divided group per P1 DIVIDER-GROUP— never as filled tiles. CTAs render as the canonical Ghost Bjarmi primary (sage border, transparent fill). Every value resolves through the token layer above.

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
CTA PAIR · GHOST BJARMI + 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 BORDER · NO HALO
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
niflheim.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 CONTROLLAYER 4 · DOMAIN MODULE

Valhalla Sample minimal

Mission Control rendered at the canonical Niflheim rhythm. Ghost buttons, hairline dividers, sage reserved for status and agent identity. Spacing carries hierarchy — no card borders on group items, no accent decoration, no display font on numeric values.

Sidebar
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
23Operational SurfacesLIVE · BATCH 3 · 2026-04-25

Operational LAYER 1

Every primitive promoted in the Batch 3 mass promotion. Composes the entire surface vocabulary an operational dashboard like Valhalla needs — chat, kanban, calendar, content, activity feeds, action surfaces, charts, agent identity, tables. Imports directly from @niflheim/primitives. What you see here is bit-for-bit what every Niflheim consumer renders.

23.01PageHeader + SectionHeader — composition shells
Dashboard

Operational overview

Page header sets the top-of-page vocabulary. Eyebrow + H1 + optional description on the left, optional right-side actions cluster.

This week

Active blockers

23.02Avatar · AvatarGroup · AgentAvatar — identity primitives
AVATAR (FALLBACK INITIALS)
JHES
AVATAR GROUP (4 VISIBLE + OVERFLOW)
S
E
S
O
+3
AGENT AVATAR (4 LIVE STATES)
SI
EM
HE
VO
23.03AgentCard — agent identity tile
SI
Sindri
Website builder
Refactoring Valhalla pages onto promoted primitives
Last fired · 12 minutes ago
EM
Embla
Brand strategist
Last fired · 3 hours ago
HE
Hermod
Sales & outreach
Awaiting Justin approval on GIOStar v11 follow-up
Last fired · yesterday
23.04MetricChange + CountBadge — directional + counter atoms
METRIC CHANGE (intent decoupled from direction)
+12.4%+3.1%−8%0
COUNT BADGE (ghost + filled variants)
1299+35NEW
23.05MetricCard + Sparkline — KPI with inline trend
Monthly recurring revenue
$12,400
+18.2%
vs. last 30 days
LLM spend (week)
$84.21
+5.4%
cap $200/wk
Pipeline
9
+2
active prospects
23.06Banner + Alert — persistent notifications
Scheduled maintenance
Supabase will undergo planned maintenance Saturday 02:00–04:00 UTC.
Deploy ad1fcb6 succeeded. 24 routes prerendered, 0 errors.
Mac Mini CLI worker has not posted a heartbeat in 18 minutes.
Action required
3 blockers are at critical severity and unacknowledged.
ALERT (smaller inline)
Heads up
This action will rebuild every page in the site map.
Cost cap exceeded for this CLI session.
Failed
Migration 008 failed: column already exists.
Brand package delivered to Quotible.
23.07QuickLink + QuickLinkGrid — Justin's external software index
23.08CommandRunner + WarRoomTrigger — agent invocation surfaces
Agent commands
23.09ActivityFeed + ActivityItem — agent stream
Sindri shipped ad1fcb6 — Valhalla refactor
12m ago
Volundr raised blocker agent_status hook not wired
1h ago
Embla delivered brand package Quotible
3h ago
Hermod sent outreach GIOStar v11 follow-up
yesterday
Mimir re-indexed KB 2,431 entries
yesterday
Sif approved logomark Valhalla v3
2d ago
23.10TableToolbar — control row above DataTable
status:openseverity:high
23.11ChatThread — Muninn surface
MU
Muninn
Local LLM · Mac Mini
You2m ago
What blockers does sindri have open right now?
Muninnjust now
Sindri has 2 blockers open — both medium severity. The agent_status hook is still not wired to /api/agent-status (acknowledged, dvalin owns), and there's a smoke-test blocker from S8 still open.
You
Acknowledge the smoke-test one.
Muninn
23.12KanbanBoard + KanbanColumn + KanbanCard — task board
Backlog3
JH.AIINFRA
Wire agent-status emitter into every Stop hook
infra
URGENT
QuotibleSOCIAL
Quotible — April content calendar
social
Apr 28
Refactor /agent-status onto promoted primitives
refactor
In progress2
BLOCKED
GIOStarADS
GIOStar — Q2 paid ads launch
ads
HE
VA
Today
Locking the creative brief, audience spec, and budget allocation across Meta + Google + TikTok. Awaiting client sign-off on the audience definition before media buy can start.
Attachments
creative-brief.md12 KB
audience-spec.pdf84 KB
Assignees
HE
Hermod
VA
Vali
Comments
HE
Hermod2h ago
Pulled the latest audit numbers — CPA target is $48.
VA
Vali32m ago
Need budget split confirmed before I queue the campaigns.
Logomark v3 — final SVG
brand
J
Review1
NurseForwardWEB
NurseForward — homepage rebuild
Awaiting Justin
review
Done2
DONE
Valhalla logomark wire-up
Sticky chrome refactor
23.13CalendarMonth + CalendarEvent — content scheduling grid
CONTENT CALENDAR (mixed platforms · statuses · thumbnails on hover)
April 2026
S
M
T
W
T
F
S
29
30
31
1
2
3
LinkedIn — AI category essay
4
5
6
7
8
Quotible IG carousel
9
10
11
12
GIOStar TikTok reel
13
14
15
LinkedIn carousel
IG Reel — agents
16
17
18
19
20
21
22
YouTube long form
23
24
25
X — launch teaser
LinkedIn recap
IG story drop
TikTok BTS
4 posts
26
27
28
29
30
1
2
GAP HIGHLIGHT (empty days dim with diagonal stripe)
April 2026 · gap view
S
M
T
W
T
F
S
29
30
31
1
2
3
LinkedIn — AI category essay
4
5
6
7
8
Quotible IG carousel
9
10
11
12
GIOStar TikTok reel
13
14
15
LinkedIn carousel
IG Reel — agents
16
17
18
19
20
21
22
YouTube long form
23
24
25
X — launch teaser
LinkedIn recap
IG story drop
TikTok BTS
4 posts
26
27
28
29
30
1
2
23.14ContentCard + MediaThumbnail + AssetCard + UploadDropzone
CONTENT CARDS (social post previews — with inline thumbnails)
LinkedIn essay thumbnail
LinkedIn
Why 'AI consulting' is a misleading category
draft
Apr 25 · Justin Harris
Instagram post thumbnail
Instagram
Behind the scenes — Niflheim design system build
scheduled
Apr 28 · 2 attachments
Newsletter thumbnail
Newsletter
Operational ops — what we shipped this week
queued
Apr 27 · 9:00 AM PT
MEDIA THUMBNAILS (aspect-ratio range — 1:1 · 16:9 · 9:16 · 4:5)
1:1
Square 1:1
16:9
Landscape 16:9
0:24
9:16
Portrait 9:16
1:12
4:5
Pinterest 4:5
ASSET CARDS (downloadable files)
Niflheim-design-system-v8.pdf
PDF· 2.4 MB
valhalla-logomark.svg
SVG· 1.8 KB
brand-voice-package.zip
ZIP· 846 KB
UPLOAD DROPZONE
23.15Tag + HelpHint — small atoms
TAG (taxonomy labels — distinct from Badge which is status)
designsocialQ4-2025infraremovablelarger size
HELP HINT (dismissible inline tip)
Drag cards between columns to update status. Hover a card to see the priority indicator.
24Operational Surfaces — Batch 4LIVE · BATCH 4 · 2026-04-25

Operational — Batch 4 LAYER 1

Batch 4 primitives — app-shell completeness, advanced forms, financial / sales surfaces, paid ads with review states, content + social with per-platform PostPreview, agents + AI including MuninnChatPanel + AgentSessionLog, visualization extras, charts, and user / client management. Every internal tool inherits from this set. No hand-rolled CSS, no per-app re-implementations.

24.01UserMenu + NotificationCenter — top-right shell
24.02DetailLayout + SplitView — full-page chassis
DETAIL LAYOUT (sticky left rail + content)
Attachments
creative-brief.md12 KB
audience-spec.pdf84 KB
budget-allocation.xlsx22 KB

Audience targeting

Q2 launch fans out across three platforms. The audience definition is anchored to the Las Vegas DMA with a one-step lookalike layered on top of the existing customer list. Budget is weighted toward Meta, with Google capturing branded search and TikTok testing creative variants.

  • Meta — 60% of spend, lookalike + interest stack.
  • Google — 25% of spend, branded + competitor terms.
  • TikTok — 15% of spend, creative testing only.

Set the campaign objective with objective: OUTCOME_LEADS and pin the budget at the campaign level so the ad sets share spend across the lookalike pool.

SPLIT VIEW (agent queue + detail)
AGENT QUEUE
Hermod — LinkedIn outreach
12 contacts queued
QUEUED
Idun — Brand audit draft
Ready for review
REVIEW
Ratatoskr — Bifrost event sync
Running · 4m elapsed
RUN
Sindri — Niflheim batch 4
Promotion in progress
RUN
Vali — Meta ads spend audit
Waiting on credentials
BLOCKED
DETAIL

Select a task to view details

Pick an agent task from the list on the left to see its run log, inputs, and downstream invocations.

24.03InlineEdit · NumberInput · Combobox · DatePicker · DateRangePicker
INLINE EDIT (click to edit, Enter to commit)
NUMBER INPUT (with +/− steppers, min/max clamp)
COMBOBOX (fuzzy autocomplete)
DATE PICKER (single date, ISO YYYY-MM-DD)
DATE RANGE PICKER (continuous range fill — 5-day pre-selection)
24.04Stepper · OnboardingChecklist · SegmentedControl
STEPPER (pending / active / done lifecycle)
Account
Created Apr 8
Brand
Voice + visual locked
Site
Building landing page
Launch
ONBOARDING CHECKLIST (in-product activation)
Get started
1 of 4 complete
  • Connect your domain
    Point DNS to Vercel and verify SSL.
  • Invite your team
    Add at least one collaborator.
  • Schedule first content piece
    Pick a platform and publish date.
  • Run your first audit
    Auditor will scan and surface fixes.
SEGMENTED CONTROL (mutually-exclusive options)
24.05MoneyValue · BudgetMeter · BillingPeriodSelector
MONEY VALUE (sm / md / lg, abbreviated)
$1,247.50$12,400.00$124,000$1.2M$13K
BUDGET METER (spend vs cap)
LLM spend (week)
$84.21of$200.00
42%
Meta ads · April
$3,120.00of$4,000.00
78%
Tooling · April
$950.00of$1,000.00
95%
BILLING PERIOD SELECTOR
24.06ContactCard · DealCard · InvoiceCard
CONTACT CARDS (people on the pipeline)
EC
Erin Chen
VP Marketing
Quotible
erin@quotible.com
+1 (415) 555-0142
warmchampion
Last contacted 4d ago
MV
Marcus Vega
GIOStar
DEAL CARDS (active pipeline · with attached contact)
Negotiation
GIOStar — Q4 retainer
$6,000
MV
Marcus Vega
Director of Operations
GIOStar
Close · May 8
HHermod
Closed Won
Quotible — brand + site
$12,000
EC
Erin Chen
VP Marketing
Quotible
Close · Apr 8
SSindri
Discovery
NurseForward — 30-day
$2,000
Close · Apr 30
HHermod
INVOICE CARDS (billing surface)
INV-0142
GIOStar
PAID
$2,000
Due · Apr 1, 2026
INV-0143
Quotible
SENT
$1,000
Due · May 1, 2026
INV-0141
NurseForward
OVERDUE
$2,000
Due · Apr 15, 2026
INV-0144
Boneyard Strength
DRAFT
$1,500
24.07CampaignCard · AdCreativeCard (with review states)
CAMPAIGN CARDS (per-platform performance tile · client REQUIRED)
QuenchMeta
Quench Q2 — lead gen
LIVE
$1,840.00of $4,000.00
CPA$48
Apr 1 – Apr 30
Boneyard StrengthTikTok
Boneyard — winter promo
DRAFT
$0.00of $2,000.00
May 1 – May 31
AD CREATIVE — PENDING REVIEW (action affordances visible)
Stop guessing your AI strategy.
Our 30-day audit finds the wins. Then we build them.
Book audit
PENDING
Headline punctuation feels off — let's try a question hook instead.
Niflheim ships in 24 hours.
Token-driven design system. Zero per-app re-implementations.
See samples
PENDING
AD CREATIVE — APPROVED (performance row visible)
Hire one consultant. Get an agent army.
We deploy on day one. The team grows with you.
Learn more
APPROVED
Impr18K
CTR2.40%
Spend$612.00
Audit. Build. Ship.
Three steps to operational AI — without the consultant theater.
Get audit
APPROVED
Impr9.6K
CTR1.80%
Spend$284.00
24.08PostPreview · HashtagInput · MiniCalendar
POST PREVIEW (per-platform layout — 5 platforms)
InstagramApr 28 · 5:00 PM PT
Behind the scenes — Niflheim design system build. Six weeks of token work. Zero per-app re-implementations. #designsystems #buildinpublic #aiconsulting #niflheim #ghostdoctrine
412
31
9
LinkedInApr 26 · 9:00 AM PT
Why 'AI consulting' is a misleading category — and the three signals that separate real builders from prompt-tinkerers. The category is collapsing under its own ambiguity. #aiconsulting #leadership #buildinpublic #operations #agents …see more
142
28
14
14
TikTokApr 27 · 7:30 PM PT
3 mistakes I see in every AI agent stack — and the one fix that makes them all go away. #aiagents #buildinpublic #agents #tech #founders
1840
94
62
62
YouTubeApr 29 · 10:00 AM PT
4:32
How we built an agent army in 30 days
Long-form walkthrough of the Niflheim → Valhalla → Bifrost stack. Code, screenshots, the full architecture. #agents #fullstack #aiengineering #claudecode #anthropic
286
0
42
18
PinterestMay 2 · 11:00 AM PT
Niflheim color tokens — a sage-and-charcoal operational palette anchored on oklch. #designtokens #uidesign #darkmode #minimal #designsystem
84
6
22
HASHTAG INPUT (capped at 5 — count chip + cap warning)
#aiconsulting#buildinpublic#designsystems3 / 5
MINI CALENDAR (compact month grid)
April 2026
S
M
T
W
T
F
S
24.09AgentDirectory · PromptCard · ModelPicker · TokenMeter · ToolUseCard · MuninnChatPanel · AgentSessionLog
AGENT DIRECTORY (filterable grid of agents)
SI
Sindri
Website builder
Build
Refactoring Valhalla
EM
Embla
Brand strategist
Brand
Last fired · 3h ago
SI
Sif
Visual designer
Design
Niflheim batch 4
HE
Hermod
Sales & outreach
Sales
GIOStar v11 follow-up
VO
Vor
Onboarding
Ops
Last fired · yesterday
ID
Idun
Content & social
Content
April content calendar
PROMPT CARDS (reusable prompt templates)
Morning briefing
Summarize all-channel activity from the last 24 hours. Group by agent. Surface blockers first, then shipped, then noise.
opsdaily
Last used · 2h ago
Brand voice check
Score the attached copy against BRAND-VOICE.json. Flag any deviation in tone, vocabulary, or sentence cadence.
brandreview
Last used · yesterday
SEO audit prompt
Crawl the target domain. Surface the top 20 page-level fixes ranked by impact-to-effort ratio.
seoaudit
Last used · 3d ago
MODEL PICKER (provider + context window)
TOKEN METER (used / budget with caution threshold)
420K / 1M tokens
42% used12 days remaining
840K / 1M tokens
84% used6 days remaining
980K / 1M tokens
98% used2 days remaining
TOOL USE CARD (collapsible JSON I/O)
Input
{
  "query": "Niflheim batch 4 primitives",
  "limit": 10
}
Output
{
  "matches": 12,
  "top": [
    "StatGrid",
    "AgentDirectory",
    "ModelPicker"
  ]
}
in{ "domain": "quench.com", "depth": 3 }
in{ "to": "team@giostar.com" }
out{ "error": "rate_limited", "retry_after": 60 }
MUNINN CHAT PANEL (dock · history · feedback · regenerate · markdown · streaming)
PAGE CONTENT — SHIFTS LEFT WHEN MUNINN OPENS
The Muninn dock is anchored to the right edge of the host container. When closed, only a 40px raven rail is reserved. When opened, the panel expands to 360px and this main content area smoothly compresses to fill the remaining space — no overlay, no z-index fight with page content. Thinking dots pulse while Muninn drafts a response. The header has a new-chat button next to the close X.
Open / close to see content shift. Raven icon swapped from Lucide Bird per Justin's asset.
AGENT SESSION LOG (completion chips + invocation chips)
Home page redesign · session 4
SI
Sindri10:02 AM
Updating home page hero.
Replaced gradient with sage outlineUpdated CTA copy
Invoked
SI
Sif
SI
Sif10:08 AM
Approved Sindri's gradient swapFlagged spacing on mobile
SI
Sindri10:21 AM
Mobile spacing fix.
Reduced hero padding 24→16Section gap 96→80
Invoked
ID
Idun
EM
Embla
ID
Idun10:34 AM
Headline rewritten for claritySubhead trimmed by 12 words
24.10HeatMap · Gauge · StatGrid
HEAT MAP (intensity grid)
6a
8a
10a
12p
2p
4p
6p
8p
10p
12a
2a
4a
Mon
Tue
Wed
Thu
Fri
Sat
Sun
GAUGE (radial value 0–100)
62%
Pipeline health
84%
Site uptime
42%
LLM headroom
STAT GRID (auto-flow KpiCells)
MRR
$12,400
+18%
this month
Active clients
4
+1
Open blockers
3
+1
Pipeline
9
+2
active prospects
LLM spend (wk)
$84
+5%
cap $200
Sites live
12
24.11LineChart · BarChart · AreaChart · DonutChart · FunnelChart
LINE CHART (multi-series)172W1W2W3W4W5W6W7W8
BAR CHART (single series)220MonTueWedThuFriSatSun
AREA CHART (filled trend)153JFMAMJJASOND
DONUT CHART (segments + center label)
$12.4K
MRR
FUNNEL CHART (conversion stages)
Visitors12,400 · 100.0%Audit started1,840 · 14.8%Audit completed920 · 7.4%Booked call142 · 1.1%Closed won24 · 0.2%
85.2%50.0%84.6%83.1%
24.12RichTextEditor · CodeEditor · MessageThread · PaymentMethodTile · TimezoneSelector
RICH TEXT EDITOR (contenteditable, basic)

Drop your content here. Bold, italic, lists — wired through the toolbar.

CODE EDITOR (mono, language label)
javascript
MESSAGE THREAD (nested replies + composer)
S
Sindri2h ago
Promoting the last 49 primitives to @niflheim/primitives. ETA tonight.
S
Sif1h ago
Make sure StatGrid composes against KpiCell — no parallel implementations.
S
Sindri58m ago
Confirmed — StatGrid is just a layout shell, KpiCell does the work.
E
Embla30m ago
Voice check on PostPreview copy looks good. Approved.
PAYMENT METHOD TILE (saved card)
Visa•••• 4242Default
Exp 04/28
Mastercard•••• 8211
Exp 11/27
TIMEZONE SELECTOR (IANA zone with offset + abbrev)
24.13MemberList · RoleSelector · InviteUserModal · PendingInvitesPanel · ClientInviteCard · ProjectAccessRow
MEMBER LIST (header + rows)
Name
Role
Last active
JH
Justin Harris
justin@justinharris.ai
OWNER
now
S
Sindri
sindri@justinharris.ai
ADMIN
12m ago
E
Embla
embla@justinharris.ai
MEMBER
3h ago
S
Sif
sif@justinharris.ai
MEMBER
1h ago
GR
Guest reviewer
reviewer@external.com
VIEWER
yesterday
ROLE SELECTOR
INVITE USER MODAL (controlled open state)
PENDING INVITES PANEL
Pending invites
3
maya@apexhealth.com
Invited by Justin
Apr 24
james@lumenlabs.io
Invited by Hermod
Apr 22
priya@forgeanvil.com
Invited by Vor
Apr 20
CLIENT INVITE CARD (magic-link onboarding)
Invite client to project dashboard
This client will see only their own project. They will not see other clients, agents, or platform settings.
Company
Boneyard Strength
Contact email
hello@boneyardstrength.com
Project
Boneyard Q2 launch
Magic link
https://app.justinharris.ai/invite/8c2f-9a14-bb
Expires Apr 30, 2026
PROJECT ACCESS ROWS
Q
Quotible Q2 launch
Quotible
FULL
4
G
GIOStar — Q4 retainer
GIOStar
SCOPED
3
N
NurseForward — 30-day
NurseForward
READ-ONLY
2
25Domain ModulesLIVE · LAYER 4 · 2026-04-25

Domain Modules LAYER 4

The actual Valhalla product surfaces, composed from Niflheim primitives. Each module is what the user sees when they navigate to that page inside Valhalla. These are the concrete reference implementations that Valhalla v1 copies.

25.01Mission Control — system home page
Valhalla · home

Mission Control

Agents running
24
of 31 active
Events / 24h
1.2K
+8%
Avg latency
142
ms p50
Error rate
0.4%
+0.1%
Live alert stream
Hermod completed outreach to GIOStar
12s ago
Vali failed retry on meta-spend-pull
2m ago
Kvasir re-indexed 2,431 KB entries
14m ago
Sindri shipped ad1fcb6 → production
22m ago
Ratatoskr routed event to Idun
38m ago
System health
38026000040812162024
Uptime
99.94%
p95 latency
380ms
Queue depth
12
25.02AgentCard (product) — live agent directory
HE
Hermod
Sales · LIVE
Sales
Outreach to GIOStar — 412 runs / 7d, 0 errors
Last fired · 2m ago
ID
Idun
Creative · LIVE
Creative
Drafting LinkedIn carousel — 188 runs / 7d, 1 error
Last fired · 14m ago
SI
Sif
Visual · IDLE
Design
Awaiting design queue — 64 runs / 7d, 0 errors
Last fired · 4h ago
SI
Sindri
Frontend · ON-CALL
Build
Niflheim batch promotion — 341 runs / 7d, 2 errors
Last fired · 1m ago
VA
Vali
Ads · ERROR
Ads
meta-spend-pull failed — retry queued, 7 errors / 7d
Last fired · 22m ago
RA
Ratatoskr
Events · LIVE
Ops
Bifrost router — 1,204 runs / 7d, 0 errors
Last fired · now
25.03Agent Monitor — runs · success/fail · retry queue
Valhalla · agents

Agent Monitor

Runs / 1h
412
+18
Success rate
96.8%
Fail rate
1.2%
Retries pending
8
3 failing twice
AgentStatusDuration (ms)StartedTool calls
EmblaSHIPPED81231m ago4
HermodSHIPPED1,14212s ago8
HermodSHIPPED1,00812m ago7
IdunSHIPPED84244s ago5
KvasirSHIPPED3,0228m ago14
RatatoskrSHIPPED943m ago1
SifSHIPPED2,44022m ago9
SindriIN-FLIGHT4,2182m ago12
ValiBLOCKED2121m ago2
ValiBLOCKED18816m ago2
Retry queue
Vali · meta-spend-pull
Failed 2× — backoff 4m
RETRY
Hermod · linkedin-warm-list
Failed 1× — backoff 1m
RETRY
Kvasir · embed-batch-422
Failed 1× — token cap
RETRY
25.04Routine Dashboard — JHAI scheduler · cron list
Valhalla · scheduler

Routine Dashboard

NameCronLast runNext runStatusLast duration
embla-brand-voice-audit0 10 1 * *Apr 1May 1SHIPPED8m 22s
hermod-monday-outreach0 9 * * 1Mon 9:00Mon 9:00SHIPPED12m 18s
idun-content-batch-draft0 8 * * 1-58:00 AMtomorrow 8:00SHIPPED6m 11s
kvasir-nightly-kb-sync0 2 * * *2:00 AMtomorrow 2:00 AMSHIPPED3m 42s
ratatoskr-event-prune0 4 * * 0Sun 4:00Sun 4:00SHIPPED1m 04s
sif-screenshot-regression0 */6 * * *4h agoin 2hARCHIVED44s
sindri-deploy-verify*/5 * * * *2m agoin 3mSHIPPED812ms
vali-meta-spend-pull*/15 * * * *12s agoin 14mBLOCKED208ms
25.05LLM Playground — model · prompt · run · replay
Valhalla · llm

LLM Playground

System prompt
107 / 280
Turns
1
2
3
Draft a LinkedIn post for GIOStar
JU
Justin10:14 AM
Draft a LinkedIn post announcing GIOStar's Q2 paid ads launch. Keep it tight and operator-toned.
ID
Idun10:14 AM
Three-platform launch goes live tomorrow. Meta carries 60% of spend against a one-step lookalike. Google takes branded + competitor terms. TikTok runs creative tests only. We measure CPA on day 14, then re-weight.
Voice check passedHashtag count = 3
JU
Justin10:15 AM
Cut the metric jargon. Make it sound like a person.
ID
Idun10:15 AM
GIOStar goes live tomorrow on three platforms. Meta does the heavy lifting. Google grabs the people typing your name. TikTok learns what creative wins. We check the numbers in two weeks and shift the weight.
Voice rewrite shipped
Invoked
EM
Embla
Tool calls
Input
{
  "text": "Three-platform launch…",
  "brand": "GIOStar"
}
Output
{
  "score": 0.92,
  "deviations": 0
}
25.06LLM Usage — token spend · cost by model & agent
Valhalla · cost

LLM Usage

APR 1 – APR 25, 2026
Tokens this month
14.2M
+22%
Cost
$312.40
of $400 cap
Top agent
Hermod
$84.20
Top model
Sonnet
8.4M tokens
Cost by agent
840HermodIdunSindriSifValiKvasir
Cost by model
$312
SPEND
Token spend · last 30 days
540240Apr 1Apr 6Apr 11Apr 16Apr 21Apr 25
14.2M / 17M tokens
84% used6 days remaining in cycle
25.07KB Explorer — semantic search · faceted filters
Valhalla · kb

Knowledge Explorer

⌘K
Category
Source agent
Sindri
422
Sif
318
Hermod
264
Embla
211
Kvasir
188
Date range
Last 30 days
Similarity threshold
≥ 0.75
Filled-sage primary CTA — banned 2026-04-21
0.94
Per Justin's directive: filled sage on a button is decorative use and we banned it. All primary CTAs are Ghost Bjarmi (sage border, sage text, transparent fill). Audit script blocks deploys on violations.
SindriLESSON
GIOStar Las Vegas — paid ads scope, Q2
0.91
Three-platform launch: Meta 60%, Google 25%, TikTok 15%. Lookalike audience anchored on existing customer list + Las Vegas DMA. CPA target $48 by day 14 measurement window.
HermodCLIENT
Niflheim ghost doctrine — universal application
0.87
SESSION_v8 applied ghost doctrine to form primitives, containers, shell chrome, and planned-section row groups. Audit script audit-ghost-doctrine.sh fails deploy on any non-sanctioned surface fill.
SifFINDING
Bifrost router — Ratatoskr→Vör→Idun→Sindri chain LIVE
0.82
Autonomous agent coordination LIVE 2026-04-18. Router fans events through the chain. All four agents currently respond to agent_events of type campaign.live, retainer.signed, and content.requested.
RatatoskrORGANIZATIONAL
25.08Event Stream — Bifrost agent_events live tail
Valhalla · bifrost

Event Stream

LIVE
12 / 12
10:14:42iRatatoskrevt_8c2f9 · agent.fired · target=Hermod · status=routing
10:14:41iHermodevt_8c2fa · tool.called · search_kb · status=running
10:14:40iHermodevt_8c2fb · tool.completed · search_kb · status=ok · 142ms
10:14:38iRatatoskrevt_8c2fc · agent.completed · Hermod · status=completed
10:13:55!Valievt_8c2fd · tool.retry · meta-spend-pull · attempt=2/3
10:13:52×Valievt_8c2fe · tool.failed · meta-spend-pull · status=failed · rate_limited
10:12:44iRatatoskrevt_8c2ff · agent.fired · target=Idun · status=routing
10:12:43iIdunevt_8c300 · agent.completed · Idun · status=completed
10:11:18iSindrievt_8c301 · agent.fired · target=Sindri · status=routing
10:09:02iKvasirevt_8c302 · tool.called · embed_batch · 412 entries
10:08:58iKvasirevt_8c303 · tool.completed · embed_batch · 412 entries · 3,022ms
10:08:11!Hermodevt_8c304 · tool.retry · linkedin-warm-list · attempt=1/3
25.09Deploy Status — Vercel deploys + verification pings
Valhalla · ops

Deploy Status

Deploys / 7d
18
+4
Avg build time
1m 12s
Failures
1
Uptime
99.9%
ProjectCommitBranchStatusDurationAge
valhallaad1fcb6mainSHIPPED1m 12s12m ago
design-system9e2104amainSHIPPED44s1h ago
boneyard44c91d2mainSHIPPED1m 02s2h ago
valhalla8821fe0wr-4IN-FLIGHT3m ago
nurseforward3a8821dmainSHIPPED58s5h ago
design-system1c4421bmainBLOCKED22s8h ago
boneyard28f1492mainSHIPPED1m 18syesterday
nurseforwardbe882fcmainSHIPPED52syesterday
Verification pings
valhalla returned 200 in 142ms
12s ago
design-system returned 200 in 88ms
1m ago
boneyard returned 200 in 212ms
2m ago
nurseforward returned 200 in 884ms (slow)
4m ago
valhalla returned 200 in 118ms
6m ago
design-system returned 200 in 92ms
8m ago
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