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
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.
◆ Downloads · Brand Source Files
Download the Brand Files
Each file below is the canonical, locked v2 copy. Files are synced from clients/justinharris-ai/brand/ on every deploy of this design system. Click to download.
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
01Lead with the business outcome, not the technology
02Use concrete examples and numbers when possible
03Avoid jargon without explanation. If you say 'RAG pipeline,' explain what it does in plain English.
04Be direct. No fluff. No filler phrases.
05Strong opinions held loosely — take a stance but acknowledge nuance
07Always ground claims in specifics: name an industry, give a number, cite an example.
08Use 'we' on brand surfaces (website, proposals, case studies). Use 'I' for personal thought leadership (LinkedIn, video scripts).
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.
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 consciousness“The math on this one might surprise you.”Lead-in content, not the audit
Problem AwareSomething is wrong, I don't know what“See where your revenue is going.”/audit · framed as diagnostic
Solution AwareAI automation is the answer, evaluating who“See how the audit works.”/audit · framed as methodology preview
Product AwareKnows Justin exists, evaluating fit“Unlock AI Audit.”/audit · framed as product name
Most AwareReady to buy, just needs terms“Book 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
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
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 decks“I build the thing. The system runs after I'm gone. A strategy document doesn't close deals.”
VS · SaaS AI tools“The tool is 20% of it. The other 80% is integration, workflow, rollout. I work on the 80%.”
VS · Marketing agencies“Agencies optimize the top of the funnel. I work on the middle — where leads turn into revenue or disappear.”
VS · General consultants“13 years in commercial sales. Every implementation is designed to recover or generate revenue — not reduce friction in a process that doesn't matter.”
VS · Technologists“I'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.”
“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.
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-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-00px
--space-14px
--space-28px
--space-312px
--space-416px
--space-520px
--space-624px
--space-732px
--space-848px
--space-964px
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.
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.
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.
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.
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
Niflheimsystem
ROLETOKENVALUENOTE
Main word--display-weight600Primary display text — the subject
Two families: the logomark (symbol alone, square) and the signature (symbol + wordmark, horizontal). Six logomark colorways and three signature colorways cover every surface — light, dark, mono, transparent. SVG is the canonical format; PNG and WebP are 2× raster fallbacks; AI is the editable source.
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.
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.
Library
Verdict
Bundle
React 19
Brand Fit
Best For
Recharts
PICK
~150KB
Stable (v3.8+)
High — declarative, themeable, composes well with primitives
Default for every Niflheim chart. Line, bar, area, donut, sparkline.
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.
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.
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.
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.
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
◆ 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".
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.
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
ENGAGEMENT
SECTOR
RUN COST
ΔLATENCY
STATUS
ENG_014LLM cost-basis audit
FIN.SVCS
$48,200
-180ms
SHIPPED
ENG_013RAG eval harness
HEALTHCARE
$62,400
-92ms
IN-FLIGHT
ENG_012Agent observability pilot
LOGISTICS
$38,100
+14ms
IN-FLIGHT
ENG_011Synthetic data gen / redaction
LEGAL
$24,800
-44ms
SCOPING
ENG_010Inference routing rebuild
B2B.SAAS
$71,500
-312ms
SHIPPED
ENG_009Fine-tune throughput regression
INDUSTRIAL
$18,200
+206ms
BLOCKED
ENG_008Voice agent eval playbook
RETAIL
$33,900
0ms
ARCHIVED
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.4
Search
KBD HINT · RESULT DROPDOWN
Empty
⌘K
With query
⌘K
TYPE TO FILTER · FIRST RESULT PRE-SELECTED
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 ASection BSection C
Inlineitemsseparated
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
Production deployDEPLOY14:32
design-system v1.4 · 38s build
TypeScript check passed14:18
Layer 2 primitives written14:15
9 components · 1,400 lines
Sage doctrine added to INTEGRITY.mdRULE13:51
Tabs underline regression spotted13:32
User feedback during Layer 1 review
AGENT ACTIVITY · COMPACT
RRatatoskr firedCRON09:00:02
RGSC snapshot complete09:00:34
SSaga briefing prepared09:01:12
SSlack post failed09:01:45
rate limit exceeded
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
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.
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.
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.