Design Handoff with Raval

Stop guessing whether the build matches the spec. Raval gives designers and developers a shared way to verify spacing and alignment on the real page.

After handoff

The design file says 16px padding and 24px gap between cards. The implementation looks close, but is it right? Instead of inspecting each element in DevTools or taking screenshots into a desktop ruler app, open Raval directly on the staging URL.

What to check

Use Inspect mode (1) to hover over any element and see its exact width × height. Click it to confirm its margin, padding, and border values. In Measure mode (2), click two components to see the pixel distance between them — copy the value with one click.

Place alignment guides (3) along key vertical rhythm lines to check that headings, icons, and columns share the same horizontal alignment. Click text or an element in Inspect mode to verify its fills, text colours, and type settings match the palette.

Share findings

Export a screenshot (S) with measurements overlaid and attach it to your review comment. Extract design tokens (D) to compare CSS custom properties against your token file. Everything runs in the browser — no account, no uploads, no leaving the page.

Related

Developers doing pre-ship checks should read the frontend QA guide. Coming from a desktop tool? Compare Raval with PixelSnap.

Install Raval (opens in new tab), or view the source on GitHub (opens in new tab).