OMNI BY CANVS
Lightning fast
design systems
Generate colour, type, spacing, elevation and grids as a real token system, in light and dark. Export to Figma or hand it to your agent.
Say what you're building once. Website, dashboard, iOS or Android. Colour, type and grids all take their cue from it, so you start from something that already fits instead of a generic set you have to talk down to size.
A powerful colour generator that ships as tokens instead of hexes
One brand colour in. Primitives, semantic tokens and both modes out.
11 steps (50–950) for websites and mobile, 16 (1–16) for dashboards, resampled from the same curves.
Based on the archetype, the tokens are generated automatically, with the ability to override in place.
Every pairing, on APCA or WCAG 2, with a threshold filter. Override a token from the preview and it reaches all six export formats
Preview for web, dashboards, mobile, components and more in one place. Change and modify colours or tokens in place.
Out-of-gamut colours lose chroma and keep their hue. RGB clipping shifts a blue by 20° at step 50. Your hex stays pinned in the ramp.
Typescales, built with all the nuances a product carries
Pick a base size and a ratio. Everything underneath is already handled.
Steps according to your project
Typescale steps are preset according to your project's archetype, it will automatically add the required steps to your typescale.
Native sizes on native
Apple's eleven text styles in points, Material's fifteen roles in sp. The real specs, not a web scale in disguise.
Snap line heights with ease
Display sits tight, body opens out, and tracking adjusts with size. Everything lands on whole units.
Set how far the scale steps down on smaller screens and all three generate together. Exports as Figma modes for ease of use.
Weights named, not numbered
Choose the weights each size actually uses and they arrive as regular, medium or semibold.
Spacing, elevation and grids in the same pass
Three more foundations, generated from the same project settings.
Realistic grids, for all sizes
Sidebars, insets and content caps come out before columns divide, so the widths you see are the real ones.
Pick and modify elevations
Seven shadow scales to start from, borrowed from the systems you already know. Layered, tintable, fully editable.
Spacing with a base unit behind it
Every value traces back to one number, so the rhythm holds instead of being decided per component.
Export everything at once into Figma or your agent.
Into Figma
Everything arrives as proper variables and styles, light and dark included, ready to apply. Run it again any time and it updates in place.
Into your agent
Hand the full system to Claude, Cursor or whatever you build in, so it works from your actual tokens instead of guessing at them.
Into code
Standard token files, CSS or Tailwind, with dark mode already handled.
