UI Design, Colour & Type

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.

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.

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.

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.

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

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

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.

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

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

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.

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.

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.

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

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.

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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

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.

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.

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

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.

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

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

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.

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

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.

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.

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

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.

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.