Skip to content
A grid-based wireframe system for Sketch and Figma.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Starter file for wireframe design systems.

Getting started

Grab the Sketch or Figma files in order to get started.

Artboards / Frames

Includes four artboards / frames:

  • 360px
  • 768px
  • 1280px
  • 1440px


Follows an 8px grid with a 4px baseline grid.

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


Includes five shades of gray + white used as default background fills as well as four basic hues (red, blue, green, and yellow) for additional contrast and visibility.

$color-red: #FF0000;
$color-green: #008000;
$color-blue: #0000FF;
$color-yellow: #FFFF00;
$color-white: #FFFFFF;
$color-gray-10: #EEEEEE;
$color-gray-20: #BDBDBD;
$color-gray-60: #757575;
$color-gray-80: #424242;
$color-gray-90: #212121;


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

body {
  font-family: Menlo, Fira Code, monospace;
  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;
You can’t perform that action at this time.