Meeting Notes: Megan + Pablo Design Review
Session 1 — Mar 11, 2026
Address & Applicant Page + Modals
Product selection buttons — align text & consider icons Component
The "H" in Homeowners and "C" in Coverage should sit on the same vertical line. Ideally swap to the Figma component version with text left-aligned and radio icon on the right. If there's room for a bigger lift, plug in illustrations to fill all the empty screen real estate.
"I would try something different in these buttons. Maybe even plug in an illustration. There's so much real estate. It looks so empty." — Pablo
✅ Design
Homeowners
Coverage
≠
❌ App
Homeowners
Coverage
▶ Code Fix
What to change
// Product selection buttons
layout: centered text → left-aligned text + right radio icon
// Use Figma radio card component pattern
Where to look
Product type selection component
Paste into Claude Code
Find the product selection buttons (Homeowners/Coverage) on the initial screen. Change from centered text to left-aligned text with radio circle on the right, matching Figma card pattern.
▶
Add Notes
Auto-saved to your browser
Side nav step items have unintended padding / button styling CSS Only
In Figma the step labels are plain text without padding. In the review app they render like buttons with extra padding, making the sidebar spacing feel off.
▶ Code Fix
What to change
// Side nav step items
padding: 8px 12px (button-like) → 4px 0 (plain text)
background: #f5f5f5 → transparent
Where to look
Sidebar stepper/nav component
Paste into Claude Code
Find the sidebar step navigation items and remove the button-like padding and background. They should be plain text labels, not button-styled elements.
▶
Add Notes
Auto-saved to your browser
Card backgrounds should be white, not gray CSS Only
In Figma the cards sit on white backgrounds. In the review app some cards have a gray background that doesn't match.
▶ Code Fix
What to change
// Card backgrounds
background: #f5f5f5 (gray) → #ffffff (white)
Where to look
Card components in step 1
Paste into Claude Code
Find cards on step 1 that have gray backgrounds and change them to white (#ffffff) to match Figma.
▶
Add Notes
Auto-saved to your browser
Remove dynamic field labels (floating labels inside inputs) Component
The review app uses dynamic labels that float up when you click an input (e.g., "Policy Effective Date" label inside the field). This causes spacing issues and a double-label situation. Design intent is placeholder text inside the field with the label outside. If removing the dynamic label is too much work, at minimum fix the padding so it doesn't look so tight.
"It's like two labels. I'm not sure if we even need that additional label." — Pablo
🔗 Global theme #5 covers this fix in detail — see the Recurring Themes section below.
▶ Code Fix
What to change
// Remove floating/dynamic labels (GLOBAL)
// This is Theme #5 - affects all form fields
Remove: InputLabel animations + floating label inside inputs
Keep: Label above field + placeholder inside
Where to look
MUI TextField, InputLabel, or FormControl components
Paste into Claude Code
This is a global fix. Find the MUI TextField or form input components that use floating/dynamic labels (label animates into the field on focus). Remove the floating label behavior. Keep labels as static elements above the field with placeholder text inside. This likely involves changing MUI InputLabel props or removing the "shrink" animation.
▶
Add Notes
Auto-saved to your browser
Standardize all modals to one consistent design Component
Every modal currently looks different — different fonts (some use Newton instead of Gist), different cancel button styles, different background colors. Use the first modal (address search) as the master template: divider line, consistent CTA footer, same font, same background. When stacking modals, the background overlay should NOT keep getting darker.
"Every modal looks different. There's even modals where the headline font is Newton instead of Gist." — Pablo
🔗 Global theme #1 has the master modal template embedded from Figma — see the Recurring Themes section below.
▶ Code Fix
What to change
// Modal standardization (GLOBAL)
// This is Theme #1 - affects all modals
Template: Gist font, white bg, divider line above CTA, working X button
Fix: Stacking modals should not darken overlay further
Where to look
Modal/Dialog component, MUI Dialog overrides
Paste into Claude Code
Standardize all modals to match the master template: use Gist font (not Newton), white background, add a divider line (border-top) above the CTA footer buttons, ensure the X close button works. When modals stack, prevent the overlay from getting progressively darker.
▶
Add Notes
Auto-saved to your browser
Client selection cards — align text & radio to top CSS Only
The Existing Client / New Client radio cards look decent, but the radio button should align to the top of the card (not vertically centered). If one card has two lines of text and the other has one, at minimum the text should be top-aligned so they look even.
▶ Code Fix
What to change
// Client card radio alignment
align-items: center → flex-start
// Radio and text should top-align
Where to look
Client selection radio card component
Paste into Claude Code
Find the Existing Client / New Client radio cards in step 1. Change vertical alignment from center to flex-start so radio buttons and text are top-aligned.
▶
Add Notes
Auto-saved to your browser
"Back to selection" should be an inline text link, not a big button CSS Only
In Figma it's a subtle inline link. In the review app it renders as a big outlined secondary CTA that looks weirdly placed. The helper text below it makes the button look even more misplaced.
✅ Design
← Back to selection
≠
❌ App
← Back to selection
helper text makes it worse
▶ Code Fix
What to change
// "Back to selection" styling
Change from: Button (mock-btn-outline)
Change to: Inline text link
styles: { color: "#4a7c59", textDecoration: "underline", fontSize: "13px", border: "none", background: "none" }
Where to look
Back to selection button in client section
Paste into Claude Code
Find the "Back to selection" element in the client section. Change it from a styled button/CTA to a simple inline text link: green (#4a7c59), underlined, no border or background. Remove any helper text below it.
▶
Add Notes
Auto-saved to your browser
Client name display is way too large ("Clark Kent" issue) CSS Only
The confirmed client name renders in a massive font size. Needs to be brought down to match the design spec.
✅ Design
Clark Kent
clark@dailyplanet.com
≠
❌ App
Clark Kent
clark@dailyplanet.com
▶ Code Fix
What to change
// Client name display size
font-size: 24px → 14px
font-weight: 600
Where to look
Selected client name display in step 1
Paste into Claude Code
Find where the confirmed client name (e.g., "Clark Kent") is displayed after client selection. Reduce font-size from ~24px to 14px with font-weight 600 to match Figma.
▶
Add Notes
Auto-saved to your browser
Edit button is not square — width ≠ height CSS Only
The circular edit button isn't actually circular. Width and height don't match. Should be equal dimensions.
▶ Code Fix
What to change
// Edit button dimensions
width: 32px
height: 32px
border-radius: 50%
// Must be equal width and height
Where to look
Edit button component, icon button
Paste into Claude Code
Find the circular edit button and ensure width equals height (32px x 32px) with border-radius 50% so it is truly circular.
▶
Add Notes
Auto-saved to your browser
MUI checkbox hover padding causes visual misalignment CSS Only
The MUI checkbox component adds padding for its hover state, which makes the checkbox look indented/misaligned when your mouse isn't on it. Need to either remove the hover padding or offset it so the default state looks aligned.
▶ Code Fix
What to change
// MUI checkbox hover padding
Remove or offset: MUI checkbox hover state padding
// Default state should look aligned regardless of hover
Where to look
MUI Checkbox component overrides, theme customization
Paste into Claude Code
Fix MUI checkbox components where the hover padding causes visual misalignment. Either remove the hover padding entirely or add negative margin to offset it so the default state looks properly aligned.
▶
Add Notes
Auto-saved to your browser
Error states firing prematurely on click-away Needs Dev
Clicking into a field and then clicking away immediately shows a red error state. That shouldn't happen — nobody is entering a number for their name. Validation should only fire on form submission or after meaningful input.
▶ Code Fix
What to change
// Error state validation timing
Fix: Validation should fire on submit, not on blur
// Remove onBlur validation or add touched+submitted check
Where to look
Form validation logic, onBlur handlers, Formik/react-hook-form config
Paste into Claude Code
Fix premature error state display. Currently clicking into a field and clicking away triggers validation errors. Change validation to only fire on form submission or after the user has typed and submitted, not on simple blur events.
▶
Add Notes
Auto-saved to your browser
Responsive behavior at 1280px — gutters too wide CSS Only
At laptop width (~1280px), the content area feels cramped because the left/right gutters are eating up space. The gutters should reduce at smaller widths so the actual form content doesn't shrink as much. The content itself shouldn't drastically change size.
"The main content shouldn't drastically change. We should be moving everything else." — Pablo
▶ Code Fix
What to change
// Responsive gutters at 1280px
@media (max-width: 1280px):
padding-left/right: large gutters → reduced gutters
// Keep content area wide, shrink gutters
Where to look
Layout container styles, responsive breakpoints, main content wrapper
Paste into Claude Code
Add or adjust a CSS media query at 1280px breakpoint. Reduce the left/right gutter padding so the main content area stays wider on laptop screens. The content should not shrink dramatically - the margins should absorb the size reduction.
▶
Add Notes
Auto-saved to your browser
Modal scroll bar looks broken — "thinks it's square" CSS Only
When scrolling inside modals, the scrollbar renders as if the content area is square. Looks janky.
▶ Code Fix
What to change
// Modal scrollbar styling
Fix: Modal scroll area height calculation
// Ensure scrollbar tracks full content height, not square
Where to look
Modal/Dialog scroll styles, overflow settings
Paste into Claude Code
Fix the modal scrollbar that renders incorrectly (looks square). Check the modal content area height calculation - it may need overflow-y: auto with a proper max-height relative to the viewport.
▶
Add Notes
Auto-saved to your browser
Modal spacing is too spread out CSS Only
Inside modals, the space between fields (first name → last name, first name → date of birth, etc.) is too large. Everything feels too spread out. Tighten up the spacing to match the Figma spec.
▶ Code Fix
What to change
// Modal field spacing
gap/margin: 20px+ between fields → 12px between fields
// Tighten spacing inside modals
Where to look
Modal form field containers, MUI Dialog content spacing
Paste into Claude Code
Reduce the spacing between form fields inside modals. Currently gaps are 20px+, should be closer to 12px. Check the modal form field container margin/gap values.
▶
Add Notes
Auto-saved to your browser
Modal X close button doesn't function correctly Needs Dev
The X button on at least one modal variant doesn't work as expected.
▶ Code Fix
What to change
// Modal X close button
Fix: onClick handler for close icon button
// Verify onClose callback is properly wired
Where to look
Modal close button handler, Dialog onClose prop
Paste into Claude Code
Fix the modal X close button that does not function on at least one modal variant. Check that the onClick/onClose handler is properly wired and the button element is correctly positioned and clickable.
▶
Add Notes
Auto-saved to your browser
Selected state color is wrong across components CSS Only
The selected/active state on cards and buttons uses a soft green that doesn't match the Figma components. This is a recurring pattern — Pablo flagged it with sticky notes throughout.
"I left a recurring theme — the selected state in production looks different than what we actually do in Figma." — Pablo
🔗 Global theme #3 has the full component states visual — see the Recurring Themes section below.
▶ Code Fix
What to change
// Selected state colors (GLOBAL)
// This is Theme #3
Fix selected/active state colors across all components
// Match Figma component palette exactly
Where to look
Theme color definitions, selected/active state styles, MUI palette overrides
Paste into Claude Code
Fix the selected/active state colors across all card and button components. The green used for selected states in the app does not match the Figma spec. Check the theme palette and component override colors. Reference the Figma components page for exact color values.
▶
Add Notes
Auto-saved to your browser
Session 2 — Mar 12, 2026
Underwriting Details Page + Typography + Child Questions
Break up Underwriting Details into grouped sections Needs Dev
The underwriting details screen was designed as one big block and it's overwhelming. It needs to be broken up into logical sections with section titles, following the same pattern as Property Information (which is the "ideal state"). Megan is taking this back to Julian to figure out the groupings.
"I think this might be the worst screen. It just feels overwhelming. We should follow the format we have on the screen before — section title, then questions related to that section." — Pablo
✅ Target Pattern (from Property Info)
Residence
Residence Use • Residence Type
Construction
Year Built • Square Footage
≠
❌ Current (One Big Block)
Is there a pool? • Solid fuel burning? • Manufactured home? • Rented out? • Fire alarm? • Burglar alarm? • Trampoline? • Dog breeds? • Claims history? • ...
All questions in one undifferentiated list
▶ Code Fix
What to change
// Underwriting section grouping
Restructure: One flat list → Grouped sections with titles
// Waiting on Julian meeting for section definitions
Where to look
Underwriting details form/page component
Paste into Claude Code
Restructure the underwriting details page from one flat list of questions into grouped sections with section titles (like Property Information). This requires new section grouping definitions from Julian. Each group should have: section title (16px), related questions below it, consistent spacing between groups.
▶
Add Notes
Auto-saved to your browser
Fix typography scale — headers are too big CSS Only
In the review app, section headers like "Residence" render at 20px. They should be 16px. The correct scale: section titles 16px, main questions 16px, follow-up/child questions 14px. The Figma "put a bow on it" page has the correct 16px sizing and you can feel the difference.
"Residence is 20. It feels pretty large and then everything else is a little smaller. Being able to work with Julian and have him tell us how to have sections and a section title and the questions below — that's going to fix it." — Pablo
🔗 Global theme #2 has the full typography scale visual — see the Recurring Themes section below.
▶ Code Fix
What to change
// Typography scale (GLOBAL)
// This is Theme #2
Section titles: 20px → 16px
Main questions: 16px
Child questions: 14px
Where to look
Section header styles, form question label styles, MUI Typography overrides
Paste into Claude Code
Fix the typography scale: section headers like "Residence" are currently 20px but should be 16px. Main form questions should be 16px, child/follow-up questions should be 14px. This is Theme #2 affecting all steps.
▶
Add Notes
Auto-saved to your browser
Child/follow-up questions need the indented design pattern Component
When a yes/no toggle reveals follow-up questions (like pool safety features, claims details), those child questions should use the new indented style at 14px font. There are 4 instances of child questions on the underwriting page. One new design is needed for the checkbox-style child question (pool safety features).
✅ Existing Indented Pattern (from Figma)
Is the applicant the general contractor?
YesNo
What was the last day of coverage?
Please select a date 📅
+
⚠ Needs New Design
Pool safety features (checkbox list):
☐
Pool fence☐
Pool cover☐
Pool alarm☐
Self-closing gateDesign this pattern — checkbox children with teal indent
▶ Code Fix
What to change
// Child question indented pattern
Add: Left border indent (3px solid #4a7c59) with padding-left
Font-size: 14px for child questions
// TODO: checkbox variant needs new Figma design
Where to look
Conditional/child question rendering in underwriting
Paste into Claude Code
Implement the child/follow-up question indented design pattern: when a yes/no toggle reveals child questions, show them with a left border (3px solid #4a7c59) and left padding (12px). Child question text should be 14px. Note: the checkbox variant (pool safety features) needs a new design from Megan first.
▶
Add Notes
Auto-saved to your browser
Fix extra spacing on toggles CSS Only
Some toggle switches on the underwriting page have extra spacing that makes the page feel inconsistent. Once the section grouping is done, the spacing should follow a consistent pattern.
▶ Code Fix
What to change
// Toggle extra spacing
Fix: Inconsistent margins/padding around toggle switches on underwriting page
Where to look
Toggle switch containers in underwriting step
Paste into Claude Code
Fix inconsistent spacing around toggle switches on the underwriting page. Ensure consistent margins and padding between toggle rows.
▶
Add Notes
Auto-saved to your browser
Show Steve the Figma components page before the fix session Component
There's a page in the Figma file with all the components, states (hover, selected, etc.), and typography rules. Pablo thinks if Steve sees it, he'd immediately recognize the issues and know how to fix things like the green color inconsistencies.
"I feel like if Steve saw that he would be able to see all the different states, and we'd avoid having so much green everywhere." — Pablo
▶
Add Notes
Auto-saved to your browser
Agreed Next Steps
Megan to talk to Julian about section grouping for Underwriting Details Needs Dev
Has a call with Julian in 10 min (as of Mar 12 recording). Going to figure out how to logically group the underwriting questions.
▶
Add Notes
Auto-saved to your browser
Adam scheduling a 2-hour fix session with Steve + Megan Needs Dev
Adam mentioned in standup his plan might be to carve out 2 hours where Megan walks Steve through the issues in the review app and Steve fixes them live in the code. TBD on whether this happens.
▶
Add Notes
Auto-saved to your browser
Megan to design new child question pattern (checkbox variant) Component
Need one new Figma design showing how the checkbox-style child questions should look (e.g., pool safety features). The existing indented pattern can be reused for claims-style child questions.
▶
Add Notes
Auto-saved to your browser
Megan to compile a full list for Reagan to cut tickets Needs Dev
All findings from both sessions go into a list. Megan will cross-reference against Pablo's existing Figma sticky notes to make sure nothing is missed. Tickets to be cut from there.
"I'm going to use the transcription of this to actually cut tickets with Reagan." — Megan
▶ Code Fix
What to change
// Compile issue list for ticket cutting
// This is what the walkthrough IS! Cross-reference with Pablo's stickies
Where to look
N/A - project management task
Paste into Claude Code
This walkthrough IS the compiled list! Cross-reference the 52 issues here against Pablo's Figma sticky notes to ensure nothing is missed, then cut Jira tickets.
▶
Add Notes
Auto-saved to your browser
Outstanding pages still to review Needs Dev
Sessions 1 & 2 covered the initial screen, Address & Applicant, and Underwriting Details. Property Information, Select Package, and the remaining steps still need a walkthrough, but the main themes (modals, button components, sizing, typography, section grouping) are established.
▶
Add Notes
Auto-saved to your browser
Recurring Themes — What the Fixes Look Like
These themes came up repeatedly across both sessions. Each one below shows what it should look like vs what's in the app now, with the agreed fix.
1
Modals — One Master Template for Everything
Master Approved
The fix: Use the Review Client Account Info modal as the master template. Every modal gets: consistent Gist font (not Newton), a divider line above the CTA footer, Cancel + primary action button, white background, and the X close button must work. Stacking modals must NOT darken the overlay further.
"Every modal looks different. There's even modals where the headline font is Newton instead of Gist." — Pablo
✅ Every Modal Should Have
✓ Gist font • ✓ Divider line • ✓ CTA footer • ✓ White bg • ✓ Working X
≠
❌ Current App Modals (Inconsistent)
✗ Newton font • ✗ No divider • ✗ Gray bg • ✗ X broken • ✗ Overlay stacks
Affects: Address search modal, Edit client modal, Create client modal, all confirmation dialogs.
All StepsStep 1Step 3Step 5
2
Typography Scale — Locked In
Scale Locked
The fix: Three sizes only. Section titles = 16px bold. Main questions = 16px regular. Child/follow-up questions = 14px. The review app currently has section headers at 20px which makes everything feel oversized.
"Residence is 20. It feels pretty large." — Pablo
✅ Correct Typography Scale
Residence 16px bold
Is the applicant the general contractor?
16px
What was the last day of coverage?
14px
≠
❌ Current App Typography
Residence 20px ✗
Is the applicant the general contractor?
What was the last day of coverage?
16px ✗ (should be 14)
Affects: Every section header across all steps, plus all child/follow-up questions.
All StepsStep 2Step 3
3
Component States — Selected, Hover, Error
Use Figma States
The fix: The Figma file has a components page with every state (default, hover, selected, error, disabled). The selected state should use the specific Figma green with the correct border treatment — not the generic soft green the app currently uses. Error states must only fire on submit, not on blur.
"I left a recurring theme — the selected state in production looks different than what we actually do in Figma." — Pablo
✅ Figma Component States
Yes/No toggle — Selected
Yes
No
Radio card — Selected
Existing Client
Checkbox — Aligned
✓
I agree to terms≠
❌ Current App States
Yes/No toggle — Wrong green
Yes
No
Radio card — Wrong green
Existing Client
Checkbox — MUI padding shift
✓
I agree to terms↑ Extra 8px hover padding causes misalignment
Affects: Every interactive component — toggles, radio cards, checkboxes, button states.
All Steps
▶
Implementation Guide
Click to expand
What to change
// Component states (Theme #3)
Fix selected/active/hover state colors globally
Match Figma component states exactly
Where to look
Theme palette, component state styles, MUI overrides
Paste into Claude Code
Fix component selected/active states globally to match Figma. This includes: card selected border colors, toggle on/off colors, button active/hover states.
▶
Add Notes
Auto-saved to your browser
4
Spacing & Padding — Follow Figma Spec
Use Figma Values
The fix: Too much space between fields in modals, wrong padding on sidebar nav items, card spacing varies. The Figma spec has exact pixel values for all gaps. At 1280px, reduce gutters (not content) to keep the form area wide enough.
"The main content shouldn't drastically change. We should be moving everything else." — Pablo
✅ Correct Spacing (Figma)
Modal field spacing — Tight
First Name
Clark
Last Name
Kent
Date of Birth
06/18/1938
✓ 8px gap between fields
Sidebar nav items
✓ Plain text, no extra padding
≠
❌ Current App Spacing
Modal field spacing — Too spread out
First Name
Clark
Last Name
Kent
Date of Birth
06/18/1938
✗ 20px+ gap — too spread out
Sidebar nav items
✗ Button-like padding, extra space
Affects: All modals, sidebar nav, responsive gutters at 1280px.
All Steps
▶
Implementation Guide
Click to expand
What to change
// Spacing & Padding (Theme #4)
Modal field gaps: 20px+ → 12px
Section card gaps: → 24px
Sidebar nav: Remove button-like padding
Where to look
Global spacing/gap values, modal content styles, sidebar nav padding
Paste into Claude Code
Fix global spacing issues: reduce modal field gaps to 12px, set section card gaps to 24px, remove button-like padding from sidebar nav items.
▶
Add Notes
Auto-saved to your browser
5
Dynamic Field Labels — Remove Them
Remove
The fix: Remove the floating label-inside-input pattern entirely. The design intent: label above the field (outside) + placeholder text inside the field. The current dynamic labels create a double-label situation and cause spacing issues when the label floats up.
"It's like two labels. I'm not sure if we even need that additional label." — Pablo
✅ Correct Field Pattern
Policy Effective Date
Select a date 📅
Email Address
name@example.com
✓ Label outside • Placeholder inside • Clean spacing
≠
❌ Current App (Dynamic Labels)
Policy Effective Date
Policy Effective Date
Select a date 📅
Email Address
Email Address
name@example.com
✗ Double label • Floating label inside • Tight padding
Affects: Every text input, date picker, dropdown, and select field.
All StepsStep 1Step 2Step 3
▶
Implementation Guide
Click to expand
What to change
// Dynamic field labels (Theme #5) - REMOVE
Remove floating label-inside-input pattern
Keep: Static label above + placeholder text inside
Where to look
MUI TextField, InputLabel, floating label logic, FormControl
Paste into Claude Code
Remove the floating/dynamic label pattern from all form inputs. Labels should be static text above the field, with placeholder text inside.
▶
Add Notes
Auto-saved to your browser
6
Figma Components Exist — They're Just Not Being Used
Reference Below
The fix: The Figma file has a components page showing every state, color, and spacing rule. Steve should review this page before the fix session. With Figma Dev Mode providing CSS values and AI code tools, there's no reason these aren't matching.
"I know Figma with dev mode provides the code and now with all these AI tools, I don't know why those things are still happening." — Pablo
Action: Share these Figma frames with Steve before the fix session. These contain the exact component specs for buttons, toggles, cards, checkboxes, selected states, and typography.
▶
Implementation Guide
Click to expand
What to change
// Figma Components (Theme #6)
Reference: Share the Figma components page with the dev team
Use Figma Dev Mode to get exact CSS values
Where to look
N/A - reference Figma file before starting code changes
Paste into Claude Code
Review the Figma components page before starting fixes. Use Figma Dev Mode to get exact CSS values for all component states.
▶
Add Notes
Auto-saved to your browser
▶
Implementation Guide
Click to expand
What to change
// Modal standardization (Theme #1)
Apply master template to all modals:
- Gist font (not Newton)
- White background
- Divider line above CTA footer
- Cancel + primary action button
- Working X close button
- No progressive overlay darkening
Where to look
MUI Dialog/Modal component overrides, theme customization
Paste into Claude Code
Standardize all modal/dialog components to the master template. Apply Gist font, white background, add border-top divider above button footer, ensure X close button works. Fix overlay stacking so it does not get progressively darker.
▶
Add Notes
Auto-saved to your browser
▶
Implementation Guide
Click to expand
What to change
// Typography scale (Theme #2)
h3/section-title: 20px → 16px
body/questions: 16px
child-questions: 14px
Where to look
Global typography styles, MUI Typography variants, section header classes
Paste into Claude Code
Fix the global typography scale. Section headers (h3 level) are 20px but should be 16px. Main body questions stay at 16px. Child/follow-up questions should be 14px. This affects all steps.
▶
Add Notes
Auto-saved to your browser