Nautes Design System — Usage Guide

Version: 0.3.0 Last Updated: 2026-02-05 Direction: LIGHT MODE FIRST — NAVY + WARM CREAM Source of Truth: tokens/nautes.json & DESIGN-LANGUAGE.md

Quick Reference

Design Philosophy

One sentence: Authority through restraint — quiet modernism where navy is the brand, warm cream is the canvas, and negative space holds equal weight to content.

Key principles:

• Earned Presence — Every element must justify its existence. If it does not serve the reader, it does not belong.
• Quiet Authority — Confidence expressed through restraint, not volume. Evidence over claims. Show, do not tell.
• Human Precision — Technical excellence that still feels warm. Nordic clarity with functional warmth.

Colors

Background Scale (Warm Cream)

CSS Variables:

var(--background)
var(--background-secondary)
var(--background-tertiary)
var(--background-elevated)

Tailwind Classes:

bg-background
bg-secondary
bg-muted

Text Scale (Navy)

CSS Variables:

var(--foreground)
var(--foreground-secondary)
var(--foreground-muted)
var(--foreground-inverted)

Tailwind Classes:

text-foreground
text-muted-foreground

Accent (Navy = Brand)

CSS Variables:

var(--primary)
var(--primary-hover)
var(--primary-active)
var(--accent)
var(--accent-muted)

Tailwind Classes:

bg-primary text-primary-foreground
bg-primary-hover
bg-accent text-accent-foreground

Key rule: Navy is both text and accent. Interactive elements are distinguished by treatment (underline, fill, weight change), not by using a different color.

Neutral Scale (Warm Undertones)

Tailwind Classes:

bg-neutral-100 (page background)
bg-neutral-200 (card surfaces)
text-neutral-900 (primary text)
border-neutral-300 (dividers)

Semantic Colors

The 95/5 rule: A page should be almost entirely cream and navy. Semantic colors appear only in functional contexts (form validation, status indicators).

Typography

Font Philosophy

Typography is the primary design element. In quiet modernism, type does the work that decoration does in other systems. One typeface family (Barlow), 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.

Font Families

Font Characteristics:

• Barlow Condensed (Variable, 100-900, italic): Geometric, low-contrast grotesk. Condensed proportions create impact without needing large sizes. Used at SemiBold (600) and Medium (500).
• Barlow (Variable, 100-900, italic): Same family in regular width. Warm, open letterforms for comfortable reading. Used at Light (300), Regular (400), and Medium (500).

Tailwind Classes:

font-display   → Barlow Condensed (condensed sans-serif)
font-body      → Barlow (regular sans-serif)
font-mono      → System monospace

Google Fonts Import:

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100..900;1,100..900&family=Barlow:ital,wght@0,100..900;1,100..900&display=swap');

Type Scale

System: Perfect Fourth (1.333 ratio) from 18px base, grid-snapped for 8px baseline alignment.

Line Height Contexts

Display (default): Generous whitespace for headlines, hero text, marketing, and UI. Quiet modernism aesthetic. Ratio decreases as font size increases.

Prose: Tighter line heights (1.33 ratio) optimized for focused reading. Use for articles, essays, and long-form content.

<!-- Display context (default) -->
<p class="text-base">Marketing copy with generous line height.</p>

<!-- Prose context (articles) -->
<p class="text-base leading-prose-base">Article text with tighter line height.</p>
<p class="text-lg leading-prose-lg">Large article text.</p>

Tailwind utilities for prose:

• leading-prose-base → 1.5rem (24px) for 18px text
• leading-prose-lg → 2rem (32px) for 24px text

Font Weights

Weights are fixed (not theme-aware). Maximum weight is 600 — no bold (700) in the system.

CSS Custom Properties:

var(--font-weight-light)     /* 300 */
var(--font-weight-regular)   /* 400 */
var(--font-weight-medium)    /* 500 */
var(--font-weight-semibold)  /* 600 */

Letter Spacing

Key insight: Barlow Condensed display uses negative letter-spacing for tight, editorial titling. Barlow body uses neutral or slightly positive spacing. Labels and overlines use wide spacing.

Type Hierarchy

Full hierarchy combining family, weight, spacing, and size:

Heading Classes

/* Barlow Condensed display + negative tracking */
h1: font-display text-3xl md:text-4xl font-semibold tracking-tighter  /* 56px → 72px */
h2: font-display text-2xl md:text-3xl font-semibold tracking-tight    /* 40px → 56px */
h3: font-display text-xl md:text-2xl font-medium tracking-tight       /* 32px → 40px */

