{"id":27184178,"url":"https://github.com/timmybytes/rational-design","last_synced_at":"2026-03-13T19:31:21.049Z","repository":{"id":40327635,"uuid":"324858770","full_name":"timmybytes/rational-design","owner":"timmybytes","description":"A tool for creating ratio-based style systems built in React.","archived":false,"fork":false,"pushed_at":"2023-03-08T17:09:21.000Z","size":12205,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T16:45:02.791Z","etag":null,"topics":["font-size","react","responsive-design","scss"],"latest_commit_sha":null,"homepage":"https://timmybytes.github.io/rational-design/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/timmybytes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-27T22:16:31.000Z","updated_at":"2022-11-16T17:19:01.000Z","dependencies_parsed_at":"2025-04-09T16:53:07.525Z","dependency_job_id":null,"html_url":"https://github.com/timmybytes/rational-design","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/timmybytes/rational-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmybytes%2Frational-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmybytes%2Frational-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmybytes%2Frational-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmybytes%2Frational-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timmybytes","download_url":"https://codeload.github.com/timmybytes/rational-design/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmybytes%2Frational-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30473289,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-13T17:15:31.527Z","status":"ssl_error","status_checked_at":"2026-03-13T17:15:22.394Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["font-size","react","responsive-design","scss"],"created_at":"2025-04-09T16:30:43.467Z","updated_at":"2026-03-13T19:31:21.027Z","avatar_url":"https://github.com/timmybytes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n\u003cimg src='./src/assets/rational-design-logo-card.svg' alt='Rational Design Logo'\u003e\n\u003c/h1\u003e\n\n\u003c!-- Badges --\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"GitHub last commit\" src=\"https://img.shields.io/github/last-commit/timmybytes/rational-design\" /\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003eA tool for ratio-based design\u003c/strong\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003csub\u003eBuilt with ❤︎ by\n  \u003ca href=\"https://timmybytes.com\"\u003eTimothy Merritt\u003c/a\u003e\n\u003c/div\u003e\n\nRational Design is a tool for generating type-scales for greater consistency in\ndesign systems or web design projects. It’s built with React Hooks, SCSS,\nWebpack, and npm scripts, and is fully responsive.\n\n## About\n\nDesign systems often use a set mathematical ratio in how elements of different\nsizes relate to one another, particularly with the use of type. Rational Design\nlet's you demo various type scales based on classical geometric and musical\nratios. These scales can then be applied to your own projects via a CSS, SCSS,\nor JSON copy-to-clipboard function, ensuring your project has an underlying\nguide for scaling consistency.\n\n## Usage\n\n### Web App\n\nUse the [live web app](https://timmybytes.github.io/rational-design/) to create\na ratio-based type scale. You can click the **info button** in the app for more\ndetails. Play around with the settings to generate different scales.\n\n\u003cimg src='./src/assets/readme-1.png' alt='Rational Design - Info button display'\u003e\n\n#### Select a ratio\n\nChoose a ratio from the dropdown menu to define the increments of your scale.\nThe ratios included come from musical-based ratios, as well as Orthagon ratios.\nYou can\n[read more about using ratios in your layouts and designs here](https://alistapart.com/article/content-out-layout/).\n\n\u003cimg src='./src/assets/readme-2.png' alt='Rational Design - Ratio'\u003e\n\u003cimg src='./src/assets/readme-3.png' alt='Rational Design - ratios'\u003e\n\n#### Choose a base size\n\nChoose a base font size (in pixels). The rest of your scale will be calculated\nstarting from this number by applying your chosen ratio to each increment.\n\n\u003cimg src='./src/assets/readme-4.png' alt='Rational Design - base size'\u003e\n\n#### Choose a scale\n\nThe **scale** determines how many ratio increments the app should output. The\ndefault is 3, but you can go up to 99.\n\n\u003cimg src='./src/assets/readme-5.png' alt='Rational Design - scale'\u003e\n\n#### Chose colors\n\nA color chooser is incorporated into Rational Design as well. Use the color\npairings to see your type scale in different color contrasts.\n\n\u003cimg src='./src/assets/readme-colors.png' alt='Rational Design - color palette display'\u003e\n\n#### Copy your type scale\n\nThe settings you create can be copied as SCSS, CSS, or JSON data, and pasted\nright into your project. You can use the resulting increments as a system for\nconsistency in your projects:\n\n\u003cimg src='./src/assets/readme-7.png' alt='Rational Design - copy button'\u003e\n\n##### Copied settings as SCSS variables\n\n```scss\n// Color Variables\n$foreground: #444444;\n$background: #8bbbff;\n\n// Type-Scale Variables\n$base-font-size: 12px;\n$ratio: 1.118;\n$size-1: 12px;\n$size-2: 13.42px;\n$size-3: 15px;\n```\n\n#### Hide settings\n\nYou can also hide the settings panel altogether by clicking the **hide** button.\n\n\u003cimg src='./src/assets/readme-6.png' alt='Rational Design - hide settings'\u003e\n\n---\n\n### Local Development\n\nTo run and configure locally, follow these steps:\n\n#### Fork and Clone Repo\n\nFork and clone the repo to your local machine:\n\n```sh\ngit clone https://github.com/timmybytes/rational-design.git\n```\n\n`cd` into the repo, and install dependencies:\n\n```sh\ncd rational-design/\nnpm install\n```\n\n#### Development\n\nTo start a development environment:\n\n```sh\nnpm start\n```\n\n## Contributing\n\nFeel free to submit a pull request if you want to add features or changes.\n\n## License\n\nRational Design is available under the [MIT license](./LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimmybytes%2Frational-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimmybytes%2Frational-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimmybytes%2Frational-design/lists"}