STYLE GUIDE AND DOCUMENTATION

About CLOSE ×

Portfolio Style Guide and Documentation

A unified visual language grounded in architecture, drafting logic, newsroom hierarchy, and controlled electric atmosphere.

SimpleArchitecturalDraftingModernJournalismElectricPlayfulSystematic

Style Direction

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 an edge-to-edge modern editorial shell.

Color stays environmental rather than interactive. Structure, hierarchy, and motion do most of the work. Clean white reading surfaces sit inside the grid while cyan-lime atmosphere energizes the shell, left rails, and selected illustration moments. Interaction states stay monochrome.

Core Principles

  • Structure Before Decoration

    Use the visible grid, full-height vertical rules, and crisp horizontal dividers first. Visual hierarchy should come from structure, typography, and cadence before any atmospheric treatment.

  • Editorial Clarity

    Treat every page like a front page spread: strong headline, supporting deck, clean white reading surfaces, and grouped supporting modules.

  • Architectural Rhythm

    Repeat spacing intervals, cross-page ruled lines, and visible module boundaries to create a blueprint-like rhythm across all pages.

  • Brutalist Restraint

    Keep contrasts sharp, boxes honest, and dividers visible. Avoid ornamental shadow or frosting unless it improves hierarchy or reading flow.

  • Electric Atmosphere

    Use restrained cyan-lime atmosphere as environmental energy, with the strongest color expression in ambient shell layers, left rails, and selected illustration zones rather than in reading surfaces.

Color Tokens

  • Canvas #ffffff
  • Shell Near-white shell with subtle transparency
  • Paper Flat white reading surface
  • Ink #121212
  • Line Soft charcoal rule
  • Ambient Cyan #00FFFF diffused into the shell
  • Ambient Lime #CCFF00 softened as a secondary electric field

Typography

  • Primary Font

    Helvetica Neue, Helvetica, Arial, sans-serif

  • Display Intent

    Upper/lower editorial headlines

  • Tracking

    Slightly expanded letter-spacing

  • Tone

    Newsroom direct, strategic, factual

Layout System

  • Frame

    Edge-to-edge editorial grid shell

  • Header

    Flat ruled top rail with home icon + page title + utility action

  • Columns

    Left rail for navigation/timeline, right for primary narrative

  • Rules

    Full-bleed vertical and horizontal drafting lines that define the grid

Motion Rules

  • Motion Level

    Low and intentional

  • Allowed

    Slow marquee, subtle rotation on utility illustrations

  • Avoid

    Bouncy micro-interactions and decorative motion noise

Component Guidance

Top Header

Flat top rail, fixed structure, shared across home, portfolio, leadership, blog, and design-system pages.

List Rows

Two-column “What I do...” rows with clear role + descriptor hierarchy.

Side Rails

Project and leadership rails can carry the strongest cyan-lime atmosphere while keeping cards and active states monochrome.

Content Panels

Flat white or flat dark blocks with ruled boundaries, generous white space, and no interior gradient wash.

Action States

Buttons, active rows, TLDR tabs, and utility controls stay monochrome, using inversion and line weight instead of accent color.

Footer Nav

Shared footer rails run full width and align to the same drafting grid used across portfolio, blog, and documentation pages.

Ambient Color Rules

  • Use For Atmosphere

    Apply the cyan-lime pairing to the ambient shell, left-rail zones, and select diagram moments so the page feels energized without tinting the reading surface.

  • Keep Surfaces Neutral

    Keep long-form reading surfaces, large content panels, and utility controls flat white in light mode and flat dark in dark mode.

  • Neutral Interaction System

    Top-level navigation rows can invert to ink on hover or focus. Side rails, gallery cards, and deeper browsing surfaces use lighter monochrome hovers with visible rule accents.

  • Drafting Line Discipline

    Let horizontal rules meet the vertical rails so the page reads like one continuous drafting grid rather than separate floating cards.

  • Motion With Restraint

    The ambient layer may drift slowly, but content motion should remain sparse and purposeful. Visibility should come from composition and contrast, not speed.

  • Dark Mode Behavior

    Keep dark mode flatter and more restrained than light mode. White text and ruled lines should dominate while cyan-lime atmosphere stays dimmer and more selective.

AI Prep Additions

Capability Search Index

Homepage search uses a structured recruiter capability index so both users and machines can map skills to proof points.

Structured Metadata

Blog pages include canonical, Open Graph, Twitter, and JSON-LD schema metadata for clearer indexing and verification.

Glossary Data

/glossary.json provides machine-readable term definitions for UX Intelligence, AI systems, and platform concepts.

Single Source Patterns

Shared content/data files power navigation, search summaries, and portfolio detail pages so human and machine layers stay aligned.

Animation Styles

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.

Illustration Styles

Monoline Technical Drawing

Use clean stroked geometry, visible connectors, and minimal fills. Visual language should feel drafted, not decorative.

Electric Environmental Color

Keep structural linework neutral, then use cyan-lime selectively in ambient fields, signal paths, glow points, or emphasized motion cues.

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.

Animation Examples

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.

Example Catalog

Expandable TLDR Tab

Use a monochrome 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

Homepage rows can invert to ink on hover, while deeper rails and content cards stay lighter and more editorial.

AI Discovery Surface

Machine-readable helpers such as search indexes, llms files, canonical links, and structured metadata should exist beneath the same human-facing editorial shell.

Last updated May 17, 2026

Created with love by Katie Sebkhi

Site guides