Skip to content

Portfolio Home

welcome!

I’m Ann Marie, a DC-based product designer designer-builder 🤗

Problem solving that’s both creative and strategic is my specialty. Give me your toughest design problems + a coding agent, and I’ll hit the ground running. 🏃‍♀️

Tools & skills

Design
AccessibilityWCAG 2.2 AA standards, audit tests w/ Chrome LighthouseAI UX designHuman-in-the-loop patterns, error recovery, following industry trends, see Optigo IntelligenceDesign systemsBoth using and building them, see GalazioInformation architectureMaking info-dense pages “easy on the eyes” :-) see Procedures UpdaterInteraction designMicro-interactions, system state transparency, basic motion designPrototypingLow to high fidelity, using to align stakeholdersUsability testingWriting task-based tests, evaluating results, see PLANRUser researchQualitative synthesis, user interviews, thematic coding
Building
Astro + TailwindThis site’s stack, see How I built this siteContext engineeringStructuring context for AI tools, see Personas Context LibraryDesign tokensSetting standard variables to keep Figma <> code handoffs consistentFigma <> codeFigma canvas to AI coding tools, MCP to bring code back to canvas
Tools
Claude CodeBasically my dev team of one! See How I built this siteCloudflareDNS hosting & Workers, see How I built this siteFigmaNeeds no introduction Figma MakeMostly used for quick ideation at workGit/GitHubI’d say I know the basics (AKA enough to not break everything)KiroSpec-driven, prompt-focused IDE we use at work for agentic codingMidjourneyLess AI image generator, more aesthetic engine + exploration tool, see Midjourney

Work with me

Feel free to reach out if you'd like to discuss a project or just say hello!

galazio: γαλάζιο adj.Greek word for light or sky blue; sometimes translated as azure 💙 Design System

Tokens and components used on this site, rendered live from the code.

Buttons

PrimaryContactSee WorkRead nextNext

Hover them: the envelope and arrows slide in, the glow edge lights up.

Chips and nav

FigmaFreddie MacOngoing
OverviewIdeaSchemaLibrary

Cards

At a glance
Role
UX designer, 1 of 2
Team
Tiger Team, internal AI product team
Timeline
4-5 months, 2026
Status // Ongoing; V3 in progress after two pilots (10, then 30 users)

Alerts

Work in progress

This is an ongoing initiative. More updates to come!

Key Question: How can we make our personas AI-native?

This was going to be harder than we thought

AI-generated content below

You’ve reached the end of my case studies.

Confidentiality Note

This was proprietary internal work at a financial institution. Every screen below is a faithful recreation rebuilt from memory and notes, and all names, loans and data shown are fictional and non-confidential.

Forms

Please enter a valid email, like you@example.com.

Your message didn’t send

Please try again in a moment.

Toast

Message sentThanks! I’ll get back to you as soon as I can.

Type

Hero title · Archivo semibold · 30
Personas Context Library
Section heading · Archivo semibold · 16 · ink-soft
Schema design with the team
Body · Archivo regular · 14 / 155%
Every persona now has a file in the library.
Small · Archivo regular · 12 · ink-faint
Graphic is for illustrative purposes only.
Caps · Archivo all small caps · 7%
Work in progress
Serif · Newsreader regular · 48
welcome!
Logo · Epilogue regular · lowercase
Mono · JetBrains Mono · 12
role: Underwriting analyst
Aaxs · 12px
Aasm · 14px
Aabase · 16px
Aalg · 18px
Aaxl · 20px
Aa2xl · 24px
Aa3xl · 30px
Aa4xl · 36px
Aa5xl · 48px
Aa6xl · 60px
Aa7xl · 72px

Shape and elevation

radius-sm 4px
radius-md 6px
buttons and form fields
radius-lg 8px
alerts, cards, toast, code blocks
radius-xl 12px
cards (shadcn's Card radius)
shadow-ghost
shadow-ghost-bright
shadow-xs
outline buttons, form fields
shadow-sm

Color

blue
#1e86ee
Info
blue-deep
#0b6bd6
Buttons, links
blue-deeper
#0854a9
Hover, text on pale blue
blue-pale
#dee9f6
Ongoing status, case study tags
green
#16b37e
Glow button edge
green-deep
#08815a
Success, done
green-deeper
#06674a
Text on pale green
green-pale
#d9ede3
Done status
mist
#8fa5c4
Tag borders
mist-pale
#dfe6f0
Soft fills
periwinkle
#b9bee7
Chip borders, skill hover
periwinkle-pale
#e8eafd
Chips, icon tiles
bone
#fcfdfe
Form fields, popovers
blue-bright
#4770eb
Focus ring, small accents (✦, icons)
purple-deep
#6b3fbf
Playground "Learning" status
lime
#e3ff54
Highlights
rust
#cb4c21
Warnings and errors
red
#d0353b
Problem cards
ink
#191b1d
Headings and body text
ink-soft
#44484d
Secondary text
ink-faint
#6b7076
Labels, captions, meta
rule
#dcdfe4
Borders and dividers
paper
#ffffff
Page background, cards

Semantic roles

bgpaper
bg-altblue-pale
bg-brightbone
bg-inverseink
fg-1ink
fg-2ink-soft
fg-3ink-faint
fg-inversepaper
actionblue-deep
action-hoverblue-deeper
action-fgbone
linkblue-deep
link-hoverblue-deep
inputcolor-mix(in srgb, ink-faint 75%, paper)
focusblue-bright
focus-ringfocus
successgreen-deep
warningrust
infoblue