Styles Debugger
Use this page to minimize styling iterations. It shows your active tokens, typography scale, spacing rhythm, and responsive breakpoints. You can also enable overlays globally via ?debugStyles=1.
Quick toggles
When enabled, you can add overlays: outlines, grid, spacing markers. These are controlled by localStorage and can be toggled in the panel below.
Overlays
Tip: open a real page in another tab and keep this page open. Toggles persist and apply instantly after reload.
Color tokens
Typography scale
The World of Beauty, Quantified.
Explore the directory
Featured pageants
Body text uses an optimized sans stack with readable line-height. This demo helps you compare Figma vs implementation.
Small text for metadata, captions, and helper labels.
Spacing rhythm
Responsive breakpoints
Resize your browser. The HUD pill updates automatically when debug mode is enabled.
xs
0–479px
sm
480–767px
md
768–1023px
lg
1024–1279px
xl
1280px+