A Framer and Figma Design System that helps individuals and organisations Scale

A new level of confidence and speed

Scale comes with industry standard foundations and components that help you create more consistent products, faster.

For Framer For Figma

56 Components. 8,368 possibilities

Web components, properties and variants with thousands of combinations.

120 Styles & Variables

Semantic color and type styles.

288 Icons

Feather icons and custom status icons.

15 Content Modules. 8,117 possibilities

Hero, Feature, Social, Pricing, CTA and FAQ.

Global Semantic Color

Use color in a meaningful way across your projects, toggle automatically between Light and Dark modes and watch updates ripple across every screen instantly.

Responsive Typography

Perfect hierarchy, zero math. Our t-shirt sized type scale uses fluid responsiveness to adapt flawlessly from Desktop to Mobile. No manual breakpoint tweaks required.

Smart Component Library

Don't build from scratch, just configure. Access a robust library pre-wired with variants, variables and properties. Simply drag, drop, and toggle the props to match your needs.

Adaptive Section Blocks

Drag-and-drop sections that instantly inherit your global theme and resize perfectly for every device. Edit the master component once, and see it update everywhere.

Launch-Ready Templates

Skip "blank canvas" paralysis. Start with professional page structures. Mix sections, apply your brand, and finish your site in a fraction of the time.

118 Components. 41,942 possibilities

Web and App components, Properties and Variants with thousands of possibilities.

720 Variables & Styles

Semantic Color and Type Variables, Spacing, Border and Elevation.

936 Icons

Feather and status icons at 16, 24, and 32px.

22 Sections. 14,636 possibilities

Responsive Hero, Feature, Logo, Pricing, CTA, FAQ and Carousel modules.

Liquid Glass Components

Design for Apple's latest operating system with 14 new Liquid Glass components. Use custom icons instead of Apple's SF Symbols.

Color Variable Picker

Scale's first Figma plugin. Helps you find the right semantic color variable when designing. Learn Scale's semantic spec as you go.

Global Semantic Color

Use color in a meaningful way across your projects, toggle automatically between Light and Dark modes and watch updates ripple across every screen instantly.

Responsive Typography

Perfect hierarchy, zero math. Our t-shirt sized type scale uses fluid responsiveness to adapt flawlessly from Desktop to Mobile. No manual breakpoint tweaks required.

Smart Component Library

Don't build from scratch, just configure. Access a robust library pre-wired with variants, variables and properties. Simply drag, drop, and toggle the props to match your needs.

Adaptive Section Blocks

Drag-and-drop sections that instantly inherit your global theme and resize perfectly for every device. Edit the master component once, and see it update everywhere.

Launch-Ready Templates

Skip "blank canvas" paralysis. Start with professional page structures. Mix sections, apply your brand, and finish your site in a fraction of the time.

Pricing

Pay once and get a lifetime of updates. This section is an example of a "Detached" Section component.

Figma $49 For designers who live in Figma. Figma file Lifetime updates Unlimited projects Semantic foundations Component library Section components Page templates Light and dark mode Currency: USD Buy Now Framer $99 For Framer creators and builders. Framer remix link Lifetime updates Unlimited projects Semantic foundations Component library Section components Page templates Light and dark mode Currency: USD Buy Now Everything $129 Design and build for a bundled price. Framer and Figma files Lifetime updates Unlimited projects Semantic foundations Component library Section components Page templates Light and dark mode Currency: USD Buy Now

FAQ

Everything you need to know about 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. 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. Exactly what it says. You only have to pay once and every update that Scale gets, you receive for free.
Sign up for updates Stay up to date with releases and other related Scale news. Subscribe