Mike Williams Design

Overview

Mike Williams' design portfolio embodies a 'Playful Minimalism' aesthetic—a design movement that balances clean, geometric layouts with vibrant, unexpected color accents. The brand serves digital designers and product teams seeking systems-thinking expertise, evoking confidence, approachability, and creative precision. The interface uses a light, neutral canvas (rgb(244, 243, 241) backgrounds) punctuated by a bold primary blue (rgb(14, 88, 228)) on CTAs, complemented by secondary accents in golden yellow (rgb(255, 175, 19)), cyan (rgb(0, 217, 163)), and coral-red (rgb(255, 61, 0)). These colors appear as decorative geometric shapes (circles, toggles, arcs) scattered throughout the hero, creating visual rhythm without clutter.

The brand voice is direct, confident, and human-centered. Vocabulary emphasizes systems, thinking, and product—reflecting the designer's core expertise. Tone avoids corporate jargon; instead, it speaks in clear, purposeful language. Example: 'I design systems that scale. Let's talk about yours.' The personality is approachable yet authoritative, balancing playfulness (via color and shape) with professional credibility (via typography hierarchy and whitespace discipline).

Colors

The color system is built on a light, neutral foundation (surface: #f6f6f6, on-surface: #272727) that provides maximum legibility and a calm, professional backdrop. Primary (#0e58e4, rgb(14, 88, 228)) is the brand's signature accent—a vivid, saturated blue used exclusively on primary CTAs (the 'SAY HELLO' button), focus states, and active navigation. It commands attention without aggression, evoking trust and forward momentum. Secondary (#ffaf13, rgb(255, 175, 19)) is a warm golden-yellow deployed on decorative elements and supporting UI; it adds warmth and playfulness. Tertiary (#00d9a3 and #33c230) comprises a cyan and bright green, used for success states, toggles, and accent shapes. Error (#ff3d00, rgb(255, 61, 0)) is a vivid coral-red reserved for alerts and destructive actions. All a

Typography

The type system pairs Montserrat (geometric, modern, bold) for headlines and display text with Work Sans (humanist, open, approachable) for body and UI labels. This pairing creates visual contrast: Montserrat's tight letterforms (display at 98px, -0.02em tracking) command the hero, while Work Sans's generous x-height (body-lg at 20px, 500 weight) ensures readability in dense content. Display (98px, 400 weight, 106px line-height) is reserved for the hero headline ('Systems'); headline-lg (56px, 700 weight) anchors section titles; body-lg (20px, 500 weight, 28px line-height) carries descriptive copy ('Digital designer specialising in product and design systems'). Label-md (16px, 500 weight) is applied to button text and navigation, with 0.01em tracking for subtle emphasis. On small labels ov

Layout

The layout uses a 12-column grid with a 1280px max-width container, centered with symmetric gutters (24px on desktop, 16px on tablet). The hero section employs a loose, asymmetric composition: navigation and logo occupy the top 141px (header-height: 141.4375px), while the main headline and decorative shapes float freely in the center, creating breathing room. Whitespace is semantic: lg spacing (40px) separates major sections, md spacing (24px) groups related content, and sm spacing (12px) tightens component internals. The primary CTA ('SAY HELLO') is positioned top-right, floating above the fold to maximize discoverability. Cards and content blocks use md padding (24px) internally, with lg spacing (40px) between sections. This rhythm creates a calm, uncluttered reading experience—no elemen

Elevation & Depth

Depth is achieved through a restrained shadow system combined with subtle background color shifts. Level 1 (Base): the light neutral surface (#f6f6f6) with no shadow. Level 2 (Standard Card): background #ffffff with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffuse lift. Level 3 (Elevated/Hover): background shifts to surface-container-low (#ececec) with box-shadow: 0 4px 33px rgba(0, 0, 0, 0.22), signaling interactive state. Primary buttons use the md shadow (0 3px 8px) by default, escalating to lg shadow (0 4px 33px) on hover to indicate interactivity. No element uses harsh,

Shapes

The design system embraces 'Geometric Playfulness'—a philosophy that combines architectural precision with organic, approachable curves. Buttons use full rounding (border-radius: 9999px, or 300px in computed styles), creating pill-shaped forms that feel friendly and clickable. Cards and input fields use md rounding (0.75rem, ~12px), balancing softness with structure. Decorative shapes in the hero are fully rounded (circles at 50%, toggles at 100%, arcs at 500px), creating visual contrast against the rectilinear grid. This mix—sharp edges on the grid, soft curves on interactive elements—signals

Components

Action Elements Primary buttons (button-primary) use the brand's signature blue (#0e58e4) with white text, 56px height, full rounding (9999px), and padding 28px 67px. Typography is label-md (16px, 500 weight). On hover, the background shifts to primary-container (#1e68f0) and shadow escalates to lg (0 4px 33px rgba(0, 0, 0, 0.22)), with a 200ms ease-out transition. On active, the button scales to 0.98 and background darkens to primary-fixed-dim (#0e58e4). Secondary buttons are transparent with a 2px primary-colored border, inverting on hover to a light background (surface-container-high, #dcdcdc). All buttons include a focus ring: outline: 3px solid rgba(14, 88, 228, 0.3) on keyboard focus.

Containers & Surfaces Cards (card) use a white background (#ffffff) with md rounding (12px)

Do's and Don'ts

**Do**

• Do use primary blue (#0e58e4) exclusively on primary CTAs and focus states—it's the brand's signature accent and must remain distinctive.
• Do maintain the light neutral background (#f6f6f6) as the default canvas; it ensures legibility and creates a calm, professional foundation.
• Do apply full rounding (9999px) to all interactive buttons and pill-shaped elements; it signals approachability and interactivity.
• Do use the secondary and tertiary accent colors (yellow, cyan, green, red) sparingly on decorative shapes and status badges—they're visual punctuation, not dominant colors.
• Do pair Montserrat (headlines) with Work Sans (body) consistently; this pairing is the brand's typographic signature.
• Do enforce the 24px gutter and lg spacing (40px) between sections to maintain the calm, uncluttered rhythm.

**Don't**

• Don't use primary blue on non-interactive elements or backgrounds; it must remain reserved for CTAs and active states to maintain visual hierarchy.
• Don't apply shadows heavier than lg (0 4px 33px rgba(0, 0, 0, 0.22)); the brand aesthetic is light and airy, not dramatic.
• Don't mix Montserrat and Work Sans weights arbitrarily; use Montserrat 700 for headlines and Work Sans 500 for UI labels—this contrast is intentional.
• Don't use the secondary/tertiary accent colors (yellow, cyan, green, red) on large background areas; they're accent colors, not surface colors.
• Don't reduce border-radius below md (12px) on cards or containers; the brand relies on soft, approachable curves.
• Don't apply text-shadow or text-outline to body copy; reserve these techniques for small labels over complex backgrounds only.