Skip to main content

Title Design System

Consistency and rhythm are cornerstones of professional web design, and a well-engineered design system is essential to building layouts that look good and scale well over time.

Pulling magic numbers out of your ass thin air for spacing, colors, button styles, and typography is a quick path to mediocre design, but most page-builder controls (with their color pickers and number inputs) aren’t built with design system thinking in mind.

Enter AviatorUI.

Aviator UI

Aviator’s Business Class tier ships with a simple (yet thorough) design system that handles most of your front end needs.

The Aviator UI component library is built against it, and though you’re welcome to bring your own design system to the party, you can leverage AviatorUI to crank out responsive layouts with a few clicks:

Custom properties

AviatorUI’s design system is defined with CSS custom properties: entities that contain specific values which can be reused throughout a document.

They look like this:

:root {
	--docPadding: 5vw;
	--sectionPadding: calc(2rem + 7.5vw);
	--sectionGap: calc(2rem + 2.5vw);
}

These are AviatorUI’s spacing properties, used for establishing sources of truth for the horizontal, vertical, and ‘between stuff’ spacing values that professional layouts need.

With a semantic CSS approach, you can reference these variables using the var() function:

/* give .mysection a horizontal padding of --docPadding’s value, and a vertical padding of --sectionPadding’s value */
.mysection{
  padding:var(--docPadding) var(--sectionPadding);
}

With Aviator, you can include these properties directly in your HTML with a tidy shorthand:

<section class="padding-x:--docPadding padding-y:--sectionPadding">
  <!-- Your content in here -->
</section>

...or if you want to really slim things down, use the padding abbreviation (‘p’) and put both props in there (the underscore denotes a space):

<section class="p:--docPadding_--sectionPadding">
  <!-- Your content in here -->
</section>

Having these spacing values baked in to your components makes sure that you never have to worry about things like ‘content hitting the side of the viewport on smaller screens’ and other typical responsive design gotchas. Best practices are baked in to the system.

On this page