UI/UX Tools
Design-system tools: design tokens, spacing/radius/shadow scales, layout grid calculator, responsive breakpoints and device preview.
Design Token Generator
Generate a complete starter token set — colors, spacing, radii, shadows — as CSS variables and JSON.…
Spacing Scale Generator
Build a consistent spacing scale — linear, geometric or Fibonacci — with visual preview and CSS variables.…
Border Radius Scale
Generate a coherent border-radius scale for your design system with live shape previews.…
Shadow Scale Generator
Generate an elevation shadow scale — consistent depth steps as CSS variables.…
Layout Grid Calculator
Calculate column widths for any container, column count, gutter and margin — with CSS grid code.…
Responsive Breakpoint Generator
Standard responsive breakpoints with ready-to-copy mobile-first media queries and SCSS variables.…
Responsive Device Preview
Preview any URL in phone, tablet and desktop viewport sizes side by side.…