Design Workflow

Start every new project here. Spend 30 minutes, screenshot 5 sites that feel right. These become your visual brief before you touch any design tool.

Browse alongside Godly. Strong for professional services, consultancy, and trust-led aesthetics.

Before starting any brand or identity project. Read case studies for cultural institutions, charities, and professional services.

Build your personal inspiration library over time. Search public channels for brand identity, editorial design, or any aesthetic direction you are trying to develop.

When you need to see how professional studios have actually solved a brief. Search by sector or discipline to find delivered work, not concepts.

Once your structure is settled and you want to add polish. Browse for 2-3 interaction ideas that make a site feel considered rather than just functional.

When you want to go deeper than the resources in this kit. A well-maintained directory built by a working art director, worth bookmarking and returning to.

When you need cinematic reference for a mood board or visual brief. Faster and more specific than searching film titles on Google Images.

When you want reference for motion, typography in motion, or narrative visual design. The process interviews are as useful as the sequences themselves.

At the start of any new project. Do the 50-colour preference exercise, it takes about 5 minutes, and use the generated palettes as your starting point.

When you want to explore a large number of palette options quickly. The spacebar generates a new palette instantly.

When you want to browse palettes by mood or feeling rather than generate them. Useful early in a project when the direction is not yet defined.

Once you have a shortlist of palettes and a font pairing. Apply them to the sample page to see how they hold up together, then export the values for your build brief.

Before opening any font library. Describe how the brand should feel, not what it should look like, and let the tool narrow the options.

When you need a high-quality display or headline font at no cost. Pick your font here and specify it by name in whatever tool you are building with.

For body and paragraph text. Strong choices for readability include DM Sans and Plus Jakarta Sans.

When you want something more distinctive than the main free libraries. Check the licence for each font before using commercially.

After you have a direction, use this to find a proven display and body pairing rather than guessing.

When you need a background texture, surface detail, or material reference. Particularly useful for brand identity and print work.

Source photography before starting any design work. Real images change how a layout feels even at the planning stage.

When you need a looping background video for a hero section. The free video library here is the strongest available.

Before touching any design tool or starting a build. Map your page structure and user journeys first. A 15-minute sitemap prevents hours of rework later.

When your sitemap or flow needs to be shared with someone else or used as documentation. More structured than a personal planning tool.

Browse before designing a specific component. Find an example close to what you want, screenshot it, and use it as a reference rather than describing it from scratch.

When you know roughly what you want but cannot get a tool to build it correctly from a description. Generate it visually here first, then use the output as a precise reference.

Browse visually and copy the component code or prompt directly into your build tool. No setup required for the basic workflow.

When you want motion polish on a specific component. Find the animation you want, use the preview as a visual reference or copy the code directly.

Browse before designing your hero section. Screenshot 2-3 layouts that feel right and use them as references when briefing your build tool.

Specify this icon library at the start of any web build to ensure visual consistency across every icon. Browse the library first to decide which weight suits the design.

Browse the library so you can reference specific icons by name rather than describing them. It is often the default in web build tools so no extra setup is needed.

When you need a brand logo, a one-off icon that is not in the main libraries, or a decorative SVG element.

When a section needs motion that goes beyond basic CSS transitions. Design the animation here, export as a Lottie file, and drop it into your web project.

When a page needs a visual that is not photography or an icon. Hero illustrations, empty states, onboarding screens. Adjust the colours to match your palette before downloading.

When you want a single typographic moment to feel distinctive. A hero word, a section label, a decorative heading. Generate the animation and copy the CSS output.

When a section needs a background or shape that is not a photo or an illustration. Waves, blobs, layered gradients. Match the colours to your palette and export as SVG.

When you want to generate a full screen or layout rather than a single component. Describe the brief in a conversation and iterate from there. Export to your preferred format or hand off directly to Claude Code.

Design full screens before starting a build. Useful for solving the consistency problem across multiple pages in an AI-assisted project.

When you want design and code to be the same artefact rather than two separate things you have to translate between. The MCP integration means AI agents can update the design as they update the code.

Generating brand visuals, hero imagery, or concept visuals where you need to be confident about commercial licensing. The standalone browser version works without an Adobe subscription.

When you need to present digital work in device frames. Drag in a screenshot and export in seconds.

When you need a format that the other mockup tools do not cover. The breadth of the library makes it a reliable fallback.

When you need to show a design in use, on a screen, a printed piece or a product, without arranging a photoshoot.

Showing brand identity work in context. Letterheads, business cards, signage, and print mockups.

Before finalising any colour system: run every text and background combination through the contrast checker. Use the colour converter when you need to translate between formats. Use the background remover for quick asset prep.

Before signing off any mobile layout. Find real examples of how the same screen type has been designed in shipped products.

When you're checking one colour pair, a button on a brand colour or text over an image, and want a result you can quote. Each check has a permalink you can send to a designer or supplier.