rational design

a type-scale generator

Introduction

The Rational Design app was a project I created for generating ratio-based type-scales for development projects. The user chooses from a range of ratios based in classical geometry and music, a base size, and number of entries to render, and is shown a resulting list of incrementally sized text for reference. Background/foreground colors can also be configured to add to a consistent theme of colors and sizes. Once the user is satisfied with their settings, the data can be copied to the clipboard in a range of formats that can easily be integrated into an existing project.

Rational Design screenshot
Ratioanl Design screenshot
Rational Design screenshot

Click to enlarge

purpose & goal

I’m very interested in design and design tooling, and while there exist well-developed sources for building type-scales, color themes, etc., I wanted to attempt to make one on my own, both for the challenge and to hopefully be useful to someone with the particular use cases Rational Design fills.

My goal was to eventually build an all-in-one application that could handle type scales, font choices, colors, and other configurations to use as a framework for consistent designs.

spotlight

Rational Design includes a simple way to copy a given set of settings to the clipboard in JSON, CSS, and SCSS, and this I find to be its most useful feature. Each time settings are changed, state updates record the current values. When copied, these are mapped to key-value pairs in JSON or as variables in CSS and SCSS for easy reuse throughout an application.

status

While Rational Design is not currently being maintained, I do hope to add more features to it in the future when I have more time.

lessons learned

I learned a lot about React state changes when building this app. Initially I struggled to get the settings panel and results text to update together, until I researched more on stale closures and state changes. This was remedied by implementing functional state changes (e.g., setState(actualValue => newValue)), which solved the issue of stale updates.

Creating a ‘click to copy’ function also proved to be a challenge, and initially I wanted to build a solution entirely from scratch. However, I quickly realized there was a lot of value in simply integrating a library that could do what I needed, with the lesson being “don’t reinvent the wheel”. This has proved to be a great maxim ever since, and often if I get frustrated or stuck on a particular issue, I try to change my approach in favor of a simpler, cleaner solution.

back to home