A design system is a guide of clear standards that make up the look and feel of a website. It's your single source of truth for colours, typography, spacing, and component styles — ensuring consistency across your entire project.

Why Use AI for Design Systems?

Sometimes as designers, we hit a creative wall. AI can help break through that block by generating fresh ideas and alternative approaches. We use this on all projects now — even when we're happy with an initial design, it's a great way to stress test and get a second opinion.

How to Use These Design Systems

Each design system below includes a downloadable HTML file showing typography, colours, buttons, and example blocks. Use these as:

Starting points for new projects
Inspiration when you're stuck
Reference guides for AI prompts
Consistency checks for existing work

Pro Tip: When creating components with AI, paste your chosen design system into the prompt. Say "this is my design system" and ask it to follow these guidelines. Everything will stay consistent with minimal effort.

Sample Design System Prompt

Add this after describing your business context:

Please create a design system based on the context provided above. Ensure that the design system includes: • Color palette with hex codes • Typography hierarchy showing H1 through H6 and paragraph text styles (all sizes in pixels) • Button styles (primary and secondary) • Spacing system (margins and padding guidelines) Where I've specified particular requirements (such as existing brand colors, fonts, or style preferences), please incorporate them into the design system. Create actual example blocks showing these elements in use, not just specifications. Include relevant CSS properties for implementation.