Live site vs Figma
We opened the live pages in a browser, read the real values (sizes, weights, colours, spacing, shadows) and compared them with the PLZ library in Figma. The PLZ library is the source of truth, so every red value below is something the live site should change, not Figma.
Inter everywhere, the brand teal #00878e, 6px button radius, button heights 48 / 40 / 31px, the 64px navbar with 16px links, 8px card radius, the 15px gutter on WordPress pages.
The WordPress theme uses Bootstrap defaults instead of PLZ values: input borders, grey text, card shadows, the turquoise tint, and heading sizes and line heights.
Buttons and footer titles use 400, 600 or 700 where Figma uses Medium 500 and Bold 700. Headings use 700 where Figma Display headings use Extra Bold 800.
Their headings (48px, black #000) are not PLZ styles. Expected until these pages move to WordPress.
Every difference we found
Green means the live value matches Figma. Red is a difference. Grey notes say where we're not sure.
| What | Figma (PLZ library) | WordPress pages | Portal home | Dashboard pages | Who should change |
|---|---|---|---|---|---|
| Headings | Display 4: 32 / 44 / 56px, weight 800. Display 6: 27 / 34 / 40px, 800. H3 20px bold, H4 16/22 bold. | H1 32/38 bold 700; H2 28px with 24px line height; H3 24px with 20px line height. 28px and 24px are not PLZ sizes, and line heights smaller than the text make wrapped lines overlap. | Hero H1 32/39 at 700 on desktop. Display 4 would be 56/67 at 800 on desktop. (We didn't check the "Hero with search" component itself.) | H1 48/58 at 800 or 700, H2 40/48 at 700, one 56px heading in black #000000. 48px and #000 are not in the PLZ library. | WordPress theme, portal, dashboard |
| Section titles | H3 20px bold | Uses H2 28px instead | 20/24 bold | Uses 40px | WordPress theme |
| Body text | Body 2: 16/22 · Body 1: 20/30 · Body 3: 14/18 | 16/24 body; intro paragraphs 18/34 and 18px bold links (not PLZ styles) | 16/24 (line height 2px taller) | 16/22 and 20/30 | WordPress theme |
| Button text weight | Medium 500 (Button 1 / 2 / 3) | 600 on the form button | 500 on text links like "View all homes to buy" | 700 on hero buttons, 400 on others | WordPress theme, dashboard |
| Button size and colour | 48 / 40 / 31px, #00878e, radius 6, secondary #eeeeee | 40px, #00878e, radius 6 | 31px round grey #eeeeee arrows | 48 and 40px, #00878e and #eeeeee, radius 6 | — |
| Form fields | 40px high, border #d8d8d8, radius 6, 16px text, label 14px #797979 | 42px high, border #ced4da (Bootstrap grey, not PLZ), label 13px. Radius and text match. | Not measured | Not measured | WordPress theme |
| Secondary text | #797979 (text-secondary) | #6c757d (Bootstrap grey) | #333333 / #797979 | — | WordPress theme |
| Turquoise tint behind sections | Primary 50 #d1f5f7 | #00c6d1 at 10% opacity (looks like #e6f9fa) | — | — | WordPress theme |
| Card shadow | content-shadow: 0 1px 8px, 16% black. Radius 8. | 0 2px 4px, 7.5% black (Bootstrap shadow-sm). Radius 8 matches. | — | Plan cards: no shadow, 1px #d8d8d8 border, radius 12 (12px is not one of the PLZ radii we checked) | WordPress theme |
| Homepage search box | Search field: 48 / 40 / 31px. Hero search not checked. | — | 72px high, radius 16, shadow 0 1px 15px rgba(18,68,109,.25). Matches the PLZ "search-hero-shadow" name; value not checked in Figma. | — | Check in Figma |
| Navbar | 64px, links Body 2 16px | 63px, 16px links, 20px icons | 63px, 16px links | Same height, 16px links | — |
| Footer titles | H4: 16/22, Bold 700 | 16/20, Semibold 600 | 16/20, Semibold 600 | — | Portal footer |
| Footer legal links | Body 3, #797979 | 14/21, #333333, underlined | 14/21, #333333, underlined | — | Portal footer |
| Page width | Gutter 15px | 1140px container, 15px gutter | — | 1140px, 16px gutter | Dashboard (minor) |
| Cookie banner buttons | Radius 6, Medium 500 | Radius 4, 500 / 600 | Radius 4 | — | Consent tool settings |
| Prices | Brand rule: currency code first, "USD 350,066" | — | "$350,066" with a symbol | — | Product (content rule, not Figma) |
What this means for the studio
- The kit follows Figma. So a studio prototype can look slightly different from today's live page, mostly on WordPress pages. That's expected: the prototype shows how it should look.
- Biggest win for the dev team: point the WordPress theme's Bootstrap variables at the PLZ values (input border, grey text, card shadow, primary tint, heading sizes and line heights). That one change fixes most red cells above.
- Still to check in Figma: Display 1, 2, 3 and 5, H1, H2, the hero search box, the 12px radius, and button side padding.
- Not checked on the live site: forms and inputs on the portal and dashboard, mobile sizes, and hover and focus states.