Web design styles and patterns

Good websites rarely come from a template picked at random. They come from a few deliberate decisions about type, colour, spacing and layout, held consistently. These guides explain the styles and patterns behind those decisions, with the rules that make each one work.

Accessibility

• AccessibilityAccessible link text: write links that make sense out of contextHow to write accessible link text: why "click here" fails, what WCAG asks for, when links need underlines, and fixes for read more, new tabs and files.
• AccessibilityDesigning for colour blindness: never let colour carry the meaning aloneDesigning for colour blindness on websites: the colour pairs that get confused, adding text and shape to colour, safer palettes and testing in DevTools.
• AccessibilityDyslexia friendly website design: what helps beyond special fontsDyslexia friendly website design based on evidence: spacing people can adjust, steady line lengths, plain sentences and clear structure, and what fonts can't fix.
• AccessibilityFocus state design: an indicator visible everywhere that fits the styleDesign a keyboard focus indicator that stays visible on every background and suits the site's style, with the CSS, the WCAG 2.2 criteria and the usual mistakes.
• AccessibilityForm error messages design: say what went wrong and how to fix itForm error messages design: where to place them, how to word them, when to validate, and how to make errors clear to screen reader users, not only in red.
• AccessibilityHeading structure for accessibility: write the outline firstHeading structure for accessibility explained: one h1, h2 to h6 as a nested outline, no skipped levels, sizes set in CSS, and how to check the outline.
• AccessibilityHow to write alt text: start from the image's job on the pageWrite alt text by asking what each image does on the page: informs, links, decorates or holds text. Examples for each case, including when an empty alt is right.
• AccessibilityText on images: keeping words readable over photographsText on images readability: how scrims, placement and text shadows work, how to check contrast over a photo, and why phone crops move the busy parts.
• AccessibilityThe skip to content link: one that appears on focus and lands in the right placeHow to add a skip to content link that shows on keyboard focus, moves focus to the main content, and works with sticky headers, plus when landmarks are enough.
• AccessibilityTouch target size: the minimums, the comfortable sizes and the spacingTouch target size rules from WCAG 2.2 (24px at AA, 44px at AAA) and platform guidance, with the spacing exception and CSS to enlarge small controls.
• AccessibilityWebsite reflow at 400% zoom: how to test a layout and fix what breaksHow to test website reflow at 400% zoom and text at 200%, what WCAG's reflow and resize rules ask, and the usual fixes for sideways scrolling and clipped text.

AI design tells

• AI design tellsEm dashes in website copy: why they read as generated, and what to useWhy dense em dashes in website copy now read as AI writing, and how to punctuate with commas, colons, full stops and brackets instead, with before-and-after fixes.
• AI design tellsEmoji as icons on websites: why they fail, and what to use insteadWhy emoji render inconsistently, get read aloud by screen readers and look like filler in place of icons, and how to choose one icon set, or none at all.
• AI design tellsEyebrow text above headings: when the small label helps and when it's a ticWhen eyebrow text above headings helps people find their place, why a spaced-capitals label over every section became a template habit, and how to mark one up.
• AI design tellsGlow effects in web design: when a glow is a theme and when it's a tellWhy coloured glows under buttons and cards read as generated, when glow effects in web design are justified, and how to build depth and focus without them.
• AI design tellsGradient text headlines: why generated pages use them, and what they cost readersWhy gradient text headlines became a habit of generated pages, how the CSS works, the contrast and fallback problems it causes, and calmer ways to add emphasis.
• AI design tellsHighlighted word in headline design: a template habit, and better emphasisWhy recolouring or italicising one highlighted word in a headline became a template habit, its accessibility pitfalls, and how to get emphasis from the sentence.
• AI design tellsPlaceholder content on live websites: the leftovers that make a site look unfinishedHow to find placeholder content on live websites: Latin filler, 555 numbers, example.com emails, # links and sample names, with a search list to run before launch.
• AI design tellsThe "X, not Y" headline, the two-fragment slogan, and how to write one that states a factWhy the "X, not Y" headline and clipped two-fragment slogans mark a page as generated, and how to write a website headline that states a specific, checkable fact.
• AI design tellsThe AI sparkle icon: how it became the default, and how to label AI features in wordsHow the AI sparkle icon spread across software, why it says little about what a feature does, and how to label AI features with plain verbs and clear outcomes.
• AI design tellsThe purple gradient website: why it reads as generated, and what to use insteadWhere the purple-to-blue gradient hero came from, why it now signals an AI-generated page, and how to choose a background from the business instead.

