Skip to main content
Garrett PolifkaPattern ArchitectRésumé

Pattern Architect · Design system 1.0

Editorial systems cartography.

A production-backed field guide for making complex systems visible. It pairs technical precision with a readable, archival visual language that still feels current.

Source → productionHow visual intent becomes reusable interface
  1. DirectionVisual source
  2. ContractSemantic tokens
  3. SystemCore primitives
  4. OutcomePortfolio pages
Solid = direct dependency · Brass = governing decision

01 · Foundations

Contrast carries the narrative.

Blueprint and Parchment form confident fields. Brass marks decisions that need attention rather than filling the composition. Every text pairing below is calculated from the canonical token source.

Blueprint

surface.dark · #031D30

Primary dark field for orientation, investigation, and system maps.

Contrast result: 15.11:1

Parchment

surface.light · #F3ECDD

Primary light field for explanation, evidence, and reflection.

Contrast result: 13.60:1

Brass signal

action.primaryBackground · #D4A64C

Actions, active nodes, decisions, rules, and evidence cues only.

Contrast result: 7.13:1

Brass text

text.accentOnLight · #8B6425

Small accent text on Parchment; never substitute Brass 500.

Contrast result: 4.52:1

Typography

Serif authority. Sans utility. Mono evidence.

Display lines stay short. Reading copy holds to a 68ch measure with generous leading. Uppercase is reserved for eyebrows and tiny map annotation.

Display XL · Cormorant Garamond · clamp(2.75rem, 6vw, 4.5rem) / 0.98 · One hero statement per pageMake the system visible.
Display L · Cormorant Garamond · clamp(2.375rem, 4.5vw, 3.25rem) / 1.02 · Major section thesisMake the system visible.
Display M · Cormorant Garamond · clamp(1.875rem, 3.4vw, 2.375rem) / 1.08 · Section and case titlesMake the system visible.
Heading S · Cormorant Garamond · clamp(1.5rem, 2.4vw, 1.625rem) / 1.15 · Component and step headingsMake the system visible.
Body L · Source Sans 3 · clamp(1.125rem, 1.6vw, 1.25rem) / 1.55 · Introductory editorial copyMake the system visible.
Body · Source Sans 3 · 1rem / 1.55 · Standard reading copy at a 68ch maximumMake the system visible.
Evidence · IBM Plex Mono · 0.75rem / 1.45 · Dates, provenance, and certaintyMake the system visible.

02 · Layout primitives

One grid. Intentional asymmetry.

Container, Section, ResponsiveGrid, and Stack establish the same 4 / 8 / 12-column system production pages will use. At smaller widths, reading order outranks visual resemblance.

space-1 · 0.25rem
space-2 · 0.5rem
space-3 · 0.75rem
space-4 · 1rem
space-6 · 1.5rem
space-8 · 2rem
space-12 · 3rem
space-16 · 4rem
space-20 · 5rem
space-24 · 6rem
space-32 · 8rem

03 · Surface grammar

Fields, rules, and restrained depth.

Separation comes from full-width fields, spacing, and hairlines—not a collection of floating cards.

Parchment · Explanation

The human reading layer.

Warm paper supports long-form content, evidence, and reflective transitions without defaulting to pure white.

Blueprint · Investigation

The system mapping layer.

Near-black navy supports orientation, diagrams, and dense technical annotation while Chalk remains the reading color.

Hairline · structural
Radius · square / soft
Shadow · rare / shallow
Signal · selected only

04 · Primitives and states

Conventional controls, visibly complete.

Buttons and links retain recognizable behavior. The state strip makes the contract reviewable; keyboard focus remains the real acceptance check.

Default
Hover
Focus visible
Active
Disabled
Editorial text linkUtility icons reinforce meaning; they do not decorate circuitry.

05 · Diagram language

Every mark has a job.

Line and node variations never exist only for visual texture. DiagramFrame requires a title, interpretation, legend when needed, and an adjacent text equivalent.

Production relationship modelHow semantic primitives preserve visual intent
The visual mock and written design language govern the tokens, which govern the primitives used across portfolio pages. Evidence supports those pages and informs future system changes.
  • Solid · direct dependency
  • Dotted · supporting influence
  • Selected · decisive relationship
  • Supporting · related element
  • Hub · governing boundary

06 · Evidence statuses

Certainty stays close to the claim.

Status is carried by explicit language, structure, and icon treatment in addition to color.

07 · Operating rules

Fidelity includes behavior.

Responsive structure, optional motion, asset provenance, and accessibility are part of the visual system—not cleanup after the composition is complete.

Responsive behavior

Desktop preserves asymmetry. Tablet reduces annotation density. Mobile stacks in reading order and converts maps to staged vertical structures. Targets remain at least 44px.

Motion

Controls resolve quickly; local transitions reveal relationships in order. Reduced-motion mode removes travel and presents final states without staged animation.

Asset usage

Use supplied or publication-cleared assets only. The visual mock is a reference, not a production page image. Never reproduce generated microcopy or embed essential copy in a raster diagram.

Accessibility

Preserve semantic headings, visible focus, text equivalents, color-independent meaning, 200% zoom, reduced motion, and WCAG 2.2 AA contrast for text, controls, and meaningful graphics.

Explicit anti-patterns

The system is also defined by what it refuses.

  • Generic SaaS cards floating on gray backgrounds
  • Large pills, bubbly radii, gradients, glass, or ornamental shadows
  • Brass body text on Parchment or Brass used as decoration everywhere
  • Decorative nodes, circuitry, or constellations without semantic meaning
  • Desktop diagrams shrunk until labels become unreadable
  • Claims, certainty, or selected states communicated by color alone