Dark mode

Preview in FigmaBuy now

A Figma design system that helps individuals and organisations Scale.

v1.8.0 Changelog

Pick up a licence and help my Wife fight cancer 💪.

331 Tokens

Light and Dark mode themes. Web, iOS and Android type-faces, effect styles and layout grids.

70 Components^

From Buttons, Input fields to Nav and Tab Bars. With Auto Layout and Figma Properties.

278 Icons

Scale comes with a baseline set, then teaches you how to create your own so you only ever have what you need.

2 Free UI Kits

See what's possible with Scale.Chat and Scale.madewithscale

^Other design systems count properties or variants in their component counts, Scale doesn’t. A Button is a single component, even if you can create 100 versions of it.

Switch modes and type-faces automagically

Automatic light to dark mode and web, iOS and android type-face switching with one set of components 🤘

Powered by Semantic Tokens and the Themer plugin.

Saving the world with Semantic Tokens

Also known as design tokens, represent the role that each color plays in the interface

  • Simplify the application of color in your designs
  • Speak the same language as your developers
  • Design with more confidence
  • Reduce design and development debt

Properties, Nested Instances, Variants, they're all here

Save design time with components that come with properties and nested instances

  • Select a component, dial up the outcome you want, swap nested instances, its that easy
  • Gain 1:1 parity with your developers with properties that match what you’ll use in code

321 Tokens

Light and Dark mode themes. Web, iOS and Android type-faces and effect styles.

69 Components

From Buttons, Input fields to Nav and Tab Bars. With Auto Layout and Properties.

Text styles

T-shirt sized text styles for Web, iOS and Android.

6 Layout Grids

For Web, Tablet and App.

296 Icons

Scale comes with a baseline set of 284 icons.

Made with Scale

See what’s possible with free UI Kits

Scale.
Chat

  • Automatic mode and type-face switching
  • 40+ screens, with new ones added soon
  • iPhone 14 Pro size with Auto Layout
  • Components with Figma Properties
Grab from Figma

Scale.
madewithscale

  • App designs that show what you can design with Scale Design System
  • Twitter, Youtube with more to come
  • Automatic Light to Dark mode and Web/iOS/Android type-face switchingˆ
Grab from Figma

Made with Scale

See what’s possible with free UI Kits

Scale.Chat

  • Automatic mode and type-face switching
  • 40+ screens, with new ones added soon
  • iPhone 14 Pro size with Auto Layout
  • Components with Figma Properties
Grab from Figma

Pricing

Pay once and get a lifetime of updates

Solo

$50

Single licence for solo designers, freelancers or engineers.

Figma file

Lifetime updates

Unlimited projects

Automatic theme switching

Automatic type-face switching

Design Tokens

Component Properties

Currency: USD

Size: 26mb

Buy now

Team

$150

Up to 5 licences for teams, organisations and agencies.

Figma file

Lifetime updates

Unlimited projects

Automatic theme switching

Automatic type-face switching

Design Tokens

Component Properties

Currency: USD

Size: 26mb

Buy now

FAQ

Everything you need to know about Scale

Pick up a licence, and help my my Wife fight cancer

All proceeds of Scale licence sales go towards my Wife's cancer treatment. She's fighting stage 4 breast and lung cancer and we need all the help we can get. It's not just a design system you're buying, you're also supporting my family so we can support her.

Why Scale?

Scale takes everything I’ve learnt from creating and contributing to design systems over the last 10 years, and brings it together in a way that keeps things simple, reduces complexity, enables theme switching through semantic tokens and does so in a direct and pragmatic way.

Is dark mode really included?

Yes. Other Figma design systems either don't provide a dark mode or create dark mode variants of each component. Scale, allows you to switch between light and dark modes automatically with one set of components.

What does lifetime updates mean?

Exactly what is says. You only have to pay once and every update that Scale gets, you receive for free.

Will Scale work with Figma’s Free tier?

Complete libraries inside Figma can only be published inside a team, which is a limitation of Figma, not Scale. If you are planning on using Scale as an external library, consider the following: If you are on a free plan, you will only be able to publish Scale’s styles. If you would also like to use Scale’s components, you will need to upgrade to a paid plan.

Can I get a refund?

Currently, Scale is a non-refundable asset. Once you purchase it and download it, its yours to use within the limitations of this licence agreement. Please keep this in mind and feel free to preview Scale before purchasing.