UI Design, Colour & Type — Useful Sites

WebAIM Contrast Checker

2026-10-18T00:00:00Z

Enter a foreground and a background colour and it gives the contrast ratio and whether it passes WCAG AA/AAA for normal text, large text and UI components. Unlike palette generators it suggests nothing; it tells you whether a pair you chose meets the legibility threshold.

https://webaim.org/resources/contrastchecker/

One Page Love

2026-10-09T09:00:00Z

A gallery of one-page websites and templates. Unlike broad design galleries such as Awwwards it covers a single format, which is what a landing-page designer usually wants.

https://onepagelove.com/

Atmos

2026-09-18T00:00:00Z

A tool for building colour palettes and tonal scales. Unlike palette generators such as Coolors, it builds accessibility (contrast) checks into the palette, so interface colours are legible from the start.

https://atmos.style/

Awesome Design Principles

2026-09-18T00:00:00Z

A list of design principles for better, more consistent designs. Unlike component libraries, it collects not components but the design principles companies and teams have published.

https://github.com/robinstickel/awesome-design-principles

Awesome Design Systems

2026-09-18T00:00:00Z

A list of reusable component systems (design systems) guided by rules. Unlike UI kits, it gathers real companies’ systems published with their principles and documentation, not just components.

https://github.com/klaufel/awesome-design-systems

Awesome Product Design

2026-09-18T00:00:00Z

A resource list covering the design process from concept to product. Unlike UI-kit lists it is process-focused: research, prototyping, usability testing and handoff.

https://github.com/ttt30ga/awesome-product-design

Awesome Web Design

2026-09-18T00:00:00Z

A web-design resource list for digital designers. Unlike developer lists it is aimed at designers: inspiration, typography, colour and design tools.

https://github.com/nicolesaidy/awesome-web-design

Awwwards

2026-09-18T00:00:00Z

A gallery that awards and showcases outstanding web design. Unlike random inspiration it filters quality through jury evaluation.

https://www.awwwards.com/

Behance

2026-09-18T00:00:00Z

Adobe's portfolio platform presenting full project case studies rather than single shots.

https://www.behance.net

Checklist Design

2026-09-18T00:00:00Z

Actionable UI/UX checklists organised per component and per page. Unlike general UX articles, it gives concrete, tickable items for each component.

https://www.checklist.design

Color Hunt

2026-09-18T00:00:00Z

A catalogue of ready-to-use colour palettes curated by community votes. Unlike generators such as Coolors, you pick from palettes others liked rather than generating at random.

https://colorhunt.co

Colorful

2026-09-18T00:00:00Z

A resource list to help choose your next colour scheme. Unlike a single palette generator such as Coolors, it gathers generators, palettes and colour-theory resources together.

https://github.com/Siddharth11/Colorful

Colormind

2026-09-18T00:00:00Z

An AI generator that learns from photos and art to suggest harmonious colour palettes. Unlike Coolors, it generates from a learned model rather than random combinations.

https://colormind.io

Colors and Fonts

2026-09-18T00:00:00Z

A design resource pairing colour palettes with typography. Unlike sites offering only palettes or only fonts, it shows the two together as matched pairings.

https://www.colorsandfonts.com/

Colors.lol

2026-09-18T00:00:00Z

A repository of hand-picked colour palettes, each with a (deliberately over-) descriptive blurb. Unlike generators such as Coolors, it is a curated collection rather than random generation.

https://colors.lol

Dribbble

2026-09-18T00:00:00Z

An inspiration community where designers share work. Unlike Behance it is built on short “shots”, weighted towards concept work rather than shipped products.

https://dribbble.com

Flat UI Color Picker

2026-09-18T00:00:00Z

An interactive palette of harmonious flat colours for frontends. Unlike free-form colour pickers, it works from a pre-chosen set of colours that go together.

https://www.flatuicolorpicker.com/

Font Flipper

2026-09-18T00:00:00Z

Flips through Google fonts one by one against your own text. Unlike browsing the Google Fonts catalogue it is built for deciding: discard what you dislike, keep what you like.

https://fontflipper.com/

FontPair

2026-09-18T00:00:00Z

A tool showing Google font pairs that go well together. Unlike trying one by one it presents harmonious heading-body matches with examples.

https://www.fontpair.co/

Fontsource

2026-09-18T00:00:00Z

