The Nautes Design Language

Version: 0.3.0 Status: Draft — iterating with Hans-Jakob Last updated: 2026-02-05 Token source: `tokens/nautes.json v3.0.0

1. Point of View

Hanlon exists to extend what people can do. Not to impress with technology, but to redesign work so that the people doing it get their time and focus back. The design language must embody the same principle: extend the reader's ability to understand, trust, and act.

Authority through restraint. A confident brand does not need to scream. Hanlon's visual identity is rooted in quiet modernism — the belief that precision and warmth can coexist, that negative space is a design element (not emptiness), and that the work speaks without shouting.

We design for trust, not attention. Every element earns its place.

Why Quiet Modernism

Quiet modernism emerged as a response to sensory overload in digital culture. It intentionally creates space for thought and breath. Where earlier minimalism felt cold and sterile — stark white boxes — quiet modernism introduces warmth and humanity through material authenticity, organic textures, and functional precision.

This fits Hanlon for three reasons:

1. Our clients are overwhelmed. They are small business owners drowning in noise — AI hype, tool fatigue, vendor pitches. Our design should feel like a pause from that.
2. Our work is precise. We redesign workflows from first principles. The design language should mirror that: carefully considered, nothing wasted.
3. We are one person. There is no committee smoothing edges. The design can be opinionated and consistent in a way that only a single-founder brand can achieve.

What We Are Not

• Not cold. We are restrained, not austere. Warm cream backgrounds and generous spacing create approachability.
• Not trendy. We do not chase design trends. Quiet modernism is not a trend — it is a maturity in design thinking.
• Not flashy. If a visitor notices the design before the content, we have failed.
• Not corporate. We are professional without being institutional. One person, not a department.

2. Design Principles

Three principles — Presence, Posture, Craft — that guide every design decision. Use them to make, advocate, and evaluate.

2.1 Earned Presence

Every element must justify its existence. If it does not serve the reader, it does not belong.

Test: Can you explain in one sentence why this element exists? Does this surface feel like it exists in a real space? If not, it has not earned its presence.

2.2 Quiet Authority

Confidence expressed through restraint, not volume. Evidence over claims. Show, do not tell.

Test: Would a senior consultant at a trusted firm present information this way? If a reader only sees the first viewport, do they feel calm and oriented? If it feels like marketing or information overload, dial it back.

2.3 Human Precision

Technical excellence that still feels warm. Nordic clarity with functional warmth.

Test: Does this feel like it was made by a person who cares, or by a system that calculated? Both precision and warmth must be present.

3. Color System

Philosophy

Navy is the brand. Not an accent to decorate with — navy IS Hanlon. Deep, authoritative, Nordic. It serves as both text color and interactive accent. The differentiation between reading text and interactive elements comes from treatment (underlines, fills, weight) not from color contrast.

The palette has three families: warm cream (backgrounds), deep navy (text and brand), and muted slate (the bridge between them). No competing chromatic accents. Maximum restraint.

Light mode first. Dark mode will follow by inverting the scale.

Light Mode Palette

Backgrounds (Warm Cream)

Text (Navy)

Accent (Navy = Brand)

Neutral (Warm scale)

Semantic

Color Usage Rules

1. Navy is both text and accent. Interactive elements are distinguished by treatment (underline, fill, weight change), not by using a different color. This is maximum restraint.
2. The 95/5 rule. A page should be almost entirely cream and navy. The only other colors are semantic (success green, warning amber, error red) — and those appear only in functional contexts.
3. No competing colors. There is no secondary brand color. No highlight color. Navy and cream are the brand.
4. Contrast first. All text must meet WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text). The palette is designed to exceed this at every combination.
5. Warm undertone throughout. Backgrounds carry a warm cream undertone. Never use cool grays or pure whites (#FFFFFF, #F5F5F5). Even the lightest background is #FDFBF7.

Future: Dark Mode

When dark mode is added, the palette inverts:

• background.primary → #1E2B5A (deep navy)
• text.primary → #FAF7F2 (warm cream)
• accent.default → #8B96BE (lighter navy for visibility on dark)
• Font weights shift lighter (body 300) to compensate for luminous screens

4. Typography

Philosophy

Typography is the primary design element. In quiet modernism, type does the work that decoration does in other systems. One typeface family, used across its full range, creates the entire visual hierarchy. The drama comes from the contrast between condensed bold display and open regular body — not from mixing typeface families.

The System: Barlow

Barlow — A slightly rounded, low-contrast, grotesk sans-serif by Jeremy Tribby. Available on Google Fonts as a variable font.

Two widths, one family:

Barlow Condensed — Display and headlines

• Condensed proportions create impact without needing large sizes
• Used at SemiBold (600) and Medium (500) weights
• Negative letter-spacing (-0.01em to -0.02em) for tight, editorial titling
• Used for: h1–h3, hero text, section titles, pull quotes

Barlow — Body text, UI, and everything else

• Regular width for comfortable reading
• Used at Light (300), Regular (400), and Medium (500) weights
• Default letter-spacing (0) for body, slightly open (0.02em–0.08em) for labels and overlines
• Used for: body text, subtitles, navigation, buttons, labels, captions, metadata

Type Hierarchy

Type Scale

Perfect Fourth ratio (1.333) from an 18px base, snapped to 8px baseline grid.

Line Height

Two contexts, both on the 8px grid:

Display line heights decrease as font size increases (large type needs less relative leading). Prose line heights stay consistent for rhythm.

Mixed-Italic Headlines

Headlines can mix upright and italic text within the same line to create emphasis. The italic words carry the same weight (600 SemiBold) as the upright — differentiation comes from style alone, not weight. This is the Quiet Modernism approach: confident emphasis without shouting.

Extend what
*your team* can do

Use italic for the human element, the key differentiator, or the action word. Never italicize more than half the headline.

Weight Scale Summary

The system uses a clear three-tier weight structure:

Typography Rules

1. One typeface family. Barlow (regular and condensed). No other typefaces without updating this document.
2. Hierarchy through width, size, and weight. Condensed for display. Regular for body. SemiBold for impact. Medium for UI. This creates a rich hierarchy within a single family.
3. Prose width: 65ch. Long-form text never exceeds 65 characters per line.
4. No contractions in professional content. "We are" not "We're." See Voice & Tone Profile.
5. Uppercase is earned. Only use uppercase for overline labels and tags — with wide letter-spacing (0.08em+). Never for headings or body text.
6. Mixed italic headlines keep the same weight. When combining upright and italic in headlines, both use 600 SemiBold. Style contrast only, no weight tricks.

5. Layout & Grid

Philosophy

Layout is the architecture of trust. In quiet modernism, the arrangement of elements communicates as much as the elements themselves. Generous space signals confidence. Tight spacing signals density. The grid provides structure; the guidelines provide meaning.

The Grid

• Base unit: 8px
• Columns: Flexible — content dictates column count, not a fixed 12-column grid
• Container max-width: 1440px
• Prose max-width: 65ch (optimal reading width)

Page Gutters

Section Rhythm

Sections alternate between three gap sizes to create breathing rhythm:

Rule: The first section gap (below the hero) should always be large. Interior sections use medium. Related subsections use small.

Compositional Rules

1. The 60/40 principle. Approximately 60% of any viewport should be negative space (background, margins, padding). Content occupies 40%. This ratio creates the quiet modernism feel.

2. Asymmetry over symmetry. Prefer content-heavy left columns with breathing room on the right. An 8/4 or 7/5 split feels more editorial and less corporate than a centered layout.

3. Horizontal integration. Content should feel connected to its environment, not floating in space. Subtle borders, shared background colors, and alignment to the grid create this connection.

4. Card density. Maximum 3 items per row on desktop. 2 on tablet. 1 on mobile. Cards use 32px internal padding and 24px gaps between them.

5. Hero sections breathe. The hero viewport should be unhurried. Minimal text. Maximum space. The scroll indicator invites exploration — the hero does not try to explain everything.

Breakpoints

6. Spacing & Rhythm

The 8px Grid

All spacing derives from an 8px base unit. This creates visual rhythm and alignment across the entire interface.

Spacing Rules

1. Always snap to grid. No arbitrary pixel values. If 8px feels too tight and 16px feels too loose, question the layout rather than introducing 12px.
2. Vertical > horizontal. When in doubt, add more vertical space rather than more horizontal space. Quiet modernism breathes vertically.
3. Inside generous, outside tight. Cards have generous internal padding (32px) but tight gaps between them (24px). This creates cohesive groups with clear internal hierarchy.
4. Section transitions are events. The gap between sections should feel intentional — a pause, not a gap. Use the section rhythm scale consistently.

7. Motion & Animation

Philosophy

Motion in quiet modernism is functional, not decorative. Every animation communicates a state change — hover, press, transition, appear. Nothing moves for the sake of movement.

Timing

Motion Rules

1. Subtle scale. Maximum movement: 2px translation, 2% scale. Nothing jumps, slides dramatically, or bounces.
2. Ease-out for enters, ease-in for exits. Elements arriving in view decelerate. Elements leaving accelerate away.
3. Respect reduced motion. When prefers-reduced-motion: reduce is set, all transitions and animations are disabled. No exceptions.
4. One property at a time. Avoid animating multiple properties simultaneously. A hover lifts OR changes color, rarely both.
5. Page loads are calm. A single, subtle fade-in (400ms, ease-out). No staggered animations, no reveal sequences.

8. Component Patterns

Surfaces

Cards — The primary container for grouped content.

• Background: background.secondary (#F0ECE3)
• Border: 1px, neutral.300 (#E5E0D6)
• Border radius: 8px (default)
• Padding: 32px (24px on mobile)
• Hover: Border shifts to accent.default (#2D3A6E) at 30% opacity, subtle shadow-sm
• Never stack more than one elevation level (no cards inside cards)

Sections — Full-width page divisions.

• Background alternates between background.primary and background.secondary
• No visible borders between sections — spacing creates separation
• Content within sections respects the container max-width

Navy sections — For emphasis (use sparingly).

• Background: accent.default (#2D3A6E) or text.primary (#1E2B5A)
• Text: text.inverted (#FAF7F2)
• Maximum one navy section per page. This is the visual "event" — overuse dilutes impact.

Interactive Elements

Buttons — Three variants, always restrained.

• Primary: Navy (accent.default) background, cream (text.inverted) text. The single most important action.
• Secondary: Transparent with navy border (1.5px), navy text. Supporting actions.
• Ghost: Navy text only, subtle cream hover background. Tertiary actions.
• All variants: Barlow Medium (500), minimum 44px touch target, 8px border radius, letter-spacing 0.02em

Links — Inline text links.

• Color: accent.default (#2D3A6E) — same family as body text but slightly lighter to differentiate
• Underline on hover (animated expansion, 200ms)
• No underline by default in navigation. Subtle underline by default in prose content.
• Visited state: text.secondary (#4A5575)

Navigation — Clean, minimal.

• Barlow Medium (500), letter-spacing 0.02em
• Active page indicated by heavier weight (600) and aria-current="page"
• No background highlights, no underlines, no accent color — weight change is sufficient

Content Patterns

Hero sections

• Generous vertical padding (minimum 192px top/bottom)
• Barlow Condensed SemiBold headline at 4xl (72px), optionally with mixed italic
• Maximum one supporting paragraph in Barlow Light (300) at lg (24px)
• One CTA maximum. Or none — the content can be the CTA.
• Scroll indicator (subtle, animated) invites exploration

Article/prose content

• Max-width: 65ch
• Body text at base (18px) in Barlow Regular, prose line-height (1.33 ratio)
• Headings in Barlow Condensed SemiBold (600) / Medium (500)
• Generous spacing between paragraphs (1.5em margin-bottom)
• Pull quotes in Barlow Condensed at 2xl, indented, lighter weight (400)

9. Imagery & Visual Assets

Photography (when used)

• Natural light, unstaged feel
• Muted color grading that harmonizes with the cream and navy palette
• Desaturated or duotone (navy + cream) processing for brand consistency
• People in working contexts, not posing
• No stock photography aesthetic

Illustrations & Icons

• Line-based, minimal
• Single color (navy) or duotone (navy + cream)
• Consistent stroke weight across all icons
• Functional, not decorative — every icon communicates meaning

Logo

• Clean, geometric mark
• Works at all sizes from favicon to hero
• Designed for both cream and navy backgrounds
• See ~/Projects/hanlon.agency/public/logo-dark.svg

10. Voice & Tone (Reference)

The design language and the verbal language are inseparable. Quiet modernism applies to words as much as visuals.

Full reference: ~/Hanlon/brand/COMMUNICATIONS_GUIDE.md PAI sync: ~/.claude/skills/_HANLON/VoiceAndToneProfile.md

Key principles summarized:

• Professional but human. No contractions, but conversational rhythm.
• Evidence-forward. Show the work. Let results speak.
• Anti-salesy. No formula structures, no hook language, no CTA pressure.
• Teaching over selling. LinkedIn/newsletters build trust through insight, not promotion.

Appendix A: Token Reference

All design tokens are defined in nautes.json (v3.0.0). The Nautes CLI (nautes.ts) generates:

• CSS custom properties (nautes.css)
• TypeScript exports (nautes.ts)
• Tailwind config extension (nautes-tailwind.js)
• PAI brand reference (nautes-brand.json)

Run bun ~/Hanlon/design/nautes/nautes.ts build to regenerate from tokens.

Appendix B: Accessibility Requirements

• WCAG AA minimum for all text contrast ratios (4.5:1 normal, 3:1 large)
• 44px minimum touch targets on all interactive elements
• Focus visible ring on all interactive elements (2px, navy, offset cream)
• Skip-to-content link on every page
• Semantic HTML — one h1 per page, logical heading hierarchy
• Reduced motion respected globally via prefers-reduced-motion media query
• Alt text on all meaningful images. Decorative images get aria-hidden="true"

Appendix C: Design Decision Log

This document is the source of truth for Hanlon's design language. Tokens live in nautes.json. Voice lives in the Communications Guide. This document connects them.