/* Barlow regular + neutral tracking */
h4: font-body text-lg md:text-xl font-medium tracking-normal          /* 24px → 32px */
h5: font-body text-base md:text-lg font-medium tracking-normal        /* 18px → 24px */
h6: font-body text-sm md:text-base font-medium tracking-normal        /* 14px → 18px */

Mixed-Italic Headlines

Headlines can mix upright and italic text within the same line to create emphasis. The italic words keep the same weight (600 SemiBold) — differentiation comes from style alone.

<h1 class="font-display text-4xl font-semibold tracking-tighter">
  Extend what <em class="italic">your team</em> can do
</h1>

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

Spacing

Base Unit: 8px

All spacing follows an 8px grid for visual consistency.

Layout Spacing

Border Radius

Shadows

Shadows are subtle — elevation comes primarily through spacing and borders, not heavy shadows.

Animation

Duration

Easing

Common Transitions

/* Standard hover transition */
transition: all 200ms ease;

/* Button hover */
.btn-interactive:hover {
  transform: translateY(-1px);
}

/* Card hover */
.card-interactive:hover {
  transform: translateY(-2px);
}

Motion rules: Maximum 2px translation, 2% scale. Respect prefers-reduced-motion: reduce. One property at a time where possible.

Breakpoints

Container

• Max width: 1440px
• Prose max width: 65ch (optimal reading)
• Center aligned with responsive gutters

Component Patterns

Cards

<div class="bg-secondary border border-neutral-300 rounded-lg p-6 md:p-8
            hover:border-primary/30 hover:shadow-sm transition-all">
  <span class="font-body text-xs uppercase tracking-widest font-medium text-muted-foreground">
    Category
  </span>
  <h3 class="font-display text-xl font-medium tracking-tight text-foreground">
    Card Title
  </h3>
  <p class="font-body text-base text-foreground-secondary">
    Description text goes here.
  </p>
  <a class="text-primary font-medium tracking-wider hover:underline transition-colors">
    View Details
    <svg class="inline-block w-4 h-4 ml-1">...</svg>
  </a>
</div>

Buttons

<!-- Primary (navy background, cream text) -->
<button class="bg-primary text-primary-foreground hover:bg-primary-hover
               active:bg-primary-active px-4 py-2 rounded font-medium
               tracking-wider transition-all btn-interactive">
  Button Text
</button>

<!-- Secondary (navy border, navy text) -->
<button class="bg-transparent text-primary border-[1.5px] border-primary
               hover:bg-primary hover:text-primary-foreground
               px-4 py-2 rounded font-medium tracking-wider
               transition-all btn-interactive">
  Button Text
</button>

<!-- Ghost (navy text, cream hover background) -->
<button class="bg-transparent text-primary hover:bg-muted
               px-4 py-2 rounded font-medium tracking-wider
               transition-all">
  Button Text
</button>

Links

<!-- Navigation link -->
<a class="text-primary font-medium tracking-wider hover:underline transition-colors">
  Link Text
</a>

<!-- Prose link (underline by default) -->
<a class="text-primary underline decoration-primary/30 hover:decoration-primary transition-colors">
  Link Text
</a>

Future: Dark Mode

Note: Dark mode is deferred. Light mode (warm cream + navy) is the primary brand identity. Ship one mode well first.

When dark mode is added, the palette will invert:

• 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

Design principle: Dark mode should maintain the Quiet Modernism identity. Navy backgrounds with warm cream text, not arbitrary dark grays.

Status: Dark mode token values TBD. Implementation follows light mode launch.

Usage Guidelines

DO

• Use semantic tokens (bg-background, text-foreground) over raw colors
• Maintain minimum 4.5:1 contrast ratio for text (all cream/navy combinations exceed this)
• Use the 8px grid for all spacing decisions
• Apply subtle hover states (1-2px lift, border opacity change)
• Let negative space breathe — aim for 60% negative space per viewport
• Use navy for both text and interactive elements, differentiating by treatment
• Keep to warm cream backgrounds — never cool grays or pure white

DON'T

• Use pure white (#FFFFFF) or cool grays (#F5F5F5) for backgrounds
• Use pure black (#000000) for text — always use navy
• Add competing accent colors — navy and cream are the entire palette
• Mix tokens from different semantic contexts
• Add unnecessary borders or decorative elements
• Use flashy animations or excessive motion (max 2px, max 200ms for most transitions)
• Crowd elements without adequate spacing
• Use font-bold (700) — maximum weight is semibold (600)

File Locations

Nautes Design System (Source)

hanlon.agency Website (Synced)

PAI Art Integration

Workflow

# After editing nautes.json, run:
bun ~/Hanlon/design/nautes/nautes.ts all

Version History