Tools

Utilities and generators to supercharge your design engineering workflow.

Animation & Motion

Create smooth, physics-based animations for web and mobile.

Visualise and generate spring animations for Motion, CSS, SwiftUI, and Android.

Create custom cubic-bezier curves for smooth CSS and Motion transitions.

Tools for colours, shadows, gradients, and visual properties.

Create linear, radial, and conic gradients with export for CSS, Tailwind, SwiftUI, and Android.

Design shadows and export for CSS, Tailwind, SwiftUI, Android, and React Native.

Convert colours between HEX, RGB, HSL, OKLCH, SwiftUI, and Android formats.

Calculate dimensions and generate aspect-ratio code for CSS, Tailwind, SwiftUI, and Android.

Compare grey borders vs semi-transparent borders on colourful backgrounds.

Learn how blend modes work and experiment with stacking them for beautiful effects.

Calculate harmonious nested corner radii for optically perfect UI components.

Build consistent, scalable design foundations.

Generate harmonious colour scales from any colour using perceptually uniform OKLCH.

Generate harmonious typography and spacing scales for Tailwind v4, CSS, or SCSS.

Build consistent semantic token names with auto-generated variants and states.

Tools for building accessible, platform-native experiences.

Validate touch target sizes against iOS, Android, and WCAG accessibility guidelines.

Reference guide for all required app icon dimensions across iOS, Android, macOS, and web.

Convert and validate your code across frameworks.

Convert component syntax between React, Vue, Svelte, Astro, and Solid.

Intelligent tools to accelerate your workflow.

Generate customised design engineering tasks and practice scenarios with AI.

AI-powered analysis of your components for accessibility and contrast issues.