Rational Design is a tool for generating type-scales for use in design systems or web design projects. It’s built with React Hooks, SCSS, Webpack, and npm scripts, and is fully responsive.


Rational Design uses a combination of state and useRef Hooks to dynamically render type scales according to user input. This originally created some delays in state updating properly due to stale closures, but useRef solves this issue by returning the same ref value in memory during each rerender.


You can use the app from the browser live here, or to run and configure locally, follow these steps:

Fork and Clone Repo

Fork and clone the repo to your local machine:

git clone https://github.com/timmybytes/rational-design.git

cd into the repo, and install dependencies:

cd rational-design/
npm install


To start a development environment:

npm start


Feel free to submit a pull request if you want to add features or changes, though I would caution this app is still in early stages and I plan to greatly expand its current feature set.