STYLE GUIDE
A unified visual language grounded in architecture, drafting logic, and newsroom hierarchy.
The site should feel like a strategic publication: crisp lines, confident typography, and deliberate spacing. It borrows from newspaper layout systems and architectural drafting, then translates that into a modern brutalist UI shell.
Color is intentionally limited. Content, structure, and hierarchy do the work. Images and GIFs are the only places where color should break through.
Structure Before Decoration
Use grids, ruled lines, and clear section boundaries first. Visual hierarchy comes from layout and type scale, not heavy ornament.
Editorial Clarity
Treat every page like a front page spread: strong headline, supporting deck, and grouped supporting modules.
Architectural Rhythm
Repeat spacing intervals and border rules to create a blueprint-like rhythm across all pages.
Brutalist Restraint
Sharp contrasts, honest boxes, visible dividers, and no decorative shadows unless they serve reading flow.
#d9d7d3 #dfddda #101114 #acaba8 #2e2e2e #f3efe6 Helvetica Neue, Helvetica, Arial, sans-serif
Upper/lower editorial headlines
Slightly expanded letter-spacing
Newsroom direct, strategic, factual
Rounded 24px shell with 1px perimeter
Unified top rail with home icon + page title + close/date
Left rail for navigation/timeline, right for primary narrative
1px horizontal dividers to separate modules
Low and intentional
Slow marquee, subtle rotation on utility illustrations
Bouncy micro-interactions and decorative motion noise
Top Header
Rounded top rail, fixed structure, shared across home, portfolio, leadership, and blog.
List Rows
Two-column “What I do...” rows with clear role + descriptor hierarchy.
Side Rails
Project or timeline rails with uniform card treatment and dark hover inversion.
Content Panels
Flat off-white blocks with ruled boundaries and generous white space.
Footer Nav
Simple utility links in one ruled strip plus compact style-guide link beneath.
Chaos to Order
Dots start fragmented and converge into a single-file system through a funnel. Used to visualize signal normalization and convergence into strategic clarity.
Force Multiplier
Concentric rings expand from a central source to represent scalable influence and compounding UX intelligence.
Team Organism
Connected node mesh moves as one breathing body. Nodes drift apart and regroup while preserving structural links.
Construction Assembly
Distributed nodes assemble into a single frame shape. Represents components coming together into one product system.
Monoline Technical Drawing
Use clean stroked geometry, visible connectors, and minimal fills. Visual language should feel drafted, not decorative.
Monochrome Utility
Illustrations remain in charcoal and off-white. Only photography/GIF media may retain color.
System Metaphors
Every illustration should map to a product concept: convergence, scale, teamwork, assembly, anticipation.
Low-Noise Motion
Animation should clarify meaning. Avoid ornamental loops that do not support the story of the page.
Start with the user win, then reveal supporting context only when asked.
Featured Pattern
Dense context becomes readable when hierarchy is strict and spacing is predictable.
Pulse Rings
Represents scalable influence spreading from a single core decision.
Signal Path
Visualizes noisy input converging into directional output.
Assembly Grid
Nodes align into an ordered blueprint to communicate system formation.
Expandable TLDR Tab
Use the black summary tab for compact context, and reveal strategic detail on demand.
Editorial Info Card
Cards keep hierarchy strict: kicker, headline, then one precise supporting sentence.
Dual Rail Row
Mirror home-page rows with a left action label and right operational descriptor.