Colour

• ColourAn earth tone website colour palette that stays legible, in light and darkBuild an earth tone website colour palette from clay, sage, sand and bark that passes contrast, stays crisp in dark mode, and gives one colour the job of acting.
• ColourBuilding a dark mode colour palette: surface steps, text greys and a calmer accentHow to build a dark mode colour palette: the background and surface steps, text and muted greys that pass contrast, and lifting the accent so it doesn't vibrate.
• ColourBuilding a neutral colour palette for UI: tinted greys, and how many you needA neutral colour palette for UI does most of a site's work. How to tint greys toward the brand, choose warm or cool, set the steps, and rebuild them for dark mode.
• ColourColour contrast for websites: what the WCAG ratios mean in practiceWhat WCAG 2.2's contrast ratios require for body text, large text, icons, borders and focus outlines, in light and dark themes, with examples that pass and fail.
• ColourColour psychology in web design: what the evidence supports and what it doesn'tWhat research supports about colour and behaviour on websites, which popular claims are folklore, and why contrast, consistency and context matter more than hue.
• ColourGradients in web design: ones that come from the subject, and the default to avoidHow to use gradients in web design: taking them from light, sky and material, avoiding muddy midpoints and banding, keeping text readable, and the purple trap.
• ColourHow to choose an accent colour, and why it belongs to actionsReserve one accent colour for buttons, links, focus and status, and see what happens to a page when the same colour is spent on decoration as well.
• ColourLight or dark website background: choosing by content, audience and photosHow to choose a light or dark website background from what you publish, who reads it and where, and when following the visitor's own system setting is best.
• ColourThe 60-30-10 colour rule in web design: where it helps and why interfaces want less accentWhat the 60-30-10 colour rule is, how it maps onto a web page, and why interfaces usually work better with far less accent than the 10% the rule allows.
• ColourThe best colour for CTA buttons: why contrast with the page decides itWhy there is no universal best colour for CTA buttons, how contrast with the surroundings decides it, and how to set primary, secondary and disabled buttons.
• ColourUsing brand colours on a website: screen values, contrast, tints and the action colourHow to adapt print brand colours for screens: converting values, checking contrast, making tints for surfaces and choosing which colour becomes the button colour.
• ColourWebsite colour palette ideas taken from the business itselfBuild a website palette from the shopfront, product and packaging: five neutral roles plus one action colour, with worked examples and contrast checks.
• ColourWebsite colours by industry: the conventions, why they exist, and when to break themThe colours different sectors tend to use on their websites, where those conventions come from, and how to decide whether to follow them or stand apart.

Design systems

• Design systemsA light and dark theme with CSS variables: one set of semantic tokensHow to build a light and dark theme with CSS variables: semantic tokens, prefers-color-scheme, color-scheme and light-dark(), plus when a toggle needs script.
• Design systemsA website style guide for a small site: what fits on one pageWhat a website style guide for a small site needs: type, colour, spacing, components and voice on one page, with a template outline and what to leave out.
• Design systemsDesign linting: what automated checks can catch, and what needs a human eyeWhat design linting is, which rules a machine checks reliably (fonts, contrast, sizes, placeholders, dead links) and which judgements still need a person.
• Design systemsDesign system examples: what the public ones share, scaled down to one siteDesign system examples from GOV.UK, IBM Carbon, USWDS and GitHub Primer, what they have in common, and a small-site design system you can write in an afternoon.
• Design systemsDesign tokens explained: from raw values to semantic rolesWhat design tokens are, the difference between primitive and semantic tokens, how they make themes and edits stay consistent, and how to write them as CSS variables.
• Design systemsHow to choose a design style for your website: a four-question processA decision process for picking a website style from your audience, your content, your tone and the photographs you already have, rather than from a mood board.
• Design systemsSemantic colour tokens: naming colours by role so themes stay coherentWhat semantic colour tokens are, how they differ from primitive tokens, how to name them by role (surface, text, action, danger) and why that makes dark mode easy.
• Design systemsTurning brand guidelines into a website: which rules carry over and which need translatingTurning brand guidelines into a website: converting print colours, fonts, spacing and logo rules into web tokens, and the gaps a brand book usually leaves open.
• Design systemsUI component states: the checklist every interactive element needsA checklist of UI component states (default, hover, focus, active, disabled, loading, error, selected) and how to design them as one consistent, accessible set.
• Design systemsWhat is a design system? The small-site versionWhat a design system is at small-site scale: a few tokens, a handful of components and the rules that tie them together, not a hundred-page library.

