Type Scale, Spacing and SVG Shape Generators
Tools for the building blocks of a design system: a consistent scale of font sizes, a spacing scale and font pairings, plus SVG shapes for headers, backgrounds and dividers.
Each tool gives you CSS or SVG code to copy, with the values listed so you can reuse them.
SVG Wave GeneratorMake a wave divider as SVG, with smooth or rough edges, and copy it as SVG or as a CSS background.SVG Blob GeneratorCreate organic blob shapes as SVG paths, repeatable from a seed, and copy the code.Font Pairing PreviewerCompare heading and body font stacks that are already on most computers, then copy the CSS.Type Scale GeneratorBuild a modular type scale from a base size and ratio, with pixel and rem sizes and CSS variables.Spacing Scale GeneratorTurn a base unit into a spacing scale in px and rem, as straight steps, doubling or Fibonacci.SVG Path VisualiserPaste path data to see the shape, its points and curve handles, and get a tidy absolute version.
No tool matches that. Try a shorter word.