DRKM Blueprint System

Active

Design Direction

Visual language and design philosophy for the blueprint system

Active·Owner: greg·2026-04-04

Design Philosophy: Documentation First

The DRKM Blueprint System follows a documentation-first design aesthetic. The goal is clarity over decoration, hierarchy over personality, and scannability over visual delight. This is not a marketing site. It's a reference tool.

Stone Palette

The primary color system uses a stone palette — grays ranging from near-black to near-white, with minimal accent colors:

  • Text: Near-black (#0A0A0A) for primary content
  • Secondary: Medium gray (#6B7280) for secondary information
  • Backgrounds: Light gray (#FAFAFA) for page backgrounds, white (#FFFFFF) for content areas
  • Borders: Very light gray (#E5E7EB) for visual separation
  • Accents: Deep blue (#1F2937) or slate (#475569) for interactive elements and emphasis

This palette works in light theme exclusively. No dark mode, no light/dark toggle, no complexity.

Typography-Driven Hierarchy

Typography carries all the hierarchy:

  • Sans-serif primary (Inter or system fonts) for body and navigation
  • Mono (Courier New or system monospace) for code and inline code blocks
  • Size-based hierarchy: Headlines at 28px down to 14px body text
  • Weight-based emphasis: Regular (400) for body, Medium (500) for interactive, Bold (700) for headlines
  • Line-height: 1.5 for body, 1.2 for headlines, 1.6 for prose
  • Letter-spacing: Minimal except at very large sizes

Visual Principles

  • Borders over shadows: Use subtle 1px borders instead of drop shadows for depth
  • No gradients: Solid colors only, no fades or blends
  • Generous whitespace: Breathing room around content, not cramped
  • Consistent spacing: 4px grid, 8px base unit for margins and padding
  • Monochrome emphasis: Use size, weight, and position before color

Inspired By

The design direction draws from proven documentation systems:

  • MDN (Mozilla Docs): Clean information hierarchy, prose-first approach
  • Vercel Documentation: Modern sans-serif, clear sectioning, fast scanning
  • Carbon Design System: IBM's systematic approach, accessibility at core
  • Apple Developer: Elegant simplicity, expert typography, whitespace

Component Style

Components are minimal, functional, and transparent:

  • Buttons are text with subtle backgrounds
  • Cards have borders, not shadows
  • Forms use clear labeling and feedback
  • Tables are simple grids without excess decoration
  • Code blocks have syntax highlighting only

Consistency Rules

Every page maintains:

  • Consistent margin structure (40px top/bottom)
  • Consistent typography sizes
  • Consistent color usage
  • Consistent component spacing
  • Consistent heading hierarchy

This consistency is enforced through CSS and component design, not relied upon for manual application.

Accessibility by Default

  • All text has minimum 4.5:1 contrast ratio
  • Interactive elements are clearly distinguished
  • Focus states are visible on all elements
  • Keyboard navigation is primary, not secondary
  • Screen readers work perfectly
  • No flashing or auto-playing elements