Imagery

• ImageryAI generated images on websites: when they read as fake, and where they can workWhen AI generated images on websites read as fake, where they can work (texture, abstraction, concepts) and why real photos still matter for trust and honesty.
• ImageryFavicon design: an icon that reads at 16 pixels and works on a home screenFavicon design that holds up: simplifying a logo to one mark, the favicon sizes browsers and phones ask for, maskable icons for installed apps, and dark tabs.
• ImageryIllustrations in web design: choosing them over photos and keeping one styleWhen illustrations in web design work better than photographs, how to keep one consistent illustration style, and how to avoid the generic flat-people look.
• ImageryImage aspect ratios for websites: choosing a few and cropping consistentlyHow to choose image aspect ratios for websites, crop photos consistently, size hero images, and use CSS aspect-ratio and object-fit so layouts don't jump.
• ImageryImage gallery design: pick the layout the work needsImage gallery design for portfolios and photo sites: when to use a uniform grid, masonry or a single column, plus captions, crops and keyboard access.
• ImageryImage optimisation for websites: formats, sizes and srcset for sharp, fast imagesA practical guide to image optimisation for websites: JPEG, WebP or AVIF, the right pixel sizes, srcset and sizes, lazy loading and keeping the hero image fast.
• ImageryStock photos on websites: where they cost trust, where they're fine, how to make them fitWhen stock photos on websites hurt trust, where they're perfectly acceptable, how to choose ones that don't look staged and how to make a mixed set look consistent.
• ImageryVideo background websites: when the footage earns its weightWhen a video background website is worth the download, how to keep the file small, make it autoplay muted, add a pause control and respect reduced motion.
• ImageryWebsite icon design: one set, one stroke, and knowing when words are clearerWebsite icon design in practice: choosing one icon set, one stroke and size, line versus filled styles, labelling icons, and deciding when plain words work better.
• ImageryWebsite photography tips: a short brief so every photo looks like one setWrite a short photography brief covering subject, light, crop and consistency, plan a shot list by page section, and shoot usable website photos with a phone.

Layout

• LayoutAsymmetrical web design layout: movement on a grid, order in readingHow an asymmetrical web design layout creates movement while staying on the grid: balancing unequal blocks, offset columns, and keeping a clear reading order.
• LayoutBento grid web design: uneven tiles that tell a storyWhen bento grid web design tells a story and when it is three feature cards in disguise, with the CSS grid template areas behind it and how it collapses on phones.
• LayoutCard layout design: when cards fit, how to vary them, and the hover problemCard layout design explained: when a grid of cards is the right container, how to vary cards by content, and why every card lifting on hover only adds noise.
• LayoutCentred or left-aligned text: why paragraphs read better on a left edgeCentered vs left aligned text on websites: why centred paragraphs are harder to read, where centring works, and how to fix a page where everything is centred.
• LayoutF pattern and Z pattern web design: what the research supportsWhat eye-tracking research does and doesn't say about F and Z scanning, why the F-shape is a warning sign, and how to design pages that make scanning easy.
• LayoutHero section design: size it to the content, not the screenHero section design that works: what the first screen must say, why full-height heroes hide the facts, and how to size a hero so a real fact shows without scrolling.
• LayoutHomepage layout: order the sections by the questions visitors askA homepage layout built from visitor questions: the sections a small business needs, the order that works, and the common ones that rarely earn their place.
• LayoutSplit screen website layout: two halves, one clear reading orderWhen a split screen website layout serves two equal choices or an image beside text, which proportions to use, and how the halves should stack on a phone.
• LayoutSticky header design: when it helps and how to keep it out of the waySticky header design that helps: when to keep navigation in view, how tall it can be on phones, and fixing anchor links and keyboard focus hidden underneath it.
• LayoutVisual hierarchy in web design: size, weight, position and space firstHow to build visual hierarchy in web design with size, weight, position and space alone, before reaching for colour or a second typeface, with checks you can run.
• LayoutWebsite layout ideas: proven page layouts and the content each suitsWebsite layout ideas that have lasted (single column, split, card grid, magazine, sidebar and more), with the content each one suits and where each one fails.

