Roller

Roller is the first ever Design Linter - giving you the power to automatically find and fix style inconsistencies in your files. Be confident every design you hand-off is 100% consistent with your Style Guide or Design System.

How to use Roller

1 - Import or add your styles to the Roller Library

2 - Roller then automatically finds any inconsistencies (Errors) on the page that don’t match what is in your Library

3 - Replace the Error with one of your Library’s styles

4 - Rinse & repeat to reach 100% consistency

Lint in the following categories

• Colors - Quickly fix the 50 (or 5,000) shades of gray that are lurking in your designs.

• Text - If a subtle line-height or letter-spacing is off, Roller will pick them up and get you back on system.

• Borders - Roller lets you add the width and colors of your borders - making it easy to find any rogue input field or card.

• Shadows - Roller gives you superhuman eyes - making it possible to detect subtle differences in shadow blurs or x, y offsets.

• Radiuses - Be confident that any button, card, input etc. has the correct border-radiuses applied.

Keep your team in-sync

Roller lets you store and share your Library with teammates. Make sure everyone on your team has up-to-date resources and styles when linting.