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: June 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--blackText, dark sections, borders

Nolte Red#D63F18--accentCTAs and category pills only

Digital Blue#0369fc--blueLinks only, minimal use

Warm White#fafaf8--whitePage background

Neutrals

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

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

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

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

Dark Surfaces

Dark#050505--darkHero bg, dark sections

Dark Surface#0d0d0d--dark-surfaceCards within dark sections

Dark Border#1e1e1e--dark-borderBorders within dark sections

Gradients (dark only, no blue tints)

Dark--gradient-darkSubtle dark section variation

Hero--gradient-heroMain 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

Book Consultation →

--mono: 'DM Mono', monospace

Type Scale

clamp(2.5-2.75rem)Hero H1

clamp(1.6-2.2rem)Section H2

1.5rem / 24pxCard H3

1.0625rem / 17pxBody

0.9375rem / 15pxBody Secondary

0.75rem / 12pxLabel

0.6875rem / 11pxEyebrow / Category

Components

Buttons & CTAs

Primary CTA is always Nolte Red. Text is "Book Consultation". Secondary is outlined white on dark backgrounds.

Book Consultation Get a Delivery Forecast

Book Consultation Inline link →

Labels & Pills

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

Eyebrow LabelGeneralHealthcareFinanceInsuranceMetadata 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%Accuracy47Deliveries

Healthcare

Client Name

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

4.2d avg cycle2 years

Read case study →

Featured Image

100%Accuracy23Deliveries

Insurance

Client Name

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

3.8d avg cycle8 months

Read case study →

Featured Image

96%Accuracy85Deliveries

Finance

Client Name

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

4.8d avg cycle2 years

Read case study →

Stats Row

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

95%Forecast Accuracy

20yrsDelivery Data

75/moActive Deliveries

4.2dAvg 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 Accuracy95.2%

Avg Cycle Time4.8d

Deliveries47

On-Time Rate98%

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

Section Component Library

Reusable section components in src/components/sections/. Compose new marketing pages from these; each wraps the global classes documented above. Content is passed as props (or sourced from src/data/*).

ComponentPurpose

HeroDark hero; centered prop toggles editorial vs left-aligned industry variant

SectionHeadingEyebrow + serif title (HTML for <em>) + sub

ProofStripDark metric strip with dividers

StepsGridNumbered 3-step grid + optional inline CTA

VerticalsGrid3 linked industry cells with tags

CaseGridCase-card grid (wraps CaseCard, logos from data/logos)

GuaranteeSplitDark split: metrics left, visual slot right

OsPreviewNolteOS roadmap mockup

TrustBarLogo strip (light variant)

HomeTestimonialDark testimonial with logo + avatar

BuildModes"What we do" numbered cards

FoundersSectionFounders (from data/team) + content split

BlogFeaturedFeatured blog grid from the collection

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)

Design Tokens

CSS custom properties in :root (global.css). Prefer these over hardcoded values so new pages stay consistent.

Token groupValues

--space-*xs .5rem · sm 1rem · md 1.5rem · lg 2rem · xl 3rem · 2xl 4rem · 3xl 5rem · 4xl 6rem

--font-*h1 / h2 (fluid clamp) · h3 1.25rem · body 1rem · sm · label .75rem · eyebrow .6875rem

--gray-*100 / 200 / 300 / 400 / 500 / 600 (full ramp: 300 & 500 now defined)

--radius-*sharp 0 · circle 50%

--shadow-*sm · md · lg

--duration-*fast .15s · base .2s · slow .3s

--z-*base 1 · nav 100 · modal 1000

Forms

Form fields are styled globally. Wrap fields in .form-group / .form-row; inputs, labels, .form-status, and validation colors come from global.css. Pages only own their form's wrapper layout.

Mobile Breakpoints

BreakpointWhat changes

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

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

480pxHero 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 to 0.12em, 0.6875 to 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

Primary CTA is always "Book Consultation" to /proof-of-partnership (the Proof of Partnership landing page, with the consultation form at the bottom). Secondary CTA is "Get a Delivery Forecast" to os.nolte.io, used only where a primary and secondary pair appears (page heroes), never in the header, footer, or pre-footer CTA. Avoid "product roadmap" wording: in this space "product" reads as the insurance product.

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 ChangedTests That Run

src/styles/global.cssResponsive checks · Performance

src/components/BaseHead.astroSEO · Analytics

src/layouts/Base.astroSEO · Analytics · Availability · Content

src/pages/index.astroAvailability · 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.jsonFull suite (all 7 categories)

No changes detectedFull 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