CSS Variables
Variable
Value
Preview
--black #252830
Body text, headings, buttons
--white #f5f6f8
Page background, button text
--mid #717886
Body text, nav links, descriptions
--light #dde1e8
--font-serif 'Cormorant Garamond', Georgia, serif Section headings, card titles
--font-sans 'Inter', -apple-system, sans-serif Body, nav, labels, UI text
--sidebar-w 240px Navigation sidebar width
Colors
Nav BG
#fbfcfd
Nav sidebar
Card BG
#fafafa
Cards, grids
Shadow Blue
#1e50a012
Box shadows
Chip BG
#ffffff1f
Stat card chips
Chip Text
#ffffffbf
Stat card chip text
Typography — Serif (Cormorant Garamond)
Leading global design teams & transforming AI-driven enterprise design
Strategic stakeholder connections
Typography — Sans-serif (Inter)
Navigating ambiguity, creating cohesion across disciplines, and surfacing UX opportunity through effective relationships is where I thrive.
"Abi has been a fantastic partner to collaborate with."
Define the research goals, methodology, script, participants, and success metrics.
Card body text, nav links, metadata labels, award descriptions
18+ designers and researchers
Former manager · Google UX Design Certification
Skills · Known for · Role
Authority Magazine · 2020
Spacing Scale
4px Micro gaps (bullet list items)
6px Nav section margin, small gaps
8px Name margin, tag list gap
12px Rec footer gap, project label margin
16px About links gap, inline grid gap
20px Award grid gap, rec grid gap
24px Al-ai card grid gap, card padding
28px About col-right gap, rec card padding
32px About grid div padding, nav sides
40px About grid margin-top, nav logo margin
48px Page intro margin, section spacing
56px Section divider margin, about intro
64px Main padding-top, about work gap
72px About hero gap, main padding (mobile)
Border Radius
8px
Cards, grids, award boxes, stat cards
100px
Buttons, icon buttons, year chips
Box Shadows
Default card shadow
0 4px 24px rgba(30,80,160,0.07),
Cards, grids, rec cards, award boxes
Hover shadow
0 8px 40px rgba(30,80,160,0.13),
Featured award card on hover
Nav open shadow
4px 0 40px rgba(0,0,0,0.1)
Mobile/tablet nav when open
UI Components
Primary button
Resume
background: --black · border-radius: 100px · padding: 9px 20px · font-size: 13px · weight 500
Icon button
38×38px · border-radius: 50% · background: --black · icon: 18px
Tag
UX design
border-radius: 20px · padding: 5px 13px · font-size: 13px · border: --light
Section label
Skills
11px · uppercase · letter-spacing: 0.12em · weight 500 · color: --mid
Content card
Card body text in Inter 13px, color --mid, line-height 1.75. Used in award boxes, recommendation cards, and process boxes.
Annotation box
✦ I drew these wireframe versions of the team resources, and Claude redesigned them to fit the portfolio style — a perfect example of designer + AI collaboration.
background: #f0f2f7 · border-left: 3px solid --mid · border-radius: 6px · padding: 14px 16px · 13.5px · lh 1.6
Stat card
Red Hat
97%
background: --black · 48px bold stat · chip: rgba(255,255,255,0.12) · border-radius: 8px
Letter Spacing
About · Team management · UX design sample
Skills · Known for · Role
Imagery
SVG icons
viewBox 0 0 24 24 · stroke icons: strokeWidth 2–2.5, stroke-linecap round · fill icons: currentColor · rendered at 13–20px · inline SVG
Wireframe diagrams
Wireframe-style diagrams originally drawn by Abi in Google Slides, then redesigned to match the portfolio's visual system. Lines use --mid (#717886) at 20–35% opacity for a light, airy feel. Corners use soft border-radius. No fills — structure is communicated through line weight alone.
Format: PNG · Line color: --mid at opacity 0.2–0.35 · Container: border-radius 8px · Used: Team Management page
Illustrations
Created by Gemini. Includes the gestural line-drawing portrait used on the About page and the decorative icon accents used throughout the site. Single-weight strokes, no fills, palette-matched to --mid tones.
Format: PNG · Style: single-weight gestural strokes · Color: --mid tones · Created by: Gemini