docs/index.html - master - githubmirror/Awesome-Design-Tools

docs/index.html
13 616 строк2 MB
website production update
20 фев 2020, 20:47
20 фев 2020, 20:476060561
<html><head>
            <title>Awesome Design Tools</title>
            
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="theme-color" content="#0054d7">
        <meta name="description" content="The best design tools for everything — from wireframing and prototyping to animation, accessibility, AR, design systems and sound design.">
        <meta name="image" content="https://flawlessapp.io/images/designtools/awesome-design-tools-sharable-image-general.png">
        <!-- Schema.org for Google -->
        <meta itemprop="name" content="Awesome Design Tools">
        <meta itemprop="description" content="The best design tools for everything — from wireframing and prototyping to animation, accessibility, AR, design systems and sound design.">
        <meta itemprop="image" content="https://flawlessapp.io/images/designtools/awesome-design-tools-sharable-image-general.png">
        <!-- Twitter -->
        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="Awesome Design Tools">
        <meta name="twitter:description" content="The best design tools for everything — from wireframing and prototyping to animation, accessibility, AR, design systems and sound design.">
        <meta name="twitter:site" content="https://flawlessapp.io/designtools">
        <meta name="twitter:creator" content="@flawlessappio">
        <!-- Open Graph general (Facebook, Pinterest & Google+) -->
        <meta name="og:title" content="Awesome Design Tools">
        <meta name="og:description" content="The best design tools for everything — from wireframing and prototyping to animation, accessibility, AR, design systems and sound design.">
        <meta name="og:image" content="https://flawlessapp.io/images/designtools/awesome-design-tools-sharable-image-general.png">
        <meta name="og:url" content="https://flawlessapp.io/designtools">
        <meta name="og:site_name" content="Awesome Design Tools">
        <meta name="fb:admins" content="1685880598347240">
        <meta name="og:type" content="website">
    
            
        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAADECAYAAADApo5rAAAAAXNSR0IArs4c6QAAQABJREFUeAHs3Vmsblt2F/Zv77PPOffe6l0N5abcgcExjsAONo3hISF2gCCIhKsUYZ … [Строка слишком длинная. Вы можете скачать файл]
        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAQABJREFUeAHsvVusbdlZ5zf33ufU/V4uGxsbjKGhAQEmtmkDSRTyEIWolRYR0Em6hY … [Строка слишком длинная. Вы можете скачать файл]
        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAAXNSR0IArs4c6QAAMLpJREFUeAHtnVmspGeZ379aTnfb3e1ub2MbvGAbs9gTyzCBxEBEoslNNCIzN3YYEU … [Строка слишком длинная. Вы можете скачать файл]
        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAApVJREFUOBE1UztPVEEU/mbm3t3l4WZXkLWAxFdCYqKRGKMFpbGgsbEhJlT+ADt/kbG0o7SxMGIBMRZaiBLBiLIQL8Lex8wcvzMLk8zcu+ee73HOmTU4W1eef+s1Epdh7bxxaEFg6guT1clct4CzQA4xzjW5dfuui62Dx+ZYoUaPl8/+rnwdjV5tlMPutj8BwfySDhzdmEVxdRYms2QwMM7A5q5A5laLp9m6WVvbnXko09vRx64Q86sp8aYa4oeMxvSU+LO0gHIwheSEJJZkJCxavda89R4roY7d2AhiFTEXcjzBANf9FKIHQg1c3NyDK2qIj0BkHp8qGArcsfByLZQBsWaQO5DEkOxR7AONTSQyEvQ//GR8TKAkStbEMLDSxI6o+hnB+Xu7MejXOQksAp3YYYXJL4eQENMG67WhzrlhEpgkQpK0qRTpygeW4NWyQQwG7e//UgnqAEEQmmgyrSeBGEs1cgBC4Ckb8Nv61HmwcWk0p/zNfKNj1VExnqklbaBaElVTdr5/lBI+I3CcR4CBn+mMHXDEzEyjzWLJGC2n2tgjxhWP97YaNzARkMgKTha7yboIk+jCNAGZNjQRUF3VImv7LDUOcyaxFGM4CToe3Z1B6LUSAWUYV7eQTCqUOn9Vjowo6J2r2KCUBXQsRg96kFmCWT94E3mVxlZt3mQc43ZkslBZSfbIsGP4Iux8L0N1fxqYcjD6/XylHghyJ/tZ1p5Yx1FZRC9dLeGtaXi3aGShBb80AZNTUetUdmqr+riBrmhLtWVfb8wPpTarUkuxW3l8onpzcwL+dofJXFTWBp/PPj2jFDbK6sGLS8cpR/OWb+30Ny+He80APXT4h87T8FkzP+Y8LMfgbGOd25/umS0FK+4/VM2rXnab9ZIAAAAASUVORK5CYII=" sizes="16x16">
        <link rel="icon" type="image/png" href="data:image/png;base64,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" sizes="32x32">
        <link rel="apple-touch-icon" sizes="57x57" href="data:image/png;base64,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">
        <link rel="apple-touch-icon" sizes="114x114" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHIAAAByCAYAAACP3YV9AAAAAXNSR0IArs4c6QAAQABJREFUeAHtnXuspWd13r+99zlzn7FnxmOPDQEGLDC4SUko1zit2oo … [Строка слишком длинная. Вы можете скачать файл]
        <link rel="apple-touch-icon" sizes="72x72" href="data:image/png;base64,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">
        <link rel="apple-touch-icon" sizes="144x144" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAAAXNSR0IArs4c6QAAQABJREFUeAHsvVmwrelZ3/ft4fTpPj2rWy0JSUySQdiyLWOQCDJxhVz … [Строка слишком длинная. Вы можете скачать файл]
        <link rel="apple-touch-icon" sizes="60x60" href="data:image/png;base64,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">
        <link rel="apple-touch-icon" sizes="120x120" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAAAXNSR0IArs4c6QAAQABJREFUeAHtnX2sbGd13vfMnHvuh++1ff3tmItNDC7GEJJATSIqWqm … [Строка слишком длинная. Вы можете скачать файл]
        <link rel="apple-touch-icon" sizes="76x76" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAYAAADHl1ErAAAAAXNSR0IArs4c6QAAHwFJREFUeAHtnFusnFd1x/dcfI59fLdzaQg4BAeaBkpEMBSiSs1DhVT1p … [Строка слишком длинная. Вы можете скачать файл]
        <link rel="apple-touch-icon" sizes="152x152" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYCAYAAAAYwiAhAAAAAXNSR0IArs4c6QAAQABJREFUeAHsvVmwrelZ3/ftvc/p06cHSd1SC7XUkhFBFmZUJAQIiBG … [Строка слишком длинная. Вы можете скачать файл]
    
            
        <style>
            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
            :root {
  --black: #1b1c26;
  --blue: #0054d7;
  --gray: #e6e6e6;
  --light-brown: #faac52;
  --light-blue: #c5e8fa;
  --orange: #facb5c;
  --yellow: #fade3e;
  --skin: #faf0b9;
  --swamp: #9f8d29;
  --green: #028930;
  --sim-green: #008730;
  --mint: #a7f5ce;
  --feedback--bg: #ffffed;
  --feedback--btn: #ffbb44;
  --violet: #850289;
}

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

a::selection,
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
input::selection,
label::selection,
li::selection,
p::selection,
span::selection,
strong::selection,
div::selection {
  background-color: var(--light-blue);
}

/* html {
  scroll-behavior: smooth;
} */

#addendum a:nth-child(3) {
  color: inherit;
  cursor: default;
  text-decoration: none;
}

