Safari adds design tokens syncing and advanced CSS inspector for front-end designers

Design · 4 min read

Safari's Web Inspector now surfaces design tokens as a first-class concept, showing token values alongside computed styles and enabling live overrides. Teams can link design token repositories hosted in Apple Cloud or external git endpoints so browser previews reflect the same primitives used in design files.

The update also improves the container query inspector with visual overlays and a timeline that shows layout shifts when queries activate or deactivate. Developers can toggle token-aware viewports to emulate typography scales and color modes driven by design systems.

Apple showcased examples of component-driven workflows where designers adjust tokens in a design tool and see those changes propagate to Safari previews, minimizing handoff friction. The changes are pitched as small but meaningful steps toward tighter browser-to-design fidelity for modern responsive and component-based UI.