B2B AI product design

Northforge Studio

An editorial, ember-accented identity for a design partner to technical founders.

Curated example kit
Light mode

Forge EmberPrimary: #BE512B
Steel LinenSecondary: #D9CCBC
Signal GoldAccent: #D5A147

A dark metal eight-point compass star with copper inlay resting on cream paper over a graphite grid.

From brief to audit

The brief

A fictional studio that designs internal tools and premium SaaS for technical founders. The brief asked for a system that reads sharp, confident, and minimal, so the studio looks as rigorous as the products it ships.

Audience

Founders shipping internal tools and premium SaaS products

Asked for

sharp
confident
minimal

What the audit found

Studios in this space tend toward loud gradients or anonymous grey. The gap worth owning sits between boutique craft and operator-level execution: strategic rigor visible on the first screen, with nothing decorative competing for attention.

Audience promise: A brand system that signals strategic rigor from the first screen.
Differentiator: Positions the company between boutique design craft and operator-level product execution.
Design direction: Editorial minimalism with ember accents and grounded neutrals.

The system

Editorial minimalism. Fraunces at display sizes over Manrope for product text, warm white paper and graphite ink, and Forge Ember reserved for rules and a single primary action. The mark is a notched N with a compass tick, so it holds up as a favicon.

Logo directions

Three hand-drawn marks, each shown on the kit's canvas and reversed, with where each one is meant to be used.

Forge WordmarkWebsite mastheads and hero sections
Studio StackSocial avatars and launch cards
NF MonogramFavicons and app marks

Type specimen

The heading and body faces set at working sizes, with the full hierarchy each screen is built from.

Fraunces / Manrope

Northforge Studio

Northforge Studio feels like a design partner for technical founders who want bold clarity without visual noise. A brand system that signals strategic rigor from the first screen.

Fraunces adds premium authority while Manrope keeps the system contemporary and product-ready.

Role	SizeSize / leading	Face	Sample
H1	64/68	Fraunces	Sharper brands for serious builders
H2	42/48	Fraunces	Sharper brands for serious builders
H3	28/34	Fraunces	Sharper brands for serious builders
Body	18/30	Manrope	Strategic, exact, and quietly ambitious.
Label	14/18	Manrope	Strategic, exact, and quietly ambitious.

Palette

Six roles with hex and OKLCH values, and WCAG contrast measured against the kit's own background and text colors.

primaryForge Ember#BE512Boklch(0.57 0.15 39)
Primary actions and hero highlights
Contrast against Warm White:Bg 4.57:1 · AAContrast against Graphite:Text 3.25:1 · AA Large
secondarySteel Linen#D9CCBCoklch(0.87 0.03 75)
Panels, cards, and separators
Contrast against Warm White:Bg 1.51:1 · Fill onlyContrast against Graphite:Text 9.83:1 · AAA
accentSignal Gold#D5A147oklch(0.76 0.12 72)
Badges and emphasis
Contrast against Warm White:Bg 2.23:1 · Fill onlyContrast against Graphite:Text 6.66:1 · AA
surfacePaper Veil#F8F4EEoklch(0.97 0.01 75)
Card surfaces
Contrast against Warm White:Bg 1.05:1 · Fill onlyContrast against Graphite:Text 14.16:1 · AAA
backgroundWarm White#FCFAF6oklch(0.99 0.01 75)
Canvas background
Contrast against Graphite:Text 14.88:1 · AAA
foregroundGraphite#1F2430oklch(0.22 0.03 255)
Headlines and body text
Contrast against Warm White:Bg 14.88:1 · AAA

Live components

Real shadcn/ui components, themed only by this kit's CSS variables. Nothing here submits.

Northforge Studio

Sharper brands for serious builders

Assured

Rendered in Northforge Studio tokens

The same shadcn/ui components, themed only by CSS variables.

What to look for

Buttons and focus: Primary, outline, and ghost actions use the kit's primary and ring tokens.
Surfaces: Card, tabs, and the note share the kit's card, muted, and border tokens.
Type: The card title is the kit's heading face; everything else is its body face.

Voice and messaging

Strategic, exact, and quietly ambitious.

Assured
Useful
Curated

Do

Lead with outcomes
Use crisp product language
Keep claims grounded in proof

Don't

Sound frantic
Overuse buzzwords
Write generic agency copy

“Sharper brands for serious builders”

Tagline, Northforge Studio

“Identity systems with operator DNA”

Tagline, Northforge Studio

“Where product rigor meets visual edge”

Tagline, Northforge Studio

Handoff

The kit ships as Tailwind @theme tokens, shadcn CSS variables, and a components.json snippet, plus voice rules an agent can check copy against. The palette, type, and tokens shown in this case study come from those same exports.

globals.cssPaste into your Tailwind v4 stylesheet.

@theme {
  --color-background: oklch(0.99 0.01 75);
  --color-foreground: oklch(0.22 0.03 255);
  --color-card: oklch(0.975 0.01 75);
  --color-card-foreground: oklch(0.22 0.03 255);
  --color-popover: oklch(1 0 0);
  --color-popover-foreground: oklch(0.22 0.03 255);
  --color-primary: oklch(0.57 0.15 39);
  --color-primary-foreground: oklch(0.985 0.01 75);
  --color-secondary: oklch(0.88 0.03 75);
  --color-secondary-foreground: oklch(0.24 0.03 255);
  --color-accent: oklch(0.76 0.12 72);
  --color-accent-foreground: oklch(0.18 0.03 255);
  --color-muted: oklch(0.94 0.02 75);
  --color-muted-foreground: oklch(0.48 0.03 255);
  --color-border: oklch(0.9 0.02 75);
  --color-input: oklch(0.99 0.01 75);
  --color-ring: oklch(0.57 0.15 39);
}

Keep exploring

See Northforge Studio as an interactive brand book.

The same curated kit, laid out as the brand book view a team or an agent works from.

Open the brand book preview

A brushed brass ribbon sculpture standing on a deep navy surface beside ruled navy and cream ledger sheets.

Next case study

Harborwell AdvisoryFractional CFO and finance operations