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, a purple case-study eyebrow, and a -45 degree Atomize brand gradient blending Pink 600, Purple 700, and Blue 500.
#101318#5F6B7A#2563EB#DB2777#7E22CE--case-eyebrow-color#3B82F6#8FB1FFrgba(143,177,255,.10)--brand-gradient--wemo-hero-gradient#FFFFFF#F1F4F9#E7EDF8#0B0F16#141A24#1E2633#DCE3EEFoundations
Typography
The type system uses Google Sans Flex with a strict four-weight range: 400 for body text, 500 for medium UI emphasis, 600 for structure and headings, and 700 for hero or high-emphasis moments only.
Hero / 3.6rem / 600
Hero text style
Section / 3rem / 600
Section text style
Card title / 1.25rem / 600
Card title style
Body / 1rem / 400
Body text style for standard paragraphs.
UI emphasis / 500
Used for buttons, links, and small interface emphasis.
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
Breakpoints
The site uses four core viewport labels. Use the range first, then common viewport widths as a quick reference.
Common widths: 1280, 1440, 1512, 1728
Common widths: 1024, 1112, 1180
Common widths: 768, 820, 834
Common widths: 320, 375, 390, 430
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
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
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.
Case study carousel
Featured work cards use large motion-rich foreground imagery on desktop, responsive tablet art positioning that keeps imagery clear of title text, and compact 260px mobile cards with static foreground art to the left of the heading.
Longform case study
Hiring-manager narrative page using the homepage visual language: case study pager navigation, compact metadata chips, a purple case-study eyebrow above a homepage-scale hero title, canvas-based role and contributor context, direct transparent artifact imagery on a case-specific Atomize gradient surface, at-a-glance summary cards, scroll-linked product composition heroes with water imagery, matched aligned product screenshots, darker text protection, and scaled bottom-left text, full-width three-column transparent foundation cards with item icons, centered foundation goal cards, specs carousels with lightbox previews, split image-only component and property cards on darker artifact panels, process sections, outcome cards, matched local assets, and scroll reveal motion.
Case study evidence cards
Summary and takeaway cards use the same surface, border, radius, type scale, and reveal behavior, while results sections can use an image-backed inverse surface with simpler icon-led cards when the page needs stronger visual closure.
About band
Photo hero with a delayed scroll-linked rounded-container-to-full-bleed entrance, dark text-side overlay, Info 500 title rule, soft-white skill labels, and translucent skill chips pinned near the bottom of the image, followed by the biography area, current role block, and white career highlight cards with compact purple eyebrow rows pairing a small icon with a short theme label.