body,
a,
input,
button {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

body {
  max-width: 1280px; /* 1160px */
  display: flex;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 22px;
  letter-spacing: -0.3px;
  color: var(--black);
}

body.-blue .tool__asset {
  background-color: var(--light-blue);
}

body.-blue .banner--yellow a:hover,
body.-blue article h3 a {
  color: var(--blue);
}

body.-blue .tag {
  background-color: var(--light-blue);
  color: var(--blue);
}

/* green theme */
body.-green .btn-contribute,
body.-green .nav .active,
body.-green .nav .active:hover,
body.-green .nav .active:focus {
  color: #ffffff;
  background-color: var(--green);
}

body.-green .btn-contribute,
body.-green .banner-top {
  background-color: var(--green);
}

body.-green .header-top__nav-item.-active {
  border-top-color: var(--green);
}

body.-green .tool__asset {
  background-color: var(--green);
}

body.-green .banner--yellow a:hover,
body.-green article h3 a {
  color: var(--green);
}

body.-green .btn-contribute,
body.-green .nav .active,
body.-green .nav .active:hover,
body.-green .nav .active:focus {
  color: #ffffff;
  background-color: var(--green);
}

body.-green .btn-contribute,
body.-green .banner-top {
  background-color: var(--green);
}

body.-green .header-top__nav-item.-active {
  border-top-color: var(--green);
}

body.-green .tag {
  background-color: var(--mint);
  color: var(--green);
}

/* violet theme */
body.-violet .btn-contribute,
body.-violet .nav .active,
body.-violet .nav .active:hover,
body.-violet .nav .active:focus {
  color: #ffffff;
  background-color: var(--violet);
}

body.-violet .btn-contribute,
body.-violet .banner-top {
  background-color: var(--violet);
}

body.-violet .header-top__nav-item.-active {
  border-top-color: var(--violet);
}

body.-violet .tool__asset {
  background-color: var(--violet);
}

body.-violet .banner--yellow a:hover,
body.-violet article h3 a {
  color: var(--violet);
}

body.-violet .btn-contribute,
body.-violet .nav .active,
body.-violet .nav .active:hover,
body.-violet .nav .active:focus {
  color: #ffffff;
  background-color: var(--violet);
}

body.-violet .btn-contribute,
body.-violet .banner-top {
  background-color: var(--violet);
}

body.-violet .header-top__nav-item.-active {
  border-top-color: var(--violet);
}

body.-violet .tag {
  background-color: var(--violet);
  color: #fff;
}

body > ul li > a {
  letter-spacing: -0.025625rem;
}

body > .nav {
  margin-top: 6.75rem;
}

body > main {
  margin-top: 7rem;
  margin-bottom: 50vh;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: var(--blue);
}

h1 {
  font-size: 1.75rem;
  letter-spacing: -0.043125rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.5rem;
  letter-spacing: -0.033125rem;
}

button {
  letter-spacing: -0.01875rem;
}

main {
  padding-left: 4.375rem;
}

article > header {
  margin-bottom: 2rem;
}

.hidden-in-page,
.-hidden {
  display: none !important;
}

.nav {
  width: 280px;
  flex-shrink: 0;
}

.nav ul {
  position: fixed;
  width: 260px;
  height: 80vh;
  padding-left: 0;
  margin: 0;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav ul::-webkit-scrollbar {
  width: 6px;
}

.nav ul::-webkit-scrollbar-track {
  background-color: #ededed;
}

.nav ul::-webkit-scrollbar-thumb {
  background-color: rgb(204, 204, 204);
}

.nav ul::-webkit-scrollbar-thumb:hover {
  background: rgb(196, 196, 196);
}

.nav ul::-webkit-scrollbar-track,
.nav ul::-webkit-scrollbar-thumb {
  border-radius: 4px;
}

.nav li {
  height: 44px;
  margin-right: 1.375rem;
  border-radius: 6px;
  list-style: none;
}

.nav li:last-child {
  padding-bottom: 0px;
}

.nav li a {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  line-height: normal;
  color: inherit;
}

.nav li > a {
  width: 100%;
  display: block;
  height: 100%;
  padding: 0.75rem 1.125rem;
  letter-spacing: -0.02125rem;
  border-radius: 6px;
}

.nav .active,
.nav .active:hover,
.nav .active:focus {
  color: #ffffff;
  background-color: var(--blue);
}

.nav li:hover,
.nav li:focus {
  background-color: var(--gray);
}

.nav li a:hover {
  text-decoration: none;
}

.nav h2 {
  display: none;
}

.banner {
  padding: 0.875rem 1rem;
  margin-top: 2.625rem;
  margin-bottom: 3.75rem;
  font-size: 1rem;
  line-height: 26px;
  letter-spacing: -0.3px;
  border-radius: 8px;
  background-color: var(--skin);
  color: var(--swamp);
  cursor: default;
}

.banner--yellow {
  background-color: var(--skin);
  color: var(--swamp);
}

.banner--flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.banner--dark {
  background-color: rgba(0, 84, 215, 0.8);
  color: #ffffff;
}

.banner--dark a:hover {
  color: #ffffff !important;
}

.banner-contribute > p:first-child {
  margin-right: 1rem;
}

@media (max-width: 584px) {
  .banner-contribute > p:first-child {
    margin-bottom: 1rem;
  }

  .banner-contribute .btn-contribute {
    text-align: center;
  }
}

.banner--yellow a {
  color: inherit;
  text-decoration: underline;
}

.banner--yellow a:hover {
  color: var(--blue);
}

.promo-banner {
  box-sizing: border-box;
  display: flex;
  background-color: #ffffed;
}

.promo-banner:hover {
  text-decoration: none;
}

.promo-banner h3 {
  font-size: 1.375rem;
}

.promo-banner--flawless-feedback {
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 2.375rem 1rem;
  margin-top: 3.75rem;
  margin-bottom: 3.75rem;
  background-color: var(--feedback--bg);
  color: var(--black);
  border-radius: 8px;
}

.promo-banner--flawless-feedback:visited {
  color: inherit;
}

.promo-banner--flawless-feedback h3 {
  color: inherit;
}

.promo-banner--flawless-feedback__button {
  padding: 0.5625rem 1rem;
  font-size: 1rem;
  font-weight: bold;
  background-color: var(--feedback--btn);
  color: #fff;
  border-radius: 18.5px;
}

.promo-banner--flawless-feedback p {
  font-size: 1.125rem;
  line-height: 1.44;
}

.promo-banner--flawless-feedback__logo {
  width: 85px;
  height: 85px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='85' height='85' viewBox='0 0 85 85'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FB4' d='M0 42.5C0 65.972 19.028 85 42.5 85S85 65.972 85 42.5 65.972 0 42.5 0 0 19.028 0 42.5'/%3E%3Cpath fill='%23FEFEFE' d='M25.815 68.835V34.787c0-6.694 5.356-12.12 11.963-12.12h23.926c0 6.694-5.356 12.12-11.963 12.12H39.188c-.78 0-1.41.64-1.41 1.429v9.263a1.42 1.42 0 0 0 1.41 1.429H49.74c0 6.693-5.355 12.12-11.962 12.12v9.807c0 1.277-1.023 2.313-2.284 2.313h-7.396c-1.261 0-2.283-1.036-2.283-2.313'/%3E%3Cg fill='%23FEFEFE' opacity='.5'%3E%3Cpath d='M37.454 45.742c0 .789.642 1.428 1.433 1.428h5.623c1.253-2.495 1.994-5.234 1.994-7.872l-9.05 3.646v2.798zM38.083 22.93h14.794c2.925-3.337 4.863-7.872 4.863-12.147l-21.213 8.549c-4.329 1.744-8.049 6.207-9.698 11.118a12.166 12.166 0 0 1 11.254-7.52'/%3E%3C/g%3E%3Cg fill='%23FEFEFE' opacity='.5'%3E%3Cpath d='M38.086 23.103h20.327c.865-1.872 1.357-3.922 1.357-6.003l-22.451 4.249c-4.477.847-8.34 4.39-10.142 8.8 1.892-4.157 6.063-7.046 10.91-7.046M37.457 45.163v.615c0 .784.632 1.42 1.413 1.42h8.48a13.94 13.94 0 0 0 .565-3.879l-9.903 1.874a1.14 1.14 0 0 1-.555-.03'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}

article > header {
  margin-bottom: 2rem;
}

article header > p {
  line-height: 1.5rem; /* 22px */
}

article h3 {
  margin-top: 0;
  margin-bottom: 1rem; /* 0.5rem */
}

article h3 a {
  color: var(--blue);
  font-weight: 700;
  line-height: 1.625rem;
}

article p {
  margin: 0;
}

article li {
  margin-bottom: 2rem;
  list-style: none;
}

article li:first-child {
  margin-top: 0;
}

article li:last-child {
  margin-bottom: 4.625rem;
}

.tool__description__header a {
  font-size: 1.375rem;
  font-weight: 700;
  color: inherit;
  line-height: 24px;
}

article ul {
  margin: 0;
  padding-left: 0;
}

.tool {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.tool.-hidden {
  display: none;
  opacity: 0;
}

.tool__asset {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  margin-right: 2rem;
  border-radius: 10px;
  background-color: var(--light-blue);
  font-family: 'Pacifico', 'Lucida Grande', 'Lato', 'Lucida Sans Unicode',
    cursive;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
}

.tool__asset:hover {
  text-decoration: none;
}

.tool__asset:visited {
  color: #ffffff;
}

.tool__asset::selection {
  background-color: transparent;
}

.tool__description p {
  margin-top: 0.375rem;
  line-height: 1.625rem;
}

.tool__description__header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.tag-wrapper {
  margin-top: 0.75rem;
}

.tag {
  display: inline-block;
  margin-right: 0.5rem;
}

.tag:last-child {
  margin-right: 0;
}

.tag {
  padding: 0.25rem 0.5rem;
  font-family: 'Lucida Grande', 'Lato', 'Lucida Sans Unicode', Geneva, Verdana,
    sans-serif;
  font-size: 0.625rem;
  font-weight: bold;
  letter-spacing: -0.0125rem;
  text-transform: uppercase;
  border-radius: 0.688rem;
  line-height: 1;
  cursor: pointer;
}
/* 
.tag--free {
	background-color: var(--orange);
	color: rgb(153, 107, 0);
}

.tag--open-source {
	background-color: var(--yellow);
	color: rgb(153, 130, 0);
}

.tag--mac {
	background-color: var(--light-brown);
	color: rgb(153, 107, 0);
} */

.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 5rem;
  padding-bottom: 8.5rem;
}

.-logo-adt {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='196px' height='196px' viewBox='0 0 196 196' version='1.1' xmlns='http://www.w3.org/2000 … [Строка слишком длинная. Вы можете скачать файл]
}

.-logo-adp {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='60px' height='60px' viewBox='0 0 60 60' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E059F6B97-0B3D-42CF-96AF-2426D55D5E0B%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-880.000000, -144.000000)' fill-rule='nonzero'%3E%3Cg id='header-title' transform='translate(705.000000, 144.000000)'%3E%3Cg id='adp-logo' transform='translate(175.000000, 0.000000)'%3E%3Cpath d='M20.3602648,2.73013461e-15 L39.6397352,4.37529275e-15 C46.7194428,3.07477155e-15 49.2867159,0.737144559 51.8749512,2.12134794 C54.4631865,3.50555132 56.4944487,5.53681353 57.8786521,8.12504882 C59.2628554,10.7132841 60,13.2805572 60,20.3602648 L60,39.6397352 C60,46.7194428 59.2628554,49.2867159 57.8786521,51.8749512 C56.4944487,54.4631865 54.4631865,56.4944487 51.8749512,57.8786521 C49.2867159,59.2628554 46.7194428,60 39.6397352,60 L20.3602648,60 C13.2805572,60 10.7132841,59.2628554 8.12504882,57.8786521 C5.53681353,56.4944487 3.50555132,54.4631865 2.12134794,51.8749512 C0.737144559,49.2867159 3.87134176e-15,46.7194428 3.00432763e-15,39.6397352 L4.10109972e-15,20.3602648 C3.23408559e-15,13.2805572 0.737144559,10.7132841 2.12134794,8.12504882 C3.50555132,5.53681353 5.53681353,3.50555132 8.12504882,2.12134794 C10.7132841,0.737144559 13.2805572,4.03065581e-15 20.3602648,2.73013461e-15 Z' id='Rectangle-Copy' fill='%232FC763'%3E%3C/path%3E%3Cpath d='M28.3581861,1.59872116e-14 L39.3808608,13.6118695 C43.8362651,19.1138357 44.8790335,21.5728817 45.4321347,24.4554257 C45.9852359,27.3379698 45.6849634,30.1948717 44.5446342,32.899429 C43.404305,35.6039863 41.8730592,37.7924926 36.371093,42.2478969 L21.3881305,54.3808608 C17.7229859,57.3488363 15.408162,58.8024267 13.41895,59.6056916 C11.0895749,59.2545816 9.61076545,58.673222 8.12504882,57.8786521 C5.53681353,56.4944487 3.50555132,54.4631865 2.12134794,51.8749512 C0.737144559,49.2867159 -1.5244806e-13,46.7194428 -1.53315074e-13,39.6397352 L-1.52218302e-13,20.3602648 C-1.53085316e-13,13.2805572 0.737144559,10.7132841 2.12134794,8.12504882 C3.50555132,5.53681353 5.53681353,3.50555132 8.12504882,2.12134794 C10.7132841,0.737144559 13.2805572,1.82415105e-14 20.3602648,1.69409893e-14 L28.3581861,1.76234689e-14 Z' id='Combined-Shape' fill='%2318A849'%3E%3C/path%3E%3Cpath d='M10.9991492,59.0814879 C9.91760468,58.7608583 9.02258714,58.3586608 8.12504882,57.8786521 C5.53681353,56.4944487 3.50555132,54.4631865 2.12134794,51.8749512 C0.737144559,49.2867159 4.65039059e-14,46.7194428 4.56368918e-14,39.6397352 L4.67336639e-14,20.3602648 C4.58666497e-14,13.2805572 0.737144559,10.7132841 2.12134794,8.12504882 C3.28179714,5.95519748 4.89702096,4.17680548 6.91393893,2.84295328 L13.6713561,5.85154926 C20.1389909,8.73112577 22.1844878,10.4487449 23.9859522,12.7660077 C25.7874165,15.0832706 26.8168781,17.7651097 27.0286807,20.6925865 C27.2404833,23.6200634 26.8696943,26.2652077 23.9901178,32.7328425 L16.1484507,50.345515 C14.0394137,55.0824898 12.5536827,57.4473075 10.9991492,59.0814879 Z' id='Combined-Shape' fill='%230B7E32'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.-logo-adk {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='29px' height='29px' viewBox='0 0 29 29' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E9659587E-EF92-4A00-A660-D91F849A257C%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-uikits-v1' transform='translate(-80.000000, -28.000000)' fill-rule='nonzero'%3E%3Cg id='Group-3' transform='translate(80.000000, 28.000000)'%3E%3Cg id='adp-logo'%3E%3Cpath d='M9.84079466,-3.97579883e-16 L19.1592053,3.97579883e-16 C22.581064,-2.31005361e-16 23.8219127,0.356286537 25.0728931,1.02531817 C26.3238735,1.69434981 27.3056502,2.67612654 27.9746818,3.92710693 C28.6437135,5.17808732 29,6.41893597 29,9.84079466 L29,19.1592053 C29,22.581064 28.6437135,23.8219127 27.9746818,25.0728931 C27.3056502,26.3238735 26.3238735,27.3056502 25.0728931,27.9746818 C23.8219127,28.6437135 22.581064,29 19.1592053,29 L9.84079466,29 C6.41893597,29 5.17808732,28.6437135 3.92710693,27.9746818 C2.67612654,27.3056502 1.69434981,26.3238735 1.02531817,25.0728931 C0.356286537,23.8219127 1.54003574e-16,22.581064 -2.65053255e-16,19.1592053 L2.65053255e-16,9.84079466 C-1.54003574e-16,6.41893597 0.356286537,5.17808732 1.02531817,3.92710693 C1.69434981,2.67612654 2.67612654,1.69434981 3.92710693,1.02531817 C5.17808732,0.356286537 6.41893597,2.31005361e-16 9.84079466,-3.97579883e-16 Z' id='Rectangle-Copy' fill='%23C22FC7'%3E%3C/path%3E%3Cpath d='M13.705,-9.9475983e-14 L19.0340827,6.57907027 C21.1875281,9.23835394 21.6915329,10.4268928 21.9588651,11.8201224 C22.2261973,13.2133521 22.0810656,14.594188 21.5299065,15.9013907 C20.9787474,17.2085934 20.2386453,18.2663714 17.5793616,20.4198169 L10.3375964,26.2840827 C8.56515091,27.7193808 7.44606724,28.4219333 6.48426465,28.8100478 C5.35883486,28.6392716 4.64463751,28.3584214 3.92710693,27.9746818 C2.67612654,27.3056502 1.69434981,26.3238735 1.02531817,25.0728931 C0.356286537,23.8219127 -1.56430452e-13,22.581064 -1.56849508e-13,19.1592053 L-1.56319402e-13,9.84079466 C-1.56738459e-13,6.41893597 0.356286537,5.17808732 1.02531817,3.92710693 C1.69434981,2.67612654 2.67612654,1.69434981 3.92710693,1.02531817 C5.17808732,0.356286537 6.41893597,1.44418601e-14 9.84079466,1.38132748e-14 L13.705,-9.9475983e-14 Z' id='Combined-Shape' fill='%23A318A8'%3E%3C/path%3E%3Cpath d='M3.34262682,1.37350581 L6.60782212,2.82824881 C9.73384559,4.22004412 10.7225024,5.05022669 11.5932102,6.17023706 C12.463918,7.29024744 12.9614911,8.58646969 13.0638623,10.0014168 C13.1662336,11.416364 12.9870189,12.6948504 11.5952236,15.8208739 L7.80508453,24.3336656 C6.78588896,26.6228163 6.06785615,27.7658121 5.31663652,28.5556519 C4.79354791,28.401099 4.36093667,28.2066965 3.92710693,27.9746818 C2.67612654,27.3056502 1.69434981,26.3238735 1.02531817,25.0728931 C0.356286537,23.8219127 4.27865677e-14,22.581064 4.23675109e-14,19.1592053 L4.28976174e-14,9.84079466 C4.24785606e-14,6.41893597 0.356286537,5.17808732 1.02531817,3.92710693 C1.58637257,2.87802642 2.36736844,2.01826639 3.34262682,1.37350581 Z' id='Combined-Shape' fill='%23850289'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.welcome__asset {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background-size: cover;
  font-size: 0;
}

.welcome__title {
  margin-top: 0.8125rem;
  margin-bottom: 1rem;
  line-height: normal;
}

.welcome__description {
  max-width: 390px;
  padding-bottom: 2rem;
  line-height: 1.45;
  text-align: center;
}

.btn {
  z-index: 1;
}

.btn:hover {
  text-decoration: none;
}

.btn-contribute {
  position: relative;
  padding: 0.75rem 1.375rem;
  padding-left: calc(25px + 1.375rem);
  border-radius: 24px;
  font-size: 1rem;
  font-weight: bold;
  background-color: var(--blue);
  color: #ffffff;
}

.btn-contribute:visited {
  color: #ffffff;
}

.image-gh:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 1.375rem;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M8.5 0C3.804 0 0 3.862 0 8.63 0 12.685 2.741 16.05 6.439 17a1.181 1.181 0 0 1-.064-.41v-1.467H5.313c-.574 0-1.106-.259-1.34-.734-.276-.518-.318-1.316-1.02-1.813-.212-.172-.042-.345.192-.323.446.129.807.431 1.147.884.34.453.489.561 1.126.561.298 0 .765-.021 1.19-.087.234-.604.638-1.143 1.127-1.402-2.848-.345-4.208-1.769-4.208-3.71 0-.843.361-1.64.957-2.331-.191-.67-.447-2.05.085-2.59 1.275 0 2.04.843 2.231 1.058a6.455 6.455 0 0 1 2.061-.345c.744 0 1.424.129 2.061.345.19-.216.956-1.057 2.23-1.057.51.518.277 1.92.065 2.589.595.669.935 1.488.935 2.33 0 1.942-1.34 3.366-4.165 3.668.787.41 1.34 1.575 1.34 2.438v1.965c0 .065-.022.13-.022.194C14.62 15.598 17 12.405 17 8.63 17 3.862 13.196 0 8.5 0z'/%3E%3C/svg%3E");
}

.banner-top-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 1;
  z-index: 100;
  animation: start 0.5s ease-in-out;
}

@keyframes start {
  from {
    top: -3rem;
    opacity: 0;
  }

  to {
    top: 0rem;
    opacity: 1;
  }
}

.header-top,
.banner-top {
  transition: all 0.3s ease-in-out;
}

.header-top--hide-banner .banner-top {
  display: none;
  opacity: 0;
}

.banner-top {
  position: relative;
  top: 0;
  width: 100%;
  padding: 1rem 0;
  text-align: center;
  background-color: #3d7dd0;
  color: #ffffff;
  opacity: 1;
}

.banner-abstract {
  background-color: #272b2d !important;
}

.banner__text {
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
}
.banner__text:hover {
  text-decoration: underline;
}

.banner__text a,
.banner__text span {
  font-weight: 700;
  color: #ffffff;
}
.banner__text a:hover,
.banner__text span:hover {
  text-decoration: underline;
}

.banner__close-wrapper {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(calc(-50% - 3px));
}

.banner__close {
  position: relative;
  width: 14px;
  height: 14px;
  font-size: 0;
  border: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E0ADCEEA4-60C5-4927-95C3-E45AC67857A5%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round'%3E%3Cg id='Desktop---Announcemenet---Banner' transform='translate(-1525.000000, -27.000000)' stroke='%23FFFFFF' stroke-width='3'%3E%3Cg id='Close' transform='translate(1527.000000, 29.000000)'%3E%3Cline x1='0' y1='0' x2='11' y2='11' id='Line-3'%3E%3C/line%3E%3Cline x1='0' y1='0' x2='11' y2='11' id='Line-3' transform='translate(5.500000, 5.500000) scale(-1, 1) translate(-5.500000, -5.500000) '%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

.banner-abstract {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.banner-abstract header {
  display: flex;
}
.banner-abstract .banner__text {
  padding-left: 1rem;
}
.banner-abstract .banner__text:visited {
  color: #fff;
}
.banner-abstract .abstract-logo {
  position: relative;
  width: 35px;
  height: 35px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='35px' height='35px' viewBox='0 0 35 35' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E13E4A54D-B3FE-4828-953B-D56603BF6AC8%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Desktop---Announcemenet---Banner' transform='translate(-576.000000, -16.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Group' transform='translate(576.000000, 16.000000)'%3E%3Cpath d='M17.21901,0 C3.44244671,0 0,3.44244671 0,17.21901 C0,30.9955733 3.44244671,34.43802 17.21901,34.43802 C30.9955733,34.43802 34.43802,30.9955733 34.43802,17.21901 C34.43802,3.44244671 30.9955733,0 17.21901,0 Z M14.3932221,26.6383067 C10.7543972,26.6270837 7.81258629,23.6701213 7.82004595,20.0312868 C7.82753404,16.3924523 10.7814668,13.4475992 14.420307,13.451324 C18.0591473,13.4550558 21.0070567,16.4059557 21.0070567,20.0447979 C20.9995789,23.6911284 18.0395583,26.6420506 14.3932221,26.6383067 L14.3932221,26.6383067 Z M26.3672444,26.3672444 L23.1348682,26.3672444 L23.1348682,11.2963753 L8.07077564,11.2963753 L8.07077564,8.07077564 L26.3672444,8.07077564 L26.3672444,26.3672444 Z' id='Shape'%3E%3C/path%3E%3Ccircle id='Oval' cx='14.3932221' cy='20.0447979' r='3.36112907'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .banner-top .banner__text {
    padding-left: 0;
    padding: 0 6.875%;
  }
  .banner-abstract header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .banner__close-wrapper {
    position: relative;
    top: initial;
    right: initial;
    transform: none;
  }
}

/* @media (max-width: 1024px) {
  .banner-top {
    top: 64px;
  }
} */

.header.-blue {
  background-color: #f2f5fa;
}

.header.-mint {
  background-color: #f2faf5;
}

.header.-violet {
  background-color: #f2f5fa;
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.header-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin-bottom: 1.625rem;
  border-bottom: solid 1px #dbdbdb;
  z-index: 9;
}

.header-top .logo {
  display: flex;
  align-items: center;
  margin-top: 1.75rem;
  margin-bottom: 1.688rem;
}

.header-inner {
  display: flex;
  align-items: center;
}

.logo__asset {
  width: 29px;
  height: 29px;
  background-size: cover;
}

.logo__title {
  margin-left: 0.75rem;
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.43px;
}
/* nav was here */

.header-top__nav-item:visited {
  color: #8490a3;
}

.header-top__nav-item:nth-child(1) {
  border-left: 1px solid #dbdbdb;
}

.header-top__nav-item:nth-child(1).-active {
  border-left: 1px solid #dbdbdb;
}

.header-top__nav-item:nth-child(2) {
  border-left: 1px solid #dbdbdb;
}

.header-top__nav-item.-active + .header-top__nav-item {
  border-left: none;
  border-right: 1px solid #dbdbdb;
}

.header-top__nav-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 30px;
  width: 39px;
  height: 39px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-size: cover;
}

.header-top__nav-item.-tool::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E5271BAD8-CA6B-43F2-BEF2-48D9CBFFFF49%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-550.000000, -23.000000)' fill-rule='nonzero'%3E%3Cg id='tab-description' transform='translate(550.000000, 23.000000)'%3E%3Cg id='tools-icon-unselected'%3E%3Ccircle id='Oval' fill='%23DFE6F2' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='pn-tool-icon-selected' transform='translate(20.000000, 18.500000) rotate(-315.000000) translate(-20.000000, -18.500000) translate(13.000000, 7.000000)'%3E%3Cpath d='M6.54347826,10.511544 C5.58624895,10.722836 4.86956522,11.5847555 4.86956522,12.615912 C4.86956522,13.8054982 5.82339336,14.7698482 7,14.7698482 C8.17660664,14.7698482 9.13043478,13.8054982 9.13043478,12.615912 C9.13043478,11.5847555 8.41375105,10.722836 7.45652174,10.511544 L7.45652174,0.0473742635 C7.49189492,0.0876465635 7.52213461,0.132673324 7.54626515,0.181466785 L13.7492354,12.7242607 C13.9084456,13.0461936 13.9212137,13.4223771 13.7842069,13.7546149 L11.7458758,18.6975139 C11.6509205,18.927778 11.4285933,19.0777206 11.1821249,19.0777206 L3.07506599,19.0777206 C2.83741516,19.0777206 2.62133189,18.9381909 2.521123,18.7200274 L0.24870057,13.7727652 C0.0915749076,13.430689 0.09722908,13.0347191 0.264056261,12.6973841 L6.45373485,0.181466785 C6.47832875,0.131736394 6.50864793,0.0868254917 6.54347826,0.0471430732 L6.54347826,10.511544 Z' id='Path' fill='%23A4AEBD'%3E%3C/path%3E%3Cpath d='M2.45268542,18.4623103 L11.8516624,18.4623103 L12.5813987,21.3273817 C12.667768,21.666483 12.4628884,22.0113951 12.1237871,22.0977645 C12.0726776,22.1107821 12.0201427,22.1173673 11.9674015,22.1173673 L2.33694632,22.1173673 C1.9870187,22.1173673 1.70334632,21.833695 1.70334632,21.4837673 C1.70334632,21.4310261 1.70993154,21.3784912 1.72294917,21.3273817 L2.45268542,18.4623103 Z' id='Rectangle' fill='%23BCC6D6'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__nav-item.-active.-tool::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E36955B56-68D6-4AEB-95EC-319326AFB705%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-tools-v3' transform='translate(-550.000000, -23.000000)' fill-rule='nonzero'%3E%3Cg id='tab-description' transform='translate(550.000000, 23.000000)'%3E%3Cg id='tools-icon-selected'%3E%3Ccircle id='Oval' fill='%23D2E2FA' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='pn-tool-icon-selected' transform='translate(20.000000, 18.500000) rotate(-315.000000) translate(-20.000000, -18.500000) translate(13.000000, 7.000000)'%3E%3Cpath d='M6.54347826,10.511544 C5.58624895,10.722836 4.86956522,11.5847555 4.86956522,12.615912 C4.86956522,13.8054982 5.82339336,14.7698482 7,14.7698482 C8.17660664,14.7698482 9.13043478,13.8054982 9.13043478,12.615912 C9.13043478,11.5847555 8.41375105,10.722836 7.45652174,10.511544 L7.45652174,0.0473742635 C7.49189492,0.0876465635 7.52213461,0.132673324 7.54626515,0.181466785 L13.7492354,12.7242607 C13.9084456,13.0461936 13.9212137,13.4223771 13.7842069,13.7546149 L11.7458758,18.6975139 C11.6509205,18.927778 11.4285933,19.0777206 11.1821249,19.0777206 L3.07506599,19.0777206 C2.83741516,19.0777206 2.62133189,18.9381909 2.521123,18.7200274 L0.24870057,13.7727652 C0.0915749076,13.430689 0.09722908,13.0347191 0.264056261,12.6973841 L6.45373485,0.181466785 C6.47832875,0.131736394 6.50864793,0.0868254917 6.54347826,0.0471430732 L6.54347826,10.511544 Z' id='Path' fill='%230054D7'%3E%3C/path%3E%3Cpath d='M2.45268542,18.4623103 L11.8516624,18.4623103 L12.5813987,21.3273817 C12.667768,21.666483 12.4628884,22.0113951 12.1237871,22.0977645 C12.0726776,22.1107821 12.0201427,22.1173673 11.9674015,22.1173673 L2.33694632,22.1173673 C1.9870187,22.1173673 1.70334632,21.833695 1.70334632,21.4837673 C1.70334632,21.4310261 1.70993154,21.3784912 1.72294917,21.3273817 L2.45268542,18.4623103 Z' id='Rectangle' fill='%2373A9FF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__nav-item.-plugin::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EF6CB63FC-58C8-4012-BD1C-A034BC93E98D%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-tools-v3' transform='translate(-710.000000, -23.000000)' fill-rule='nonzero'%3E%3Cg id='tab-description' transform='translate(710.000000, 23.000000)'%3E%3Cg id='plugins-icon-unselected'%3E%3Ccircle id='Oval' fill='%23DFE6F2' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='plugin-icon-copy' transform='translate(19.474874, 20.767767) rotate(-315.000000) translate(-19.474874, -20.767767) translate(10.474874, 8.267767)'%3E%3Cpath d='M6.24,15.2075472 L6.24,21.8876732 C6.24,23.3778 7.44798643,24.5857864 8.93811321,24.5857864 L8.93811321,24.5857864 C10.42824,24.5857864 11.6362264,23.3778 11.6362264,21.8876732 L11.6362264,20.1967929 C11.6362264,18.5538672 12.9680808,17.2220129 14.6110064,17.2220129 L14.6110064,17.2220129 C16.2539321,17.2220129 17.5857864,18.5538672 17.5857864,20.1967929 L17.5857864,23.249882' id='Path-8' stroke='%23BCC6D6' stroke-width='1.91999977' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M10.08,5.88679245 L11.5200001,5.88679245 C11.7850967,5.88679245 12,6.10169575 12,6.3667924 L12,10.7924528 C12,13.5017742 9.80366104,15.6981132 7.09433962,15.6981132 L4.90566038,15.6981132 C2.19633896,15.6981132 3.3179618e-16,13.5017742 0,10.7924528 L0,6.3667924 C-3.24649762e-17,6.10169575 0.214903294,5.88679245 0.479999943,5.88679245 L1.92,5.88679245 L1.92,1.2 C1.92,0.5372583 2.4572583,1.21743675e-16 3.12,0 C3.7827417,-1.21743675e-16 4.32,0.5372583 4.32,1.2 L4.32,5.88679245 L7.68,5.88679245 L7.68,1.2 C7.68,0.5372583 8.2172583,1.21743675e-16 8.88,0 C9.5427417,-1.21743675e-16 10.08,0.5372583 10.08,1.2 L10.08,5.88679245 Z' id='Combined-Shape' fill='%23A4AEBD'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__nav-item.-active.-plugin::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E40705D8A-BCC7-48F7-814E-FDB8063DBB9F%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-710.000000, -23.000000)' fill-rule='nonzero'%3E%3Cg id='tab-description' transform='translate(710.000000, 23.000000)'%3E%3Cg id='plugin-icon-selected'%3E%3Ccircle id='Oval' fill='%23D2FAD7' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='plugin-icon' transform='translate(19.474874, 20.767767) rotate(-315.000000) translate(-19.474874, -20.767767) translate(10.474874, 8.267767)'%3E%3Cpath d='M6.24,15.2075472 L6.24,21.8876732 C6.24,23.3778 7.44798643,24.5857864 8.93811321,24.5857864 L8.93811321,24.5857864 C10.42824,24.5857864 11.6362264,23.3778 11.6362264,21.8876732 L11.6362264,20.1967929 C11.6362264,18.5538672 12.9680808,17.2220129 14.6110064,17.2220129 L14.6110064,17.2220129 C16.2539321,17.2220129 17.5857864,18.5538672 17.5857864,20.1967929 L17.5857864,23.249882' id='Path-8' stroke='%2352B372' stroke-width='1.91999977' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M10.08,5.88679245 L11.5200001,5.88679245 C11.7850967,5.88679245 12,6.10169575 12,6.3667924 L12,10.7924528 C12,13.5017742 9.80366104,15.6981132 7.09433962,15.6981132 L4.90566038,15.6981132 C2.19633896,15.6981132 3.3179618e-16,13.5017742 0,10.7924528 L0,6.3667924 C-3.24649762e-17,6.10169575 0.214903294,5.88679245 0.479999943,5.88679245 L1.92,5.88679245 L1.92,1.2 C1.92,0.5372583 2.4572583,1.21743675e-16 3.12,0 C3.7827417,-1.21743675e-16 4.32,0.5372583 4.32,1.2 L4.32,5.88679245 L7.68,5.88679245 L7.68,1.2 C7.68,0.5372583 8.2172583,1.21743675e-16 8.88,0 C9.5427417,-1.21743675e-16 10.08,0.5372583 10.08,1.2 L10.08,5.88679245 Z' id='Combined-Shape' fill='%23028930'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__nav-item.-kit::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E9CBD9806-432E-4049-A8DE-4898D83FBA66%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-uikits-v1' transform='translate(-684.000000, -83.000000)'%3E%3Cg id='plugin-icon-selected' transform='translate(684.000000, 83.000000)'%3E%3Ccircle id='Oval' fill='%23DFE6F2' fill-rule='nonzero' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='Group-7' transform='translate(9.000000, 9.000000)'%3E%3Cpath d='M7.6916556,-3.10752092e-16 L13.3083444,3.10752092e-16 C15.9829006,-1.80555915e-16 16.9527593,0.278476833 17.9305371,0.801398111 C18.9083149,1.32431939 19.6756806,2.09168511 20.1986019,3.06946289 C20.7215232,4.04724067 21,5.01709938 21,7.6916556 L21,13.3083444 C21,15.9829006 20.7215232,16.9527593 20.1986019,17.9305371 C19.6756806,18.9083149 18.9083149,19.6756806 17.9305371,20.1986019 C16.9527593,20.7215232 15.9829006,21 13.3083444,21 L7.6916556,21 C5.01709938,21 4.04724067,20.7215232 3.06946289,20.1986019 C2.09168511,19.6756806 1.32431939,18.9083149 0.801398111,17.9305371 C0.278476833,16.9527593 1.2037061e-16,15.9829006 -2.07168062e-16,13.3083444 L2.07168062e-16,7.6916556 C-1.2037061e-16,5.01709938 0.278476833,4.04724067 0.801398111,3.06946289 C1.32431939,2.09168511 2.09168511,1.32431939 3.06946289,0.801398111 C4.04724067,0.278476833 5.01709938,1.80555915e-16 7.6916556,-3.10752092e-16 Z' id='Rectangle' stroke='%23BCC6D6' stroke-width='2'%3E%3C/path%3E%3Cpath d='M4.15374839,13 L16.8462516,13 C17.2474351,13 17.3929139,13.0417715 17.5395805,13.1202097 C17.6862472,13.1986479 17.8013521,13.3137528 17.8797903,13.4604195 C17.9582285,13.6070861 18,13.7525649 18,14.1537484 L18,15.6840486 C18,16.2780468 17.9071744,16.6509198 17.7328673,16.9768457 C17.5585602,17.3027716 17.3027716,17.5585602 16.9768457,17.7328673 C16.6509198,17.9071744 16.2780468,18 15.6840486,18 L5.31595144,18 C4.72195321,18 4.34908022,17.9071744 4.0231543,17.7328673 C3.69722837,17.5585602 3.4414398,17.3027716 3.2671327,16.9768457 C3.09282561,16.6509198 3,16.2780468 3,15.6840486 L3,14.1537484 C3,13.7525649 3.04177153,13.6070861 3.12020972,13.4604195 C3.19864792,13.3137528 3.31375278,13.1986479 3.46041945,13.1202097 C3.60708612,13.0417715 3.75256494,13 4.15374839,13 Z' id='Rectangle' fill='%23A4AEBD'%3E%3C/path%3E%3Cpath d='M12.1537484,3 L15.4361148,3 C16.3276335,3 16.6509198,3.09282561 16.9768457,3.2671327 C17.3027716,3.4414398 17.5585602,3.69722837 17.7328673,4.0231543 C17.9071744,4.34908022 18,4.67236646 18,5.5638852 L18,9.84625166 C18,10.2474351 17.9582285,10.3929139 17.8797903,10.5395806 C17.8013521,10.6862472 17.6862472,10.8013521 17.5395806,10.8797903 C17.3929139,10.9582285 17.2474351,11 16.8462517,11 L12.1537483,11 C11.7525649,11 11.6070861,10.9582285 11.4604194,10.8797903 C11.3137528,10.8013521 11.1986479,10.6862472 11.1202097,10.5395806 C11.0417715,10.3929139 11,10.2474351 11,9.84625166 L11,4.15374839 C11,3.75256494 11.0417715,3.60708612 11.1202097,3.46041945 C11.1986479,3.31375278 11.3137528,3.19864792 11.4604195,3.12020972 C11.6070861,3.04177153 11.7525649,3 12.1537484,3 Z' id='Rectangle' fill='%23A4AEBD'%3E%3C/path%3E%3Cpath d='M4.15374839,3 L7.4361148,3 C8.32763354,3 8.65091978,3.09282561 8.9768457,3.2671327 C9.30277163,3.4414398 9.5585602,3.69722837 9.7328673,4.0231543 C9.90717439,4.34908022 10,4.67236646 10,5.5638852 L10,9.84625166 C10,10.2474351 9.95822847,10.3929139 9.87979028,10.5395806 C9.80135209,10.6862472 9.68624723,10.8013521 9.53958057,10.8797903 C9.3929139,10.9582285 9.24743509,11 8.84625166,11 L4.15374834,11 C3.75256491,11 3.6070861,10.9582285 3.46041943,10.8797903 C3.31375277,10.8013521 3.19864791,10.6862472 3.12020972,10.5395806 C3.04177153,10.3929139 3,10.2474351 3,9.84625166 L3,4.15374839 C3,3.75256494 3.04177153,3.60708612 3.12020972,3.46041945 C3.19864792,3.31375278 3.31375278,3.19864792 3.46041945,3.12020972 C3.60708612,3.04177153 3.75256494,3 4.15374839,3 Z' id='Rectangle' fill='%23BCC6D6' transform='translate(6.500000, 7.000000) scale(-1, 1) translate(-6.500000, -7.000000) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__nav-item.-active.-kit::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E809279DA-3C01-4619-8588-0B6FBFD3EF13%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-uikits-v1' transform='translate(-684.000000, -23.000000)'%3E%3Cg id='Group-6' transform='translate(655.000000, 0.000000)'%3E%3Cg id='Group-4'%3E%3Cg id='tab-description' transform='translate(29.000000, 23.000000)'%3E%3Cg id='plugin-icon-selected'%3E%3Ccircle id='Oval' fill='%23F2A7F5' fill-rule='nonzero' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='Group-7' transform='translate(9.000000, 9.000000)'%3E%3Cpath d='M7.6916556,-3.10752092e-16 L13.3083444,3.10752092e-16 C15.9829006,-1.80555915e-16 16.9527593,0.278476833 17.9305371,0.801398111 C18.9083149,1.32431939 19.6756806,2.09168511 20.1986019,3.06946289 C20.7215232,4.04724067 21,5.01709938 21,7.6916556 L21,13.3083444 C21,15.9829006 20.7215232,16.9527593 20.1986019,17.9305371 C19.6756806,18.9083149 18.9083149,19.6756806 17.9305371,20.1986019 C16.9527593,20.7215232 15.9829006,21 13.3083444,21 L7.6916556,21 C5.01709938,21 4.04724067,20.7215232 3.06946289,20.1986019 C2.09168511,19.6756806 1.32431939,18.9083149 0.801398111,17.9305371 C0.278476833,16.9527593 1.2037061e-16,15.9829006 -2.07168062e-16,13.3083444 L2.07168062e-16,7.6916556 C-1.2037061e-16,5.01709938 0.278476833,4.04724067 0.801398111,3.06946289 C1.32431939,2.09168511 2.09168511,1.32431939 3.06946289,0.801398111 C4.04724067,0.278476833 5.01709938,1.80555915e-16 7.6916556,-3.10752092e-16 Z' id='Rectangle' stroke='%23BE5DC2' stroke-width='2'%3E%3C/path%3E%3Cpath d='M4.15374839,13 L16.8462516,13 C17.2474351,13 17.3929139,13.0417715 17.5395805,13.1202097 C17.6862472,13.1986479 17.8013521,13.3137528 17.8797903,13.4604195 C17.9582285,13.6070861 18,13.7525649 18,14.1537484 L18,15.6840486 C18,16.2780468 17.9071744,16.6509198 17.7328673,16.9768457 C17.5585602,17.3027716 17.3027716,17.5585602 16.9768457,17.7328673 C16.6509198,17.9071744 16.2780468,18 15.6840486,18 L5.31595144,18 C4.72195321,18 4.34908022,17.9071744 4.0231543,17.7328673 C3.69722837,17.5585602 3.4414398,17.3027716 3.2671327,16.9768457 C3.09282561,16.6509198 3,16.2780468 3,15.6840486 L3,14.1537484 C3,13.7525649 3.04177153,13.6070861 3.12020972,13.4604195 C3.19864792,13.3137528 3.31375278,13.1986479 3.46041945,13.1202097 C3.60708612,13.0417715 3.75256494,13 4.15374839,13 Z' id='Rectangle' fill='%23850289'%3E%3C/path%3E%3Cpath d='M12.1537484,3 L15.4361148,3 C16.3276335,3 16.6509198,3.09282561 16.9768457,3.2671327 C17.3027716,3.4414398 17.5585602,3.69722837 17.7328673,4.0231543 C17.9071744,4.34908022 18,4.67236646 18,5.5638852 L18,9.84625166 C18,10.2474351 17.9582285,10.3929139 17.8797903,10.5395806 C17.8013521,10.6862472 17.6862472,10.8013521 17.5395806,10.8797903 C17.3929139,10.9582285 17.2474351,11 16.8462517,11 L12.1537483,11 C11.7525649,11 11.6070861,10.9582285 11.4604194,10.8797903 C11.3137528,10.8013521 11.1986479,10.6862472 11.1202097,10.5395806 C11.0417715,10.3929139 11,10.2474351 11,9.84625166 L11,4.15374839 C11,3.75256494 11.0417715,3.60708612 11.1202097,3.46041945 C11.1986479,3.31375278 11.3137528,3.19864792 11.4604195,3.12020972 C11.6070861,3.04177153 11.7525649,3 12.1537484,3 Z' id='Rectangle' fill='%23850289'%3E%3C/path%3E%3Cpath d='M4.15374839,3 L7.4361148,3 C8.32763354,3 8.65091978,3.09282561 8.9768457,3.2671327 C9.30277163,3.4414398 9.5585602,3.69722837 9.7328673,4.0231543 C9.90717439,4.34908022 10,4.67236646 10,5.5638852 L10,9.84625166 C10,10.2474351 9.95822847,10.3929139 9.87979028,10.5395806 C9.80135209,10.6862472 9.68624723,10.8013521 9.53958057,10.8797903 C9.3929139,10.9582285 9.24743509,11 8.84625166,11 L4.15374834,11 C3.75256491,11 3.6070861,10.9582285 3.46041943,10.8797903 C3.31375277,10.8013521 3.19864791,10.6862472 3.12020972,10.5395806 C3.04177153,10.3929139 3,10.2474351 3,9.84625166 L3,4.15374839 C3,3.75256494 3.04177153,3.60708612 3.12020972,3.46041945 C3.19864792,3.31375278 3.31375278,3.19864792 3.46041945,3.12020972 C3.60708612,3.04177153 3.75256494,3 4.15374839,3 Z' id='Rectangle' fill='%23BE5DC2' transform='translate(6.500000, 7.000000) scale(-1, 1) translate(-6.500000, -7.000000) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__nav-item.-active {
  background-color: #ffffff;
  padding-top: 1.7rem;
  border-top: 0.313rem solid var(--blue);
  border-left: 1px solid #dbdbdb;
  border-right: 1px solid #dbdbdb;
  border-bottom: 1px solid #fff;
  color: var(--black);
}

.header-top__input-search {
  position: relative;
  width: 28.611111111%;
  max-width: 412px;
  margin-left: 1.875rem;
  padding-top: 0.625rem;
  padding-left: 3rem;
  padding-bottom: 0.625rem;
  border: 1px solid #dadfe8;
  border-radius: 0.313rem;
  font-size: 14px;
}

.header-top__input-search {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EEC8AD269-FBF7-400F-A976-B09CC0221EE5%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-903.000000, -34.000000)' fill-rule='nonzero' stroke='%23A2A9B0' stroke-width='2'%3E%3Cg id='Group-5' transform='translate(888.000000, 24.000000)'%3E%3Cg id='search-icon' transform='translate(16.000000, 11.000000)'%3E%3Ccircle id='Oval' cx='7' cy='7' r='7'%3E%3C/circle%3E%3Cpath d='M12,12 L16,16' id='Path-7' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-position: 16px;
  background-repeat: no-repeat;
}

.header-top__input-search:focus {
  outline: none;
}

.header-top__input-search::placeholder {
  color: #a2a9b0;
}

.-flex-visible {
  display: flex;
}

.promotion-banner-wrapper {
  margin-bottom: 4.625rem;
}

.promotion-banner {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 780px;
  padding: 2.25rem 2rem 2.25rem 1.5rem;
  font-size: 1rem;
  border-radius: 8px;
  color: #1b1c26;
}

.promotion-banner:hover {
  text-decoration: none;
}

.promotion-banner:visited {
  color: #1b1c26;
}

.promotion-banner.-supernova {
  background-color: #e4ecf5;
}

.promotion-banner.-protopie {
  background-color: #fae6e6;
}

.promotion-banner.-abstract {
  background-color: #e6e6e6;
}

.promotion-banner.-xd {
  background-color: #f5d3eb;
}

.promotion-banner.-maze {
  background-color: #d7e0f7;
}

.promotion-banner.-porkbun {
  background-color: #fae1e1;
}

.promotion-banner__link {
  flex: 0 0 auto;
  border-radius: 18.5px;
  border: none;
  font-weight: 700;
  padding: 0.5625rem 0.75rem;
  color: #fff;
  cursor: pointer;
}

.promotion-banner__link.-supernova {
  background-color: #028ceb;
}

.promotion-banner__link.-protopie {
  background-color: #fc4d4c;
}

.promotion-banner__link.-abstract {
  background-color: #000;
}

.promotion-banner__link.-xd {
  background-color: #2e001f;
}

.promotion-banner__link.-maze {
  background-color: #225cff;
}

.promotion-banner__link.-porkbun {
  background-color: #ef7675;
}

.promotion-banner__main {
  flex-grow: 1;
  margin-left: 1.875rem;
}

.promotion-banner__title {
  font-size: 1.375rem;
  margin-bottom: 0;
  line-height: 1.25;
}

.promotion-banner__logo {
  flex: 0 0 auto;
  background-size: cover;
}