Lets you self-host open-source fonts as npm packages. Unlike the Google Fonts CDN no request goes to an outside server — for privacy and offline use.

https://fontsource.org

Framer

2026-09-18T00:00:00Z

A design tool for building and publishing interactive interfaces and sites. Unlike Figma, the design is not a mock-up but a working site you publish directly.

https://www.framer.com/

Image Color Picker

2026-09-18T00:00:00Z

Click on an uploaded image to get HEX/RGB codes, and extract a palette from it. Unlike the browser’s eyedropper, it works on your own image rather than the page.

https://imagecolorpicker.com

Interfaces.pro

2026-09-18T00:00:00Z

An inspiration gallery for interface design. Unlike sites such as Dribbble, it shows screens from real shipped products rather than concept shots.

https://interfaces.pro/

Mobbin

2026-09-18T00:00:00Z

A searchable library of real mobile and web UI flows captured as screenshots. Unlike Dribbble it shows shipped products rather than concepts; full access is paid.

https://mobbin.com

Realtime Colors

2026-09-18T00:00:00Z

Previews a palette live on a real UI. Unlike palette generators, you see colours in context — text, buttons, background — rather than as swatches.

https://www.realtimecolors.com

The Component Gallery

2026-09-18T00:00:00Z

A reference showing the same UI component across different design systems side by side.

https://component.gallery

Type Scale

2026-09-18T00:00:00Z

A calculator that turns a chosen ratio into a visual typographic scale with ready CSS. Unlike picking heading sizes by hand, everything derives from one ratio — a consistent hierarchy.

https://typescale.com

Land-book

2026-08-21T20:53:20Z

A curated gallery of well-designed websites, filterable by industry, style and colour. Unlike award sites such as Awwwards it collects real shipping product sites rather than showpiece experiments.

https://land-book.com/

Wakamai Fondue

2026-08-21T20:53:20Z

Drop in a font file and it reports everything inside: character set, OpenType features, variable axes — plus the CSS that switches each of them on. Unlike a font previewer, the output is code you can paste.

https://wakamaifondue.com/

Figma

2026-08-19T16:15:54Z

The most widely used tool for interface design, with Dev Mode handing measurements and tokens to developers. Unlike desktop tools such as Sketch it runs in the browser with multiplayer editing — which is what ended them.

https://www.figma.com/

Coolors

2026-08-17T20:53:20Z

A palette generator — hit space for a new combination, lock what you like and regenerate the rest. Unlike ready-palette catalogues such as Color Hunt you generate your own; it checks contrast too.

https://coolors.co/

SaaS Design

2026-08-17T20:53:20Z

A collection of open-source Figma UI design templates. Unlike general Figma community files, it focuses on SaaS product interfaces.

https://www.saasdesign.io/free-figma-templates

UI Design Daily

2026-08-17T20:53:20Z

Free UI component designs published daily, with source files downloadable in Figma and Sketch format. Unlike paid UI kits, they are free and come as individual components.

https://www.uidesigndaily.com/

before.click

2026-07-13T06:36:26Z

An archive of App Store screenshot designs. Unlike general UI galleries it covers only store imagery — and store-page conversion hangs directly on these images, which makes it narrow but well aimed.

https://before.click/

Site of Sites

2026-07-08T08:29:01Z

A gallery of whole-site design language, collecting sites with strong typography and motion. Unlike component galleries, it shows a site’s entire language rather than single parts.

https://www.siteofsites.co/

Unsection

2026-07-08T08:24:21Z

Design examples organised by section — hero, pricing, FAQ, footer — filterable so you solve one section instead of scanning whole sites.

https://www.unsection.com/

Game UI Database

2026-04-20T11:54:09Z

Classifies game interfaces by screen type — inventory, map, settings, loading. Unlike general galleries such as Dribbble it is systematic; no other field has an interface archive this organised.

https://www.gameuidatabase.com/

Google Fonts

2026-04-19T15:48:55Z

A catalogue of openly licensed typefaces you can download and self-host. Unlike commercial foundries everything is free and openly licensed; loading from the CDN has been litigated in Germany on GDPR grounds, so self-hosting is safer.

https://fonts.google.com/?preview.script=Latn

Moqups

2025-09-04T10:25:27Z

Browser wireframing and prototyping. It lacks Figma’s design depth but is lighter and sufficient for a quick flow or screen sketch.

https://moqups.com/