Lead with useful content
Components support the work instead of decorating around it.
Design System
A wiki for the visual foundations, reusable components, and page patterns that shape this site. It is organized like a lightweight product system: tokens first, then components, then composed sections.
Overview
Built for crisp product storytelling.
The system keeps the portfolio quiet, structured, and scan-friendly while still giving interaction details enough polish to feel designed. New pages and components should reuse these global tokens, components, and patterns before introducing anything new.
Keep interaction tactile
Buttons and cards use restrained depth cues, not heavy shadow.
Document what repeats
Colors, spacing, cards, media rows, chips, and overlays stay reusable.
Foundations
Color
Core tokens balance a white product canvas, a cool gray documentation surface, and a -45 degree Atomize brand gradient blending Pink 600, Purple 700, and Blue 500.
#101318#5F6B7A#2563EB#DB2777#7E22CE#3B82F6#8FB1FFrgba(143,177,255,.10)--brand-gradient#FFFFFF#F1F4F9#E7EDF8#0B0F16#141A24#1E2633#DCE3EEFoundations
Typography
The type system uses Google Sans Flex with reduced heavy weights, tight heading rhythm, and calmer body copy for dense product content.
Hero / 3.6rem
Hero text style
Section / 3rem
Section text style
Card title / 1.25rem
Card title style
Body / 1rem
Body text style for standard paragraphs.
Foundations
Spacing
Spacing is intentionally modest inside components and more generous between sections, keeping the interface scannable without feeling loose.
Micro gaps
Grid gaps
Component padding
Compact sections
Major sections
Foundations
Radius & elevation
The system keeps cards, controls, media frames, and panels at a 12px radius. Buttons and compact chips keep their tighter 8px radius so smaller controls stay crisp.
Radius
12px for cards, controls, media frames, and panels. Buttons and compact chips stay at 8px.
Elevation
Soft blue-gray shadows only where the element needs separation.
Foundations
Motion
Scroll reveal uses a subtle fade-up and applies globally to reusable .reveal elements, including longform case study sections. Interactive controls use a short lift with a depth plate, while default cards use a restrained scale and elevation change.
Fade-up reveal
Content enters with a small upward move, opacity fade, and parent-level stagger.
Offset18px vertical
Duration620ms
Easingease
Stagger55ms steps
Begins immediately.
Follows one beat later.
Completes the group.
Foundations
Iconography
UI icons use Hugeicons line symbols embedded as an inline SVG sprite on each page, then referenced with local fragment IDs. This keeps icons visible from local files and hosted pages.
Components
Buttons
Buttons hug their text by default. Single-button mobile actions can span full width when the layout needs a larger tap target. Dark mode primary buttons use Info 500 for accessible contrast, while secondary buttons keep a solid surface face with softer blue border and hover states.
Components
Navigation
The header is fixed, transparent by default, compact on scroll, and inverts when it crosses a dark section without adding a baseline shadow in its default state. Once scrolling begins, the compact header restores the baseline for separation. Case Studies is a non-navigating dropdown trigger with direct links, thumbnails, company labels, and generous 20px menu padding; desktop dropdowns open on hover or focus, include a forgiving hover bridge for pointer movement, and auto-dismiss once the cursor moves more than 500px away. Dark-mode nav hover states use a quiet blue-tinted surface with blue text so the active target stays visible without becoming too bright. Icon actions use filled symbols sized to match the settings control.
Darren Beason
Components
Breadcrumbs
Case study pages use a compact breadcrumb about 36px below the fixed nav to orient hiring managers without adding another heavy navigation block. Links stay quiet by default, use the same subtle hover container as the broader navigation system, and the current page is shown as plain text.
Components
Settings menu
The site defaults to light mode, persists the selected mode, and can inherit the browser or OS color scheme when System is selected. Internal page links carry the current mode as a handoff for local file previews, so the preference survives navigation even when the browser isolates local storage per HTML file. Desktop navigation uses a settings icon dropdown that opens on hover or focus, auto-dismisses when the cursor moves far away, and contains the Design System link plus Light, Dark, and System choices under a MODE eyebrow, with a checkmark for the active preference. On mobile, these same options sit directly inside the opened mobile menu.
Components
Brand sparkle
The DB logo triggers a 0.95s continuous swirling pixel burst on hover or focus, using blue, purple, and light green dots that radiate from the logo mark.
Darren Beason
Particle dots follow curved in-and-out paths in a roughly 100px radius, then fade and remove themselves from the DOM.
Components
Back to top
The persistent page utility stays fixed in the lower-right viewport and appears only after a user scrolls beyond the initial viewport height.
Visibility rule
Hidden by default, keyboard-disabled while hidden, then fades up once the user has scrolled more than one viewport.
Components
Case cards
Featured case cards live in a full-bleed horizontal carousel so adjacent work can peek outside the page margins. Cards are narrow by default and expand horizontally on hover or focus. Each card uses a vibrant solid Atomize color surface, a fixed-size masked background image layer that sits mostly cropped off-canvas until hover, a left fade that blends the background into the solid surface, foreground product artwork tuned per card with high-resolution assets, custom transform origins, container-free icons, and a fixed-width delayed description reveal where the icon and text slide in from the right with a slower fade-in and fade out quickly on release. PriceSpider is the exception with two stacked foreground images. Cards avoid borders and shadows so the carousel sits cleanly on the page background. Pagination uses a light-to-medium gray active dot with inactive dots one gray step softer.
BethesdaGame Launcher Platform
Supporting descriptions stay tucked away until hover or focus, then slide in from the right after a short delay and fade out quickly on release.
Components
Quick case cards
Small case links are compact, led by Hugeicons symbols, and use a purple face lift where the visible surface moves while the hit target stays stable to avoid hover flicker.
Components
Prototype rows
Prototype entries use muted autoplay loops with no visible controls in a stacked showcase layout. Media wrappers must hug the source video edge-to-edge: use the native video ratio, a thin border stroke, and a radius mask, with no padded frame or visible whitespace around custom video sizes. Desktop rows pair that media with a vertically centered text block separated by full-viewport divider lines that sit behind the media. Alternating rows can reverse the media/text order. Mobile keeps each entry stacked with the video first and text below.
Bethesda Mobile Companion
A compact example of the media-plus-copy row used in the design showcase.
Components
Concept grid
Image thumbnails sit inside the Design Showcase section as a secondary sub-pattern, introduced by a centered eyebrow with a large 208px separation from the prototype rows. The desktop pattern uses borderless square crops in both light and dark mode, custom image positioning, and the standard hand cursor to signal that each item opens the larger image overlay.
Concept Examples
Components
Chips
Chips collect skill tags and concise capability labels in dense groups. They use a light/medium gray fill without borders, keep an 8px compact radius, and pair each label with a unique Hugeicons symbol.
Human Centered Design
Design Systems
UX Writing
Prototyping
Stakeholder Collaboration
Components
Image overlay
The image overlay uses a blurred dark backdrop, a white content panel without caption text, a viewport-level translucent close control that darkens on hover, Escape close, and focus return.
Patterns
Page patterns
Full-page structure is assembled from reusable section patterns that support portfolio storytelling and case study depth.
Homepage hero
Headline and circular portrait balanced in a two-column layout.
Showcase band
Subtle gray surface for grouped prototypes followed by a centered-eyebrow concept grid.
Longform case study
Hiring-manager narrative page using the homepage visual language: breadcrumb orientation, optional stacked hero intro for wider title/copy treatment, at-a-glance summary cards, role/context framing, takeaway cards, process sections, artifact imagery, outcome cards, matched local assets, and scroll reveal motion.
Case study evidence cards
Summary, takeaway, and outcome cards use the same surface, border, radius, type scale, and reveal behavior so deeper case study pages still feel connected to the homepage system.
About band
Light gray section for biography, a divider-framed current role area with the compact dark-gray West Monroe logo, skill chips, and white career highlight cards with compact purple eyebrow rows pairing a small icon with a short theme label.