Proportional design systems with Proportio.app

Nate Baldwin
Bootcamp
Published in
4 min readMay 8, 2023
Proportio logo

It started with a design system request. Our design system team was asked to add a larger size option to our existing button component. After looking at the other sizes, we could extrapolate another size, but it got me curious… “how do all of the component sizes compare across our design system? Are there universal rules we should follow for sizing?”

Unfortunately, the answer was no. Some values were common, but nothing was consistent. There were no rules in place to help ensure cohesive sizing, spacing, and scale across our system.

Going back to basics

Great design is usually rooted in getting the fundamentals right. For many designers (like myself) typography is the most important fundamental element of design. We looked to our type scale to see how we could create proportional designs that scaled based on common ratios and methods.

Introducing Proportio

Proportio is a web application for designers to create the foundations of a proportional design system. You can explore typographic scales and how they can be applied to icons, sizing, spacing, and the composition of a component. With a proportional design system, component sizes and densities are a breeze.

Screen shot of Proportio.app user interface showing header bar with options Typography, Shape, and Components. Panel displays configuration options for typography and icons, with main content area displaying typographic and iconographic scales

Creating foundational systems

You start by defining your type scale, which will be used for much of the rest of your system. A base font size is used, along with a scale factor such as minor third (1:1.125). Every other font size is based on this ratio.

Base size, scale, size quantities, font, and font weight options for configuring type scale

Icons are automatically sized based on the type scale, since typography and icon pairing is a common and important element in design systems.

Icon paired with text of the same size, with a gap that is proportional and based on type scale

Text-to-icon spacing is proportional as well, based on the type scale. This ensures the spacing between them is relative and balanced. Similarly, you can create proportional sizing scales, radius scales, and even elevation (drop shadow) scales.

Spacing, radius, and elevation scales can be created with linear or power scales.

The component system

Here’s where things get really interesting.

Once you have our foundational systems, you can choose to use either our type scale or spacing scale to size our component padding and heights. The base (default) sized component uses your base type size (by default, 16px).

You can add smaller and larger sizes, which are generated in the UI based on increments in your selected scales.

Small, medium, large, and extra large components proportionally generated by type scale.

You can also add more or less dense options as well. Density is like size, although it only affects the padding and height of the component — text and icon sizes remain the same. These are also generated based on the your scales, and you can modify the rate at which your densities grow or shrink.

“Cozy” option for more dense components, generated based on scales.

You can toggle the component view to see how your component appears when there’s only text, only an icon, or both. You can also toggle a view to show the component’s specifications.

“Show component specs” view annotates all the measurements and parts of the component.

The container system

Just like the component system, Proportio allows you to create proportionally scaled containers.

For example, a popover could be a small container (small corner radius and padding). Larger containers like cards could have a larger corner radius and padding. Modal dialogs may be considered even larger containers and need the most padding and largest corner radius to look appropriate in an interface system.

Medium and large containers with padding from the spacing scale.

Using the same proportional systems, you can create containers with scaled padding, scaled radius, and even elevation (if you need).

Exporting values

Once you’ve created a system you want to use, they can be exported as Design Tokens (W3C draft format) or as CSS variables. This makes it easier to hand off your system to engineers.

Export options as W3C tokens (draft format) or CSS variables

Currently, there’s no way to pull these values directly into Figma 😔. So in its current state, it is more useful as a prototype for defining what you’d like to use in your system, rather than a true “design tool”. But with that said, this feature could be added if you feel so inclined, because Proportio is an open source tool.

Open source

Proportio is an open-source project. I’m a big believer in giving-back to the design systems community to help share or provoke new ideas so we can all grow together.

The tool is still in its infancy, but there are additional features in the works to help you make the best use out of Proportio for design and development.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: https://tinyurl.com/bootspub1

Nate Baldwin
Nate Baldwin

Written by Nate Baldwin

Design Systems @Adobe Spectrum. Intensity curious about color, visual perception, and the systemization of design.

Responses (5)

What are your thoughts?