Mobile and responsive

• Mobile and responsive100vh on mobile: the toolbar problem, the new units and a better goalWhy 100vh on mobile is taller than the visible screen, what svh, lvh and dvh mean, which to use for a hero, and why forcing full height is rarely worth it.
• Mobile and responsiveBottom navigation on mobile websites: when a tab bar fits, and its pitfallsWhen bottom navigation on mobile websites helps, how many items it can hold, and how to deal with browser toolbars, safe areas, keyboards and wide screens.
• Mobile and responsiveDesigning for tablet screens: two columns, touch and the awkward middle widthDesigning for tablet screens: when to show one column or two, why device breakpoints mislead, and how to replace hover-only menus and tooltips for touch.
• Mobile and responsiveHamburger menu best practices, and when not to use oneHamburger menu best practices: when hiding navigation helps, labelling the button, keyboard and screen reader behaviour, and alternatives for few links.
• Mobile and responsiveMobile first web design: the phone layout as your content priority listDesign the phone layout first as an ordered list of what matters, then add columns as width allows. The method, the CSS, and how it differs from desktop first.
• Mobile and responsiveMobile form design: the keyboard, autofill and tap choices that matterMobile form design that saves typing: the right input types, inputmode and autocomplete values, field sizes for thumbs, and layouts that suit small screens.
• Mobile and responsiveResponsive design breakpoints: break where the content breaksResponsive design breakpoints explained: why device widths make poor breakpoints, how to find them from content, em or px, and when container queries fit.
• Mobile and responsiveThumb zone mobile design: putting actions where thumbs reachThumb zone mobile design for websites: how people really hold phones, where to put the main action, what that means for headers, and when bottom bars help.

Motion

• MotionA kinetic typography website: moving type that stays readableHow to build a kinetic typography website: type that moves without losing readability, CSS techniques, reduced-motion fallbacks and avoiding layout shift.
• MotionA parallax scrolling website: what the effect adds, what it costs, and lighter optionsWhat a parallax scrolling website gains and costs (motion sickness, speed, readability), a CSS-only parallax effect with a reduced-motion fallback, and alternatives.
• MotionEasing curves for UI animation: why the default feels generic, and what to use insteadWhy the browser's default ease makes every transition feel the same, and how to define two or three custom curves for feedback, entrances and exits in CSS.
• MotionHover effects for websites: feedback that means somethingHover feedback that signals clickability and does more than fade opacity, why every card shouldn't lift, and why hover can never be the only cue on touch screens.
• MotionMicro interactions in web design: small feedback that confirms an actionWhat micro interactions in web design are for, examples for presses, toggles, fields and submits, the timing that keeps them unobtrusive, and accessible versions.
• MotionPrefers reduced motion: what to turn off, what to keep, and the CSSWhat the prefers-reduced-motion setting should change on a website (parallax, large movement, autoplay) and what it can keep, with the CSS and how to test it.
• MotionScroll animations on a website: when reveals help and when they hide contentWhen scroll animations on a website help and when they hide content, how CSS scroll-driven animations work without scripts, and how to respect reduced motion.
• MotionScrollytelling web design: building a story out of scroll stepsScrollytelling web design explained: structuring a story in scroll steps, the sticky-graphic pattern, keyboard and reduced-motion access, and when to skip it.
• MotionUI animation duration: timing by distance and purposeHow to choose UI animation duration by distance and purpose: fast feedback, moderate moves, slower large entrances, shorter exits, and one consistent set of timings.

Sections and components

