McInnes Design

Design Tools

A list of some design tools that I have found useful or want to look into at some point

Note: these are in no way endorsed or tested by McInnes Design and we take no responsibility for the state these tools are in, how they are maintained, or how you use them.

Frameworks

Quickly spin up page layouts and components with these handy frameworks

Components
React
Tailwind CSS

HeroUI

UI library for React / NextJS built on top of Tailwind CSS

Components

Tremor

Open source, accessible React components for dashboards and charts

Styling

StyleX

Themeable, type-safe styling system for UI, built by Meta

Styling

Mews Design System

MDS is the design system for Mews - a cloud based PMS

Components
JS
Tailwind

Magic UI

UI library for Design Engineers

Avatars
React
SVG

Boring Avatars

Boring avatars is an open source React library that generates unique SVG-based user profile avatars


Resources

Can't think some text for that button, need and image or a great looking font, check out these resources

Copy
Placeholder

Microcopy

A list of human-curated text copy for your next CTA

Images

Skribbl

Human made, royalty free illustrations for your next project

Coding

Patterns

Resources for designing performative webapps

Design

Design Principles

An open source collection of design principles and methods

Design

Design & Dev Newsletter

Curated guide of web dev tools, guides, etc

HTML
CSS
Flexbox

Flexbox Labs

Flexbox Labs is a visual tool that helps create layouts using CSS Flexbox. It offers an intuitive interface that shows changes in real-time, making it easy to experiment and learn


Inspiration

Just straight up good looking websites and inspiration for your next project

Slides
Design

Deck.Gallery

Curated list of design decks, slides, keynotes, guidelines

Web Design

Uiverse

Community-built library of UI elements

Web Design

A1

Web design inspiration for designers & developers

Social

Tabulio

Social network to showcase, connect, and grow your tech career


Content Generators

Stuck thinking of a project for that portfolio, want to practise your skills but can't come up with a good scenario, have one generated for you

Brand
AI

Namify

AI powered brand building machine, from business names to logos

Brand
AI

Looka

AI powered brand inspiration

Prompts
Briefs

FakeClients

Design brief generator for hypothetical clients


Colours

All the colours! Generate colour palettes, check contrast, and much more with these great tools

Gradients

CSS Gradient

Generate gradients using an interactive generator

Palettes

Couleur.io

A simple colour palette tool

Palettes
Tailwind CSS

UI Colors

Tailwind CSS colour generator

Tools

Color Designer

Comprehensive suite of colour tools: palettes, mixers, generators, etc