Construct

Construct is a starter file for wireframe design systems.

It combines a strict, grid-based structure with a brutalist aesthetic to help you create professional yet unmistakably disposable wireframe designs.

What you get: an 8-point layout grid, basic fills and type styles, along with a set of crude line icons and input controls. Use them as the building blocks for your own wireframe design system.

Getting started

To get started duplicate the Construct file available on Figma Community.

Layout

Includes frames for the following viewport widths:

360px
768px
1280px
1440px

Frames are configured with an 8-point layout grid and a 4-point baseline grid:

360px
- columns: 4 @ 60px
- margins: 24px
- gutters: 24px
768px
- columns: 8 @ 76px
- margins: 24px
- gutters: 16px
1280px
- columns: 12 @ 88px
- margins: 24px
- gutters: 16px
1440px
- columns: 12 @ 80px
- margins: 64px
- gutters: 32px

Colors

There are 10 background fills: 6 achromatic grayscale shades (including white) and 4 basic hues (red, blue, green, and yellow) for additional contrast and visibility.

$hue-red: #FF0000;
$hue-green: #008000;
$hue-blue: #0000FF;
$hue-yellow: #FFFF00;
$grayscale-000: #FFFFFF;
$grayscale-080: #EAEAEA;
$grayscale-200: #CCCCCC;
$grayscale-400: #999999;
$grayscale-600: #666666;
$grayscale-800: #333333;

Typography

Base font size set to 16px, line height of 1.5 and scale factor of 1.618.

body {
  font-family: Roboto Mono;
  font-size: 16px;
  line-height: 24px;
}

h1 {
  font-size: 68px;
  line-height: 72px;
  margin-top: 24px;
  margin-bottom: 48px;
}

h2 {
  font-size: 42px;
  line-height: 48px;
  margin-top: 24px;
  margin-bottom: 24px;
}

h3 {
  font-size: 26px;
  line-height: 48px;
  margin-top: 24px;
  margin-bottom: 0px;
}

h4 {
  font-size: 16px;
  line-height: 24px;
  margin-top: 24px;
  margin-bottom: 0px;
  text-transform: uppercase;
}

License

Construct is available under Creative Commons Attribution 4.0 International license. Please link back to the source when you share and / or adapt any of the contents.

piotrbakker / construct