Guides
Every section we cover, with the explainers that go with it.
Branding
Guide
-
A minimum viable brand kit for a small business
The six files a small business needs on day one: vector logo in SVG and EPS, one-colour favicon version, colour specs with hex and CMYK, licensed typeface, and a one-page usage sheet.
-
Brand audit checklist
A brand audit checklist to inventory every touchpoint, score consistency, and fix the few that do the most damage to brand trust.
-
Brand naming basics
A structured method for brand naming that covers descriptive vs abstract choices, trademark clearance using USPTO and WIPO databases, and domain and social handle availability checks.
-
Branding mistakes that make a business look unprofessional
The branding mistakes that make a business look unprofessional—inconsistency, trend-chasing, unreadable logos, and stock-photo sameness—and the root cause of each.
-
Building a brand identity system
Build a brand identity system where logo, type, colour, imagery, and voice function as one governed system with rules—not a disconnected pile of assets.
-
How to write a brand style guide people actually use
How to write a brand style guide people actually use—short, example-led, with do and don't pairs—and why 80-page PDFs go unread.
-
Keeping a brand consistent across platforms
Keep a brand consistent across platforms with templates, locked components, and a single source of truth for assets—not manual replication.
-
Matching brand voice and visual tone
How to align brand voice and visual tone by auditing typeface classification, layout density, and colour saturation to prevent the trust-destroying mismatch of a playful voice in a corporate design.
-
Rebrand or refresh? A decision framework
A rebrand or refresh decision framework: evaluate brand equity, score consistency, and phase the change without losing what your audience recognises.
-
What good brand guidelines include
What effective brand guidelines must include: clear space measured in logo-relative units, misuse examples showing production failures, and colour specifications for screen, print, and spot.
Colour
Guide
-
Building an accessible colour palette
Build an accessible palette as a contrast matrix, not a colour pick. Verify every pair with the WCAG 2.2 formula and test for colour vision deficiency distinguishability.
-
CMYK vs RGB: when to use each
RGB is additive for screens, CMYK is subtractive for ink. Learn when conversion must occur, which output intent to specify, and how to prevent gamut clipping.
-
Colour harmony: complementary, analogous and triadic schemes
Complementary, analogous, and triadic schemes are structural starting points. Learn the measured adjustments that prevent vibrating edges, contrast failures, and formulaic results.
-
Colour psychology: what the evidence says
Colour psychology claims often outrun the evidence. This page maps what research actually establishes about colour and behaviour, and where cultural variation limits generalisation.
-
Common colour mistakes and how to fix them
Low contrast, oversaturation, and unmanaged print shifts are failures with specific causes and fixes. Diagnose each mistake and correct it with measurable standards.
-
Extracting a colour palette from an image
Automated tools extract colours but cannot verify contrast. Learn the manual refinement process that makes an image-derived palette accessible and production-ready.
-
How to choose brand colours
Choose brand colours by satisfying four constraints in sequence: competitor differentiation, WCAG 2.2 accessibility, cross-media reproducibility, and system extensibility.
-
Spot colours vs process colours
Spot colours use pre-mixed ink for consistency; process colours build hues from CMYK dots. Learn the cost, consistency, and production trade-offs for each method.
-
The 60-30-10 colour rule
The 60-30-10 rule is a proportion system, not a colour scheme. Learn the contrast ratio each role must satisfy and when the formula should be abandoned.
-
Using colour to guide attention
Accent colour works only when it is scarce. Learn to build a visual hierarchy where one accent guides attention and every colour pair meets WCAG 2.2 contrast minimums.
Logos
Guide
-
Colour in logos: what the psychology claims actually support
What the evidence actually supports about colour psychology in logos, distinguishing accessibility and production requirements from marketing folklore.
-
Designing a logo that works from favicon to billboard
How to design a logo system with responsive variants that works from a 16-pixel favicon to a billboard, using detail reduction, stroke-weight adjustment, and a one-colour minimum-detail version.
-
How to present logo concepts to clients
How to present logo concepts so client decisions are based on production performance at favicon size and in one colour, not personal taste.
-
How to test a logo before launch
The complete pre-launch logo testing protocol: favicon size, one-colour, contrast ratio, distance, silhouette, and cultural checks with pass/fail criteria.
-
Logo animation basics
Logo animation principles, duration limits, and file formats for web and social, with the rule that the final frame is the logo and must pass the favicon test.
-
Logo design mistakes to avoid
Logo design mistakes that cause production failure: excessive detail that closes up at favicon size, trendy typefaces without embedding rights, and raster-only files that cannot scale for print.
-
Logo file formats explained: SVG, EPS, PDF, PNG
Which logo file format to use for screen, print, and client handoff, with the reasoning behind SVG, EPS, PDF, and PNG and the rule that a raster-only logo is a production failure.
-
Minimalist or detailed logo: how to decide
How to decide between a minimalist or detailed logo using production constraints like favicon size and one-colour reproduction, not visual trends.
-
Negative space in logo design
When negative space in logos succeeds as a figure-ground relationship and when it fails the one-colour, favicon, and distance tests.
-
The logo design process, step by step
A step-by-step logo design process from brief and research through sketches, digital roughs, refinement, testing at favicon size, and final delivery in SVG and EPS formats.
Print design
Guide
-
Bleed, trim and safe area explained
Understand bleed, trim, and safe area in print: the 3 mm bleed standard, why guillotine tolerance cuts content placed at the edge, and how to set safe area per printer.
-
Business card design from concept to print
Business card design specifications covering standard dimensions, bleed requirements, safe area margins, and the print file setup values that prevent production failure.
-
Choosing paper stock
Choose paper stock by GSM, coating, and finish, understanding how uncoated paper absorbs ink and shifts colour, and why total ink coverage must stay below Fogra-specified limits.
-
Colour management for consistent print
Print colour management explained through ICC profiles, Fogra output intents, soft-proofing setup, and the ISO 3664 D50 standard for evaluating printed colour.
-
Designing for large-format print
Large format print design rules linking viewing distance to minimum resolution, with exact file setup values for bleed, colour, and scale that prevent production failure.
-
Export settings for print PDFs
The exact PDF/X-4 export settings, compression options, and printer marks required to produce a print-ready file that passes a commercial RIP without error.
-
Preflight checks before sending files to print
A print preflight checklist that identifies font embedding failures, low-resolution images, and incorrect colour spaces before they cause costly reprints.
-
Print finishes: foil, emboss, spot UV and more
Print finish specifications for foil stamping, embossing, and spot UV, covering the exact file setup layers, artwork requirements, and production complexity costs.
-
Print resolution explained: DPI and PPI
Learn the difference between DPI and PPI, why 300 ppi is the effective resolution minimum for offset print, and how upsampling creates files that still print pixelated.
-
Setting up print files that printers accept
Set up a print file that commercial printers accept: PDF/X-4 format, 3 mm bleed, Fogra 39 CMYK output intent, and fonts with embedding permissions verified.
Social media design
Guide
-
Accessible social media design
Accessible social media design requirements for alt text, captions, contrast ratios, and emoji use, with platform-specific feature sources.
-
Batch-creating a month of social graphics
A repeatable workflow for batch-creating a month of on-brand social graphics using content calendars, locked templates, and platform-specific export checks.
-
Consistent social media templates for a brand
How to build a social media template system with locked brand styles and flexible content areas that survive platform dimension changes and daily content variation.
-
Designing Instagram carousels
An Instagram carousel is one document split across slides. Learn to design for narrative continuity, safe-zone text placement, and WCAG 2.2 contrast on every slide.
-
Designing story and reel covers
How to design story and reel covers that survive circular crops and thumbnail resizing to create a consistent, recognisable profile grid.
-
Layout formulas for social graphics
Repeatable layout formulas for social graphics that survive platform crop changes, built on zoned structures with fixed logo positions and flexible content areas.
-
Putting text on images legibly
How to put text on images legibly using scrims, contrast verification at actual rendering size, and placement within platform safe zones.
-
Social graphics for non-designers
Five non-negotiable rules for non-designers making social graphics: safe zones, contrast, logo placement, platform dimensions, and alt text.
-
Social media image sizes, platform by platform
Social media image dimensions change without notice. This page links each platform's own help page as the durable source and explains safe zones that protect content from cropping.
-
Vertical or square posts?
How each social platform crops and ranks vertical versus square post formats, and why the platform's own help page is the only durable dimension source.
Templates and tools
Guide
-
Brand kit templates
The minimum files, colour specifications, and font license checks a brand kit template needs so it remains usable when handed to a non-designer.
-
Building a reusable template library
How to structure, name, and maintain a shared design template library so components stay consistent and font licensing failures are caught before export.
-
Canva alternatives for designers
Canva alternatives evaluated by print output quality, CMYK and spot colour support, bleed and crop mark export, and font embedding licensing terms.
-
Colour palette tools compared
How colour palette generators, contrast checkers, and extraction tools work, what each cannot detect, and why a passing contrast ratio on screen may fail in production.
-
Customising templates without looking generic
The three highest-impact changes that make a design template look custom rather than off-the-shelf, and why typeface, colour, and spacing must be changed in that order.
-
Font discovery and pairing tools
How to judge font discovery and pairing tools by whether they surface embedding permissions, glyph coverage, and x-height data—not by catalogue size.
-
Handing off designs to developers
Evaluate design handoff tools by the accuracy of their CSS, token, and asset output and by whether generated code respects font embedding permissions and licensing.
-
Presentation template design
How to build presentation master slides, grids, and type styles that resist breakage when non-designers paste in their own content and images.
-
Tools for testing logos and designs
The four tests every logo must survive—contrast, favicon scaling, colour-blindness simulation, and one-colour reversal—and which tools perform each one reliably.
-
Using mockups well
How to check lighting direction, shadow consistency, and license terms before using a mockup template, so the result reads as realistic rather than a composite.
Typography
Guide
-
Accessible typography
Accessible typography requires measurable contrast, sufficient x-height, and correct case choices—not just a passing automated check. Learn the WCAG 2.2 formula and why antialiased pixels cause false passes.
-
Building a clear typographic hierarchy
A clear typographic hierarchy uses measurable steps in size, weight, and spacing so each level is perceptibly distinct. Learn the modular scale ratios and weight jumps that work, and why arbitrary increments fail.
-
Choosing a font for a brand
A brand typeface must pass legibility, language, licensing, and performance checks in that order. Learn the measurable criteria that prevent a late-stage font replacement when production requirements surface.
-
Font licensing explained
Font licenses govern where and how a typeface can be used, and the most common production failures come from overlooked embedding and server clauses. Learn what desktop, web, app, and OFL terms actually permit.
-
How many fonts should one design use?
The two-font guideline is a constraint-based rule for clear hierarchy, not a stylistic limit. Learn the functional test that determines when a third typeface earns its place.
-
How to pair fonts
Effective font pairing relies on contrasting structure while matching x-height and vertical metrics, not on taste or era. Learn the measurable test that predicts whether two typefaces will sit on the same baseline.
-
Line length, line height and letter spacing
Readable text depends on measurable ranges for line length, line height, and letter spacing. Learn the 45–75 character measure range, its source, and what happens when text falls outside it.
-
Typography for print vs screen
Print absorbs ink, screens emit light. Understand the optical size axis, hinting, and minimum legibility rules that govern type in each rendering environment.
-
Typography mistakes that make design look amateur
Faux bold, too many fonts, bad kerning, and widows make a layout look amateur. Learn the production fix for each mistake, from using the correct weight file to the Unicode code point for proper punctuation.
-
Variable fonts for designers
Variable fonts offer axis control and potential file-size savings, but the savings only materialise when multiple weights are used. Learn the five registered axes, the dead-weight problem, and where browser support fails.
UI design
Guide
-
Accessible UI components
Build UI components that are accessible by design, with WCAG 2.2 compliant focus states, keyboard navigation, ARIA labels, and contrast across every interactive state.
-
Button design: states, sizes and hierarchy
Button design covering every state from default to loading, with WCAG 2.2 touch-target minimums and the functional hierarchy of primary versus secondary actions.
-
Choosing a navigation pattern
How to choose a navigation pattern—tabs, drawers, bottom navigation—by the interaction problem it solves, with every state and WCAG 2.2 focus requirement covered.
-
Creating a design system for your first app
How to create a design system for your first app with tokens and components that document every interactive state without over-engineering the structure.
-
Designing for dark mode
Design dark mode interfaces that pass WCAG 2.2 contrast minimums by adjusting elevation tokens, avoiding pure black, and testing for halation on dimmed screens.
-
Designing UI cards
Design UI cards with clear hierarchy, accessible touch targets meeting WCAG 2.2 24 px minimums, and every interactive state from hover to loading defined.
-
Empty states and loading screens
How to design empty states and loading screens as user guidance, covering every state from first-use empty to offline error with accessibility requirements.
-
Form design that reduces abandonment
Form design that reduces abandonment by covering label association, inline validation, and every error state with its WCAG 2.2 accessibility requirement.
-
Mobile-first UI design
Mobile-first UI design that prioritises content by thumb zone, respects viewport constraints, and covers every interactive state from loading to offline.
-
UI design fundamentals for beginners
UI design fundamentals covering layout, hierarchy, and spacing with every interactive state defined and its WCAG 2.2 accessibility requirement stated.
