LIVING STYLE GUIDE

Nolte Brand System

Source of truth for typography, color, spacing, and every component used on the site. Updated with every change.

Last updated: March 2026 · Jump to Components →

Color Palette

Five core tokens. No other colors introduced. Blue is for links only. Red is for CTAs and category pills only. Stats, headings, and body copy use black or white.

Primary

Black #000000 --black Text, dark sections, borders

Nolte Red #D63F18 --accent CTAs and category pills only

Digital Blue #0369fc --blue Links only — minimal use

Warm White #fafaf8 --white Page background

Neutrals

Gray 100 #f2f1ed --gray-100 Card backgrounds, alt sections

Gray 200 #e0ded8 --gray-200 Borders, dividers

Gray 400 #9e9b94 --gray-400 Labels, metadata, muted text

Gray 600 #5a5854 --gray-600 Body copy minimum contrast

Dark Surfaces

Dark #050505 --dark Hero bg, dark sections

Dark Surface #0d0d0d --dark-surface Cards within dark sections

Dark Border #1e1e1e --dark-border Borders within dark sections

Gradients (dark only — no blue tints)

Dark --gradient-dark Subtle dark section variation

Hero --gradient-hero Main hero backgrounds

Rule

Red is for action only. Never use it in headings, body copy, or decorative elements. Blue is for inline links only — not buttons, not borders. Stats are always black/white. Dark sections are pure dark — no color tints.

Typography

Three fonts, three purposes. Instrument Serif for headings. DM Mono for labels and metadata. Geist for body text. Headings are never colored — black on light, white on dark.

HEADINGS — Instrument Serif

Predictable Software Delivery

Leaders who outsource need predictable outcomes

Italic emphasis on key words in headlines — one word maximum

--serif: 'Instrument Serif', Georgia, serif

BODY — Geist

NolteOS turns 20 years of delivery data into predictable, fixed-price software delivery. Describe what you're building and get a delivery plan with 95% accuracy on scope, timeline, and cost.

Secondary body text at 15px for descriptions and supporting content.

--sans: 'Geist', system-ui, sans-serif

LABELS — DM Mono

Case Study · Healthcare · 2 Years

Insurance · Finance · Healthcare

Get Your Delivery Plan →

--mono: 'DM Mono', monospace

Type Scale

clamp(2.5–2.75rem) Hero H1

clamp(1.6–2.2rem) Section H2

1.5rem / 24px Card H3

1.0625rem / 17px Body

0.9375rem / 15px Body Secondary

0.75rem / 12px Label

0.6875rem / 11px Eyebrow / Category

Components

Buttons & CTAs

Primary CTA is always Nolte Red. Text is "Get Your Delivery Plan". Secondary is outlined white on dark backgrounds.

Get Your Delivery Plan Learn More

Get Your Delivery Plan Inline link →

Labels & Pills

DM Mono, uppercase. Eyebrow labels are gray-400. Category pills have colored border matching industry. No filled background.

Eyebrow Label General Healthcare Finance Insurance Metadata Label

Pillar Cards (4-col dark)

Used for value props in hero pillars section. Dark background, accent top border, white text.

Predictable

Scope, cost, and timeline committed before work begins.

Forecasted

Monte Carlo simulation on 20 years of delivery data.

Fixed Price

Pay per delivery. No hourly billing, no retainers.

Data-Driven

Flow metrics, cycle time, throughput — NolteOS tracks everything.

Case Study Cards (3-col grid)

Image top, client logo, category pill, serif heading, metrics footer. No rounded corners.

Featured Image

95%Accuracy 47Deliveries

Healthcare

Client Name

One-line description of the engagement and what was built.

4.2d avg cycle 2 years

Read case study →

Featured Image

100%Accuracy 23Deliveries

Insurance

Client Name

One-line description of the engagement and what was built.

3.8d avg cycle 8 months

Read case study →

Featured Image

96%Accuracy 85Deliveries

Finance

Client Name

One-line description of the engagement and what was built.

4.8d avg cycle 2 years

Read case study →

Stats Row

Large numbers, serif font, black. No color on the numbers themselves.

95% Forecast Accuracy

20yrs Delivery Data

75/mo Active Deliveries

4.2d Avg Cycle Time

Metric Cards (NolteOS dark UI)

2×2 grid on dark background. Used in case study sidebars and the NolteOS page. Classes: .shot-metrics-grid, .shot-metric-card.

Forecast Accuracy 95.2%

Avg Cycle Time 4.8d

Deliveries 47

On-Time Rate 98%

Blog Featured Cards

3-col grid on homepage. Image top (16:9), category pill, serif title, body excerpt, "Read article →" link.

Post Image

Delivery

The Predictability Gap: Why Software Projects Miss

Why most software projects miss deadlines and what data-driven delivery changes.

