Designing with Ratio

Programming design

It’s about the relationships, the boundaries, the extremes, and everything in between.

Introducing: Ratio

Ratio equips designers with the same tools and concepts that developers use to implement complex design systems. Take creative control over typography, color, time and space by using variables, scales and functions. By appreciating the abstract and rationale, designers get the chance to explore more and worry less. Discovery instead of pixel pushing.

The power of CSS

  • % — a fraction of the element’s parent’s width
  • em — a size relative to the element’s font size
  • rem — a size relative to the root element’s font size
  • vh — a fraction of the viewport’s height
  • vw — a fraction of the viewport’s width
  • vmax — the larger value of either the width or height of the viewport

Auto-complete for design

Box-shadow design tokens within the CSS inspector.

Design tokens

The library shown design tokens for various properties. Shown here are colors.

Fluid Typography

Setting up modular Scales in Ratio that can help with responsive typography. Font sizes can scale fluidly and you can control a whole layout by adjusting a few settings and ratios.

Inspectors in Ratio

Color Canvas

The canvas shows a base color (blue), a hue-shifted color (yellow) and a darker blue color used for the card on the bottom.
Initial concept of showing color relationships between palettes. The UI for creating this inside Ratio today (screenshot above) looks different, but the concept remains the same.

Driver Inspector

The driver inspector shows the change of values across breakpoints, time, scroll position and other variable inputs.

CSS Inspector

Style Dial

The style dial controls the line height, font size and font weight by scrolling up/down. Using the mouse to change values and keyboard to switch between properties is a fluid and precise way to control numeric values.

Extensibility

Meodai’s harmonious color palette generator in sync with Ratio.

A broader understanding of code

The future of Ratio

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Florian Schulz

Florian Schulz

2.5K Followers

Pushing boundaries, not pixels. I make design tools, apps & bagels. Previously @ginettateam. Studied @idpotsdam. Former Intern @Behance, NYC.