• Sections and components404 page design: a dead end that still gets people where they meant to go404 page design that helps: explain what happened in plain words, offer the few likely destinations, stay in the site's style and return a real 404 status.
• Sections and componentsAbout page design built around the people, the place and the reasonAbout page design that earns trust: structure it around who runs the business, where it works and why it exists, with photos that show them and a next step.
• Sections and componentsAccordion UI design: choosing accordions, tabs or plain textWhen an accordion helps and when it hides what people need, how it compares with tabs, and how to build one with native details and summary and no script.
• Sections and componentsBooking form design: service, date, time, details, confirmedBooking form design in the order people decide: service, date, time, then details. How to show availability, which fields to ask for, and how to confirm clearly.
• Sections and componentsButton design for websites: roles, states and sizes as one systemButton design for websites as a system: primary versus secondary roles, hover, focus, pressed and disabled states, sizes by role, and the common mistakes in each.
• Sections and componentsCall to action button design: one primary action, a clear verb, the right momentCall to action button design that works: one primary action per view, verb-first labels, one colour reserved for actions, and placement after the facts people need.
• Sections and componentsContact form design: the fields to ask for and what happens after sendContact form design for small sites: which fields to ask for, what to write next to the form, and what the visitor should see and receive after pressing send.
• Sections and componentsCookie banner design: fair choices, and when you need a banner at allCookie banner design that regulators accept: accept and reject with equal weight, no pre-ticked boxes, a way back in, and how to tell whether you need one.
• Sections and componentsDashboard UI design: one headline number, then comparisons, then detailDashboard UI design starting from the decision it supports: one headline number, comparisons that give it meaning, then detail, with charts and colour kept sparing.
• Sections and componentsFAQ section design: which questions, what order, accordion or open textFAQ section design that helps: choosing questions people actually ask, ordering them, writing short answers, and deciding between an accordion and open text.
• Sections and componentsFeature section design: replace three icon cards with what you really offerFeature section design that says something: replacing three identical icon cards with the real things a business offers, with prices, durations or sizes attached.
• Sections and componentsHow it works section design: three to five steps the customer actually takesHow it works section design that removes doubt: three to five real steps, what the customer does and gets at each, and why numbered text beats abstract icons.
• Sections and componentsMega menu design: when a site needs one, and how to build it wellMega menu design for large sites: when a big dropdown helps, how to group and label links, hover timing versus click, keyboard access and the mobile version.
• Sections and componentsNewsletter signup form design: say what they get, ask for an emailNewsletter signup form design that works: say what subscribers get and how often, ask only for an email, place it well and confirm without a pop-up.
• Sections and componentsPricing table design: an honest comparison people can act onHow to design a pricing table that compares honestly: what each tier includes, one recommended plan, the details people need before paying, and phone layouts.
• Sections and componentsProduct card design: what each card must show, and a grid people can scanProduct card design that sells: a consistent image, the name, the price and one action, plus how to keep a product grid scannable on phones and accessible.
• Sections and componentsSocial proof section design: real names, checkable numbers, no inventionsSocial proof section design done honestly: client logos with permission, numbers people can verify, quotes with real names, and what to show when you're new.
• Sections and componentsTestimonial section design: real names, specific outcomes, no invented quotesTestimonial section design done honestly: real names with consent, specific outcomes, layouts that are easy to read, and what to show before you have reviews.
• Sections and componentsWeb form design best practices: labels, one column, right inputs, useful errorsWeb form design best practices: visible labels, one column, input types that bring up the right keyboard, sensible validation and errors that say how to fix them.
• Sections and componentsWebsite footer design: what the last thing on the page should doWebsite footer design for small sites: what a footer is for (address, hours, contact, legal, links) and why a lone copyright line wastes the last thing people read.
• Sections and componentsWebsite navigation design: how many items, what to call them, where the button goesWebsite navigation design for small sites: how many items a top menu can carry, how to name them so people recognise them, and where the main action button sits.

Spacing and shape

