Tools
Eleven small instruments for the decisions you make every day.
Contrast ratios, type scales, easing curves. The unglamorous arithmetic behind a design system, done properly and done in the browser. Nothing is uploaded, nothing is stored, and every result is one click from your clipboard.
The set
- 01Contrast CheckerWCAG contrast between two colours, with the Vantra palette available as presets.Colour
- 02Aspect Ratio CalculatorRatio to dimension, dimension to ratio, and proportional resize.Layout
- 03Font Pairing StudioCurated typeface combinations, previewed as real editorial spreads.Type
- 04Modular Type ScaleA fluid or static typographic scale, as a specimen page. Emits clamp() per step.Type
- 05Spacing Scale GeneratorTen spacing tokens on a 4pt or 8pt grid, fluid or static, drawn to proportion.Layout
- 06Shade & Tint GeneratorA ten-step colour ramp from one hex value, contrast-checked at every step.Colour
- 07Easing Curve VisualizerA cubic-bezier editor with a live preview and a keyboard-driven curve.Motion
- 08Unit Converterpx, rem, em and pt, converted live against an adjustable root font size.Units
- 09Radius & Shadow PlaygroundLayered box-shadow and border-radius, previewed on a real content card.Layout
- 10CSS clamp() CalculatorOne fluid value for a one-off size, with a viewport simulator to prove it.Units
- 11Grid & Flex BuilderA visual grid and flex builder with subgrid, emitting plain CSS or Tailwind v4 classes.Layout
Everything here runs on your machine, including the parts that look like a service.