Read article →

Post Image

Engineering

Flow Metrics Every Engineering Team Should Track

Cycle time, throughput, WIP, and work item age — the four metrics that predict delivery.

Read article →

Post Image

Leadership

When to Outsource Engineering and When Not To

A decision framework for leaders considering their first outsourced engineering team.

Read article →

Industry Vertical Cards

3-col grid on dark background. Used in the "Who We Work With" section. Link to practice pages at /industries/[slug].

Healthcare

Regulated. Complex. Critical delivery windows.

HIPAA compliance, EHR integrations, clinical workflow tools.

View practice → Insurance

Regulatory filing deadlines can't move.

MGA platforms, carrier portals, compliance-first engineering.

View practice → Finance

Audit trails, compliance, and zero-downtime delivery.

Fintech platforms, KYC/AML systems, banking integrations.

View practice →

Trust Bar

Always on a dark background directly below the hero. Logo images: grayscale, brightness(0), opacity 0.5. No text fallbacks.

Who we work with

Spacing & Layout

Layout Widths

1100px

Max content width — .wide-wrap

780px

Blog / prose max-width — .page-wrap

100%

Full-bleed sections (hero, trust bar, footer CTA)

Spacing Scale

0.5rem

Element gap, small labels

1rem

Within-component spacing

1.5rem

Component internal padding

2rem

Container horizontal padding

3rem

Intra-section gap

5–6rem

Section spacing (vertical)

Mobile Breakpoints

Breakpoint What changes

768px Nav collapses to hamburger. Case grid, footer grid, OS grids → single column. Hero font sizes reduce.

600px Trust logos wrap. Additional fine-tuning of spacing and typography.

480px Hero h1 font size reduction. Blog grid collapses.

Patterns & Rules

Dark / Light Rhythm

Alternate dark and light sections. Never stack more than two dark sections consecutively. Dark sections: hero, trust bar, pillars, industry verticals, footer CTA.

Accent (Red) Usage

Nolte Red (#D63F18) for CTAs, category pills, and accent top-borders on step cards only. Never in body copy, headings, or decorative elements.

Label Pattern

DM Mono, uppercase, letter-spacing 0.08–0.12em, 0.6875–0.75rem. Used for: eyebrows, metadata, nav links, section numbers (01, 02...), category tags.

No Rounded Corners

Cards, buttons, pills — all use sharp corners (border-radius: 0). The only exception is team/founder photos which use 50% circle crop.

Imagery Rules

Real product screenshots in device frames. Team photography — not stock. Abstract geometric visuals for blog posts. No generic AI-generated imagery.

Voice in Copy

Say "predictable delivery" — not "agile." Say "leaders who outsource" — not "non-tech founders." Say "forecasting" — not "estimation." Lead with data.

CTA Text

Global CTA is always "Get Your Delivery Plan" → os.nolte.io. Never "Contact Us", "Get Started", or "See Your Forecast". One CTA per page minimum.

Section Numbers

Use zero-padded numbers (01, 02, 03) for ordered sections via DM Mono labels. Use req-item counter pattern for requirement/process lists.

Hero Structure

Dark hero with 2/3 : 1/3 split. Copy left aligned with the Nolte logo. Visual/graphic right-aligned to container edge. Eyebrow label → H1 → subtext → CTA buttons.

NolteOS Product Shot Classes

Styled HTML mock UIs — no images. All defined in global.css under /* ===== NOLTEOS MARKETING PAGE ===== */. See /about/nolteos for full examples.

.shot-windowBrowser chrome mockup (light)

.shot-window-darkBrowser chrome mockup (dark)

.shot-metrics-grid2×2 KPI card grid (dark)

.shot-kanbanKanban board (dark)

.shot-approvalsApprovals list (dark)

.shot-meetingMeeting/calendar block (dark)

.shot-delivery-colsDelivery status columns (dark)

.shot-progressProgress bar (used in case studies)

Regression Test Map

The regression test script (scripts/regression-test.sh) is change-aware. It reads git diff and only runs tests relevant to what changed. Run --all to force the full suite.

File Changed Tests That Run

src/styles/global.css Responsive checks · Performance

src/components/BaseHead.astro SEO · Analytics

src/layouts/Base.astro SEO · Analytics · Availability · Content

src/pages/index.astro Availability · Content Integrity · SEO

src/pages/blog/* or src/content/blog/* Availability · Key Page Content

src/pages/work/* or src/content/work/* Availability · Key Page Content

astro.config.* / package.json Full suite (all 7 categories)

No changes detected Full suite (safety fallback)

Usage

./scripts/regression-test.sh — auto-detect mode against production
./scripts/regression-test.sh http://localhost:4321 --all — full suite against local
./scripts/regression-test.sh https://nolte-site.netlify.app --all — full suite against staging