.promotion-banner__logo.-supernova {
  width: 4.5rem;
  height: 4.5rem;
  background-size: cover;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='72px' height='72px' viewBox='0 0 72 72' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EF58739A5-EC35-4CAF-9A96-8A3813904B8E%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-544.000000, -151.000000)' fill='%23171B1F' fill-rule='nonzero'%3E%3Cg id='Group-2-Copy' transform='translate(520.000000, 112.000000)'%3E%3Cg id='supernova-logo' transform='translate(24.000000, 39.000000)'%3E%3Cpath d='M35.292,0 L38.412,0 C47.928,1.512 52.812,11.34 54.192,19.98 C62.112,21.636 70.8,26.496 72,35.292 L72,38.412 C70.488,47.964 60.648,52.788 52.02,54.216 C50.388,62.148 45.468,70.8 36.684,72 L33.588,72 C24.048,70.488 19.2,60.648 17.808,52.02 C9.876,50.364 1.2,45.504 1.77635684e-15,36.708 L1.77635684e-15,33.588 C1.512,24.06 11.34,19.2 19.968,17.808 C21.612,9.864 26.52,1.212 35.292,2.13162821e-15 Z M30.384,10.08 C26.016,15.588 25.548,23.124 26.82,29.796 C31.74,23.652 39.264,20.004 47.076,19.5 C46.164,14.712 44.208,9.348 39.48,7.152 C36.216,5.58 32.424,7.392 30.384,10.08 Z M7.128,32.568 C5.592,35.832 7.416,39.6 10.104,41.64 C15.624,45.984 23.148,46.44 29.82,45.192 C23.628,40.296 20.004,32.736 19.488,24.912 C14.7,25.836 9.312,27.804 7.128,32.568 Z M42.144,26.808 C48.348,31.704 51.948,39.264 52.452,47.088 C57.24,46.188 62.616,44.244 64.836,39.516 C66.576,35.928 64.272,31.86 61.224,29.856 C55.728,25.932 48.576,25.668 42.144,26.808 Z M33.876,31.464 C30.576,32.88 30.024,37.872 33,39.912 C36,42.552 41.112,39.888 40.968,36 C41.076,32.52 36.972,29.88 33.876,31.464 Z M24.924,52.5 C25.836,57.312 27.816,62.7 32.592,64.884 C35.832,66.396 39.552,64.608 41.58,61.956 C45.984,56.424 46.452,48.852 45.168,42.144 C40.296,48.372 32.748,51.96 24.924,52.5 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.promotion-banner__logo.-protopie {
  width: 4.625rem;
  height: 4.625rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='74px' height='74px' viewBox='0 0 74 74' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EC0B40BF6-1174-4137-A74B-5FF9967FF87F%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cdefs%3E%3Cpath d='M3.33975904,0.100170732 C2.58529282,0.0971784518 1.86489322,0.413623895 1.35722892,0.97102439 C0.905552613,1.44579402 0.645796646,2.0707119 0.628012048,2.72536585 L0.628012048,2.90765854 C0.637048193,3.22712195 0.700301205,3.52853659 0.814156627,3.8064878 C0.818674699,3.82904878 0.828614458,3.8525122 0.836746988,3.87507317 C0.956017639,4.16114496 1.12589729,4.4234281 1.33825301,4.64936585 C1.34728916,4.66380488 1.36174699,4.67643902 1.37439759,4.69087805 L10.0210843,14.9552195 L13.1430723,18.6606341 L22.4864458,29.7507073 L25.6039157,33.4507073 L33.9731928,43.3838537 L37.0906627,47.0838537 L37.0906627,73.0289756 C38.9268072,73.0289756 40.5957831,72.298 41.821988,71.1185122 C41.826506,71.1185122 41.826506,71.1185122 41.826506,71.114 L42.7463855,70.0202439 L65.186747,43.3838537 L72.8710843,34.2629024 C72.9072289,34.2213902 72.9433735,34.1816829 72.9759036,34.1356585 C73.1394578,33.9299024 73.2722892,33.7024878 73.3680723,33.4516098 C73.4909639,33.1447805 73.5551205,32.8171951 73.5551205,32.4670488 L73.5551205,2.81741463 C73.5551205,2.10178049 73.2768072,1.44480488 72.8204819,0.967414634 C72.3103413,0.414016927 71.5911377,0.0997337575 70.8379518,0.101073171 L3.33975904,0.101073171 L3.33975904,0.100170732 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-543.000000, -322.000000)'%3E%3Cg id='Group-2-Copy-2' transform='translate(520.000000, 281.000000)'%3E%3Cg id='protopie-logo' transform='translate(23.000000, 41.000000)'%3E%3Cg id='Group' transform='translate(0.028916, 0.374512)'%3E%3Cg id='Clipped'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cg id='a'%3E%3C/g%3E%3Cpath d='M3.33975904,0.100170732 C2.58529282,0.0971784518 1.86489322,0.413623895 1.35722892,0.97102439 C0.905552613,1.44579402 0.645796646,2.0707119 0.628012048,2.72536585 L0.628012048,2.90765854 C0.637048193,3.22712195 0.700301205,3.52853659 0.814156627,3.8064878 C0.818674699,3.82904878 0.828614458,3.8525122 0.836746988,3.87507317 C0.956017639,4.16114496 1.12589729,4.4234281 1.33825301,4.64936585 C1.34728916,4.66380488 1.36174699,4.67643902 1.37439759,4.69087805 L10.0210843,14.9552195 L13.1430723,18.6606341 L22.4864458,29.7507073 L25.6039157,33.4507073 L33.9731928,43.3838537 L37.0906627,47.0838537 L37.0906627,73.0289756 C38.9268072,73.0289756 40.5957831,72.298 41.821988,71.1185122 C41.826506,71.1185122 41.826506,71.1185122 41.826506,71.114 L42.7463855,70.0202439 L65.186747,43.3838537 L72.8710843,34.2629024 C72.9072289,34.2213902 72.9433735,34.1816829 72.9759036,34.1356585 C73.1394578,33.9299024 73.2722892,33.7024878 73.3680723,33.4516098 C73.4909639,33.1447805 73.5551205,32.8171951 73.5551205,32.4670488 L73.5551205,2.81741463 C73.5551205,2.10178049 73.2768072,1.44480488 72.8204819,0.967414634 C72.3103413,0.414016927 71.5911377,0.0997337575 70.8379518,0.101073171 L3.33975904,0.101073171 L3.33975904,0.100170732 Z' id='Path' mask='url(%23mask-2)'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3Cpath d='M3.3686747,0.475585366 C2.61420848,0.472593086 1.89380888,0.789038529 1.38614458,1.34643902 C0.93413832,1.82107178 0.674053952,2.44600534 0.656024096,3.10078049 L0.656024096,3.28307317 C0.665060241,3.60253659 0.729216867,3.90395122 0.843072289,4.181 C0.846686747,4.20356098 0.85753012,4.22702439 0.865662651,4.24958537 C0.984837869,4.53597715 1.15472206,4.79857298 1.36716867,5.02478049 C1.37620482,5.03831707 1.38975904,5.05185366 1.40331325,5.06539024 L10.05,15.3297317 L13.171988,19.0360488 L22.5153614,30.1252195 L25.6328313,33.826122 L34.0012048,43.7583659 L37.1186747,47.4592683 L37.1186747,73.4043902 C38.9557229,73.4043902 40.6246988,72.6734146 41.85,71.4930244 C41.8545181,71.4930244 41.8545181,71.4930244 41.8545181,71.4894146 L42.7762048,70.3947561 L65.2138554,43.7592683 L72.8981928,34.6383171 C72.9343373,34.5977073 72.9713855,34.5570976 73.003012,34.5119756 C73.1674699,34.3062195 73.2993976,34.0788049 73.3951807,33.8270244 C73.5180723,33.5210976 73.5822289,33.1935122 73.5822289,32.8433659 L73.5822289,3.19102439 C73.5822289,2.47629268 73.3048193,1.81931707 72.848494,1.34102439 C72.3383533,0.787626683 71.6191498,0.473343514 70.8659639,0.474682927 L3.3686747,0.474682927 L3.3686747,0.475585366 Z' id='Path' fill='%23FE5E5A'%3E%3C/path%3E%3Cpath d='M37.1195783,62.3089024 L37.1195783,73.4043914 C35.3538837,73.4053977 33.6570745,72.7202425 32.388253,71.4939268 C32.3837349,71.4939268 32.3837349,71.4939268 32.3837349,71.4894146 L31.4629518,70.3956585 L9.02439759,43.7592683 L1.38524096,34.6924634 C1.36808292,34.677952 1.35289444,34.6612664 1.34006024,34.6428293 L1.22168675,34.5011463 C1.21156801,34.491595 1.202482,34.4810085 1.19457831,34.469561 C1.04581141,34.2731186 0.925924275,34.0564477 0.838554217,33.826122 C0.726278421,33.5411463 0.664513733,33.238832 0.656024096,32.9327073 L0.656024096,32.7504146 C0.674096386,32.0672683 0.947891566,31.4563171 1.38524096,30.991561 C1.89546202,30.4377463 2.61512811,30.1234042 3.3686747,30.1252195 L9.99487952,30.1252195 L13.1123494,33.826122 L21.4807229,43.7583659 L35.2003012,60.0392683 L37.1150602,62.3134146 L37.1195783,62.3089024 Z' id='Path' fill='%23FCD1CA'%3E%3C/path%3E%3Cpath d='M37.1195783,47.4592683 L37.1195783,62.3089024 L37.1150602,62.3134146 L35.2003012,60.0392683 L21.4807229,43.7592683 L13.113253,33.8270244 L9.99578313,30.126122 L1.33463855,19.8527561 C1.12116308,19.6125711 0.952806453,19.3359083 0.837650602,19.0360488 C0.725706278,18.7497909 0.664551099,18.4462451 0.656927711,18.1390244 L0.656927711,17.9567317 C0.675,17.2771951 0.947891566,16.6662439 1.38524096,16.2014878 C1.89348124,15.64447 2.61410464,15.3283983 3.3686747,15.3315366 L10.05,15.3315366 L13.171988,19.0360488 L22.5153614,30.126122 L25.6328313,33.8270244 L34.0012048,43.7592683 L37.1186747,47.4592683 L37.1195783,47.4592683 Z' id='Path' fill='%23FF9D8D'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.promotion-banner__logo.-abstract {
  width: 3.9375rem;
  height: 3.9375rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='63px' height='63px' viewBox='0 0 63 63' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EB557AFDE-085A-4616-9012-1A58006D71DF%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-549.000000, -493.000000)' fill='%23000000'%3E%3Cg id='Group-2-Copy-2' transform='translate(520.000000, 450.000000)'%3E%3Cg id='abstract-logo' transform='translate(29.000000, 43.000000)'%3E%3Cg id='Group'%3E%3Cpath d='M31.3888235,0 C6.27529412,0 0,6.27529412 0,31.3888235 C0,56.5023529 6.27529412,62.7776471 31.3888235,62.7776471 C56.5023529,62.7776471 62.7776471,56.5023529 62.7776471,31.3888235 C62.7776471,6.27529412 56.5023529,0 31.3888235,0 Z M26.2376471,48.5594118 C19.6043718,48.5389596 14.2416952,43.148663 14.2553195,36.5153703 C14.2689437,29.8820775 19.6537175,24.5138553 26.2870208,24.5206517 C32.920324,24.527448 38.2940861,29.9066932 38.2941176,36.54 C38.2804863,43.1869573 32.8846148,48.5662431 26.2376471,48.5594118 Z M48.0652941,48.0652941 L42.1729412,48.0652941 L42.1729412,20.5923529 L14.7123529,20.5923529 L14.7123529,14.7123529 L48.0652941,14.7123529 L48.0652941,48.0652941 Z' id='Shape' fill-rule='nonzero'%3E%3C/path%3E%3Ccircle id='Oval' cx='26.2376471' cy='36.54' r='6.12705882'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.promotion-banner__logo.-xd {
  width: 3.875rem;
  height: 3.75rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='62px' height='60px' viewBox='0 0 62 60' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E56FF3D09-AF5C-48EA-BA2B-0B04FB273D48%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-549.000000, -663.000000)'%3E%3Cg id='Group-2-Copy-2' transform='translate(520.000000, 619.000000)'%3E%3Cg id='xd-logo' transform='translate(29.000000, 44.000000)'%3E%3Cpath d='M51.0208333,60 L10.9791667,60 C4.90833333,60 0,55.1282051 0,49.1025641 L0,10.8974359 C0,4.87179487 4.90833333,0 10.9791667,0 L51.0208333,0 C57.0916667,0 62,4.87179487 62,10.8974359 L62,49.1025641 C62,55.1282051 57.0916667,60 51.0208333,60 Z' id='Path' fill='%23FF26BE'%3E%3C/path%3E%3Cpath d='M49.6165448,58 L11.4092574,58 C6.22509353,58 2,53.8107477 2,48.6705607 L2,12.3294393 C2,7.18925234 6.22509353,3 11.4092574,3 L49.590624,3 C54.8007087,3 59,7.18925234 59,12.3294393 L59,48.6448598 C59.0258022,53.8107477 54.8007087,58 49.6165448,58 Z' id='Path' fill='%232E001F'%3E%3C/path%3E%3Cg id='Group' transform='translate(11.000000, 15.000000)' fill='%23FFD9F2'%3E%3Cpath d='M13.0689189,13.4954955 L20.2581081,27.0666667 C20.3864865,27.2684685 20.3094595,27.4702703 20.1040541,27.4702703 L15.6364865,27.4702703 C15.3540541,27.4702703 15.2256757,27.3945946 15.0972973,27.1423423 C13.4540541,23.8126126 11.7851351,20.4828829 10.0648649,16.9009009 L10.0135135,16.9009009 C8.47297297,20.2810811 6.77837838,23.8378378 5.13513514,27.1675676 C5.00675676,27.3693694 4.87837838,27.445045 4.67297297,27.445045 L0.436486486,27.445045 C0.17972973,27.445045 0.154054054,27.2432432 0.282432432,27.0918919 L7.31756757,13.9243243 L0.513513514,0.605405405 C0.359459459,0.403603604 0.513513514,0.252252252 0.667567568,0.252252252 L5.08378378,0.252252252 C5.34054054,0.252252252 5.44324324,0.302702703 5.54594595,0.52972973 C7.16351351,3.85945946 8.80675676,7.29009009 10.3472973,10.645045 L10.3986486,10.645045 C11.8878378,7.31531532 13.5310811,3.85945946 15.122973,0.554954955 C15.2513514,0.353153153 15.3283784,0.227027027 15.5851351,0.227027027 L19.7189189,0.227027027 C19.9243243,0.227027027 20.0013514,0.378378378 19.872973,0.58018018 L13.0689189,13.4954955 Z' id='Path'%3E%3C/path%3E%3Cpath d='M21.5162162,17.6072072 C21.5162162,11.7297297 25.4959459,7.13873874 31.8121622,7.13873874 C32.3513514,7.13873874 32.6337838,7.13873874 33.1472973,7.18918919 L33.1472973,0.504504505 C33.1472973,0.353153153 33.2756757,0.252252252 33.4040541,0.252252252 L37.4608108,0.252252252 C37.6662162,0.252252252 37.7175676,0.327927928 37.7175676,0.454054054 L37.7175676,23.6108108 C37.7175676,24.2918919 37.7175676,25.1495495 37.8459459,26.0828829 C37.8459459,26.2342342 37.7945946,26.2846847 37.6405405,26.3603604 C35.4837838,27.3693694 33.2243243,27.8235636 31.0675676,27.8235636 C25.4959459,27.8486486 21.5162162,24.4684685 21.5162162,17.6072072 Z M33.1472973,11.1495495 C32.7878378,10.9981982 32.2743243,10.8972973 31.6581081,10.8972973 C28.422973,10.8972973 26.1635135,13.3441441 26.1635135,17.4054054 C26.1635135,22.0468468 28.4743243,23.9135135 31.3756757,23.9135135 C31.9918919,23.9135135 32.6594595,23.8378378 33.1472973,23.636036 L33.1472973,11.1495495 Z' id='Shape' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.promotion-banner__logo.-maze {
  width: 4.625rem;
  height: 2.25rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='74px' height='36px' viewBox='0 0 74 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3ECA695A20-18CC-4C8A-B323-A76BE1719A4C%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-544.000000, -845.000000)' fill='%23225CFF'%3E%3Cg id='Group-2-Copy-2' transform='translate(520.000000, 788.000000)'%3E%3Cg id='maze-logo' transform='translate(24.000000, 57.000000)'%3E%3Cpath d='M49.3229892,1.636 L48.9092258,1.2008 L25.3573333,25.0488 L35.5653548,35.752 L49.3229892,21.8208 L63.0814194,35.752 L73.2894409,25.048 L49.7383441,1.2016 L49.3229892,1.636 Z M0.296795699,23.0504 L9.8396129,33.056 L31.9711828,10.6456 L22.4283656,0.64 L0.296795699,23.0504 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.promotion-banner__logo.-porkbun {
  width: 5.8125rem;
  height: 1.625rem;
}

.label-wrapper {
  display: flex;
  margin-left: 16px;
}

