Skip to content
heyrav design system
MediaShipped

Device frame

A phone with no bezel and no shadow - a 2px hairline on the device radius. The screen radius derives from it.

Used onPhone walkthroughEvidence reel
Torq app onboarding screen
Show code
<figure class="phone"><div class="screen"><img src="../assets/img/torq.webp" alt="Torq app onboarding screen" width="431" height="900" loading="lazy"></div><div class="pbar d-p40"><i></i></div></figure>
<figure class="phone"><div class="screen"><div class="wire"><i class="d-w-60"></i><i></i><i></i><i class="d-w-40"></i><i></i><i></i></div></div></figure>
  • One value moves the whole device: change --r-device and the screen follows via calc(var(--r-device) - 2px).
  • The side rail (.pbar) shows how far through the screen the reader has scrolled.
  • Short specimens fill with .wire bars so a screenshot never floats in an empty phone.
  • Type inside a mockup is the product's, not the system's - it is exempt from the 18px floor.