• Spacing and shapeA spacing system for web design: a short scale and the rules for using itDefine a small spacing scale on a 4 or 8 point base, then set the rules for which step goes where: inside components, between them and between sections.
• Spacing and shapeBorder radius in UI design: assigning corners by role and nesting them correctlyHow to choose border radius in UI design by role (controls, cards, images), nest inner and outer radii correctly, and keep rounded corners consistent across a site.
• Spacing and shapeBroken grid layout: overlaps and offsets that keep the reading orderHow a broken grid layout works: overlapping images and text on purpose, building layers with CSS grid, keeping reading order intact, and simplifying it on phones.
• Spacing and shapeMax width for website content: setting the container and the reading width separatelyHow to choose a max width for website content: one width for the layout container, a narrower one for paragraphs, and how both behave on phones and wide monitors.
• Spacing and shapeSection padding on a website: setting vertical rhythm from a spacing scaleHow to keep section padding website-wide consistent: take it from a spacing scale, scale it for phones with clamp(), and keep gaps inside sections in proportion.
• Spacing and shapeShadows in UI design: when elevation needs a shadow, when a border is betterWhen shadows in UI design help show elevation, when a hairline border separates better, how to draw a believable box-shadow, and why coloured glows look generated.
• Spacing and shapeThe 12 column grid in web design: halves, thirds, quarters and phonesHow a 12 column grid divides into halves, thirds and quarters, how to set gutters and margins, how columns collapse on phones, and how to build one with CSS grid.
• Spacing and shapeWhitespace in web design: using space to group, not to look expensiveHow to use space to group and separate content, the difference between generous and empty, and practical spacing decisions for phones and wide screens.

Styles

• Design stylesAnti-design web design: breaking rules on purpose, not by accidentWhat anti design web design is, where it comes from, which conventions it breaks deliberately, and the usability rules it still has to keep to work at all.
• Design stylesArt deco web design: geometry, symmetry and gold on dark, used with restraintArt deco web design explained: where the style came from, its geometry, type and gold-on-dark palette, and how to get the look on a site without clutter.
• Design stylesBrutalist web design: raw structure without broken pagesWhat brutalist web design is, how raw-HTML brutalism differs from decorative neo-brutalism, and the rules that keep a brutalist site loud but still usable.
• Design stylesChoosing a brutalist website template, and what you'll still changeWhat a good brutalist website template gives you (grid, type, raw structure), how to judge one before you commit, and what you'll still have to change yourself.
• Design stylesClean website design: turning “make it clean” into decisionsClean website design as checkable decisions: shared alignment edges, a fixed spacing scale, one type family, fewer colours and fewer competing elements per screen.
• Design stylesCorporate website design that doesn't look like every other companyCorporate website design without the generic look: specific photography, concrete claims, a restrained technical voice, and the B2B pages buyers check first.
• Design stylesDark mode website design: what changes when the ground goes darkDark mode website design rules: off-black grounds, softer text, desaturated accents, elevation by lightness instead of shadow, and checking contrast in both themes.
• Design stylesDark website template checklist: contrast, photos and a light optionWhat to check before using a dark website template: text and button contrast, how photos sit on dark grounds, focus states, and whether a light theme exists too.
• Design stylesEditorial web design: which magazine conventions work on screenEditorial web design borrows from print: the deck, byline, pull quote and reading measure. Which conventions carry over to screens and which break on phones.
• Design stylesFlat design for websites: from Metro to flat 2.0, and fixing affordanceWhat a flat design website is, where flat UI came from, why pure flat hid what was clickable, and the small cues that flat 2.0 design adds back.
• StylesGlassmorphism in web design: when frosted glass works, and when it failsWhen frosted-glass panels work on a website, the contrast failures they cause over busy backgrounds, the CSS, and fallbacks for missing backdrop-filter.
• Design stylesHow to judge a Swiss style website template by its grid and typeHow to judge a Swiss style website template by its grid, type scale and alignment rather than its sample photos, with a checklist to run before you build on one.
• Design stylesLuxury website design: restraint, space and what cheapens itWhat makes luxury website design read as expensive on screen (restraint, space, pace, photography) and what cheapens it: badges, discount banners and glow effects.
• StylesMaximalist web design: dense colour, pattern and type, with one reading pathHow maximalist websites keep a hierarchy under dense colour, pattern and type, the one reading path they never break, and where the style goes wrong.
• Design stylesMinimalist web design: remove decisions, not informationMinimalist web design means removing decisions rather than content. Where minimal sites fail (hidden menus, pale grey text, missing facts) and how to avoid it.
• Design stylesMonochrome website design: hierarchy with one hue or noneHow monochrome website design builds hierarchy from size, weight and space instead of colour, and when a single action colour earns its place on the page.
• Design stylesNeo brutalism web design: thick outlines, flat colour and hard shadowsThe rules of neo brutalism web design: thick outlines, flat colour, hard offset shadows, and why a hard shadow is a different thing from the soft glow AI pages use.
• StylesNeumorphism UI design: why the soft extruded look fails, and where it can workWhat neumorphism is, why its soft extruded controls fail contrast and affordance, and the narrow places where the style can still work if you add what it lacks.
• Design stylesOrganic web design: soft shapes, earthy colour and real textureOrganic web design explained: earthy palettes, soft shapes and textured photography, plus how to keep curves from turning into the same generic blobs as everyone.
• Design stylesPlayful web design: bright, rounded and bouncy, under controlHow playful web design works: rounded type, bright colour and springy motion, with the limits that keep a fun website readable and calm for adult visitors too.
• Design stylesSwiss style web design: the International Typographic Style on screenSwiss style web design explained: the modular grid, flush-left ragged-right sans type and objective photography, turned into concrete CSS grid and type decisions.
• Design stylesSynthwave web design: neon on dark without losing the readerSynthwave web design explained: its 1980s sources, sunset palette, grids and neon type, how to keep it readable, and why a themed glow differs from a generic one.
• Design stylesTypes of website design styles, side by sideA map of the main types of website design styles: the one rule that defines each, the kind of site it suits, where it goes wrong, and which ones Anticode builds.
• StylesY2K web design: borrowing the chrome and pixels without the early-web problemsThe Y2K visual vocabulary of chrome, bubbles, pixel type and tiled backgrounds, and how to quote it on a modern site without shipping early-web usability problems.