.label {
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border: solid 1px #dbdbdb;
  background-image: linear-gradient(to bottom, #f5f5f5, #ededed);
  padding-top: 7px;
  padding-right: 7px;
  padding-bottom: 7px;
  margin-right: 8px;
  line-height: 1;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
}

.label:last-child {
  margin-right: 0;
}

.label:before {
  content: '';
  position: absolute;
  top: 4px;
  left: 7px;
  height: 15px;
  background-size: cover;
  background-repeat: no-repeat;
}

.label--figma {
  padding-left: 23px;
}

.label--figma:before {
  width: 10px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='10px' height='15px' viewBox='0 0 10 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EE4D6A3B6-10C8-463E-8A77-596D7A5CC2CE%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-792.000000, -611.000000)'%3E%3Cg id='content' transform='translate(520.000000, 469.000000)'%3E%3Cg id='design-tool-item' transform='translate(0.000000, 135.000000)'%3E%3Cg id='figma-support-tag' transform='translate(265.000000, 1.000000)'%3E%3Cg id='figma-1' transform='translate(7.000000, 6.000000)'%3E%3Cpath d='M2.5,15 C3.88,15 5,13.88 5,12.5 L5,10 L2.5,10 C1.12,10 0,11.12 0,12.5 C0,13.88 1.12,15 2.5,15 Z' id='path0_fill' fill='%230ACF83'%3E%3C/path%3E%3Cpath d='M0,7.5 C0,6.12 1.12,5 2.5,5 L5,5 L5,10 L2.5,10 C1.12,10 0,8.88 0,7.5 Z' id='path1_fill' fill='%23A259FF'%3E%3C/path%3E%3Cpath d='M0,2.5 C0,1.12 1.12,0 2.5,0 L5,0 L5,5 L2.5,5 C1.12,5 0,3.88 0,2.5 Z' id='path1_fill_1_' fill='%23F24E1E'%3E%3C/path%3E%3Cpath d='M5,0 L7.5,0 C8.88,0 10,1.12 10,2.5 C10,3.88 8.88,5 7.5,5 L5,5 L5,0 Z' id='path2_fill' fill='%23FF7262'%3E%3C/path%3E%3Cpath d='M10,7.5 C10,8.88 8.88,10 7.5,10 C6.12,10 5,8.88 5,7.5 C5,6.12 6.12,5 7.5,5 C8.88,5 10,6.12 10,7.5 Z' id='path3_fill' fill='%231ABCFE'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.label--sketch {
  padding-left: 30px;
}

.label--sketch:before {
  width: 17px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='17px' height='15px' viewBox='0 0 17 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E5B108AAF-111D-43D8-B969-BD9A55E68A64%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-863.000000, -611.000000)'%3E%3Cg id='content' transform='translate(520.000000, 469.000000)'%3E%3Cg id='design-tool-item' transform='translate(0.000000, 135.000000)'%3E%3Cg id='sketch-support-tag' transform='translate(336.000000, 1.000000)'%3E%3Cg id='sketch-2' transform='translate(7.000000, 6.000000)'%3E%3Cg id='a-link' transform='translate(0.030421, 5.389709)' fill='%23EA6C00'%3E%3Cpolygon id='a' points='3.42344211 0 8.45186316 9.59302326 0 0'%3E%3C/polygon%3E%3C/g%3E%3Cg id='b-link' transform='translate(12.640842, 10.186221) scale(-1, 1) translate(-12.640842, -10.186221) translate(8.346105, 5.389709)' fill='%23EA6C00'%3E%3Cpolygon id='b' points='3.42344211 0 8.45186316 9.59302326 0 0'%3E%3C/polygon%3E%3C/g%3E%3Cg id='c-link' transform='translate(3.453684, 5.389709)' fill='%23FDAD00'%3E%3Cpolygon id='c' points='0 0 10.0568421 0 5.02842105 9.59302326'%3E%3C/polygon%3E%3C/g%3E%3Cg id='d-link' transform='translate(3.453684, 0.073256)' fill='%23FDD231'%3E%3Cpolygon id='d' points='5.02842105 0 0.264663158 0.490813953 0 5.31645349'%3E%3C/polygon%3E%3C/g%3E%3Cg id='e-link' transform='translate(10.915789, 2.776744) scale(-1, 1) translate(-10.915789, -2.776744) translate(8.321053, 0.073256)' fill='%23FDD231'%3E%3Cpolygon id='e' points='5.02842105 0 0.264663158 0.490813953 0 5.31645349'%3E%3C/polygon%3E%3C/g%3E%3Cg id='f-link' transform='translate(15.056632, 3.005930) scale(-1, 1) translate(-15.056632, -3.005930) translate(13.177684, 0.564070)' fill='%23FDAD00'%3E%3Cpolygon id='f' points='0 4.82563953 3.68810526 0 3.42344211 4.82563953'%3E%3C/polygon%3E%3C/g%3E%3Cg id='g-link' transform='translate(0.030421, 0.564070)' fill='%23FDAD00'%3E%3Cpolygon id='g' points='0 4.82563953 3.68810526 0 3.42344211 4.82563953'%3E%3C/polygon%3E%3C/g%3E%3Cg id='h-link' transform='translate(3.453684, 0.073256)' fill='%23FEEEB7'%3E%3Cpolygon id='h' points='5.02842105 0 0 5.31645349 10.0568421 5.31645349'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.label--xd {
  padding-left: 28px;
}

.label--xd:before {
  width: 15px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E67C5A0D6-5EC7-4EB6-B0AA-3D22564ACFA1%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-948.000000, -611.000000)'%3E%3Cg id='content' transform='translate(520.000000, 469.000000)'%3E%3Cg id='design-tool-item' transform='translate(0.000000, 135.000000)'%3E%3Cg id='sketch-support-tag' transform='translate(421.000000, 1.000000)'%3E%3Cg id='adobe-xd-1' transform='translate(7.000000, 6.000000)'%3E%3Cpath d='M12.3438,14.9969237 L2.6562,14.9969237 C1.1874,14.9969237 0,13.7793273 0,12.2731747 L0,2.72374897 C0,1.21759639 1.1874,0 2.6562,0 L12.3438,0 C13.8126,0 15,1.21759639 15,2.72374897 L15,12.2731747 C15,13.7793273 13.8126,14.9969237 12.3438,14.9969237 Z' id='Path' fill='%23FF26BE'%3E%3C/path%3E%3Cpath d='M12.1062,14.3558244 L2.8938,14.3558244 C1.644,14.3558244 0.6252,13.3111157 0.6252,12.0295324 L0.6252,2.9673913 C0.6252,1.68580804 1.644,0.641099262 2.8938,0.641099262 L12.1002,0.641099262 C13.3566,0.641099262 14.3688,1.68580804 14.3688,2.9673913 L14.3688,12.0233798 C14.3748,13.3111157 13.356,14.3558244 12.1062,14.3558244 Z' id='Path' fill='%232E001F'%3E%3C/path%3E%3Cpath d='M5.931,7.01763741 L7.6812,10.4655455 C7.7124,10.516612 7.6938,10.5682937 7.6434,10.5682937 L6.5556,10.5682937 C6.4866,10.5682937 6.4554,10.5492207 6.4242,10.4852338 C6.024,9.63925349 5.6178,8.79327317 5.199,7.88330599 L5.1864,7.88330599 C4.8114,8.74220673 4.3986,9.64602133 3.999,10.4920016 C3.9678,10.5430681 3.9366,10.5627564 3.8862,10.5627564 L2.856,10.5627564 C2.7936,10.5627564 2.787,10.5116899 2.8188,10.4729286 L4.5312,7.1271534 L2.8752,3.74323216 C2.8374,3.69216571 2.8752,3.65340443 2.9124,3.65340443 L3.9876,3.65340443 C4.05,3.65340443 4.0752,3.66632486 4.0998,3.72415915 C4.4934,4.57013946 4.8936,5.44196062 5.2686,6.29409352 L5.2812,6.29409352 C5.6436,5.44811321 6.0438,4.57013946 6.4314,3.73031173 C6.4626,3.67924528 6.4812,3.64725185 6.5442,3.64725185 L7.5504,3.64725185 C7.6002,3.64725185 7.6194,3.68601313 7.5882,3.73707957 L5.931,7.01763741 Z M7.9878,8.06234619 C7.9878,6.56911403 8.9568,5.40258409 10.494,5.40258409 C10.6254,5.40258409 10.6938,5.40258409 10.8192,5.41550451 L10.8192,3.7173913 C10.8192,3.67863002 10.8504,3.65340443 10.8816,3.65340443 L11.8692,3.65340443 C11.919,3.65340443 11.9316,3.67247744 11.9316,3.70447088 L11.9316,9.58818704 C11.9316,9.76107465 11.9316,9.97887613 11.9628,10.2163659 C11.9628,10.2551272 11.9502,10.2674323 11.913,10.2871206 C11.388,10.5436833 10.8378,10.6587367 10.3128,10.6587367 C8.9562,10.664274 7.9872,9.80598852 7.9878,8.06234619 Z M10.8186,6.42206727 C10.731,6.38330599 10.6062,6.35808039 10.4562,6.35808039 C9.6684,6.35808039 9.1188,6.97949139 9.1188,8.011895 C9.1188,9.19134537 9.6816,9.6657096 10.3878,9.6657096 C10.5378,9.6657096 10.7004,9.64663659 10.8192,9.59495488 L10.8192,6.42206727 L10.8186,6.42206727 Z' id='Shape' fill='%23FFD9F2' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.sort-tool-modal__btn-choose.label--web {
  padding-left: 26px;
}

.label--web:before {
  width: 15px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg width='15' height='15' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 201.526 201.526' style='enable-background:new 0 0 201.526 201.526;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M191.125,11.403H10.4C4.666,11.403,0,16.068,0,21.805v59.108c0,5.738,4.666,10.404,10.4,10.404h180.726 c5.734,0,10.4-4.666,10.4-10.403V21.805C201.525,16.068,196.86,11.403,191.125,11.403z M194.577,80.914h-0.001 c0,1.903-1.547,3.454-3.451,3.454H10.4c-1.904,0-3.451-1.551-3.451-3.454V21.805c0-1.903,1.547-3.454,3.451-3.454h180.726 c1.903,0,3.451,1.551,3.451,3.454V80.914z'/%3E%3Cpath d='M63.924,35.968c-1.751-0.801-3.807-0.027-4.605,1.714L48.821,60.606l-3.19-6.696l6.109-13.338 c0.797-1.744,0.034-3.807-1.714-4.605c-1.751-0.801-3.811-0.027-4.605,1.714l-3.687,8.051l-3.859-8.099 c-0.825-1.734-2.888-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l6.358,13.347l-3.04,6.638l-10.947-22.97 c-0.821-1.734-2.888-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l14.143,29.686c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l3.716-8.113l3.888,8.161c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l13.596-29.686C66.434,38.83,65.671,36.766,63.924,35.968z'/%3E%3Cpath d='M122.991,35.968c-1.754-0.801-3.807-0.027-4.605,1.714l-10.498,22.924l-3.19-6.696l6.109-13.338 c0.797-1.744,0.034-3.807-1.714-4.605c-1.751-0.801-3.807-0.027-4.604,1.714l-3.687,8.051l-3.859-8.099 c-0.821-1.734-2.891-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l6.358,13.347l-3.04,6.638l-10.947-22.97 c-0.821-1.734-2.891-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l14.143,29.686c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l3.716-8.113l3.888,8.161c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l13.596-29.686C125.502,38.83,124.739,36.766,122.991,35.968z'/%3E%3Cpath d='M182.059,35.968c-1.751-0.801-3.807-0.027-4.605,1.714l-10.498,22.924l-3.19-6.696l6.109-13.338 c0.797-1.744,0.034-3.807-1.714-4.605c-1.751-0.801-3.807-0.027-4.605,1.714l-3.687,8.051l-3.859-8.099 c-0.821-1.734-2.888-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l6.358,13.347l-3.04,6.638l-10.946-22.971 c-0.821-1.734-2.888-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l14.143,29.686c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l3.716-8.113l3.888,8.161c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l13.596-29.686C184.57,38.83,183.806,36.766,182.059,35.968z'/%3E%3Cpath d='M183.461,140.316L130.3,97.208c-1.065-0.865-2.545-1.018-3.766-0.397c-1.222,0.621-1.965,1.907-1.893,3.278l3.627,68.345 c0.078,1.455,1.055,2.708,2.45,3.139c1.384,0.421,2.904-0.061,3.787-1.222c0.065-0.081,5.398-7.075,11.231-12.901l15.68,30.776 c0.417,0.821,1.143,1.442,2.022,1.727c0.35,0.112,0.713,0.17,1.072,0.17c0.543,0,1.086-0.129,1.578-0.38l12.385-6.311 c0.821-0.417,1.442-1.143,1.727-2.022c0.285-0.876,0.21-1.829-0.21-2.65l-15.68-30.772c8.14-1.293,16.932-1.5,17.037-1.5 c1.455-0.034,2.742-0.97,3.213-2.348C185.031,142.759,184.594,141.232,183.461,140.316z M158.337,142.055 c-1.045,0.238-1.92,0.943-2.375,1.914c-0.451,0.97-0.434,2.097,0.054,3.05l16.206,31.8l-6.192,3.156l-16.206-31.804 c-0.485-0.953-1.384-1.632-2.436-1.832c-0.217-0.044-0.438-0.065-0.658-0.065c-0.831,0-1.646,0.298-2.283,0.859 c-3.444,3.003-6.926,6.756-9.715,9.972l-2.734-51.576l40.117,32.53C167.876,140.426,162.793,141.037,158.337,142.055z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
}

.sort-tool-modal__btn-choose.label--mobile {
  padding-left: 24px;
}

.label.label--web {
  padding-left: 26px;
}

.label--mobile:before {
  width: 15px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg width='15px' height='15px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 508 508' style='enable-background:new 0 0 508 508;' xml:space='preserve'%3E%3Cpath style='fill:%23F4EFEF;' d='M166,506h172.4c26,0,47.2-24,47.2-50.4v-400c0-26.4-21.2-46-47.6-46H166c-26,0-47.6,17.2-47.6,43.6 v401.2C118.4,480.8,140,506,166,506z'/%3E%3Cpath style='fill:%23CDEEF9;' d='M366.4,78H140.8l-2.4-1.2V434h228V78z'/%3E%3Cpath d='M167.2,508c-29.6,0-54.8-24.4-54.8-53.2V53.6c0-28.8,25.2-53.2,54.8-53.6l175.2,0.4c29.6,0,52.8,23.6,52.8,53.2l0.4,401.2 l0,0c0,29.6-24,53.2-53.2,53.2H167.2z M167.2,8c-25.2,0-46.8,20.8-46.8,45.6v401.2c0,24.4,21.6,45.2,46.8,45.2h174.4 c24.8,0,45.2-20.4,45.2-45.2l-0.4-401.2c0-25.2-19.6-45.2-44.8-45.2L167.2,8z'/%3E%3Cpath d='M368.4,440h-232c-2.4,0-4-1.6-4-4V76c0-2.4,1.6-4,4-4h182c2.4,0,4,1.6,4,4s-1.6,4-4,4h-178v352h224V80h-10c-2.4,0-4-1.6-4-4 s1.6-4,4-4h14c2.4,0,4,1.6,4,4v360C372.4,438.4,370.8,440,368.4,440z'/%3E%3Cpath d='M282.4,48h-56c-2.4,0-4-1.6-4-4s1.6-4,4-4h56c2.4,0,4,1.6,4,4S284.8,48,282.4,48z'/%3E%3Cpath d='M207.6,44.4c-1.2,0-2-0.4-2.8-1.2c-0.8-0.8-1.2-2-1.2-2.8c0-1.2,0.4-2,1.2-2.8c1.6-1.6,4-1.6,5.6,0c0.8,0.8,1.2,2,1.2,2.8 s-0.4,2-1.2,2.8C209.6,44,208.4,44.4,207.6,44.4z'/%3E%3Cpath d='M235.6,172c-1.2,0-2-0.4-2.8-1.2l-92-92c-1.6-1.6-1.6-4,0-5.6s4-1.6,5.6,0l92,92c1.6,1.6,1.6,4,0,5.6 C237.6,171.6,236.4,172,235.6,172z'/%3E%3Cpath d='M295.6,232c-1.2,0-2-0.4-2.8-1.2l-40-40c-1.6-1.6-1.6-4,0-5.6s4-1.6,5.6,0l40,40c1.6,1.6,1.6,4,0,5.6 C297.6,231.6,296.4,232,295.6,232z'/%3E%3Cpath d='M331.6,312c-1.2,0-2-0.4-2.8-1.2L212.4,194.4c-1.6-1.6-1.6-4,0-5.6s4-1.6,5.6,0l116.4,116.4c1.6,1.6,1.6,4,0,5.6 C334,311.6,332.8,312,331.6,312z'/%3E%3Cpath d='M367.6,348c-1.2,0-2-0.4-2.8-1.2l-19.2-19.2c-1.6-1.6-1.6-4,0-5.6s4-1.6,5.6,0l19.2,19.2c1.6,1.6,1.6,4,0,5.6 C369.6,347.6,368.4,348,367.6,348z'/%3E%3Cpath d='M254,492.4c-4.4,0-8.8-1.2-12.4-3.6c-5.6-3.2-9.2-8.8-10.8-14.8c-1.6-6.4-0.4-12.8,2.8-18c3.2-5.6,8.8-9.2,14.8-10.8 c3.6-0.8,7.2-0.8,10.4,0c2,0.4,3.6,2.4,3.2,4.8c-0.4,2-2.4,3.6-4.8,3.2c-2.4-0.4-4.8-0.4-7.2,0c-4,0.8-7.6,3.6-10,7.2s-2.8,8-2,12 s3.6,7.6,7.2,10c3.6,2.4,8,2.8,12,2s7.6-3.6,10-7.2s2.8-8,2-12c-0.4-2,0.8-4.4,2.8-4.8s4.4,0.8,4.8,2.8c1.6,6.4,0.4,12.8-2.8,18 c-3.2,5.6-8.8,9.2-14.8,10.8C257.6,492,255.6,492.4,254,492.4z'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
}

.sort-tool-modal__btn-choose.label--desktop {
  padding-left: 26px;
}

.label.label--desktop {
  padding-left: 26px;
}

.label--desktop:before {
  width: 15px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg width='15' height='15' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 490 490' style='enable-background:new 0 0 490 490;' xml:space='preserve'%3E%3Cg%3E%3Crect x='155.039' y='97.251' width='122.5' height='30.625'/%3E%3Crect x='197.148' y='142.232' width='122.5' height='30.625'/%3E%3Crect x='155.039' y='187.212' width='122.5' height='30.625'/%3E%3Crect x='197.148' y='232.193' width='122.5' height='30.632'/%3E%3Crect x='155.039' y='277.166' width='122.5' height='30.625'/%3E%3Cpath d='M22.969,362.717h183.75v52.951h-69.863v30.625h216.289v-30.625h-69.863v-52.951h183.75 c12.633,0,22.969-10.336,22.969-22.969V66.676c0-12.633-10.336-22.969-22.969-22.969H22.969C10.336,43.707,0,54.043,0,66.676 v273.073C0,352.381,10.336,362.717,22.969,362.717z M30.625,74.332h428.75v257.76H30.625V74.332z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
}

.label.label--mobile,
.sort-tool-modal__btn-choose.label--photoshop,
.label.label--photoshop {
  padding-left: 26px;
}

.label--photoshop:before {
  width: 15px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E%3C!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 52 52' style='enable-background:new 0 0 52 52;' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%23393687;' d='M40.824,52H11.176C5.003,52,0,46.997,0,40.824V11.176C0,5.003,5.003,0,11.176,0h29.649 C46.997,0,52,5.003,52,11.176v29.649C52,46.997,46.997,52,40.824,52z'/%3E%3Cg%3E%3Cpath style='fill:%2389D3FF;' d='M12.16,39H9.28V11h9.64c2.613,0,4.553,0.813,5.82,2.44c1.266,1.626,1.9,3.76,1.9,6.399 c0,0.934-0.027,1.74-0.08,2.42c-0.054,0.681-0.22,1.534-0.5,2.561c-0.28,1.026-0.66,1.866-1.14,2.52 c-0.48,0.654-1.213,1.227-2.2,1.72c-0.987,0.494-2.16,0.74-3.52,0.74h-7.04V39z M12.16,27h6.68c0.96,0,1.773-0.187,2.44-0.56 c0.666-0.374,1.153-0.773,1.46-1.2c0.306-0.427,0.546-1.04,0.72-1.84c0.173-0.801,0.267-1.4,0.28-1.801 c0.013-0.399,0.02-0.973,0.02-1.72c0-4.053-1.694-6.08-5.08-6.08h-6.52V27z'/%3E%3Cpath style='fill:%2389D3FF;' d='M29.48,33.92l2.8-0.12c0.106,0.987,0.6,1.754,1.48,2.3c0.88,0.547,1.893,0.82,3.04,0.82 s2.14-0.26,2.98-0.78c0.84-0.52,1.26-1.266,1.26-2.239s-0.36-1.747-1.08-2.32c-0.72-0.573-1.6-1.026-2.64-1.36 c-1.04-0.333-2.086-0.686-3.14-1.06c-1.054-0.373-1.98-0.96-2.78-1.76c-0.987-0.934-1.48-2.073-1.48-3.42s0.54-2.601,1.62-3.761 s2.833-1.739,5.26-1.739c0.854,0,1.653,0.1,2.4,0.3c0.746,0.2,1.28,0.394,1.6,0.58l0.48,0.279l-0.92,2.521 c-0.854-0.666-1.974-1-3.36-1c-1.387,0-2.42,0.26-3.1,0.78c-0.68,0.52-1.02,1.18-1.02,1.979c0,0.88,0.426,1.574,1.28,2.08 c0.853,0.507,1.813,0.934,2.88,1.28c1.066,0.347,2.126,0.733,3.18,1.16c1.053,0.427,1.946,1.094,2.68,2s1.1,2.106,1.1,3.6 c0,1.494-0.6,2.794-1.8,3.9C41,39.046,39.246,39.6,36.94,39.6c-2.307,0-4.114-0.547-5.42-1.64 C30.213,36.867,29.533,35.52,29.48,33.92z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
}

.header-top__view-setup {
  position: relative;
  flex-grow: 1;
  display: flex;
  max-width: 415px;
}

.header-top__view-setup .header-top__input-search {
  flex-grow: 1;
  max-width: 325px;
  min-width: 260px;
}

.header-top__sort-tool-btn {
  position: relative;
  padding: 10px 6px 11px 30px;
  font-size: 14px;
  line-height: 1;
  margin-left: 15px;
  border-radius: 5px;
  border-style: solid;
  border-color: transparent;
  border-width: 1px;
  outline: none;
  cursor: pointer;
}

.header-top__sort-tool-btn::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 9px;
  width: 15px;
  height: 12px;
  background-size: cover;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='16px' height='13px' viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 59.1 (86144) - https://sketch.com --%3E%3Ctitle%3Esearch-icon%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='awesome-design-plugins-v3-tools-filter-v3' transform='translate(-1236.000000, -36.000000)' fill-rule='nonzero' stroke='%2352B372' stroke-width='2'%3E%3Cg id='Group-5' transform='translate(1228.000000, 24.000000)'%3E%3Cg id='search-icon' transform='translate(9.000000, 13.000000)'%3E%3Cg id='Group-2'%3E%3Cline x1='0' y1='0.744318182' x2='14' y2='0.744318182' id='Path-2'%3E%3C/line%3E%3Cline x1='2' y1='5.74431818' x2='12' y2='5.74431818' id='Path-2'%3E%3C/line%3E%3Cline x1='5' y1='10.7443182' x2='9' y2='10.7443182' id='Path-2'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__sort-tool-btn.-violet::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='16px' height='13px' viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Efilter-icon%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='awesome-design-plugins-v3-tools-filter-v3-copy' transform='translate(-1233.000000, -36.000000)' fill-rule='nonzero' stroke='%23BE5DC2' stroke-width='2'%3E%3Cg id='Group-5' transform='translate(1225.000000, 24.000000)'%3E%3Cg id='filter-icon' transform='translate(9.000000, 13.000000)'%3E%3Cg id='Group-2'%3E%3Cpath d='M0,0.744318182 L14,0.744318182' id='Path-2'%3E%3C/path%3E%3Cpath d='M2,5.74431818 L12,5.74431818' id='Path-2'%3E%3C/path%3E%3Cpath d='M5,10.7443182 L9,10.7443182' id='Path-2'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__sort-tool-btn.-mint {
  background-color: #d2fad7;
  color: #028930;
}

.header-top__sort-tool-btn.-mint.-active {
  border-color: #52b372;
}

.header-top__sort-tool-btn.-violet {
  background-color: #f4d3f5;
  color: var(--violet);
}

.header-top__sort-tool-btn.-violet.-active {
  border-color: var(--violet);
}

.header-top__sort-tool-modal {
  position: absolute;
  top: 50px;
  right: -18px;
  display: block;
  width: 75%; /* 69.879518072%; */
  max-width: 290px;
  padding: 17px 19px;
  background-color: #ffffff;
  border-radius: 4px;
  opacity: 1;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.15s ease-in-out;
}

.header-top__sort-tool-modal.-hidden {
  display: none;
  opacity: 0;
}

.sort-tool-modal__title {
  margin: 0;
  font-size: 12px;
  line-height: 26px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.sort-tool-modal__nav {
  display: flex;
  flex-wrap: wrap;
}

.sort-tool-modal__btn-choose {
  position: relative;
  padding-top: 7px;
  padding-right: 7px;
  padding-bottom: 8px;
  padding-left: 7px;
  margin-right: 6px;
  margin-bottom: 8px;
  border-radius: 4px;
  border: 1px solid #dbdbdb;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  background-image: linear-gradient(180deg, #f5f5f5 0%, #ededed 100%);
  cursor: pointer;
  outline: none;
}

.sort-tool-modal__btn-choose:before {
  content: '';
  position: absolute;
  top: 5px;
  left: 7px;
  height: 15px;
  background-size: cover;
  background-repeat: no-repeat;
}

.sort-tool-modal__btn-choose:last-child {
  margin-right: 0;
}

.sort-tool-modal__btn-choose.-sketch {
  padding-left: 30px;
}

.sort-tool-modal__btn-choose.-figma {
  padding-left: 23px;
}

.sort-tool-modal__btn-choose.-xd {
  padding-left: 28px;
}

.header.-mint .sort-tool-modal__btn-choose.-active {
  background-image: none;
  background-color: #d2fad7;
  border-color: #52b372;
  color: #028930;
}

.header.-violet .sort-tool-modal__btn-choose.-active {
  background-image: none;
  background-color: #f4d3f5;
  border-color: var(--violet);
  color: var(--violet);
}

@media (max-width: 767px) {
  .promotion-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .promotion-banner__main {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 0;
  }

  .header-top__sort-tool-btn {
    position: absolute;
    right: 16px;
    bottom: -60px;
  }

  .header-top__sort-tool-modal {
    top: 124px;
    right: 16px;
  }

  .header-top__view-setup .header-top__input-search {
    flex-grow: 1;
    min-width: 200px;
  }
}

@media (max-width: 960px) {
  main > article {
    margin-bottom: 3rem;
  }

  body > .nav {
    display: none;
    margin-top: 0;
  }

  body > .nav--visible {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 2;
  }

  .nav ul {
    left: 50%;
    top: 57%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 768px;
    min-width: 320px;
  }

  .nav li > a {
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
  }

  .header-top__nav-item {
    position: relative;
  }

  .header-top__nav-item::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hamburger-menu {
    display: inline-block;
    width: 22px;
    height: auto;
    padding: 1rem;
    z-index: 10;
  }

  .bar1,
  .bar2,
  .bar3 {
    width: 22px;
    height: 3px;
    background-color: var(--black);
    margin: 6px 0;
    transition: 0.4s;
  }

  .hamburger-menu--change .bar1 {
    width: 18px;
    transform: rotate(-45deg) translate(-5px, 6px);
  }

  .hamburger-menu--change .bar2 {
    opacity: 0;
  }

  .hamburger-menu--change .bar3 {
    width: 18px;
    transform: rotate(45deg) translate(-6px, -8px);
  }

  main {
    max-width: 556px;
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }

  .tool {
    flex-direction: column;
    margin-bottom: 3rem;
  }

  .tool__asset {
    margin-bottom: 1rem;
  }

  .welcome {
    align-items: flex-start;
  }

  .welcome__title {
    max-width: 400px;
    font-size: 3rem;
  }

  .welcome__description {
    max-width: 340px;
    text-align: left;
  }

  .promo-banner--flawless-feedback {
    flex-direction: column;
    align-items: flex-start;
  }

  .promo-banner--flawless-feedback__description {
    margin: 3rem 0;
  }

  .tags {
    margin-top: 0.5rem;
  }

  .tag {
    margin-bottom: 0.5rem;
  }

  .header-top .logo {
    display: none;
  }

  .header-top.-flex-visible {
    position: fixed;
    display: flex;
    width: 100%;
    height: auto;
    background-color: #ffffff;
    z-index: 3;
  }

  .header-top__nav {
    display: flex;
    margin-left: 0;
  }

  .header-top__nav-item {
    display: block;
    width: 48px;
    height: 48px;
    padding: 1.625rem 0 0 0;
    font-size: 0;
    border: 0.313rem solid transparent;
  }

  .header-top__nav-item:visited {
    color: #8490a3;
  }

  .header-top__nav-item.-tool::before,
  .header-top__nav-item.-plugin::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .header-top__nav-item.-active {
    border-left: none;
  }

  .header-top__input-search {
    width: 50%;
  }
}

/* responsiveness edits */

@media (min-width: 960px) and (max-width: 1439px) {
  .header-inner {
    padding: 0 9.722222222%;
  }

  .nav {
    padding-left: 9.722222222%;
  }

  body > main {
    padding-right: 9.722222222%;
  }

  body > .nav {
    margin-top: 110px !important;
  }
}

@media (min-width: 960px) {
  .promo-banner--flawless-feedback__description {
    flex-basis: 60%;
    padding-left: 1rem;
  }

  .header-inner {
    justify-content: space-between;
    box-sizing: border-box;
    height: 84px;
  }

  .header-top__nav {
    height: calc(100% + 2px);
  }

  .header-top__nav {
    display: flex;
    margin-left: 7rem;
  }

  .header-top__nav-item {
    box-sizing: border-box;
    position: relative;
    height: 100%;
    font-size: 1.125rem;
    padding-top: 2rem;
    padding-left: 69px; /* 5.250rem; */
    padding-bottom: 1.875rem;
    padding-right: 28px; /* 1.875rem; */
    color: #8490a3;
    line-height: 1.25;
    transition: all 0.15s ease-in-out;
  }

  .header-top__nav-item span {
    position: absolute;
    padding-left: 28px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
  }

  .header-top__nav-item.-open.-tool,
  .header-top__nav-item.-tool:hover {
    padding-right: 100px;
  }

  .header-top__nav-item.-open.-plugin,
  .header-top__nav-item.-plugin:hover {
    padding-right: 122px;
  }

  .header-top__nav-item.-open.-kit,
  .header-top__nav-item.-kit:hover {
    padding-right: 112px;
  }

  .header-top__nav-item.-open span,
  .header-top__nav-item:hover span {
    z-index: 10;
    transition: all 0.2s ease-in-out;
    visibility: visible;
    opacity: 1;
  }

  .logo__title {
    font-size: 100% !important;
  }

  .header-top__nav {
    margin-left: 0 !important;
  }

  .header-top__view-setup {
    max-width: 352px;
  }
}

        </style>
    
            
        <link href="https://fonts.googleapis.com/css?family=Lato:700|Montserrat:400,600i,700|Pacifico&amp;display=swap" rel="stylesheet">
    
            
        <!-- Google Analytics -->
        <script>
            window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
            ga('create', 'UA-63048232-1', 'auto');
            ga('send', 'pageview');
        </script>
        <script async="" src="https://www.google-analytics.com/analytics.js"></script>

        <!-- Facebook Pixel Code -->
        <script>
            !function(f,b,e,v,n,t,s)
            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
            n.queue=[];t=b.createElement(e);t.async=!0;
            t.src=v;s=b.getElementsByTagName(e)[0];
            s.parentNode.insertBefore(t,s)}(window, document,'script',
            'https://connect.facebook.net/en_US/fbevents.js');
            fbq('init', '1844132335637828');
            fbq('track', 'PageView');
        </script>
    
        </head><body class="-blue"><div class="hidden-in-page">
<h1>Awesome Design Tools</h1>
<ul>
<li><a href="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Plugins.md">Awesome Design Plugins</a></li>
<li><a href="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Conferences.md">Awesome Design Conferences</a></li>
<li><a href="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-UI-Kits.md">Awesome Design UI Kits</a></li>
</ul>
<p align="center">
    <a href="https://flawlessapp.io/designtools">
        
    </a>
</p>
<p align="center">
     
</p>
<h2>Awesome Design Tools as a part of Flawless App family joins Abstract!</h2>
<p>Today, we’re excited to announce that Flawless App has joined <a href="https://www.abstract.com">Abstract</a>, a design delivery platform that brings visibility, accountability, measurability, and predictability to design.</p>
<p>Flawless App was our first company, and we’re proud of everything that we’ve achieved with our 5-person team.</p>
<p>Since 2015, we’ve launched powerful tools for designers and developers — among them are <a href="https://flawlessapp.io/">Flawless App</a>, <a href="https://flawlessapp.io/reduceapp">Reduce</a>, <a href="https://flawlessapp.io/feedback">Flawless Feedback</a>. We’ve also invested a lot of love and care into community-driven initiatives. Awesome Design Tools is one of them.</p>
<h4>So what’s next?</h4>
<p>Our team has joined Abstract and is focused on building out the <a href="https://sdk.goabstract.com">Abstract SDK</a>, bringing developers’ experience forward. One unbelievable journey has finished and the new one has just begun. And if you want to know more about the future of Awesome Design Tools, <a href="https://flawlessapp.io/designtools/joinsabstract">please keep reading our FAQ</a>.</p>
<p align="center">
    <a href="https://flawlessapp.io/designtools/joinsabstract">
        
    </a>
</p>
<h2>How to Use and Contribute</h2>
<ul>
<li>Now you are in the <strong>Awesome Design Tools</strong> section, if you need plugins — go to <a href="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Plugins.md">Awesome Design Plugins</a>.</li>
<li>To find the tool, go through the Table of Contents or search for a keyword (for example, "animation", "prototyping").</li>
<li>Ask <a href="https://twitter.com/LisaDziuba">Lisa</a> on Twitter.</li>
</ul>
<p>If you found some great design tool or plugin, just send a Pull Request with respect to our <a href="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Contribution_Guidelines.md">Contribution Guidelines</a> (they're very simple, please take a look). Design tools should be submitted here and plugins in <a href="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Plugins.md">Awesome Design Plugins</a> file. We use such labels for free , open source  and Mac only  tools, don't forget to add them. Now I'd love to see your suggestions!</p>
</div>
<header class="header header-top -blue header-top--hide-banner">
        <div class="banner-top banner-abstract">
            <header>
                <div class="abstract-logo"></div>
                <a href="http://flawlessapp.io/designtools/joinsabstract" class="banner__text">
                    Awesome Design Tools as a part of Flawless App family joins Abstract!
                </a>
            </header>
            <footer class="banner__close-wrapper">
                <button class="banner__close">Close Banner</button>
            </footer>
        </div>
        <div class="header-inner">
            <div class="logo">
                <div class="logo__asset -logo-adt"></div>
                <div class="logo__title">Awesome Design Tools</div>
            </div>
            <nav class="header-top__nav">
                    <a href="/designtools" class="header-top__nav-item -tool -open -active">
                        <span>Tools</span>
                    </a>
                 
                    <a href="/designplugins" class="header-top__nav-item -plugin ">
                        <span>Plugins</span>
                    </a>
                 
                    <a href="/designkits" class="header-top__nav-item -kit ">
                        <span>UI Kits</span>
                    </a>
                
            </nav>
            
                    <input type="text" placeholder="Search for tool…" class="header-top__input-search js-search-input">
                
            
            
        <div class="hamburger-menu">
		<div class="bar1"></div>
		<div class="bar2"></div>
		<div class="bar3"></div>
	</div></div>
	</header>
<div class="nav">
<h2>Table of Content</h2>
<ul>
<li><a href="#accessibility-tools">Accessibility Tools</a></li>
<li><a href="#animation-tools">Animation Tools</a></li>
<li><a href="#augmented-reality">Augmented Reality</a></li>
<li><a href="#collaboration-tools">Collaboration Tools</a></li>
<li><a href="#color-picker-tools">Color Picker Tools</a></li>
<li><a href="#design-feedback-tools">Design Feedback Tools</a></li>
<li><a href="#design-handoff-tools">Design Handoff Tools</a></li>
<li><a href="#design-inspiration">Design Inspiration</a></li>
<li><a href="#design-system-tools">Design System Tools</a></li>
<li><a href="#design-to-code-tools">Design to Code Tools</a></li>
<li><a href="#design-version-control">Design Version Control</a></li>
<li><a href="#development-tools">Development Tools</a></li>
<li><a href="#experience-monitoring">Experience Monitoring</a></li>
<li><a href="#font-tools">Font Tools</a></li>
<li><a href="#gradient-tools">Gradient Tools</a></li>
<li><a href="#icons-tools">Icons Tools</a></li>
<li><a href="#illustrations">Illustrations</a></li>
<li><a href="#information-architecture">Information Architecture</a></li>
<li><a href="#logo-design">Logo Design</a></li>
<li><a href="#mockup-tools">Mockup Tools</a></li>
<li><a href="#no-code-tools">No Code Tools</a></li>
<li><a href="#pixel-art-tools">Pixel Art Tools</a></li>
<li><a href="#prototyping-tools">Prototyping Tools</a></li>
<li><a href="#screenshot-software">Screenshot Software</a></li>
<li><a href="#sketching-tools">Sketching Tools</a></li>
<li><a href="#smm-design-tools">SMM Design Tools</a></li>
<li><a href="#sound-design">Sound Design</a></li>
<li><a href="#stock-photos-tools">Stock Photos Tools</a></li>
<li><a href="#stock-videos">Stock Videos</a></li>
<li><a href="#tools-for-learning-design">Tools for Learning Design</a></li>
<li><a href="#ui-design-tools">UI Design Tools</a></li>
<li><a href="#user-flow-tools">User Flow Tools</a></li>
<li><a href="#user-research-tools">User Research Tools</a></li>
<li><a href="#visual-debugging-tools">Visual Debugging Tools</a></li>
<li><a href="#wireframing-tools">Wireframing Tools</a></li>
<li><a href="#three-d-modeling-software">3D Modeling Software</a></li>
</ul>
</div>
<main><article class="welcome">
		<div class="welcome__asset -logo-adt"></div>
		<h1 class="welcome__title">Awesome Design Tools</h1>
		<p class="welcome__description">
			The best design tools for everything. Curated by Lisa Dziuba &amp; Valia Havruliyk from <a href="https://flawlessapp.io/feedback">Flawless team</a>.
		</p>
		<a href="https://github.com/LisaDziuba/Awesome-Design-Tools" class="btn btn-contribute image-gh">Contribute on GitHub</a>
	</article>
<article id="accessibility-tools">
			<header>
				<h3><a href="#accessibility-tools">Accessibility Tools</a></h3>
				
<p>Accessibility is the practice of creating websites and apps usable for all people, including individuals with visual, motor, auditory, speech, or cognitive disabilities. Here you will find web accessibility tools, accessibility testing tools, and accessibility apps both for developers and designers:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://a11ygator.chialab.io" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://a11ygator.chialab.io" target="_blank">A11ygator</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A web tool to analyze websites against WCAG rules. Also available as Google Chrome browser extension and as Twitter bot.  <a href="https://github.com/chialab/a11ygator-app"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://accessibilityinsights.io/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">AI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://accessibilityinsights.io/" target="_blank">Accessibility Insights</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Helps developers quickly find and fix accessibility issues. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://toolness.github.io/accessible-color-matrix/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">AP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://toolness.github.io/accessible-color-matrix/" target="_blank">Accessible Palette Builder</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An Elm-based prototype to help designers build accessible color palettes.  <a href="https://github.com/toolness/accessible-color-matrix"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://achecker.ca" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://achecker.ca" target="_blank">AChecker</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Accessibility testing web app used to evaluate HTML content for accessibility problems. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.ssa.gov/accessibility/andi/help/install.html" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.ssa.gov/accessibility/andi/help/install.html" target="_blank">ANDI</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Accessibility testing tool for web content (bookmarklet). It will automatically detect accessibility issues, give suggestions to improve online accessibility and check 508 compliance.  <a href="https://github.com/SSAgov/ANDI"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.deque.com/axe/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.deque.com/axe/" target="_blank">Axe</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Accessibility engine designed to work on all modern browsers and with whatever tools, frameworks, libraries, and environments you use today. It's an automated accessibility testing tool for developers.  <a href="https://github.com/dequelabs/axe-core"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://www.colorbox.io/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.colorbox.io/" target="_blank">ColorBox</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A web app that algorithmically builds accessible color systems. Done by the Lyft Design team. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://colorable.jxnblk.com/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://colorable.jxnblk.com/" target="_blank">Colorable</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free web-based contrast tool. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://colororacle.org/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">CO</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://colororacle.org/" target="_blank">Color Oracle</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free color blindness simulator. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://usecontrast.com/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://usecontrast.com/" target="_blank">Contrast</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A macOS app for designers and developers to get quick access to WCAG color contrast ratios. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://contrast-checker.glitch.me/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">CC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://contrast-checker.glitch.me/" target="_blank">Contrast Checker</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Helps check the contrast between the background of an element and the page itself. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://contrasteapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://contrasteapp.com/" target="_blank">Contraste</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An app for checking the accessibility of text against the Web Content Accessibility Guidelines (WCAG). </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.microsoft.com/design/inclusive/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">ID</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.microsoft.com/design/inclusive/" target="_blank">Inclusive Design</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A methodology and a set of tools provided by the Microsoft team.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://hexnaw.com/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">HN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://hexnaw.com/" target="_blank">Hex Naw</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Helps you to test entire color systems for contrast and accessibility. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://pa11y.org/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://pa11y.org/" target="_blank">PA11Y</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Accessibility testing tool to find issues with your web pages. It runs HTML CodeSniffer from the command line for programmatic accessibility reporting. It's an accessibility developer tool.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://michelf.ca/projects/sim-daltonism/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">SD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://michelf.ca/projects/sim-daltonism/" target="_blank">Sim Daltonism</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A color blindness simulator for macOS and iOS that lets you visualize colors as they are perceived with various types of color blindness.  <a href="https://www.github.com/michelf/sim-daltonism/"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://getstark.co/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://getstark.co/" target="_blank">Stark</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A paid Sketch plugin that will let you simulate different types of color blindness. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.toptal.com/designers/colorfilter" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">TC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.toptal.com/designers/colorfilter" target="_blank">Toptal’s Color Filter</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Lets you test your website and shows you how people with different color blindness will see your pages. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://khan.github.io/tota11y/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">t</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://khan.github.io/tota11y/" target="_blank">tota11y</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An accessibility visualization toolkit. Interesting fact: inside the tool name you can see "a11y". It's an abbreviation of accessibility as "a" followed by 11 more letters, followed by "y". </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://wave.webaim.org/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://wave.webaim.org/" target="_blank">WAVE</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Allows you to evaluate web content for accessibility issues directly within Chrome and Firefox. It's a web accessibility checker. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://clrs.cc/a11y/" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">9E</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://clrs.cc/a11y/" target="_blank">90 Examples</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free collection of accessible color themes. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
</ul>
<div class="banner banner--yellow">
<p>Accessibility checking features are also available in VisBug from the <a href="https://github.com/LisaDziuba/Awesome-Design-Tools#visual-debugging-tools">Visual Debugging Tools</a> category.</p>
</div>

			
		</article>
<article id="animation-tools">
			<header>
				<h3><a href="#animation-tools">Animation Tools</a></h3>
				
<div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/33Q3AC0">
            
        </a>
    </p>
</div>
<p>Animations guide people through the product friendly and smoothly. Live interactive UI makes users feel delighted with instant feedback and emotional touch. These free and paid tools are designed to make animation creation easier. If you plan to make animated transitions, micro-interactions or scroll-based animations, go through these tools:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.adobe.com/products/aftereffects.html" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">AE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.adobe.com/products/aftereffects.html" target="_blank">After Effects</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Digital visual effects, motion graphics, and compositing application developed by Adobe.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://beatflyer.com/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://beatflyer.com/" target="_blank">BeatFlyer</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A web tool that lets you create very quickly loopy and catchy animations from your multi-layer compositions.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://3dmybusiness.com" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">DM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://3dmybusiness.com" target="_blank">Dokyu Motion</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Simplifies motion design in After Effects so any editor can tell stories that won′t be ignored.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.2dimensions.com/about-flare" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.2dimensions.com/about-flare" target="_blank">Flare</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A powerful design and animation tool, which allows designers and developers to create animations for their app or game. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://createwithflow.com/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://createwithflow.com/" target="_blank">Flow</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A professional animation tool for Sketch designs that also exports production-ready code for iOS, Web or SVG files. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://greensock.com/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://greensock.com/" target="_blank">GSAP</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A suite of tools for scripted, high-performance HTML5 animations in all major browsers. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.haikuforteams.com/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">HA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.haikuforteams.com/" target="_blank">Haiku Animator</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Keyframe-based animation connecting your UI tools to code that developers can easily use.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.keyshapeapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">K</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.keyshapeapp.com/" target="_blank">Keyshape</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>2D animation tool that allows for animated SVG export.
</p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://kiteapp.co/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">KC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://kiteapp.co/" target="_blank">Kite Compositor</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A powerful animation and prototyping application for Mac &amp; iOS. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://uselightbox.com/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://uselightbox.com/" target="_blank">LightBox</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>2D, Hand-Drawn animation package.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://airbnb.io/lottie/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://airbnb.io/lottie/" target="_blank">Lottie</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile and the web. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://jeremyckahn.github.io/mantra/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://jeremyckahn.github.io/mantra/" target="_blank">Mantra</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A web-based timeline animation tool. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://meteoritic.io/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://meteoritic.io/" target="_blank">Meteoritic</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Animation delights library for iOS and Android. Choose from a variety of animations that suits different app styles. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://app.naker.io/back" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">N</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://app.naker.io/back" target="_blank">Naker.Back</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Integrate an interactive background for free to draw more attention to your website. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://naker.io/naker-story.html" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">N</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://naker.io/naker-story.html" target="_blank">Naker.Story</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Make your web content interactive to engage your visitors like never before thanks to 3D. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://offeo.com/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">O</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://offeo.com/" target="_blank">OFFEO</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An online video maker for small businesses to create video ads like the Big Brands without the big budget. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://storyswag.co" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://storyswag.co" target="_blank">StorySwag</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create stylish animated posts for Instagram and Facebook in just a few taps, all from your mobile phone.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://spiritapp.io/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://spiritapp.io/" target="_blank">Spirit</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The animation tool that helps you to create and manage the animations real-time in the browser. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://jeremyckahn.github.io/stylie/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://jeremyckahn.github.io/stylie/" target="_blank">Stylie</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A web-based graphical CSS3 animation tool. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://tumult.com/hype/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">TH</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://tumult.com/hype/" target="_blank">Tumult Hype</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The HTML5 animation/interactives creation app for macOS. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
</ul>
<div class="banner banner--yellow">
<p>Drama, Principle, Framer, Invision Studio, Flinto are also among UI &amp; UX animation apps and software animation tools.</p>
</div>

			
		<div class="promotion-banner-wrapper">
    <a class="promotion-banner -abstract" href="https://www.abstract.com/campaigns/collaboration/?&amp;utm_medium=Partner-Advertising&amp;utm_source=PA-Native-Digital&amp;utm_campaign=CY19-PA-FlawlessApp-1018-Sept12&amp;utm_term=designplugins&amp;utm_content=Sponsored">
        <div class="promotion-banner__logo -abstract">
            
        </div>
        <div class="promotion-banner__main">
            <h3 class="promotion-banner__title">Abstract</h3>
            <p class="promotion-banner__description">
                We centralize design decisions, feedback, Sketch files, and specs for your team.
            </p>
        </div>
        <button class="promotion-banner__link -abstract">
            Get a free, 14-day trial
        </button>
    </a>
</div></article>
<article id="augmented-reality">
			<header>
				<h3><a href="#augmented-reality">Augmented Reality</a></h3>
				
<p>Augmented Reality is a technology that upgrades our real world, by adding a layer of digital information to it. The use of AR increases day by day with dozens of new AR apps, development kits, and AR frameworks. So in this section is collected different augmented reality tools for creating, projecting and prototyping apps focused on AR:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://daqri.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://daqri.com/" target="_blank">Daqri</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Delivers professional-grade augmented reality for the workforce by overlaying digital information onto the physical environment.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.easyar.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">E</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.easyar.com/" target="_blank">EasyAR</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A mobile application and an Augmented Reality Engine, making AR easier.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.hpreveal.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">HR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.hpreveal.com/" target="_blank">HP Reveal</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Adding value to printed content through visual interactivity.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.layar.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.layar.com/" target="_blank">Layar</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Find various items based upon augmented reality technology.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://lensstudio.snapchat.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">LS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://lensstudio.snapchat.com/" target="_blank">Lens Studio</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create, publish, and share your own AR experiences for Snapchat with or without code. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://lightform.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://lightform.com/" target="_blank">Lightform</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A design tool for projected AR.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.sparkar.com" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">SA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.sparkar.com" target="_blank">Spark AR Studio</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Сreate AR experiences for Instagram without code.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.torch.app/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.torch.app/" target="_blank">Torch</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A cloud-based 3D design and prototyping app focused on mobile AR.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://unity.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://unity.com/" target="_blank">Unity</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Build high-quality 3D and 2D games, deploy them across mobile, desktop and VR/AR.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.vectary.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.vectary.com/" target="_blank">Vectary</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Сreate 3D and AR for your website.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.vuforia.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.vuforia.com/" target="_blank">Vuforia</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>SDK for mobile devices that enables the creation of augmented reality applications.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.wikitude.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.wikitude.com/" target="_blank">Wikitude</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Empowers your iOS, Android &amp; Smart Glasses apps with Image &amp; Object Tracking, Instant tracking (SLAM), Geo AR, and more.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="collaboration-tools">
			<header>
				<h3><a href="#collaboration-tools">Collaboration Tools</a></h3>
				
<!---
<div class="hidden-in-page">
<p align="center">
 <a href="http://bit.ly/2ZwUoEq">
     <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/SuperNova.png" alt="Supernova"/>
 </a>
</p>
</div>
--->
<p>Looking to try some tools for agile design and development collaboration? Good idea because such tools make the lives of designers and developers much easier, save time and improve productivity. Well, you know all that in Slack-driven era. Here you'll find the best collaboration tools for product teams:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://airtable.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://airtable.com/" target="_blank">Airtable</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Part spreadsheet, part database, and entirely flexible, teams use Airtable to organize their work, their way.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://appear.in/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://appear.in/" target="_blank">Appear.in</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A simple video collaboration tool.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://asana.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://asana.com/" target="_blank">Asana</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The work management platform teams use to stay focused on the goals, projects, and daily tasks that grow business.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://basecamp.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://basecamp.com/" target="_blank">Basecamp</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The project management suite designed to organize employees, delegate tasks, and monitor progress right from one place.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://droplr.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://droplr.com/" target="_blank">Droplr</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Screenshot, file sharing and screencasts to help you capture and explain your ideas.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://filestage.io/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://filestage.io/" target="_blank">Filestage</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An agile content approval software that helps you to review videos, designs, and documents with clients and co-workers.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.float.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.float.com/" target="_blank">Float</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool to plan your projects and schedule your team’s time all in one place.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://material.io/tools/gallery/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://material.io/tools/gallery/" target="_blank">Gallery</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A collaborative tool for uploading design work, getting feedback, and tracking revisions.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.hivedesk.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">H</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.hivedesk.com/" target="_blank">HiveDesk</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An automatic time tracking for remote employees with screenshots. It makes it easier to monitor the productivity of remote employees and manage projects.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.atlassian.com/software/jira" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">J</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.atlassian.com/software/jira" target="_blank">Jira</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Software development tool used by agile teams.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://jitsi.org/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">J</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://jitsi.org/" target="_blank">Jitsi</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Multi-platform open-source video conferencing you can install yourself or use on their servers.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://keybase.io" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">K</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://keybase.io" target="_blank">Keybase</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free collaboration app with built-in end-to-end encrypted chat, file sharing, git repositories, and more  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mattermost.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mattermost.com/" target="_blank">Mattermost</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A flexible, open-source messaging platform that meets even the most demanding privacy and security standards. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://milanote.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://milanote.com/" target="_blank">Milanote</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An easy-to-use, collaborative tool to organize your ideas and projects into visual boards.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mixed.io" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mixed.io" target="_blank">Mixed</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Real-time whiteboard and collaboration tools for distributed teams. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://moqhub.com" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://moqhub.com" target="_blank">Moqhub</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Fast online proofing for creative projects. Get feedback for images and PDFs.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mural.co/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mural.co/" target="_blank">MURAL</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Think and collaborate visually. Anywhere, anytime.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://nextcloud.com" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">N</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://nextcloud.com" target="_blank">Nextcloud</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Open source collaboration platform for files, kanban boards, chat &amp; calls, calendar and more.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.notion.so" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">N</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.notion.so" target="_blank">Notion</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Write, plan, collaborate, and get organized. Notion is all you need</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.proofhub.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.proofhub.com/" target="_blank">ProofHub</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The one place for all your projects, teams and communications.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.realtimeboard.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">R(</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.realtimeboard.com/" target="_blank">RealtimeBoard (Miro)</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Whiteboarding platform for cross-functional team collaboration. It was recently renamed to Miro.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://slack.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://slack.com/" target="_blank">Slack</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A collaboration hub for work, no matter what work you do. It’s a place where conversations happen, decisions are made, and information is always at your fingertips.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sunsama.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sunsama.com/" target="_blank">Sunsama</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A beautifully designed, team-oriented task manager that consolidates Trello/Jira/Asana tickets into a single, calendar-oriented view.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://taskade.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://taskade.com/" target="_blank">Taskade</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Team productivity made simple, fun and designed for remote teams. Taskade is collaborative and syncs in real-time across the web, mobile, and desktop.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://trello.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://trello.com/" target="_blank">Trello</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A web-based project management application that enables you to organize and prioritize your projects in a fun, flexible and rewarding way.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.witeboard.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.witeboard.com/" target="_blank">Witeboard</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Simple real-time whiteboard for collaboration work. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.workzone.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.workzone.com/" target="_blank">Workzone</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A simple, powerful project management software.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.wrike.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.wrike.com/" target="_blank">Wrike</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An online project management software that gives you full visibility and control over your tasks.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://zenkit.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">Z</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://zenkit.com/" target="_blank">Zenkit</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool to schedule meetings, track the project’s progress, and brainstorm new ideas.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://zulipchat.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">Z</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://zulipchat.com/" target="_blank">Zulip</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Combines the immediacy of real-time chat with an email threading model, helping to focus on important conversations while ignoring irrelevant ones. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>

				</div>
			</div>
		</li>
</ul>
<div class="banner banner--yellow">
<p>You can also have design collaboration into <a href="https://www.invisionapp.com/feature/freehand">InVision Freehand</a> tool.</p>
</div>

			
		</article>
<article id="color-picker-tools">
			<header>
				<h3><a href="#color-picker-tools">Color Picker Tools</a></h3>
				
<p>If you are looking for an eyedropper tool, color identifier or color capture, check this section. With the color pickers mentioned here, you will be able to create new color combinations and define great ones. Almost all of these tools are free:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://brandcolors.net/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://brandcolors.net/" target="_blank">BrandColors</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The biggest collection of official brand color codes around. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://calcolor.co" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://calcolor.co" target="_blank">Calcolor</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A web-based color palette management tool which provides a new way to interact with digital colors. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://chroma.spencerhamm.com/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://chroma.spencerhamm.com/" target="_blank">Chroma</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free web app which allows you to identify the color. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://color.adobe.com/explore/?filter=most-popular&amp;time=month" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://color.adobe.com/explore/?filter=most-popular&amp;time=month" target="_blank">Color</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create color schemes with the color wheel or browse thousands of color combinations from the Color community. Made by Adobe. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://cloudflare.design/color/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">Cb</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://cloudflare.design/color/" target="_blank">Color by Cloudflare</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool to preview palettes against UI elements, cycle through accessible color combos and create palettes manually, via URL import, or generatively.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://color.obscuredetour.com/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">CD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://color.obscuredetour.com/" target="_blank">Color Deck</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An HSL driven color palette collection. It's also open-source.  <a href="https://github.com/obscuredetour/color-deck"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.colorhexa.com/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">CH</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.colorhexa.com/" target="_blank">Color Hexa</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free color tool providing information about any color and generating matching color palettes for designs.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://colorhunt.co/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">CH</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://colorhunt.co/" target="_blank">Color Hunt</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free and open platform for color inspiration with thousands of trendy hand-picked color palettes. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://colorkit.io" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://colorkit.io" target="_blank">ColorKit</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool for blending colors and generating a color's shades and tints. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://colorleap.app" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">CL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://colorleap.app" target="_blank">Color Leap</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Leap through time and see the colors of history. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://colorpicker.crea-th.at/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://colorpicker.crea-th.at/" target="_blank">Colorpicker</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A complete and open-source color manipulation tool with picking.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://colorslurp.com/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://colorslurp.com/" target="_blank">ColorSlurp</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The ultimate color productivity booster for designers and developers.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://colorswall.com/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://colorswall.com/" target="_blank">ColorsWall/</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Place to store your color palettes or easy generate. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.colorwise.io/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.colorwise.io/" target="_blank">Colorwise</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Search through the color palettes of the most voted products on Product Hunt. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.instagram.com/colours.cafe/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">CC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.instagram.com/colours.cafe/" target="_blank">Colour Cafe</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Colors inspiration that has selected a modern color palette on Instagram. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://colourco.de/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://colourco.de/" target="_blank">Colourcode</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An online designer tool, which allows you to easily and intuitively combine colors. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://coolors.co/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://coolors.co/" target="_blank">Coolors</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The super-fast color scheme generator.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://culrs.com/#/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://culrs.com/#/" target="_blank">Culrs</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Thoughtfully crafted and easy-to-use color palettes. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://geenes.app" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://geenes.app" target="_blank">Geenes</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool to create harmonious color themes with code and sketch file export.</p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://image-color.com" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">IC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://image-color.com" target="_blank">Image Color Picker</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Image color picker and color scheme generator. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://instant-eyedropper.com/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">IE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://instant-eyedropper.com/" target="_blank">Instant Eyedropper</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A minimalist eyedropper tool for windows, supports multiple color formats for both designers and developers. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://annystudio.com/software/colorpicker/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">JC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://annystudio.com/software/colorpicker/" target="_blank">Just Color Picker</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free portable offline color picker and color editor. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://khroma.co/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">K</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://khroma.co/" target="_blank">Khroma</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>AI-based tool to generate color palettes based on your preferences.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/BafS/Material-Colors-native" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">MC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/BafS/Material-Colors-native" target="_blank">Material Colors Native</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Google's material design color palette in the form of a mac app.   </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://materialpalettes.com/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">MD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://materialpalettes.com/" target="_blank">Material Design Palette Generator</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Get perfect Material Design color palettes from any hex color.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://paletton.com" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://paletton.com" target="_blank">Paletton</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A designer tool for creating color combinations that work together well. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://picular.co/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://picular.co/" target="_blank">Picular</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A rocket fast primary color generator using Google's image search. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pigment.shapefactory.co/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pigment.shapefactory.co/" target="_blank">Pigment</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A color palette generator with innumerable color configurations suggested by the app. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://itunes.apple.com/us/app/pikka-color-picker/id1195076754" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://itunes.apple.com/us/app/pikka-color-picker/id1195076754" target="_blank">Pikka</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Color picker &amp; color schemes generator for macOS. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://casesandberg.github.io/react-color/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">RC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://casesandberg.github.io/react-color/" target="_blank">React Color</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A collection of color pickers from Sketch, Photoshop, Chrome. It‘s free and open-source.  <a href="https://github.com/casesandberg/react-color/"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sipapp.io/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sipapp.io/" target="_blank">Sip</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A better way to collect, organize and share colors. Global eyedropper tool for macOS. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://bjango.com/mac/skalacolor/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://bjango.com/mac/skalacolor/" target="_blank">Skala Color</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Works with a huge variety of formats, covering everything you’re likely to need for web, iOS, Android, and macOS development.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://swatchesapp.io/" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://swatchesapp.io/" target="_blank">Swatches</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>IOS app that lets you collect, inspect and share the colors that inspire you in your daily life.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://projects.susielu.com/viz-palette" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">VP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://projects.susielu.com/viz-palette" target="_blank">Viz Palette</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Color picker for data visualizations. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="design-feedback-tools">
			<header>
				<h3><a href="#design-feedback-tools">Design Feedback Tools</a></h3>
				
<p>How do you provide and get feedback during the development process? This process is usually pretty messy for many product teams, which caused product delays and time waste on back-and-forth communication. So if you wish to get fast and structural feedback on UI issues or visual bugs — take a look at this tool:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://flawlessapp.io/feedback" class="tool__asset" target="_blank" style="background-color: hsl(176.3, 38%, 74%); color: rgb(112, 181, 176);">FF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://flawlessapp.io/feedback" target="_blank">Flawless Feedback</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Review and annotate iOS apps then share your feedback in Jira or Trello. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://govisually.com" class="tool__asset" target="_blank" style="background-color: hsl(176.3, 38%, 74%); color: rgb(112, 181, 176);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://govisually.com" target="_blank">GoVisually</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Online proofing, design review &amp; approval software.</p><div class="banner banner--yellow">
</div><p></p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="design-handoff-tools">
			<header>
				<h3><a href="#design-handoff-tools">Design Handoff Tools</a></h3>
				
<!-- <div class="hidden-in-page">
    <p align="center">
        <a href="https://adobe.ly/33HVSdf">
            <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Adobe%20XD.png" alt="Abobe XD"/>
        </a>
    </p>
</div> -->
<p>Design handoff happens when designers finish the work and need to deliver designs to developers with all specs and assets. Design handoff tools allow to automatically generate style guide, comment on the design, inspect elements. These tools minimize guesswork and improve the effectiveness of the design process.</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://avocode.com" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://avocode.com" target="_blank">Avocode</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Open designs without design tools. Export images without preparing layers. Click on layers to get code.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://flawlessapp.io/" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">FA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://flawlessapp.io/" target="_blank">Flawless App</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool to compare the expected design and the real app right inside iOS Simulator (useful for designers who use Xcode or mobile developers). </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.invisionapp.com/feature/inspect/" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.invisionapp.com/feature/inspect/" target="_blank">Inspect</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Prepare designs for development. Made by Invision.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/utom/sketch-measure" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/utom/sketch-measure" target="_blank">Sketch Measure</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Sketch redline plugin. Annotate distance and size of elements.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://specctr.com" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://specctr.com" target="_blank">Specctr</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>In the unfortunate event you're designing UI in PS, AI, or ID this tool creates redline annotations.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sympli.io" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sympli.io" target="_blank">Sympli</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Automated specs and assets handoff from Sketch, Photoshop and Adobe XD. Integrated with Jira, Xcode and Android Studio.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://zeplin.io/" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">Z</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://zeplin.io/" target="_blank">Zeplin</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Handoff designs and style guides with accurate specs, assets, code snippets automatically.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>
<div class="banner banner--yellow">
<p>You can also make a design handoff within Relay, mentioned in the <a href="#design-version-control">Design Version Control</a> section.</p>
</div>

			
		</article>
<article id="design-inspiration">
			<header>
				<h3><a href="#design-inspiration">Design Inspiration</a></h3>
				
<!-- <div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/2VQVTJ8">
            <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Porkbun.png" alt="Porkbun"/>
        </a>
    </p>
</div> -->
<p>The creative process can be tough. So if ideas don’t come to your mind right away, try to search for inspiration in the work of other designers. These design inspiration sites feature design patterns, user flows, email markups and creative solutions of popular companies and great products:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.behance.net/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.behance.net/" target="_blank">Behance</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An online platform to showcase &amp; discover creative work. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://codemyui.com/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://codemyui.com/" target="_blank">CodeMyUI</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Handpicked collection of web design &amp; UI inspiration with code snippets. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://collectui.com/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CU</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://collectui.com/" target="_blank">Collect UI</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A platform for your daily inspiration collected from Daily UI &amp; beyond. Based on Dribbble shots, 14419 handpicked designs. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://www.creative-portfolios.com/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.creative-portfolios.com/" target="_blank">Creative Portfolios</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A curation of the most creative portfolios made by designers &amp; developers.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://itunes.apple.com/us/app/design-hunt/id968588816?mt=8" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">DH</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://itunes.apple.com/us/app/design-hunt/id968588816?mt=8" target="_blank">Design Hunt</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A daily collection of the best products, apps, and inspirations for all creatives.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://dribbble.com/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://dribbble.com/" target="_blank">Dribbble</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An online community for showcasing user-made artwork. A great resource to get inspired by others work.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://ficture.design/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://ficture.design/" target="_blank">Ficture</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A font in use archive that will inspire you. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://inspirationui.com/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">IU</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://inspirationui.com/" target="_blank">Inspiration UI</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A community that aims to provide the best design resources for those who create for the web. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://hoverstat.es/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">HS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://hoverstat.es/" target="_blank">Hover States</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Showcase great work from the bleeding edge of digital culture for, and with, the creative community.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://httpster.net/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">H</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://httpster.net/" target="_blank">Httpster</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An inspiration resource showcasing rocking websites made by people from all over the world. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.h69.design/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">H</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.h69.design/" target="_blank">H69.Design</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Landing page colletions &amp; Free resources for designers.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.lapa.ninja/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">LN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.lapa.ninja/" target="_blank">Lapa Ninja</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Landing page design inspiration from around the web. 1800+ landing page examples and updated daily.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.microcopyinspirations.com" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">MI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.microcopyinspirations.com" target="_blank">Microcopy Inspirations</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Curated examples of good microcopy on websites and apps.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.mobile-patterns.com/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">MP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.mobile-patterns.com/" target="_blank">Mobile Patterns</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A design inspirational library featuring finest UI UX Patterns (iOS and Android).</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mobbin.design/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mobbin.design/" target="_blank">Mobbin</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Browse mobile design patterns for popular apps. Explore common user flows such as onboarding, account sign up and log in, core functionality, and more. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://onepagelove.com/gallery" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">OP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://onepagelove.com/gallery" target="_blank">One Page Love</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A collection of beautiful unique One Page websites for website design inspiration. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://owwly.com/feed/inspirations" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">O</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://owwly.com/feed/inspirations" target="_blank">Owwly</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Home for digital products crafted with passion to design.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pageflows.com/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">PF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pageflows.com/" target="_blank">Page Flows</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>User flow videos and screenshots to inspire you when you're stuck. Discover mobile and web design patterns for over 160 different tasks. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pttrns.com/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">p</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pttrns.com/" target="_blank">pttrns</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Design patterns for popular mobile apps.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://reallygoodemails.com/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">RG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://reallygoodemails.com/" target="_blank">Really Good Emails</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>4,150+ handpicked email design. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.reallygoodux.io/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.reallygoodux.io/" target="_blank">ReallyGoodUX</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Screenshots, and examples of great UX from real mobile and web products. Discover the best UX examples—including onboarding tours and walkthroughs. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://saaspages.xyz/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://saaspages.xyz/" target="_blank">Saas Pages</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A collection of the best landing pages with a focus on copywriting and design. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://thedesignteam.io/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">TD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://thedesignteam.io/" target="_blank">The Design Team</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Comics about a design team for a tech startup in Silicon Valley.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.typewolf.com/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.typewolf.com/" target="_blank">Typewolf</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Helps designers choose the perfect font combination for their next design project.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://uigarage.net/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">UG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://uigarage.net/" target="_blank">UI Garage</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The one-stop shop for designers, developers, and marketers to find inspiration, tools and the best resources.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.uisources.com/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">US</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.uisources.com/" target="_blank">UI Sources</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Over 500+ interactions from the best designed and top-grossing apps on the App Store today. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://uirecipes.com/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">UR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://uirecipes.com/" target="_blank">UI Recipes</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Weekly 15 min lessons on UI design from the hottest apps.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://uxarchive.com/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">UA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://uxarchive.com/" target="_blank">UX Archive</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Browse more than 400 user flows across 120 mobile apps. Examine tasks such as booking, logging in, onboarding, purchasing, searching, and more. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.waveguide.io/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.waveguide.io/" target="_blank">Waveguide</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A design knowledge bank with thousands of artificially enriched examples of product and brand experience (examples of Mobile App, Landing pages, eCommerce, CX/UX Patterns).</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.webdesignmuseum.org/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">WD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.webdesignmuseum.org/" target="_blank">Web Design Museum</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Over 1,200 carefully selected web sites that show web design trends between the years 1994 and 2006.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="design-system-tools">
			<header>
				<h3><a href="#design-system-tools">Design System Tools</a></h3>
				
<div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/33Q3AC0">
            
        </a>
    </p>
</div>
<p>I bet you heard about Design Systems, as it’s a pretty trendy topic. Design systems provide consistent, robust design patterns to keep design and development in sync. They are essentially collections of rules, constraints, and principles, implemented in design and code. Here you can find tools to build, maintain and organize your design system.</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://cabanadesignsystem.com/" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://cabanadesignsystem.com/" target="_blank">Cabana</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A Premium Design System for Sketch that helps you create amazing products faster than ever before.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.catalog.style/" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.catalog.style/" target="_blank">Catalog</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A living style guide for digital products, combining design documentation with real live components. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.invisionapp.com/design-system-manager/" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">DS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.invisionapp.com/design-system-manager/" target="_blank">Design System Manager</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Invision's design system manager.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://rundsk.com" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://rundsk.com" target="_blank">DSK</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Short for “Design System Kit” – a workbench for collaboratively creating Design Systems.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.eosdesignsystem.com" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">ED</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.eosdesignsystem.com" target="_blank">EOS Design System</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An open-source and customizable built on top of Bootstrap following the Atomic Design concept. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://eva.design/" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">ED</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://eva.design/" target="_blank">Eva Design System</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Customizable design system, available for Sketch with Mobile and Web component libraries.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://frontify.com/" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://frontify.com/" target="_blank">Frontify</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create graphical guidelines, patterns libraries, design systems.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://interplayapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://interplayapp.com/" target="_blank">Interplay</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Connect design and engineering around a single source of truth. The tool is not publicly available yet (beta).</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.lingoapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.lingoapp.com/" target="_blank">Lingo</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create a shared asset library with your entire team. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://lucid.style/" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://lucid.style/" target="_blank">Lucid</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Tool for creating, managing and sharing a design system. From a simple component library through to detailed descriptions of your styles.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.modulz.app/" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.modulz.app/" target="_blank">Modulz</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Design, build, document and publish your design system—without writing code.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.primedesignsystem.com" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">PD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.primedesignsystem.com" target="_blank">Prime Design System Kit</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>It includes device templates, charts, UI kit and even illustration kit. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.specifyapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.specifyapp.com/" target="_blank">Specify</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool to create, scale and maintain a design system.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://storybook.js.org/" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://storybook.js.org/" target="_blank">Storybook</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An open-source tool for developing UI components in isolation for React, Vue, and Angular. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://symboldesign.co/" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">SD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://symboldesign.co/" target="_blank">Symbol Design System</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Design System for Sketch-based on atomic elements.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.toolabs.com/" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.toolabs.com/" target="_blank">Toolabs</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Design systems and components based design, prototype and development tool. It's not public yet but you can apply to the early access.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.zeroheight.com/" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">Z</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.zeroheight.com/" target="_blank">Zeroheight</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Style guides created by designers, extended by developers, and editable by everyone.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>
<div class="banner banner--yellow">
<p>We can also add to this in Sketch, Figma, UXPin and Framer X (<a href="https://www.framer.com/design-systems/">Framer X Team Store</a>).</p>
</div>

			
		<div class="promotion-banner-wrapper">
    <a class="promotion-banner -abstract" href="https://www.abstract.com/campaigns/collaboration/?&amp;utm_medium=Partner-Advertising&amp;utm_source=PA-Native-Digital&amp;utm_campaign=CY19-PA-FlawlessApp-1018-Sept12&amp;utm_term=designplugins&amp;utm_content=Sponsored">
        <div class="promotion-banner__logo -abstract">
            
        </div>
        <div class="promotion-banner__main">
            <h3 class="promotion-banner__title">Abstract</h3>
            <p class="promotion-banner__description">
                We centralize design decisions, feedback, Sketch files, and specs for your team.
            </p>
        </div>
        <button class="promotion-banner__link -abstract">
            Get a free, 14-day trial
        </button>
    </a>
</div></article>
<article id="design-to-code-tools">
			<header>
				<h3><a href="#design-to-code-tools">Design to Code Tools</a></h3>
				
<!-- <div class="hidden-in-page">
<p align="center">
 <a href="http://bit.ly/2ZwUoEq">
     <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/SuperNova.png" alt="Supernova"/>
 </a>
</p>
</div> -->
<p>Everyone can learn development but it takes time and effort. If you need a website or an app right now and you don’t want to hire a developer, pay attention to the website builders. Such design to code tools will help you to make a portfolio, simple landing or an app pretty fast and beautiful.</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.animaapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.animaapp.com/" target="_blank">Anima</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A web app with a Sketch plugin that converts Sketch to HTML. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://blocsapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://blocsapp.com/" target="_blank">Blocs</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A fast, easy to use and powerful visual web design tool, that lets you create responsive websites without writing code. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://bootstrapstudio.io/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">BS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://bootstrapstudio.io/" target="_blank">Bootstrap Studio</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A powerful web design tool for creating responsive websites using the Bootstrap framework.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://draftbit.com/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://draftbit.com/" target="_blank">Draftbit</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Visually design and build mobile apps directly from your browser.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.easylogic.studio/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">ES</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.easylogic.studio/" target="_blank">EasyLogic Studio</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Fantastic css+svg design tool, also it is converted into code as shown. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://grapedrop.com/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://grapedrop.com/" target="_blank">Grapedrop</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Design your components, web projects and publish them instantly online, with an easy to use editor.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mobirise.com/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mobirise.com/" target="_blank">Mobirise</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An offline drag and drop website builder software that is based on Bootstrap 3/4 and \ AMP. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.pagecloud.com/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.pagecloud.com/" target="_blank">PageCloud</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The fastest and most customizable website builder that allows anyone to create their ideal website.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.paintcodeapp.com" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.paintcodeapp.com" target="_blank">PaintCode</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Vector drawing app that instantly converts drawings into Swift, Objective-C, JavaScript or Java code. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pinegrow.com/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pinegrow.com/" target="_blank">Pinegrow</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A professional visual editor for CSS Grid, Bootstrap 4 and 3, Foundation, responsive design, HTML, and CSS.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.pxdiv.com" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">p</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.pxdiv.com" target="_blank">px.div</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A proper site build tool for developers and designers.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://readymag.com/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://readymag.com/" target="_blank">Readymag</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A visually-pleasing tool for designing on the web from landing pages to multimedia long-reads, presentations and portfolios.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sparkleapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sparkleapp.com/" target="_blank">Sparkle</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The easiest way to make a real website, no code, no jargon. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://studio.design/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://studio.design/" target="_blank">STUDIO</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Design from scratch, collaborate in real-time and publish websites.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://supernova.io/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://supernova.io/" target="_blank">Supernova Studio</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Import designs from Sketch and convert them into Android, iOS or React Native code.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://tilda.cc/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://tilda.cc/" target="_blank">Tilda</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create a website, landing page or online store for free with the help of Tilda modules and publish it on the same day.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.wix.com/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.wix.com/" target="_blank">Wix</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The easiest and fullest-featured website builder, that allows you to create your own highly customized site.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://webflow.com/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://webflow.com/" target="_blank">Webflow</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Build responsive websites in your browser, then host with us or export your code to host wherever.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="design-version-control">
			<header>
				<h3><a href="#design-version-control">Design Version Control</a></h3>
				
<div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/33Q3AC0">
            
        </a>
    </p>
</div>
<p>Developers actively use version control tools for a long time, probably since 2005 (Git first release). Using a version control system is no brainer for dev teams, while the design version control system appeared only recently. This market is rapidly developing and we expect to see even more in version control for designers:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.abstract.com/" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.abstract.com/" target="_blank">Abstract</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A platform for design teams to version, manage and collaborate on Sketch files.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://folioformac.com/" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://folioformac.com/" target="_blank">Folio</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A simple version control system for design teams based on Git. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://kactus.io/" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">K</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://kactus.io/" target="_blank">Kactus</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Design version control without changing your tools. Manage changes, document work and keep your team in sync.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://plantapp.io/" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://plantapp.io/" target="_blank">Plant</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Mac app and Sketch plugin offering complete version control for designers and teams. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://relay.graphics/" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">Rf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://relay.graphics/" target="_blank">Relay for Figma</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Relay pushes your latest assets from Figma directly to your codebase (not released yet).</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://versions.sympli.io" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://versions.sympli.io" target="_blank">Versions</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A version control tool for designers with visual diff, merge and conflict resolution. Works with GitHub, Bitbucket, GitLab and Azure DevOps.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		<div class="promotion-banner-wrapper">
    <a class="promotion-banner -abstract" href="https://www.abstract.com/campaigns/collaboration/?&amp;utm_medium=Partner-Advertising&amp;utm_source=PA-Native-Digital&amp;utm_campaign=CY19-PA-FlawlessApp-1018-Sept12&amp;utm_term=designplugins&amp;utm_content=Sponsored">
        <div class="promotion-banner__logo -abstract">
            
        </div>
        <div class="promotion-banner__main">
            <h3 class="promotion-banner__title">Abstract</h3>
            <p class="promotion-banner__description">
                We centralize design decisions, feedback, Sketch files, and specs for your team.
            </p>
        </div>
        <button class="promotion-banner__link -abstract">
            Get a free, 14-day trial
        </button>
    </a>
</div></article>
<article id="development-tools">
			<header>
				<h3><a href="#development-tools">Development Tools</a></h3>
				
<p>This section mentions development tools and browsers. Development browsers have features that help developers and designers create and test websites and apps.</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://blisk.io" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://blisk.io" target="_blank">Blisk</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Provides a development workspace to develop and test modern web applications twice faster.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.mozilla.org/en-US/firefox/developer/" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">Fd</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.mozilla.org/en-US/firefox/developer/" target="_blank">Firefox developer edition</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Developer edition of the Firefox browser. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://litmus.com/" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://litmus.com/" target="_blank">Litmus</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An email campaign creation platform that, amongst other things, lets you see how HTML emails will appear in a wide variety of email clients.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://polypane.rocks" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://polypane.rocks" target="_blank">Polypane</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A browser built from the ground up to create and test websites and apps.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://storybook.js.org/" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://storybook.js.org/" target="_blank">Storybook</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/styleguidist/react-styleguidist" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/styleguidist/react-styleguidist" target="_blank">Styleguidist</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Isolated React component development environment with a living style guide.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
</ul>

			
		</article>
<!-- <div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/35I1q9q">
            <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Maze.png" alt="Maze"/>
        </a>
    </p>
</div> -->
<article id="experience-monitoring">
			<header>
				<h3><a href="#experience-monitoring">Experience Monitoring</a></h3>
				
<p>Listening to users is important but seeing the real usage is even more crucial. For these, you need to install different analytic tools, experience monitoring software, and user behavior apps. Just use those analytics solutions concerning users data:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://amplitude.com/" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://amplitude.com/" target="_blank">Amplitude</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Understand your users, rapidly release better product experiences, and grow your business.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.optimalworkshop.com/chalkmark" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.optimalworkshop.com/chalkmark" target="_blank">Chalkmark</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Increase your customer conversion and task-oriented success rates by getting quick feedback on designs before you implement.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://usefathom.com/" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://usefathom.com/" target="_blank">Fathom</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Provides simple, useful websites stats without tracking or storing personal data of your users.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.fullstory.com/" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.fullstory.com/" target="_blank">FullStory</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An app that captures all your customer experience data in one powerful, easy-to-use platform.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://analytics.google.com/analytics/web/" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">GA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://analytics.google.com/analytics/web/" target="_blank">Google Analytics</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Measure your advertising ROI and track your sites and applications. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://heapanalytics.com/" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">H</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://heapanalytics.com/" target="_blank">Heap</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Automatically capture every web, mobile, and cloud interaction then retroactively analyze your data without writing code.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.heatlyanalytics.com" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">H</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.heatlyanalytics.com" target="_blank">Heatly</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free heatmap tools to understand the website's user experience better. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.hotjar.com/" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">H</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.hotjar.com/" target="_blank">Hotjar</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>See how visitors are using your website and collect user feedback.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.inspectlet.com/" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.inspectlet.com/" target="_blank">Inspectlet</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Record videos of your visitors as they use your site, so you can see everything they do.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.logrocket.com/" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.logrocket.com/" target="_blank">LogRocket</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>See what users do on your site, helping you reproduce bugs and fix issues faster.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mixpanel.com/" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mixpanel.com/" target="_blank">Mixpanel</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Get insights across all of your user-centric data to make smarter decisions and act faster based on how customers use your product or website.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mouseflow.com/" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mouseflow.com/" target="_blank">Mouseflow</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Record mouse cursor movements.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.pendo.io/" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.pendo.io/" target="_blank">Pendo</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Measure and elevate the customer experience within their applications.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.smartlook.com" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.smartlook.com" target="_blank">Smartlook</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>User session replay and user engagement analytics.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://usabilla.com" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://usabilla.com" target="_blank">Usabilla</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Build future-proof customer experiences by asking the right questions at the right time.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="font-tools">
			<header>
				<h3><a href="#font-tools">Font Tools</a></h3>
				
<p>Fonts are commonly used for making the web a more beautiful place. It’s an essential part of any design. In this section, you’ll find fonts generators &amp; font finder tools that allow you to manage and work with fonts:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://befonts.com/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://befonts.com/" target="_blank">BeFonts</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A Decent collection of free fonts. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.behance.net/search/?search=free%20font" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">BF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.behance.net/search/?search=free%20font" target="_blank">Behance Free Fonts</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A list of free fonts uploaded on Behance. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.dafont.com/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.dafont.com/" target="_blank">DaFont</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://emotype.webflow.io/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">E</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://emotype.webflow.io/" target="_blank">Emotype</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Makes it easy to find fonts based on the emotions you want to convey on your website. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://fontba.se/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://fontba.se/" target="_blank">Fontbase</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Font management made easy. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.fontfabric.com/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.fontfabric.com/" target="_blank">FontFabric</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Gorgeous interface and good collection. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://fontface.ninja/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">FN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://fontface.ninja/" target="_blank">Fontface Ninja</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Browser extension to discover what fonts are being used on any website.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://fontpair.co/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://fontpair.co/" target="_blank">FontPair</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A simple tool that helps you pair Google Fonts together. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.fontown.com/en" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.fontown.com/en" target="_blank">Fontown</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A typographic tool with a nonstop growing font catalog which facilitates designer workflow.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://fonts.adobe.com/fonts" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://fonts.adobe.com/fonts" target="_blank">Fonts</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Thousands of beautiful fonts by Adobe. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://fontsarena.com/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">FA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://fontsarena.com/" target="_blank">Fonts Arena</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Curated typography website with high-quality free fonts, done-for-you research articles, free alternatives to premium fonts, news, and more. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.fontself.com" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.fontself.com" target="_blank">FontSelf</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An extension for Illustrator and Photoshop CC that lets you turn any lettering into OpenType fonts in minutes!</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://fontspark.app/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://fontspark.app/" target="_blank">FontSpark</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A simple tool to help designers quickly find the best fonts for their projects. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.fontsquirrel.com/fonts/acherus-grotesque" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">FS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.fontsquirrel.com/fonts/acherus-grotesque" target="_blank">Font Squirrel</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Download free fonts with wide collections.</p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://fonts.google.com/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">GF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://fonts.google.com/" target="_blank">Google Fonts</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Making the web more beautiful, fast, and open through great typography. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://google-webfonts-helper.herokuapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">GW</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://google-webfonts-helper.herokuapp.com/" target="_blank">Google Webfonts Helper</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A hassle way to self-host Google Fonts. It‘s free and open-source.  <a href="https://github.com/majodev/google-webfonts-helper/"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://losttype.com/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://losttype.com/" target="_blank">LostType</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The first Pay-What-You-Want type foundry.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://chrome.google.com/webstore/detail/measure/bbompmbliibpeaaloikpoahdokhjdmeg" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://chrome.google.com/webstore/detail/measure/bbompmbliibpeaaloikpoahdokhjdmeg" target="_blank">Measure</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Measure typographic line lengths with this browser extension for Chrome. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://rightfontapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://rightfontapp.com/" target="_blank">RightFont</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Font managing app, helps preview, sync, install and organize fonts over iCloud, Dropbox or Google Drive. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://sansforgetica.rmit/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">SF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://sansforgetica.rmit/" target="_blank">Sans Forgetica</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A downloadable font that is scientifically designed to help you remember your study notes. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sizecalc.com/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sizecalc.com/" target="_blank">Size Calculator</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Calculate the perceived size using viewing distance and physical size of the printed typography. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://typefaceapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://typefaceapp.com/" target="_blank">Typeface</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Font manager that improves your design workflow with live font previews and flexible tagging. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://wakamaifondue.com/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">WF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://wakamaifondue.com/" target="_blank">Wakamai Fondue</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The tool that answers the question "what can my font do?". </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://webfontpreview.com/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">WF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://webfontpreview.com/" target="_blank">Web Font Preview</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Preview Google Font pairings with components and site templates.  <a href="https://github.com/jonaskay/webfontpreview"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://webfontapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://webfontapp.com/" target="_blank">Webfont</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create and maintain custom SVG icon fonts, made a shared library of icons.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://wordmark.it/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://wordmark.it/" target="_blank">WordMarkIt</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Displays your written word/phrase with all the fonts which are already installed on your computer. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
</ul>
<div class="banner banner--yellow">
<p>You can also handle fonts with Specify, which is mentioned in the <a href="https://github.com/LisaDziuba/Awesome-Design-Tools#design-system-tools">Design System Tools</a> section.</p>
</div>
<div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/33Q3AC0">
            
        </a>
    </p>
</div>

			
		</article>
<article id="gradient-tools">
			<header>
				<h3><a href="#gradient-tools">Gradient Tools</a></h3>
				
<p>You can see gradient colors are everywhere — UI, branding, illustration, typography. A gradient is created by using two or more different colors to paint one element while gradually fading between them. It might look as a memorable, fresh and unique color. To make such a gradient for your design, use these gradient color palettes.</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="http://www.colinkeany.com/blend/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.colinkeany.com/blend/" target="_blank">Blend</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create and customize beautiful CSS3 gradients. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.colorffy.com/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.colorffy.com/" target="_blank">Colorffy</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Get CSS, images, UI previews or create own gradients. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.colorsandfonts.com/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">C&amp;</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.colorsandfonts.com/" target="_blank">Colors &amp; Fonts</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A curated library of colors, gradients and fonts for digital designers and web developers.</p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mycolor.space/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mycolor.space/" target="_blank">ColorSpace</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The perfect matching color scheme for your next project! Generate nice color palettes. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://colorspark.app/gradient" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://colorspark.app/gradient" target="_blank">ColorSpark</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Helps designers find unique colors and striking gradient combinations. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://coolbackgrounds.io/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">CB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://coolbackgrounds.io/" target="_blank">Cool Backgrounds</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://webkul.github.io/coolhue/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://webkul.github.io/coolhue/" target="_blank">CoolHue</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Handpicked gradient palette and swatch for your next super amazing stuff. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://cssgradient.io/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">CG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://cssgradient.io/" target="_blank">CSS Gradient</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free CSS gradient generator tool, this website lets you create a colorful gradient background. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.eggradients.com/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">EG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.eggradients.com/" target="_blank">Egg Gradients</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A color collection page that includes shades of 12 different colors. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.grabient.com/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.grabient.com/" target="_blank">Grabient</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Beautiful and simple UI for generating web gradients. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.gradientslist.com" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.gradientslist.com" target="_blank">GradientsList</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A largest crowdsourced collection of gradients, with daily contributions from users on <a href="https://itunes.apple.com/app/apple-store/id1442380225?pt=117877769&amp;ct=gh&amp;mt=8">Gradients Maker for iOS</a> </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://colordesigner.io/gradient-generator" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">GG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://colordesigner.io/gradient-generator" target="_blank">Gradient Generator</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool that generates a stepped gradient between two colors. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://gradienthunt.com/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">GH</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://gradienthunt.com/" target="_blank">Gradient Hunt</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free and open platform for color inspiration with thousands of trendy hand-made color gradients.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://gradientsguru.com/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">GG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://gradientsguru.com/" target="_blank">Gradients Guru</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Blend mode background images &amp; beautiful background gradients for your UI. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://htmlcolors.com/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">H</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://htmlcolors.com/" target="_blank">HtmlColours</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Realize how easy and beautiful it is to create gradients with this gradient generator. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://uigradients.com/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">UG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://uigradients.com/" target="_blank">UI Gradients</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Handpicked collection of beautiful color gradients for designers and developers. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://webgradients.com/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">WG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://webgradients.com/" target="_blank">Web Gradients</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free collection of 180 linear gradients that you can use as content backdrops in any part of your website. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li></ul>
			
		<div class="promotion-banner-wrapper">
    <a class="promotion-banner -abstract" href="https://www.abstract.com/campaigns/collaboration/?&amp;utm_medium=Partner-Advertising&amp;utm_source=PA-Native-Digital&amp;utm_campaign=CY19-PA-FlawlessApp-1018-Sept12&amp;utm_term=designplugins&amp;utm_content=Sponsored">
        <div class="promotion-banner__logo -abstract">
            
        </div>
        <div class="promotion-banner__main">
            <h3 class="promotion-banner__title">Abstract</h3>
            <p class="promotion-banner__description">
                We centralize design decisions, feedback, Sketch files, and specs for your team.
            </p>
        </div>
        <button class="promotion-banner__link -abstract">
            Get a free, 14-day trial
        </button>
    </a>
</div></article>


<article id="icons-tools">
			<header>
				<h3><a href="#icons-tools">Icons Tools</a></h3>
				
<p>As well as fonts, icons are used in every design. These basic elements support and guide many user actions inside the product. Without a doubt, icons are a vital element in user navigation. While making those small design elements is hard and time-consuming, you can get thousands of vector icons for personal and commercial use.</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="http://animaticons.co/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://animaticons.co/" target="_blank">Animaticons</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A growing set of beautiful, high-resolution, animated GIF icons that you can customize.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://coreui.io/icons/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">CI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://coreui.io/icons/" target="_blank">CoreUI Icons</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Premium designed free icon set with marks in SVG, Webfont and raster formats. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://digitalnomadicons.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">DN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://digitalnomadicons.com/" target="_blank">Digital Nomad Icons</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Lifestyle icon &amp; emoji pack for your next project. 25 high-resolution flat icons. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://interface.market/essential/basic-pack" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">EG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://interface.market/essential/basic-pack" target="_blank">Essential Glyphs</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Created to cover your needs in perfect-shaped icons. Adapted for small and large sizes. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://feathericons.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">FI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://feathericons.com/" target="_blank">Feather Icons</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and readability.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.flaticon.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.flaticon.com/" target="_blank">Flaticon</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>1593000+ vector icons in SVG, PSD, PNG, EPS format or as icon font.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://fontawesome.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">FA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://fontawesome.com/" target="_blank">Font Awesome</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The web's most popular icon set and toolkit, also it's open source. <a href="https://github.com/FortAwesome/Font-Awesome"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://fontello.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://fontello.com/" target="_blank">Fontello</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Tool to build custom fonts with icons, also open source.  <a href="https://github.com/fontello/fontello"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.freepik.com" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.freepik.com" target="_blank">Freepik</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Collection of exclusive freebies and all graphic resources that you need for your projects.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://iconscout.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://iconscout.com/" target="_blank">Iconscout</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Get high-quality Icons, Illustrations and Stock photos at one place.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.iconfinder.com" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.iconfinder.com" target="_blank">Iconfinder</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A marketplace for vector icons (SVG). Icon sets available in IconJar format.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.geticonjar.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.geticonjar.com/" target="_blank">IconJar</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Store all your icons in one icon manager. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://iconmonstr.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://iconmonstr.com/" target="_blank">Iconmonstr</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Discover 4412+ free icons in 305 collections.Big and continuously growing source of simple icons. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://iconset.io/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://iconset.io/" target="_blank">Iconset</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free, cross-platform and fast SVG icon organizer working on Mac and Windows. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://iconstore.co/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">IS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://iconstore.co/" target="_blank">Icon Store</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A library of free vector icons for personal and commercial projects, designed by first-class designers. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://iconsvg.xyz/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://iconsvg.xyz/" target="_blank">ICONSVG</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool to simplify the process of finding and generating common icons for your project. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://icons8.com/icons" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://icons8.com/icons" target="_blank">Icons8</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free iOS, Android and Windows styled icons. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.ikonate.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.ikonate.com/" target="_blank">Ikonate</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Customize, adjust and download free vector icons. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://illustrio.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">i</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://illustrio.com/" target="_blank">illustrio</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A smarter icon library. Build something great with 100% customizable icons. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://ionicons.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://ionicons.com/" target="_blank">Ionicons</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Beautifully crafted open source icons. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://materialdesignicons.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">MD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://materialdesignicons.com/" target="_blank">Material Design Icons</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free material design icons made possible by open source contributons.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://icons.pixsellz.io/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">MI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://icons.pixsellz.io/" target="_blank">Material Icons Library</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free collection of 1000+ icons for popular graphics tools. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.getmotion.io" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.getmotion.io" target="_blank">Motion</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free, simple animated icon editor.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://thenounproject.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">NP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://thenounproject.com/" target="_blank">Noun Project</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Icons for everything.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://nucleoapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">N</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://nucleoapp.com/" target="_blank">Nucleo</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A Mac and Windows app to collect, customize and export all your icons. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://orioniconlibrary.com/all-icons" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">OI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://orioniconlibrary.com/all-icons" target="_blank">Orion Icons</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>SVG vector icons with an advanced interactive web app.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://simpleicons.org/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://simpleicons.org/" target="_blank">Simple Icons</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free SVG icons for popular brands. Simply click the icon you want, and the download should start automatically. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.shareicon.net/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.shareicon.net/" target="_blank">Share Icon</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>More than 300 000 free download icons in different formats. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://emoji.streamlineicons.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">SE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://emoji.streamlineicons.com/" target="_blank">Streamline Emoji</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free collection of 850 + vector emoji. The style is inspired by the japanese “Kawaii” (cute) style. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://www.svgs.us/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.svgs.us/" target="_blank">Svgsus</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>SVG icon management tool. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.iconshock.com/svg-color/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.iconshock.com/svg-color/" target="_blank">SVG Colorizer</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool to automatically change the entire color palette of any given SVG icon pack intelligently keeping the shades, highlights &amp; shadows. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.svgrepo.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.svgrepo.com/" target="_blank">SVGRepo</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A site with 300.000+ SVG Vectors and Icons.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://tilda.cc/free-icons/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">TI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://tilda.cc/free-icons/" target="_blank">Tilda Icons</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Download free icons for landing pages. More than 700 vector icons, collected in 43 sets for business. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://twemoji.twitter.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://twemoji.twitter.com/" target="_blank">Twemoji</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Twitter’s open-source emoji has you covered for all your project's emoji needs. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://iconscout.com/unicons" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://iconscout.com/unicons" target="_blank">Unicons</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>1000+ pixel-perfect vector icons for your next project. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://visualpharm.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://visualpharm.com/" target="_blank">VisualPharm</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free SVG Icons with super-fast search and free Coke. Built for fun by Icons8. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.xicons.co/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">X</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.xicons.co/" target="_blank">Xicons</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free vector icons, that update every 10 days. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.zwicon.com/" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">Z</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.zwicon.com/" target="_blank">Zwicon</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Handcrafted icon set for your next project. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
</ul>
<div class="banner banner--yellow">
<p>You can also handle icons with Specify, which is mentioned in the <a href="https://github.com/LisaDziuba/Awesome-Design-Tools#design-system-tools">Design System Tools</a> section.</p>
</div>

			
		</article>
<article id="illustrations">
			<header>
				<h3><a href="#illustrations">Illustrations</a></h3>
				
<!-- <div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/2VQVTJ8">
            <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Porkbun.png" alt="Porkbun"/>
        </a>
    </p>
</div> -->
<p>Illustrations can be used on your landing page, blog posts, inside your app or email campaign. They make your design live and playful. While drawing good illustration is a task of a skilled graphic designer, you can grab free SVG images &amp; illustrations from very kind people in our community:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://absurd.design" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">AD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://absurd.design" target="_blank">Absurd Design</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free surrealist illustrations for your projects. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.blobmaker.app/" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.blobmaker.app/" target="_blank">Blobmaker</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create vector blob illustrations in the browser, with varying colour, complexity and contrast. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.humaaans.com/" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">H</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.humaaans.com/" target="_blank">Humaaans</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free library to mix-&amp;-match illustrations of people. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pngtree.com/illustration-design" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">Ib</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pngtree.com/illustration-design" target="_blank">Illustration by Pngtree</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Over 13142 professionally designed illustrations of different styles.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://iradesign.io/" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">ID</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://iradesign.io/" target="_blank">IRA Design</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create amazing illustrations, using hand-drawn sketch components, a cool selection of 5 gradients and ai., svg. or png. formats. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://joeschmoe.io" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">J</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://joeschmoe.io" target="_blank">JoeSchmoe</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An illustrated avatar collection for developers and designers, perfect as placeholders or live sites. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://lukaszadam.com/illustrations" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://lukaszadam.com/illustrations" target="_blank">LukaszAdam</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free vector art illustrations and icons. They are available for personal and commercial use. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://gallery.manypixels.co" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://gallery.manypixels.co" target="_blank">ManyPixels</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Royalty-free illustrations to power up your projects. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/MariaLetta/mega-doodles-pack" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">MD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/MariaLetta/mega-doodles-pack" target="_blank">Mega Doodles Pack</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Big vector pack with hand-drawn doodles for presentations, social media, blog posts and so on.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.opendoodles.com/" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">OD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.opendoodles.com/" target="_blank">Open Doodles</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A set of free illustrations by Pablo Stanley that embraces the idea of Open Design. You can copy, edit, remix, share, or redraw these images for any purpose without restriction under copyright or database law (CC0 license.). </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://icons8.com/ouch" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">O</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://icons8.com/ouch" target="_blank">Ouch</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Vector illustrations to class up your project. Free for both personal and commercial use. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://undraw.co" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">u</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://undraw.co" target="_blank">unDraw</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A collection of beautiful SVG images. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.wannapik.com/" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.wannapik.com/" target="_blank">Wannapik</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A collection of free illustrations, vector images, photos, and animations for any use. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="information-architecture">
			<header>
				<h3><a href="#information-architecture">Information Architecture</a></h3>
				
<p>Information architecture helps designers organize and structure content inside websites, mobile apps, and other software. So users will understand product functionality and will find everything needed. These information architecture tools should allow you to create visual sitemaps and to improve your website content structure:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://dynomapper.com/" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">DM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://dynomapper.com/" target="_blank">DYNO Mapper</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Organize website projects using visual sitemaps, content inventory, content audit, content planning, daily keyword tracking, and website accessibility testing.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.omnigroup.com/omnigraffle/" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">O</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.omnigroup.com/omnigraffle/" target="_blank">OmniGraffle</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Сreate beautiful diagrams and designs with this powerful and easy to use app.</p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.optimalworkshop.com/optimalsort" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">O</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.optimalworkshop.com/optimalsort" target="_blank">OptimalSort</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Card sorting tool that allows you to understand how people categorize content in your UI.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.optimalworkshop.com/treejack" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.optimalworkshop.com/treejack" target="_blank">Treejack</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Upload your proposed sitemap to see how a user would move through your site.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://writemaps.com/" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://writemaps.com/" target="_blank">WriteMaps</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create sitemaps that impress! Plan out the pages and content for your next website project in a visual, fun, and beautiful manner.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="logo-design">
			<header>
				<h3><a href="#logo-design">Logo Design</a></h3>
				
<p>A logo is the starting point of your brand identity. It reflects the product mission, functionality and brand message. Ideally, the logo creates a strong connection between your product and the users. Logo design is an art, as well as many other design disciplines. With the right logo design tools, this art can be done right a bit faster.</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.designevo.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">DE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.designevo.com/" target="_blank">Design Evo</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A large collection of vector icons and shapes help you design custom logos easily. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.freelogodesign.org/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">FL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.freelogodesign.org/" target="_blank">Free Logo Design</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create stunning professional logos in seconds. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.graphicsprings.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">GS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.graphicsprings.com/" target="_blank">Graphic Springs</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Choose from a gallery of vector format logo templates, categorized by industry. Edit the graphics and texts of your template, then download it.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.logodesignteam.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">LD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.logodesignteam.com/" target="_blank">Logo Design Team</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Offers affordable professional custom logo design and brand design services.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://logojoy.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://logojoy.com/" target="_blank">Logojoy</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Uses artificial intelligence to instantly generate unique logo ideas for your business.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://logolab.app/home" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">LL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://logolab.app/home" target="_blank">Logo Lab</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Put your logo to the test with automated visual experiments. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.ucraft.com/free-logo-maker" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">LM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.ucraft.com/free-logo-maker" target="_blank">Logo Maker</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Allows you to make a free logo within seconds. Start with a blank canvas, add text and an icon, and then customize. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.designhill.com/tools/logo-maker" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">LM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.designhill.com/tools/logo-maker" target="_blank">Logo Maker</a> by Designhill
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Generate 1000s of unique logos in only few minutes, without design expertise.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://logomakr.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">LM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://logomakr.com/" target="_blank">Logo Makr</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Design a logo for free, choose from hundreds of fonts and icons, then save a logo on the computer. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.logomyway.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">LM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.logomyway.com/" target="_blank">Logo My Way</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Choose from 600 custom logo designs from creative designers worldwide.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://thelogopackage.com" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">LP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://thelogopackage.com" target="_blank">Logo Package Express</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Export and package dozens of logo variations and file types for your clients automatically in under 5 minutes.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://brandmark.io/logo-rank/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">LR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://brandmark.io/logo-rank/" target="_blank">Logo Rank</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Upload your logo to see how it rates on a number of objective measures. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://wizlogo.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://wizlogo.com/" target="_blank">Wizlogo</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create a logo with a simple and affordable tool backed by professional designers.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>
<div class="banner banner--yellow">
<p>You can also do your logo design with Adobe Photoshop, GIMP, Inkscape, Krita and Vectr which are mentioned in <a href="https://github.com/LisaDziuba/Awesome-Design-Tools#ui-design-tools">UI design tools</a>.</p>
</div>

			
		</article>
<article id="mockup-tools">
			<header>
				<h3><a href="#mockup-tools">Mockup Tools</a></h3>
				
<!-- <div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/33KtOpN">
            <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/ProtoPie.png" alt="ProtoPie"/>
        </a>
    </p>
</div> -->
<p>A mockup is a visual way of representing the product. While a wireframe mostly represents a product’s structure, a mockup shows how the product is going to look like. These mockup tools that help you create and collaborate on mockups, wireframes, diagrams, and prototypes:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://artboard.studio/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">AS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://artboard.studio/" target="_blank">Artboard Studio</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Online graphic design application mainly focused on product mockups.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://cleanmock.com" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://cleanmock.com" target="_blank">Cleanmock</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create stunning mockups using the latest device frames like iPhone &amp; custom backgrounds.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://craftwork.design/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">CD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://craftwork.design/" target="_blank">Craftwork Design</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free and premium high-quality digital products that make your work faster and easier.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://facebook.design/devices" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">Db</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://facebook.design/devices" target="_blank">Devices by Facebook</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Images and Sketch files of popular devices. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://dimmy.club/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://dimmy.club/" target="_blank">Dimmy.club</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Device mockup generator for your website and app screenshots.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://frrames.com/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://frrames.com/" target="_blank">Frrames</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Frrames mockups is perfectly crafted responsive windows mockups for your ideal presentation.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.ls.graphics/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">LG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.ls.graphics/" target="_blank">Lstore Graphics</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free and premium mockups, UI/UX tools, scene creators for busy designers. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mediamodifier.com" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mediamodifier.com" target="_blank">Mediamodifier</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create impressive product mockups in seconds.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.mockflow.com/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.mockflow.com/" target="_blank">Mockflow</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The quickest way to brainstorm user interface ideas.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.mockupworld.co/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">MW</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.mockupworld.co/" target="_blank">Mockup World</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Tons of free and legal, fully layered, easily customizable photo realistic PSDs. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mockupsforfree.com/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">MF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mockupsforfree.com/" target="_blank">Mockups For Free</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free design resources, PSD files for graphic and web designers. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mockuuups.studio/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mockuuups.studio/" target="_blank">Mockuuups</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Drag-and-drop tool for creating beautiful app previews or any marketing materials.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.mock.video/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">MV</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.mock.video/" target="_blank">Mock Video</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Instantly create mockups by adding a device frame to your videos.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://moqups.com/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://moqups.com/" target="_blank">Moqups</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Helps you create and collaborate in real-time on wireframes, mockups, diagrams and prototypes.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://originalmockups.com/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">OM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://originalmockups.com/" target="_blank">Original Mockups</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>High-quality mockups for Photoshop that make your designs stand out.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://overframe.xyz/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">Of</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://overframe.xyz/" target="_blank">Overframe for Mac</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Record your prototype &amp; app with device frame overlay. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pixelbuddha.net/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pixelbuddha.net/" target="_blank">PixelBuddha</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free and premium high-quality resources for web designers and developers.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://store.ramotion.com/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">RS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://store.ramotion.com/" target="_blank">Ramotion Store</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Carefully crafted Apple and Android mockups for Sketch and Photoshop.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.rotato.xyz/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.rotato.xyz/" target="_blank">Rotato</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Animated 3D mockups for your app designs. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.screely.com/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.screely.com/" target="_blank">Screely</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Quickly frame web page designs into a minimalist browser window. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.screenspace.io/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.screenspace.io/" target="_blank">ScreenSpace</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>3D devices videos for motion designer.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://screenzy.io" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://screenzy.io" target="_blank">Screenzy</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Instantly transform your pictures and screenshots into beautiful mockups ready to be shared on social media. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/zehfernandes/screeener" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/zehfernandes/screeener" target="_blank">Screeener</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Use this app to insert a bunch of images to a keynote file, using the mockup you choose.</p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://smartmockups.com/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://smartmockups.com/" target="_blank">Smartmockups</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create stunning product mockups with just a few clicks.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://shotsnapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://shotsnapp.com/" target="_blank">shotsnapp</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create beautiful device mockup presentation for your digital app and website design.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://themockup.club/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">TM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://themockup.club/" target="_blank">The Mockup Club</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A directory of the best free design mockups for Photoshop, Sketch, Figma and InVision Studio. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://threed.io/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://threed.io/" target="_blank">Threed</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Generate custom 3D Device Mockups in your Browser.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.uistore.design/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">US</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.uistore.design/" target="_blank">UI Store Design</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>200+ free handpicked design resources for Sketch, Figma, Adobe XD, InVision Studio, Photoshop, Illustrator CC. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://ui8.net/category/freebies" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://ui8.net/category/freebies" target="_blank">UI8
					<div class="label-wrapper">
						
					</div>
				</a></header><a href="https://ui8.net/category/freebies" target="_blank">
				</a><p><a href="https://ui8.net/category/freebies" target="_blank">Design Freebies</a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mockups.kkuistore.com/" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">VM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mockups.kkuistore.com/" target="_blank">Vector Mockups Library</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free collection of presentation Mockups for Sketch, Figma &amp; Photoshop. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="no-code-tools">
			<header>
				<h3><a href="#no-code-tools">No Code Tools</a></h3>
				
<p>With a rise of “no code tools”, everyone with a laptop can build and launch a project. These tools help designers and makers create websites, apps, and even games. No code tools allow to automate routine tasks and can be used without a development background. Take a look at the tools here and if you need more — check Design to Code section.</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://bubble.is/" class="tool__asset" target="_blank" style="background-color: hsl(180, 79%, 80%); color: rgb(112, 212, 212);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://bubble.is/" target="_blank">Bubble</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Build and host web applications without having to write code or hire a team of engineers.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://carrd.co/" class="tool__asset" target="_blank" style="background-color: hsl(180, 79%, 80%); color: rgb(112, 212, 212);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://carrd.co/" target="_blank">Carrd</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Simple, free, fully responsive one-page sites for pretty much anything. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://coda.io" class="tool__asset" target="_blank" style="background-color: hsl(180, 79%, 80%); color: rgb(112, 212, 212);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://coda.io" target="_blank">Coda</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A new type of document that blends the flexibility of documents, the power of spreadsheets, and the utility of apps into a single new canvas. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://kodika.io" class="tool__asset" target="_blank" style="background-color: hsl(180, 79%, 80%); color: rgb(112, 212, 212);">K</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://kodika.io" target="_blank">Kodika.io</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Build iOS apps with Kodika no code app builder for Mac &amp; iPad, capable of creating powerful apps with Drag &amp; Drop. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pagexl.com/" class="tool__asset" target="_blank" style="background-color: hsl(180, 79%, 80%); color: rgb(112, 212, 212);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pagexl.com/" target="_blank">PageXL</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A simple one-page website builder for quickly creating landing pages and online stores. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.remove.bg/" class="tool__asset" target="_blank" style="background-color: hsl(180, 79%, 80%); color: rgb(112, 212, 212);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.remove.bg/" target="_blank">Remove.bg</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free service to remove the background of any photo. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://tryretool.com/" class="tool__asset" target="_blank" style="background-color: hsl(180, 79%, 80%); color: rgb(112, 212, 212);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://tryretool.com/" target="_blank">Retool</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Gives you building blocks and you can build tools much faster.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.sheet2site.com/" class="tool__asset" target="_blank" style="background-color: hsl(180, 79%, 80%); color: rgb(112, 212, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.sheet2site.com/" target="_blank">Sheet2Site</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create a website from Google Sheets without writing code.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.shopify.com/" class="tool__asset" target="_blank" style="background-color: hsl(180, 79%, 80%); color: rgb(112, 212, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.shopify.com/" target="_blank">Shopify</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>One platform with all the e-commerce and point of sale features you need to start, run, and grow your business.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://thunkable.com/" class="tool__asset" target="_blank" style="background-color: hsl(180, 79%, 80%); color: rgb(112, 212, 212);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://thunkable.com/" target="_blank">Thunkable</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A drag-and-drop tool for anyone to build native mobile apps.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://userguiding.com/" class="tool__asset" target="_blank" style="background-color: hsl(180, 79%, 80%); color: rgb(112, 212, 212);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://userguiding.com/" target="_blank">UserGuiding</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create walkthroughs, checklists, hotspots, and modals to improve user onboarding.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="pixel-art-tools">
			<header>
				<h3><a href="#pixel-art-tools">Pixel Art Tools</a></h3>
				
<p>Pixel art is a digital art form where color is applied to individual pixels to create an image. The pixel art can be used to create everything from intricate scenes and game backgrounds to character designs or emoji. If you feel curious to try, check this pixel art software for both macOS and Windows:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.aseprite.org/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.aseprite.org/" target="_blank">Aseprite</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Animated sprite editor &amp; pixel art tool. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/gmattie/Data-Pixels" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">DP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/gmattie/Data-Pixels" target="_blank">Data Pixels</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create pixel art programmatically. Includes DataPixels.js and Data Pixels Playground desktop app.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://www.drawbang.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.drawbang.com/" target="_blank">Draw!</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Open-source and free web-based pixel art and GIF editor.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://gitlab.com/GrafX2/grafX2" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://gitlab.com/GrafX2/grafX2" target="_blank">Grafx2</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A bitmap paint program inspired by the Amiga programs Deluxe Paint and Brilliance. Specialized in 256-color drawing.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://graphicsgale.com/us/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://graphicsgale.com/us/" target="_blank">GraphicsGale</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Has many pixel-art specific features, including palette control, selectively erasing colors, and tools for quickly replacing and trying new colors. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://jackschaedler.github.io/goya/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://jackschaedler.github.io/goya/" target="_blank">Goya</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A pixel-art editor built on ClojureScript and Om.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://make8bitart.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">M8</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://make8bitart.com/" target="_blank">Make 8 bit art</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An open source and in-browser pixel art drawing tool.  <a href="https://github.com/jennschiffer/make8bitart"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.piskelapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.piskelapp.com/" target="_blank">Piskel</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Online editor for animated sprites &amp; pixel art.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.pixelartcss.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">Pa</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.pixelartcss.com/" target="_blank">Pixel art to CSS</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Pixel art animation and drawing web app powered by React.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://app.poxi.rocks/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://app.poxi.rocks/" target="_blank">Poxi</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A flat pixel art editor.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pyxeledit.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">PE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pyxeledit.com/" target="_blank">Pyxel Edit</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A pixel art editor designed to make it fun and easy to make tilesets, levels and animations.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
</ul>

			
		</article>
<!-- <div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/33KtOpN">
            <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/ProtoPie.png" alt="ProtoPie"/>
        </a>
    </p>
</div> -->
<article id="prototyping-tools">
			<header>
				<h3><a href="#prototyping-tools">Prototyping Tools</a></h3>
				
<p>A prototype is a simple experimental design of a proposed solution. It should help to test ideas, design assumptions, and hypotheses in a fast and cheap way. Prototyping tools allow designers and clients to see how the product would function in the real world and collaborate on this solution. Many modern prototyping tools can use for wireframing, prototyping, and collaboration:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.meetalva.io/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.meetalva.io/" target="_blank">Alva</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create living prototypes with code components. It's also open source.  <a href="https://github.com/meetalva/alva"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.axure.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">AR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.axure.com/" target="_blank">Axure RP</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Wireframing, prototyping, collaboration &amp; specifications generation.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.build.me/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">SB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.build.me/" target="_blank">SAP Build</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A complete set of cloud‑based tools to design and build your enterprise app.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://creolabs.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://creolabs.com/" target="_blank">Creo</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Prototyping, code exporting and built-in mobile app builder. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.drama.app/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.drama.app/" target="_blank">Drama</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Prototype, animate and design in a single Mac app. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.invisionapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.invisionapp.com/" target="_blank">InVision</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Prototyping, collaboration &amp; workflow platform. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.flinto.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.flinto.com/" target="_blank">Flinto</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A Mac app for creating interactive and animated prototypes of app designs.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://framer.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">FX</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://framer.com/" target="_blank">Framer X</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool to visually design realistic interactive prototypes. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.apple.com/keynote/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">K</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.apple.com/keynote/" target="_blank">Keynote</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The built-in Mac app for creating presentations that can also be used for quick prototyping (see how Apple designers use it in the WWDC 2014 session "<a href="https://developer.apple.com/videos/play/wwdc2014/223/">Prototyping: Fake It Till You Make It</a>" to verify design concepts).  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://lightwell.pro/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://lightwell.pro/" target="_blank">Lightwell</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Visual tool and SDK to build mobile layouts and animations that translate into native iOS elements. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://marvelapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">MA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://marvelapp.com/" target="_blank">Marvel App</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The collaborative design platform. Wireframe, prototype, design online and create design specs in one place.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://maze.design/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://maze.design/" target="_blank">Maze</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool for designers and developers that gives analytical results with actionable KPIs for your Invision prototypes.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://origami.design/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">O</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://origami.design/" target="_blank">Origami</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free tool for designing modern user interfaces. Quickly put together a prototype, run it on your iPhone or iPad, iterate on it, and export code snippets your engineers can use.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pencil.evolus.vn/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pencil.evolus.vn/" target="_blank">Pencil</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Prototyping tool with many built-in components that people can easily install and use to create mockups in popular desktop platforms. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://principleformac.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://principleformac.com/" target="_blank">Principle</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Makes it easy to design animated and interactive user interfaces. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.protopie.io/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.protopie.io/" target="_blank">ProtoPie</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Piece hi-fi interactions together, build sensor-aided prototypes and share your amazing creations in a matter of minutes.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://proto.io/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://proto.io/" target="_blank">Proto.io</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool to create fully-interactive high-fidelity prototypes that look and work exactly as your app should.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://prottapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://prottapp.com/" target="_blank">Prott</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An easy to use and intuitive prototyping tool, promotes team collaboration.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://uizard.io/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://uizard.io/" target="_blank">Uizard</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Transform wireframes into high-fidelity interactive prototypes, customize style systems, export to Sketch, export to HTML/CSS code. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.useberry.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.useberry.com/" target="_blank">Useberry</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A usability testing tool that allows importing prototypes from InVision, AdodeXD, Sketch, Marvel and getting users’ behavior insights with heatmaps, video recordings, user flows, time bars and answers of follow-up questions.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.uxpin.com/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.uxpin.com/" target="_blank">UXPin</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Build prototypes that feel real, with powers of code components, logic, states, and design systems. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
</ul>
<div class="banner banner--yellow">
<p>You can also do prototyping with Figma, Adobe XD, Sketch and InVision Studio, which are mentioned in the <a href="#ui-design-tools">UI Design Tools section</a>.</p>
</div>

			
		</article>
<article id="screenshot-software">
			<header>
				<h3><a href="#screenshot-software">Screenshot Software</a></h3>
				
<!-- <div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/2VQVTJ8">
            <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Porkbun.png" alt="Porkbun"/>
        </a>
    </p>
</div> -->
<p>Taking screenshots is a typical task in the design &amp; development workflow. So these free and full-featured screenshot apps can help you capture a screen with ease. Some screen captures are macOS only, while others support both OS:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.techsmith.com/video-editor.html" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.techsmith.com/video-editor.html" target="_blank">Camtasia</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A screen recorder that comes with a full-blown built-in editor.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://getcleanshot.com" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://getcleanshot.com" target="_blank">CleanShot</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Capture your screen in a superior way with a built-in annotation tool and Quick Access Overlay. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.getcloudapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.getcloudapp.com/" target="_blank">CloudApp</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Record videos, webcam, annotate screenshots, create GIFs.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.collabshot.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.collabshot.com/" target="_blank">Collabshot</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Take and collaborate on screenshots in real-time with your coworkers. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://gifox.io" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://gifox.io" target="_blank">Gifox</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Delightful GIF recording and sharing app. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://giphy.com/apps/giphycapture" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">GC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://giphy.com/apps/giphycapture" target="_blank">Giphy Capture</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Capture parts of your screen and export as gif or mp4.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://getgreenshot.org/" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://getgreenshot.org/" target="_blank">Greenshot</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Take a screenshot of a selected region, window or fullscreen. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://getkap.co" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">K</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://getkap.co" target="_blank">Kap</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Open source screen recorder with options to export to GIF, MP4, WebM and APNG.  <a href="https://github.com/wulkano/kap"></a> </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://itunes.apple.com/us/app/lightshot-screenshot/id526298438" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://itunes.apple.com/us/app/lightshot-screenshot/id526298438" target="_blank">Lighshot</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Taking quick captures of your screen. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://itunes.apple.com/us/app/monosnap/id540348655?mt=12" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://itunes.apple.com/us/app/monosnap/id540348655?mt=12" target="_blank">Monosnap</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create screenshots, annotate and upload them to the cloud. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://obsproject.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">O</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://obsproject.com/" target="_blank">OBS</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Open source software for video recording and live streaming.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://support.apple.com/quicktime" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">Q</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://support.apple.com/quicktime" target="_blank">Quicktime</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A video player that you can use to record your screen.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://www.telestream.net/screenflow/overview.htm" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.telestream.net/screenflow/overview.htm" target="_blank">ScreenFlow</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Video editing and screen recording
software for Mac. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.thnkdev.com/Screenie/" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.thnkdev.com/Screenie/" target="_blank">Screenie</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Filter and search through images, change screenshot filetypes. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.screentogif.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.screentogif.com/" target="_blank">ScreenToGif</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Record a gif of part of the screen. Only available for Windows.  <a href="https://github.com/wulkano/kap"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://getsharex.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://getsharex.com/" target="_blank">ShareX</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Screen capture, file sharing, and productivity tool.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://meetshotty.com" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://meetshotty.com" target="_blank">Shotty</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A menu bar app that helps you quickly find the screenshot you're looking for so you can drag and drop it into any application. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.techsmith.com/screen-capture.html" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.techsmith.com/screen-capture.html" target="_blank">Snagit</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Capture images and video, create GIFs, annotate, edit, and share.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://support.microsoft.com/en-us/help/13776/windows-use-snipping-tool-to-capture-screenshots" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://support.microsoft.com/en-us/help/13776/windows-use-snipping-tool-to-capture-screenshots" target="_blank">Snipping Tool</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Windows free screenshot tool. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://snappy-app.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://snappy-app.com/" target="_blank">Snappy</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Takes quick shots and organizes them for you into collections.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://teampaper.me/snap/" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">TS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://teampaper.me/snap/" target="_blank">Teampaper Snap</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Allows you to take screenshots of a selected area.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>
 
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="sketching-tools">
			<header>
				<h3><a href="#sketching-tools">Sketching Tools</a></h3>
				
<p>Sometimes you need just a pencil and paper to start creating your app or website. So here are you can find online sketching tools with great sketch sheet templates to speed up your creative process:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://zurb.com/playground/responsive-sketchsheets" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 90%); color: rgb(217, 152, 152);">RS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://zurb.com/playground/responsive-sketchsheets" target="_blank">Responsive Sketchsheets</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Offers responsive pre-design templates. These will automatically adapt their layout to any screen size and include neat features. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sketchsheets.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 90%); color: rgb(217, 152, 152);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sketchsheets.com/" target="_blank">Sketchsheets</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An open source project dedicated to providing free printable templates of the latest devices and platforms for wireframing designs.  <a href="https://github.com/rnarrkus/sketchsheets"></a></p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sneakpeekit.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 90%); color: rgb(217, 152, 152);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sneakpeekit.com/" target="_blank">Sneakpeekit</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Print note taking grids and devices frames. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sketchize.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 90%); color: rgb(217, 152, 152);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sketchize.com/" target="_blank">Sketchize</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Just choose any of the sketch sheets that fits your project, print it out and start to sketch your dream. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
</ul>
<div class="banner banner--yellow">
<p>You can also do some sketching with Sketch mentioned in <a href="https://github.com/LisaDziuba/Awesome-Design-Tools#ui-design-tools">UI design tools</a>.</p>
</div>

			
		</article>
<article id="smm-design-tools">
			<header>
				<h3><a href="#smm-design-tools">SMM Design Tools</a></h3>
				
<p>Often marketing teams need well-design materials. It can be different banners, promo visuals, favicons, animations or just nice images for social platforms, like Twitter or Instagram. It this section we will keep adding tools for everyone to create marketing designs.</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.canva.com/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.canva.com/" target="_blank">Canva</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create stunning designs for work, life, and play—even if you're not a design expert!</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://crello.com/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://crello.com/" target="_blank">Crello</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create own designs: posts, covers, graphics, and posters using the best software on the web.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pablo.buffer.com/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">Pb</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pablo.buffer.com/" target="_blank">Pablo by Buffer</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Design engaging images for your social media posts. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.remove.bg/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.remove.bg/" target="_blank">Remove.bg</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free service to remove the background of any photo. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://socialsizes.io/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://socialsizes.io/" target="_blank">SocialSizes</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Provides designers with the best sizes to use for image and video content on social media. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://getstencil.com/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://getstencil.com/" target="_blank">Stencil</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A graphic design tool that is all about creating social media images easily and quickly.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="sound-design">
			<header>
				<h3><a href="#sound-design">Sound Design</a></h3>
				
<p>Sound design is an art of creating a soundscape for a site, app, movie, game or any other product. The sound has great potential for transforming the way people connect with your product. Some sound design software is very advanced and can be used mostly by sound designers, while others are good for beginners.</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://appsounds.pro/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://appsounds.pro/" target="_blank">Appsounds</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>UI Sound packs for apps, games, and any product.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://audiojungle.net/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://audiojungle.net/" target="_blank">AudioJungle</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>836,206 tracks and sounds from the community of musicians and sound engineers.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.bensound.com/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.bensound.com/" target="_blank">Bensound</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Download creative commons music, royalty free music for free and use it in your project. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://freesound.org/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://freesound.org/" target="_blank">Freesound</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A collaborative database of Creative Commons Licensed sounds. Browse, download and share sounds. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://icons8.com/music" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">FM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://icons8.com/music" target="_blank">Fugue Music</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Download free background music for your videos. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://cycling74.com/products/max/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://cycling74.com/products/max/" target="_blank">Max</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Connect objects with virtual patch cords to create interactive sounds, graphics, and custom effects.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://reaper.fm/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://reaper.fm/" target="_blank">Reaper</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Import any audio and MIDI, synthesize, sample, compose, arrange, edit, mix, and master songs or any other audio projects.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sonic-pi.net/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sonic-pi.net/" target="_blank">Sonic Pi</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A live coding music synth.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://soundkit.io/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://soundkit.io/" target="_blank">SoundKit</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A UI sound library designed for all of your interface needs.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://uisounds.prototypr.io/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">US</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://uisounds.prototypr.io/" target="_blank">UI Sounds</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Learn sound design for user interfaces by example.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://wistia.com/resources/music" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">WM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://wistia.com/resources/music" target="_blank">Wistia Music</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Download some free background tracks to add energy and emotion to your videos. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.wowa.me/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.wowa.me/" target="_blank">WOWA</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Download royalty-free music for YouTube videos, podcasts, and apps. No copyright CC0. Music inspired by Unsplash. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.youtube.com/audiolibrary/music" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">YA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.youtube.com/audiolibrary/music" target="_blank">YouTube Audio Library</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Browse and download free music for your project. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="stock-photos-tools">
			<header>
				<h3><a href="#stock-photos-tools">Stock Photos Tools</a></h3>
				
<p>Need a high-quality photo for iOS app or new banner? You can always shoot it yourself or borrow from the stock photo sites. Luckily, there are hundreds of beautiful, free stock photos and royalty-free images that you can use for any project:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://burst.shopify.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://burst.shopify.com/" target="_blank">Burst</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free stock photos for websites and commercial use. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://duotone.shapefactory.co/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://duotone.shapefactory.co/" target="_blank">Duotone</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free duotone images to use in any project, or make custom duotone images. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://deathtothestockphoto.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">Dt</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://deathtothestockphoto.com/" target="_blank">Death to Stock</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Paid-for stock photo service with a mailing list for occasional free packs, and a focus on not looking like stock photography.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://foodiesfeed.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://foodiesfeed.com/" target="_blank">FoodiesFeed</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Thousands of beautiful realistic free food pictures in high resolution. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://freephotos.cc/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://freephotos.cc/" target="_blank">FreePhotos.cc</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free stock photos for commercial use. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://freestocks.org/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://freestocks.org/" target="_blank">Freestocks.org</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>High quality photos all released under Creative Commons CC0. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://gratisography.com" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://gratisography.com" target="_blank">Gratisography</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A collection of free high-resolution pictures. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://jaymantri.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">JM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://jaymantri.com/" target="_blank">Jay Mantri</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>7 new photos released every Thursday under the Creative Commons CC0. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://kaboompics.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">KP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://kaboompics.com/" target="_blank">Kaboom Pics</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Stock photos including abstract, city/architecture, fashion, food &amp; landscapes. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://landingstock.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://landingstock.com/" target="_blank">LandingStock</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A collection of free images for your landing page. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.lifeofpix.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">Lo</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.lifeofpix.com/" target="_blank">Life of Pix</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free high-resolution photos, created by the LEEROY team. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://lorempixel.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://lorempixel.com/" target="_blank">LoremPixel</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An API that serves stock photos at specified sizes and categories. Great for placeholder/user-generated content. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://magdeleine.co/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://magdeleine.co/" target="_blank">Magdeleine</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free high-quality stock photos for your inspiration. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://photos.icons8.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://photos.icons8.com/" target="_blank">Moose</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Don't search for stock photos, create them. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://mmtstock.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">MS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://mmtstock.com/" target="_blank">MMT STock</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>High-resolution photos provided by Jeffrey Betts with Creative Commons CC0. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://nos.twnsnd.co/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">NO</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://nos.twnsnd.co/" target="_blank">New Old Stock</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A vintage photos from the public archives free of known copyright restrictions. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.pexels.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.pexels.com/" target="_blank">Pexels</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An aggregate of many free stock photo resources. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://photos.icons8.com/creator" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">PC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://photos.icons8.com/creator" target="_blank">Photo Creator</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free tool for creating realistic stock photos on your demand. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://picography.co/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://picography.co/" target="_blank">Picography</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free stock photos by Dave Meier and various other photographers with Creative Commons CC0. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pixabay.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pixabay.com/" target="_blank">Pixabay</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Sharing photos, illustrations, vector graphics, and film footage under a proprietary license. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://picjumbo.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://picjumbo.com/" target="_blank">Picjumbo</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A collection of totally free photos for your commercial &amp; personal works. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pngtree.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pngtree.com/" target="_blank">Pngtree</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Millions of PNG images, backgrounds and vectors for free download. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pxhere.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">p</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pxhere.com/" target="_blank">pxhere</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free image stock. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.reshot.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.reshot.com/" target="_blank">Reshot</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A massive library of handpicked free stock photos you won’t find elsewhere. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://shotstash.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://shotstash.com/" target="_blank">ShotStash</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Thousands of free high-resolution CC0 photos and videos. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://skitterphoto.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://skitterphoto.com/" target="_blank">SkitterPhoto</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A wide variety of stock photos and are released under Creative Commons CC0. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://startupstockphotos.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://startupstockphotos.com/" target="_blank">Startup Stock Photos</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free photos for startups, bloggers and publishers. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://stocksnap.io/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://stocksnap.io/" target="_blank">StockSnap.io</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A large selection of free stock photos and high-resolution images. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://styledstock.co/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://styledstock.co/" target="_blank">StyledStock</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free feminine stock photography for every woman entrepreneur. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://broadlygenderphotos.vice.com/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">TG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://broadlygenderphotos.vice.com/" target="_blank">The Gender Spectrum Collection</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A stock photo library featuring images of trans and non-binary models that go beyond the clichés. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://uifaces.co/" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">UF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://uifaces.co/" target="_blank">UI Faces</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An aggregator that indexes various free avatar sources that you can use in your design mockups. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://unsplash.com" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://unsplash.com" target="_blank">Unsplash</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Stock photos free to use. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.flickr.com/photos/wocintechchat" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">#C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.flickr.com/photos/wocintechchat" target="_blank">#WOCinTech Chat Photos</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free stock photos of women technologists of diverse backgrounds. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://www.zoommyapp.com" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">Z</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.zoommyapp.com" target="_blank">Zoommy</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Helps you find awesome free stock photos for your creative product or inspiration. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="stock-videos">
			<header>
				<h3><a href="#stock-videos">Stock Videos</a></h3>
				
<p>If you work with video-content, you will enjoy these high-quality, hand-curated stock videos. You'll find many good and free stock video sites below, which you can use on your website, in your ad campaigns or social media:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://coverr.co/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://coverr.co/" target="_blank">Coverr</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Beautiful, free stock video footage for your homepage. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://www.lifeofvids.com/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">Lo</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.lifeofvids.com/" target="_blank">Life of Vids</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Provides free stock videos, clips, and loops. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://mazwai.com" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://mazwai.com" target="_blank">Mazwai</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Great collection of free creative commons HD video clips &amp; footages. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mixkit.co/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mixkit.co/" target="_blank">Mixkit</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Extraordinary Free HD videos. For you to use, completely free of charge. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.motionplaces.com/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">MP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.motionplaces.com/" target="_blank">Motion Places</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A curated collection of beautiful footage you can use for your projects. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pixabay.com/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pixabay.com/" target="_blank">Pixabay</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>It has more than 1.5 million royalty-free stock videos and photos shared by their community of creators. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.pexels.com/videos/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">PV</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.pexels.com/videos/" target="_blank">Pexels Videos</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Makes it easy to find free stock footage for your website, promo video or anything else. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.videezy.com/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.videezy.com/" target="_blank">Videezy</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Download millions of free and premium stock footage and motion graphics instantly.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.videvo.net/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.videvo.net/" target="_blank">Videvo</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Offers a large selection of HD video clips, motion graphics, and free stock footage. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.123rf.com/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">1</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.123rf.com/" target="_blank">123RF</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Over 100,000 daily new content &amp; 24/7 online support.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<!-- <div class="hidden-in-page">
    <p align="center">
        <a href="https://adobe.ly/33HVSdf">
            <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Adobe%20XD%20(1).png" alt="Abobe XD"/>
        </a>
    </p>
</div> -->
<article id="tools-for-learning-design">
			<header>
				<h3><a href="#tools-for-learning-design">Tools for Learning Design</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.designbetter.co/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">DB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.designbetter.co/" target="_blank">Design Better</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Discover the best practices, stories, and insights from the world’s top design teams and leaders. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://designcode.io/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://designcode.io/" target="_blank">Design+Code</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Complete courses about the best tools and design systems.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://designerup.co/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://designerup.co/" target="_blank">DesignerUp</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A collection of self-paced courses and mentorship to help you master Product Design (UI/UX).</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.interaction-design.org/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">ID</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.interaction-design.org/" target="_blank">Interaction Design Foundation</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A website that is the industry well known for learning UX/UI skills.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://lawsofux.com/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">Lo</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://lawsofux.com/" target="_blank">Laws of UX</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A collection of the maxims and principles that designers can consider when building user interfaces. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://learnux.io/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">LU</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://learnux.io/" target="_blank">Learn UX</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A complete approach to learning UI &amp; UX Tools.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sketchmaster.com/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sketchmaster.com/" target="_blank">Sketch Master</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A collection of video training courses for professionals learning Sketch.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li></ul>
			
		</article>


<div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/33Q3AC0">
            
        </a>
    </p>
</div>
<article id="ui-design-tools">
			<header>
				<h3><a href="#ui-design-tools">UI Design Tools</a></h3>
				
<p>What are the best UI design tools in 2019? You can pick any of the tools below and it will allow you to do dozens of design tasks — UI for site or mobile, wireframe, prototype, animation, logo. These are great and fully-functional tools for UX &amp; UI designers:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.adobe.com/products/xd.html" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">AX</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.adobe.com/products/xd.html" target="_blank">Adobe XD</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Design, prototype, and share any user experience, from websites and mobile apps to voice interactions. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://affinity.serif.com/en-gb/designer/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">AD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://affinity.serif.com/en-gb/designer/" target="_blank">Affinity Designer</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A vector graphics editor for macOS, iOS, and Microsoft Windows.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/akiraux/Akira" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/akiraux/Akira" target="_blank">Akira</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Native Linux App for UI and UX Design built in Vala and Gtk. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.botmock.com" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.botmock.com" target="_blank">Botmock</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Design, prototype, and test voice and text conversational apps. Supports multiple platforms.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.cleverbrush.com/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.cleverbrush.com/" target="_blank">CleverBrush</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A browser-based online vector editor and digital publishing tool which is possible to integrate to the page as JS component.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/" target="_blank">Figma</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A design tool based in the browser, that allows to design and prototype with real-time collaboration.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.gimp.org/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.gimp.org/" target="_blank">GIMP</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free &amp; open-source imaging and graphic design software.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://designer.io/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://designer.io/" target="_blank">Gravit</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free vector design app, available for macOS, Windows, Linux, ChromeOS, and browser. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.adobe.com/products/illustrator.html" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.adobe.com/products/illustrator.html" target="_blank">Illustrator</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create logos, icons, drawings, typography, and illustrations for print, web, video, and mobile. Made by Adobe.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://inkscape.org/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://inkscape.org/" target="_blank">Inkscape</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free and open-source vector graphics editor. It can create or edit vector graphics such as illustrations, diagrams, line arts, charts, logos, and complex paintings.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://krita.org/en/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">K</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://krita.org/en/" target="_blank">Krita</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free painting and graphic design software considered a good alternative to Adobe Photoshop.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://icons8.com/lunacy" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://icons8.com/lunacy" target="_blank">Lunacy</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free native windows app that works offline and supports .sketch files. Flexible and light weighed. Intuitive and easy to use. Speedups and empowers UI and UX designers. The must have to produce stunning designs. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.photopea.com/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.photopea.com/" target="_blank">Photopea</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free browser-based graphic design app alternative to Photoshop. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.adobe.com/products/photoshop.html" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.adobe.com/products/photoshop.html" target="_blank">Photoshop</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Imaging and graphic design software developed by Adobe.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://studio.pixelixe.com" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://studio.pixelixe.com" target="_blank">Pixelixe</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A graphic design tool built for marketers, bloggers and small businesses that needs to create stunning and unique images, graphics or static webpages in minutes. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.sketchapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.sketchapp.com/" target="_blank">Sketch</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A design toolkit built for Mac. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.invisionapp.com/studio" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.invisionapp.com/studio" target="_blank">Studio</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Combines design, prototyping, and collaboration into one harmonious workflow. Made by InVision.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://twitpile.com" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://twitpile.com" target="_blank">TwitPile</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Creates tiled images out of Twitter followers, interests and lists. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://vectr.com/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://vectr.com/" target="_blank">Vectr</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A simple web and desktop cross-platform tool to create vector graphics easily and intuitively. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.voiceflow.com" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.voiceflow.com" target="_blank">Voiceflow</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Prototype, design and deploy real apps for Amazon Alexa &amp; Google Home.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		<div class="promotion-banner-wrapper">
    <a class="promotion-banner -abstract" href="https://www.abstract.com/campaigns/collaboration/?&amp;utm_medium=Partner-Advertising&amp;utm_source=PA-Native-Digital&amp;utm_campaign=CY19-PA-FlawlessApp-1018-Sept12&amp;utm_term=designplugins&amp;utm_content=Sponsored">
        <div class="promotion-banner__logo -abstract">
            
        </div>
        <div class="promotion-banner__main">
            <h3 class="promotion-banner__title">Abstract</h3>
            <p class="promotion-banner__description">
                We centralize design decisions, feedback, Sketch files, and specs for your team.
            </p>
        </div>
        <button class="promotion-banner__link -abstract">
            Get a free, 14-day trial
        </button>
    </a>
</div></article>
<!-- <div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/33KtOpN">
            <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/ProtoPie.png" alt="ProtoPie"/>
        </a>
    </p>
</div> -->
<article id="user-flow-tools">
			<header>
				<h3><a href="#user-flow-tools">User Flow Tools</a></h3>
				
<p>User flow is a series of steps a user takes to achieve a meaningful goal. It's a fast way to plan customer journey paths and improve UX. So if you need to make a user flow diagram, user flow map or a sitemap, take a look at these tools:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.draw.io/" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.draw.io/" target="_blank">Draw.io</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free online diagram software for making flowcharts, process diagrams, org charts, UML, ER, and network diagrams. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://flowmapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://flowmapp.com/" target="_blank">Flowmapp</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An online tool for creating sitemaps and user flows that helps you to effectively design and plan user experience.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://docs.google.com/drawings/" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">GD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://docs.google.com/drawings/" target="_blank">Google Drawings</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create diagrams and charts, for free; all within Google Docs. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.lucidchart.com/" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.lucidchart.com/" target="_blank">Lucidchart</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>An online tool for creating diagrams, flow charts, sitemaps, and more.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mindnode.com/" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mindnode.com/" target="_blank">MindNode</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A mind mapping app that makes brainstorming simple and easy. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://ninjamock.com/" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">N</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://ninjamock.com/" target="_blank">NinjaMock</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Wireframe and user flow online tool. Link your views and create logic flow prototype. All with freehand visual style.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.omnigroup.com/omnigraffle/" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">O</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.omnigroup.com/omnigraffle/" target="_blank">OmniGraffle</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A diagramming and digital illustration application for macOS and iOS. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://overflow.io/" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">O</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://overflow.io/" target="_blank">Overflow</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Turn your designs into playable user flow diagrams that tell a story.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sketch.systems/" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sketch.systems/" target="_blank">Sketch.systems</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Ui and flow design with interactive state machines. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://uxmisfit.com/squid/" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://uxmisfit.com/squid/" target="_blank">SQUID</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create beautiful User Flows in Sketch in just minutes. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.websequencediagrams.com/" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.websequencediagrams.com/" target="_blank">WebSequenceDiagrams</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A simple webapp to work out object interactions arranged in time sequence. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://whimsical.co/" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://whimsical.co/" target="_blank">Whimsical</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Easy to create flow charts, wireframes and sticky notes.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://wireflow.co" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://wireflow.co" target="_blank">Wireflow</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free, online and open source tool for creating beautiful user flow prototypes. <a href="https://github.com/vanila-io/wireflow"></a> </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.xmind.net/zen/" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">XZ</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.xmind.net/zen/" target="_blank">XMind: ZEN</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A brainstorming and mind mapping tool that can switch between outline and tree-chart. Link topics with other charts.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.yworks.com/products/yed" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">y</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.yworks.com/products/yed" target="_blank">yEd</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free desktop tool for making diagrams. Usable for the wide variety of use cases. Auto-layout helps a lot when making flowcharts. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
</ul>

			
		</article>
<!-- <div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/35I1q9q">
        <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Maze.png" alt="Maze"/>
    </a>
    </p>
</div> -->
<article id="user-research-tools">
			<header>
				<h3><a href="#user-research-tools">User Research Tools</a></h3>
				
<p>User research helps you understand user behaviors, needs, and motivations through various qualitative and quantitative methods (interviews, observation, forms, etc). These user research tools can be useful for you:</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://appoint.ly" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://appoint.ly" target="_blank">Appoint.ly</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A web-based scheduling tool that helps to schedule meetings quickly through the integration with calendars online.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://calendly.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://calendly.com/" target="_blank">Calendly</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Calendly helps you schedule meetings without the back-and-forth emails.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://crowdsignal.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">CS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://crowdsignal.com/" target="_blank">Crowd Signal</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Collect, organize and analyze data from a variety of sources, including social media and mobile.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://doodle.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://doodle.com/" target="_blank">Doodle</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Online calendar tool for time management, and coordinating events, meetings, appointments</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://evolt.io/en/" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">E</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://evolt.io/en/" target="_blank">Evolt</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create user personas, storyboards, business model canvas, experience maps, brainstorming boards and moodboards in a clean and modern way.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.feedbacklite.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">FL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.feedbacklite.com/" target="_blank">Feedback Lite</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Collect high quality customer feedback using Voice of Customer solutions designed to improve your website performance and boost customer engagement.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.gotomeeting.com/en-gb" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.gotomeeting.com/en-gb" target="_blank">GoToMeeting</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A simple, extraordinarily powerful web conferencing service.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://handrailux.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">H</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://handrailux.com/" target="_blank">Handrail</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>End-to-end, collaborative user research and insights platform</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.jotform.com" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">J</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.jotform.com" target="_blank">JotForm</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create online forms, get an email for each response, collect data. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://lookback.io/" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://lookback.io/" target="_blank">Lookback</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Remotely run, record, and take notes for your user research sessions, either with a live product or with a prototype.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://minetime.ai" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://minetime.ai" target="_blank">MineTime</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free calendar app with smart scheduling and time analytics features. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.airsquirrels.com/reflector" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.airsquirrels.com/reflector" target="_blank">Reflector</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Reflector is a basic screen-mirroring and recording tool so you can conduct user tests remotely, using any existing wireframes or prototypes.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.optimalworkshop.com/reframer" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.optimalworkshop.com/reframer" target="_blank">Reframer</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A research tool that helps your team to capture, tag (code) and identify patterns in qualitative data across multiple research participants.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sticktailapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sticktailapp.com/" target="_blank">Sticktail</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A platform for centralizing, finding and sharing user insights within your organization.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.surveymonkey.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.surveymonkey.com/" target="_blank">Survey Monkey</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Online survey tool to capture the voices and opinions of the people who matter most to you.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.typeform.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.typeform.com/" target="_blank">Typeform</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Use a simple drag-and-drop interface to create any kind of form, survey, or questionnaire, and even take credit card payments.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.wufoo.com" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.wufoo.com" target="_blank">Wufoo</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Сreate forms, collect data and payments and automate your workflows.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.yesinsights.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">Y</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.yesinsights.com/" target="_blank">YesInsights</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Simple one question and NPS surveys to improve your business.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://userbitapp.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://userbitapp.com/" target="_blank">UserBit</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A platform of real-time research tools for your team. Tag/code interviews and feedback, capture insights, create personas, visual sitemaps and more.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.userinterviews.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">UI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.userinterviews.com/" target="_blank">User Interviews</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Recruit participants from a community of 125,000 members based on profession, demographics, geography and more, for any kind of research.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://zoom.us" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">Z</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://zoom.us" target="_blank">Zoom</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>It's one of the best online meeting services.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="visual-debugging-tools">
			<header>
				<h3><a href="#visual-debugging-tools">Visual Debugging Tools</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://logrocket.com/" class="tool__asset" target="_blank" style="background-color: hsl(0, 41%, 78%); color: rgb(189, 121, 121);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://logrocket.com/" target="_blank">LogRocket</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool to record what users do on your site so you can reproduce bugs and fix issues faster.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://getpixelsnap.com" class="tool__asset" target="_blank" style="background-color: hsl(0, 41%, 78%); color: rgb(189, 121, 121);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://getpixelsnap.com" target="_blank">PixelSnap</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The magical way to measure everything on your screen. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--mac" title="this tool is for Mac users only">
		Mac only
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/GoogleChromeLabs/ProjectVisBug" class="tool__asset" target="_blank" style="background-color: hsl(0, 41%, 78%); color: rgb(189, 121, 121);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/GoogleChromeLabs/ProjectVisBug" target="_blank">VisBug</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>On any webpage: visually debug, quick inspect style and a11y, change CSS visually, click and drag elements around, and much more. <a href="https://github.com/GoogleChromeLabs/ProjectVisBug"></a> </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.canvasflip.com/visual-inspector/" class="tool__asset" target="_blank" style="background-color: hsl(0, 41%, 78%); color: rgb(189, 121, 121);">VI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.canvasflip.com/visual-inspector/" target="_blank">Visual Inspector</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Collaboration tool for website feedback and fixing design bugs.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		<div class="promotion-banner-wrapper">
    <a class="promotion-banner -abstract" href="https://www.abstract.com/campaigns/collaboration/?&amp;utm_medium=Partner-Advertising&amp;utm_source=PA-Native-Digital&amp;utm_campaign=CY19-PA-FlawlessApp-1018-Sept12&amp;utm_term=designplugins&amp;utm_content=Sponsored">
        <div class="promotion-banner__logo -abstract">
            
        </div>
        <div class="promotion-banner__main">
            <h3 class="promotion-banner__title">Abstract</h3>
            <p class="promotion-banner__description">
                We centralize design decisions, feedback, Sketch files, and specs for your team.
            </p>
        </div>
        <button class="promotion-banner__link -abstract">
            Get a free, 14-day trial
        </button>
    </a>
</div></article>
<article id="wireframing-tools">
			<header>
				<h3><a href="#wireframing-tools">Wireframing Tools</a></h3>
				
<p>A wireframe is a visual mockup that outlines the basic structure of the site or an app. It contains the most essential elements and the content, helping you easily explain ideas on design. Wireframes are a low-fidelity way of showing a design. This section is presented the best wireframing tools for a variety of use cases.</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://balsamiq.cloud/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">BC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://balsamiq.cloud/" target="_blank">Balsamiq Cloud</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Effortless UI sketching. Capture your ideas, collaborate on your designs, get everyone on board.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://www.blokkfont.com/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.blokkfont.com/" target="_blank">BLOKK</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A font for quick mock-ups and wireframing for clients who do not understand Latin. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://cssgrid.cc/css-grid-builder.html" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://cssgrid.cc/css-grid-builder.html" target="_blank">CSS Grid Builder</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>With this tool there is no HTML part to the grid. The grid only becomes apparent when content (elements) are added and positioned according to the grid rules. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.gliffy.com/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.gliffy.com/" target="_blank">Gliffy</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A tool for creating the framework, UML diagrams, flowcharts, wireframes and more.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://gridzzly.com/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://gridzzly.com/" target="_blank">Gridzzly</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>The easiest way to create custom grid paper printable. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://grid.layoutit.com/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://grid.layoutit.com/" target="_blank">Layoutit</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A interface builder for CSS Grid &amp; Bootstrap that wants to be the kick-off for your front-end developments. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://pidoco.com/en" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://pidoco.com/en" target="_blank">Pidoco</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Software that lets you quickly create click-through wireframes and fully interactive UX prototypes.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://wireframe.cc/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://wireframe.cc/" target="_blank">Wireframe.cc</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A simple wireframing tool that doesn't get in your way. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://whimsical.co/wireframes/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">WW</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://whimsical.co/wireframes/" target="_blank">Whimsical Wireframes</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Instant wireframing at your fingertips. Rich library of configurable elements like buttons, inputs, checkboxes.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://1200px.com/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">1G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://1200px.com/" target="_blank">1200px Grid System</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Helps you build a grid system for much wider website designs than the 960-pixel style.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>
<!-- <div class="hidden-in-page">
<p align="center">
 <a href="https://adobe.ly/33HVSdf">
     <img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Adobe%20XD.png" alt="Abobe XD"/>
 </a>
</p>
</div> -->

			
		</article>
<article id="three-d-modeling-software">
			<header>
				<h3><a href="#three-d-modeling-software">Three D Modeling Software</a></h3>
				
<p>3D graphics are used in gaming, film making, architecture, engineering, and 3D printing. 3D artists &amp; designers use specific 3D modeling software, mentioned in this section.</p>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.autodesk.com/products/fusion-360/overview" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.autodesk.com/products/fusion-360/overview" target="_blank">Autodesk</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Integrated CAD, CAM, and CAE software. Unify design, engineering, and manufacturing into a single platform.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.blender.org/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.blender.org/" target="_blank">Blender</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Free and open-source 3D Creation Software.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.freecadweb.org/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.freecadweb.org/" target="_blank">FreeCAD</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free and open-source multiplatform 3D parametric modeler.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.matterhackers.com/store/l/mattercontrol/sk/MKZGTDW6" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.matterhackers.com/store/l/mattercontrol/sk/MKZGTDW6" target="_blank">MatterControl</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free, open-source, all-in-one software package that lets you design, slice, organize and manage your 3D prints.  </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>
 
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.autodesk.com/products/maya/overview" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.autodesk.com/products/maya/overview" target="_blank">Maya</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Make animations, environments, motion graphics, virtual reality, and character creation, all in one toolset.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.onshape.com/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">O</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.onshape.com/" target="_blank">Onshape</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A modeling software specially oriented to design technical and spare parts, was the first full-cloud 3D software created.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.openscad.org/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">O</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.openscad.org/" target="_blank">OpenSCAD</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A software for creating solid 3D CAD objects. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--open-source" title="this tool is open source">
		Open Source
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.rhino3d.com/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.rhino3d.com/" target="_blank">Rhino</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A curve-based 3D modeling software that creates mathematically-precise models of 3D surfaces.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.sketchup.com" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.sketchup.com" target="_blank">SketchUp</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>3D design software that truly makes 3D modeling for everyone, with a simple to learn yet robust toolset.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.tinkercad.com" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.tinkercad.com" target="_blank">Tinkercad</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>A free, easy-to-use app for 3D design, electronics, and coding. </p>
				<div class="tag-wrapper">
					
	<div class="tag tag--free" title="this tool is free">
		Free
	</div>

				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.vectary.com/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.vectary.com/" target="_blank">Vectary</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Create beautiful 3D models with our drag and drop 3D modeling tool.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.3dslash.net" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">3S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.3dslash.net" target="_blank">3D Slash</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>3D modeling tool, available on all devices and all OS, online and offline.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="addendum">
			<header>
				<h3><a href="#addendum-(reference-&amp;-inspiration)">Addendum (Reference &amp; Inspiration)</a></h3>
				
<p>Awesome Design Tools &amp; Plugins is curated by <a href="https://twitter.com/LisaDziuba">Lisa Dziuba</a> &amp; <a href="https://twitter.com/ValiaHavryliuk">Valia Havruliyk</a> from Flawless team. And it was hugely inspired by articles from the design community and Prototypr.io Toolbox made by our good friend Graeme Fulton. If you found some great design tools, please <a href="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Contribution_Guidelines.md">suggest it</a>. Thanks for making this project awesome :)</p>

			</header>
			
		<a href="https://github.com/LisaDziuba/Awesome-Design-Tools" class="btn btn-contribute image-gh">Contribute on GitHub</a></article>
</main><script>const chooseMd = document.location.href
  .split('/')
  .pop()
  .includes('plugin')
  ? 'Plugins'
  : 'Tools';

function toggleMenuChange() {
  document.querySelector('.nav').classList.toggle('nav--visible');
  document
    .querySelector('.hamburger-menu')
    .classList.toggle('hamburger-menu--change');
}

document.querySelector('.hamburger-menu').onclick = function() {
  toggleMenuChange();
};

document.querySelectorAll('.nav a').forEach(link => {
  if (window.innerWidth < 959) {
    link.onclick = function() {
      toggleMenuChange();
    };
  }
});

class Nav {
  constructor(navElements, activeClass) {
    this.navElements = document.querySelectorAll(navElements);
    this.activeClass = activeClass;
  }

  scroll() {
    const { navElements, activeClass } = this;
    navElements.forEach(navLink => {
      const sectionId = navLink.getAttribute('href');
      document.addEventListener('scroll', () => {
        const sectionDom = document.querySelector(sectionId),
          sectionRect = sectionDom.getBoundingClientRect(),
          { top, bottom, height } = sectionRect;

        if ((bottom > 96 && top + height >= 96 && top < 96) || top == 96) {
          navLink.classList.add(activeClass);
        } else {
          navLink.classList.remove(activeClass);
        }
      });
    });
  }
}

const bookmark = new Nav('.nav a', 'active');
bookmark.scroll();

const automaticScroll = () => {
  const nav = document.querySelector('.nav ul');
  document.addEventListener('scroll', () => {
    const bodyHeight = document.body.offsetHeight;
    const bodyScrollTop = document.body.scrollTop;
    const navHeight = nav.getBoundingClientRect().height;
    const quarterOfNavHeight = navHeight / 4;

    const res = (bodyScrollTop / bodyHeight) * 100;
    if (res > 20 && res < 40) {
      nav.scrollTop = quarterOfNavHeight;
    } else if (res > 40 && res < 55) {
      nav.scrollTop = navHeight * 0.8;
    } else if (res > 55 && res < 70) {
      nav.scrollTop = navHeight * 1.35;
    } else if (res > 70 && res < 85) {
      nav.scrollTop = navHeight * 1.5;
    } else if (res > 85 && res < 100) {
      nav.scrollTop = navHeight * 2;
    } else {
      nav.scrollTop = 0;
    }
  });
};
automaticScroll();

// search input
String.prototype.capitalize = function() {
  return this.charAt(0).toUpperCase() + this.slice(1);
};

document
  .querySelector('.js-search-input')
  .addEventListener('input', function(e) {
    document.removeEventListener('scroll', automaticScroll, true);
    ('use strict');

    const inputContent = e.target.value;
    const paragraphs = document.querySelectorAll('main .tool');
    const banner = document.querySelectorAll('.banner');
    const promoBanner = document.querySelectorAll('.promo-banner');
    const articleHeaders = document.querySelectorAll('main article > header');
    // const addendum = document.querySelector('#addendum');
    const welcome = document.querySelector('.welcome');
    const promotionBanner = document.querySelectorAll(
      '.promotion-banner-wrapper'
    );
    const elementsToHide = [
      ...banner,
      ...promoBanner,
      ...articleHeaders,
      welcome,
      ...promotionBanner
    ];

    if (inputContent.length > 0) {
      elementsToHide.forEach(banner => banner.classList.add('-hidden'));
    } else if (inputContent.length === 0) {
      elementsToHide.forEach(banner => banner.classList.remove('-hidden'));
    }

    function handle(text) {
      const bool =
        inputContent || inputContent.capitalize() || inputContent.toUpperCase();
      if (text.innerHTML.search(bool) >= 0) {
        text.classList.remove('-hidden');
      } else {
        text.classList.add('-hidden');
      }
    }

    paragraphs.forEach(text => handle(text));
  });

// add event for nav button when clicking on it while searching

document.querySelectorAll('.nav a').forEach(button =>
  button.addEventListener('click', e => {
    e.preventDefault();
    if (window.innerWidth)
      // make an empty input
      document.querySelector('.js-search-input').value = '';

    // scroll a bit less due to nav fixed positioning
    window.scrollTo(
      0,
      document.querySelector(e.target.getAttribute('href')).offsetTop - 90
    );
  })
);

// handle modal window for filtering by application
if (document.querySelector('.js-open-modal-filter')) {
  document
    .querySelector('.js-open-modal-filter')
    .addEventListener('click', e => {
      e.target.classList.toggle('-active');
      document.querySelector('.sort-tool-modal').classList.toggle('-hidden');
    });
}

// filter by application logic
function sortByApplication(event) {
  // toggle styles for button that was handled;
  const { target } = event;
  target.classList.toggle('-active');

  const targetAttr = target.getAttribute('app');
  const allLabels = document.querySelectorAll(`.label[for="${targetAttr}"]`);
  const buttons = [
    ...document.querySelectorAll('.sort-tool-modal__btn-choose')
  ];

  const sortedButtons = buttons.filter(button =>
    button.classList.contains('-active')
  );
  const activeApps = sortedButtons.map(button => button.getAttribute('app'));

  ga(
    'send',
    'event',
    `Awesome design ${chooseMd} - Filter (State of Platforms)`,
    'Click',
    activeApps.join('-')
  );
  ga(
    'send',
    'event',
    `Awesome design ${chooseMd} - Filter (Clicked Platform Name)`,
    'Click',
    targetAttr
  );

  allLabels.forEach(label => {
    const toolContainer =
      label.parentElement.parentElement.parentElement.parentElement;
    const list = toolContainer.parentElement;
    const sectionContainer = list.parentElement;
    const attr = label.getAttribute('for');
    if (activeApps.includes(attr)) {
      toolContainer.classList.remove('-hidden');
    } else {
      toolContainer.classList.add('-hidden');
    }

    const arr = [...list.children].filter(
      tool => !tool.classList.contains('-hidden')
    );
    if (arr.length === 0) {
      sectionContainer.classList.add('-hidden');
    } else {
      sectionContainer.classList.remove('-hidden');
    }
  });
}

document
  .querySelectorAll('.sort-tool-modal__btn-choose')
  .forEach(button => button.addEventListener('click', sortByApplication));

document.querySelectorAll('.tool').forEach(tool => {
  tool.addEventListener(
    'click',
    e => {
      e.stopPropagation();
      const target = e.currentTarget;
      const title = target.children[1].children[0].children[0].textContent;
      const categoryName = target.parentElement.parentElement.id;
      const platforms = [
        ...target.children[1].children[0].children[1].children
      ].map(a => a.getAttribute('for'));

      ga(
        'send',
        'event',
        `Awesome design ${chooseMd} - Plugin (Title)`,
        'Click',
        title
      );
      ga(
        'send',
        'event',
        `Awesome design ${chooseMd} - Plugin (CategoryName)`,
        'Click',
        categoryName
      );
      ga(
        'send',
        'event',
        `Awesome design ${chooseMd} - Plugin (Platform)`,
        'Click',
        platforms.join('-')
      );
    },
    true
  );
});

document.querySelectorAll('.nav ul li a').forEach(a => {
  a.addEventListener(
    'click',
    e => {
      const { target } = e;
      const title = target.innerText;

      ga(
        'send',
        'event',
        ` Awesome design ${chooseMd} - Category (Title)`,
        'Click',
        title
      );
    },
    true
  );
});

if (window.innerWidth >= 960) {
  const active = document.querySelector('.header-top__nav-item.-active');
  document.querySelectorAll('.header-top__nav-item').forEach(a => {
    a.onmouseover = e => {
      if (!e.target.classList.contains('-active')) {
        active.classList.remove('-open');
      } else {
        e.target.classList.add('-open');
      }
    };

    a.onmouseout = e => {
      if (!active.classList.contains('-open')) {
        active.classList.add('-open');
      }
    };
  });
}

const showBannerTop = () => {
  const sEl = el => document.querySelector(el);

  setTimeout(() => {
    sEl('.header-top').classList.remove('header-top--hide-banner');
  }, 0);
  // if (window.innerWidth < 768) {
  //   sEl('.nav-container').removeClass('nav-container--hide-banner')
  // }

  sEl('.banner__close').onclick = () => {
    sEl('.header-top').classList.add('header-top--hide-banner');
  };
};
showBannerTop();
</script></body></html>