Tools
Twenty small instruments for the decisions you make every day.
Contrast ratios, type scales, colour ramps, z-index plans, breakpoints. 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
- 12Color Ramp GeneratorAn OKLCH ramp from one brand colour, saved into the shared token schema with contrast metadata.Colour
- 13Z-Index PlanerA documented, conflict-free z-index scale as named tokens, not arbitrary numbers.Layout
- 14Breakpoint PlanerResponsive breakpoint tokens with a live device-frame preview of how the layout reflows.Layout
- 15Icon Grid CheckerCheck SVG icons against a keyline grid for stroke-width, viewBox and optical consistency.Assets
- 16Focus Ring GeneratorAccessible focus-ring styles from your token schema colours, contrast-checked on the spot.Colour
- 17Dark Mode Flip PreviewerPreview your own light-mode tokens flipped to dark, with contrast validation per pair.Colour
- 18Empty State GeneratorMicrocopy and layout templates for empty states — no-data, error, first-use — as editable component snippets.Content
- 19Design System Maturity CheckA 24-question self-assessment across documentation, versioning, governance and adoption. Scores four dimensions and returns next steps for the level you reached.Governance
- 20Screenreader EmpathyPaste HTML and hear what a screen reader would announce, node by node. Reading order, heading outline, landmark map and deterministic issue flags — nothing leaves the browser.Accessibility
Everything here runs on your machine, including the parts that look like a service.