Typography

• TypographyAlternatives to Inter: sans-serif faces with the same utility and a different voiceWhy Inter became the default UI font, what to look for in a replacement, and free sans-serif faces that do the same job with a different personality.
• TypographyBig typography web design: using type as the hero imageHow to use very large type as a site's main image: choosing the words, line breaks, tracking and line height, and keeping oversized headlines intact on a phone.
• TypographyFluid typography: CSS clamp() sizes that scale and still respect zoomHow to write fluid typography with CSS clamp(): working out the preferred value, why viewport units alone break zoom, and which text should stay a fixed size.
• TypographyFont pairing for websites: why one family often winsFont pairing for websites: why one family with several weights often beats a pairing, the narrow cases where a second face earns its place, and how to pair one well.
• TypographyGoogle Fonts performance: loading web fonts fast and without layout shiftHow web fonts slow a page down and how to fix it: fewer files, font-display, preconnect, subsetting, fallback metrics and when self-hosting Google Fonts helps.
• TypographyHow to choose a font for a websiteChoose a typeface by reading conditions, voice and weight range, then test it at body size on a phone before you commit. A practical checklist with examples.
• TypographyHow to set a type scale for the webPick a ratio, set five or six steps from body text to display, and make the scale fluid between phone and desktop with clamp(). Worked examples included.
• TypographyLetter spacing for headings: tighten large type, open small capitals, leave body aloneLetter spacing for headings in practice: why large type needs tightening, how much to open up small capitals, which units to use, and when to leave tracking alone.
• TypographyLine height for body text: set by measure and x-height, tighter for headingsHow to choose line height for body text on the web: start near 1.5, adjust for line length and x-height, tighten headings, and meet WCAG's text-spacing rule.
• TypographyOverused fonts in web design, and how to choose past themWhy a few typefaces turn up on nearly every generated site, what that costs a brand, and a method for choosing a face that says something about the business.
• TypographySerif vs sans serif for websites: what the research supports and what it doesn'tWhether serif or sans-serif type reads better on screen, why the old rule came from low-resolution displays, and how to choose by tone, size and the face itself.
• TypographyThe ideal line length for web text: about 60 to 75 charactersThe ideal line length for web body text is roughly 60 to 75 characters. How to set it with max-width in ch, adjust it for phones and headings, and test it.
• TypographyThe system font stack: when native fonts are right, and how to write oneWhat a system font stack is, when native fonts beat web fonts, how to order a CSS font stack so it falls back gracefully, and the mistakes that show up.
• TypographyVariable fonts on the web: how they work and when one file beats severalHow variable fonts on the web work, which axes are worth using, the CSS to control them, and when one variable file beats loading several static weights.
• TypographyWebsite body font size: why 16px is a floor, not a targetHow body size, x-height, line height and line length work together on a phone, why 16px is the minimum rather than the goal, and how to pick the right size.