Design CodesDesign Codes

DESIGN + CODE

Design and Code Better

Clear UI, CSS, HTML, Figma, and a11y guides for teams that ship websites fast. Learn the parts that matter, then use them in real work.

Read latest guidesSee all topics
Rain-wet design workstation with laptop, layout sheets, keyboard and sample boards in blue dusk

Topics

Pick a topic

Small code blocks for spacing, grids, and cards.

Overhead flatlay of snippet cards, fern, cloth, dish, and blue accent on concrete.

GUIDE

CSS Snippets

Small code blocks for spacing, grids, and cards.

Rounded message chips, closed cream notebook, pencil and glazed dish on pale wood.

TIPS

UX Writing

Short labels, empty states, and buttons that help.

Translucent asset folder, two device mockups, and eucalyptus on a pale plaster shelf.

GUIDE

Figma Handoff

Share type, spacing, states, and asset names with devs.

Top-down tray with contrast tiles, tactile dots, ceramic cup, and folded linen.

TIPS

A11y Checks

Fix contrast, focus order, form labels, and motion.

guides and snippets

180+

guides and snippets

CSS patterns covered

42

CSS patterns covered

design system topics

12

design system topics

The Map

Community

Customer notes

Verified

“The CSS notes are short, clear, and easy to use in real builds.”

M

Maya Singh

Product Designer

Verified

“I fixed our Figma handoff in one afternoon with the layout tips.”

L

Lewis Grant

Frontend Dev

Verified

“The a11y guides helped our team spot gaps before launch.”

N

Noor Patel

Design Lead

Spotlight

More to read

Labels, hints, errors, and focus states that make forms easier to use.

Tactile form prototype with raised input blocks and blue focus glow on a dark studio table

Feature

Accessible Form Patterns

Labels, hints, errors, and focus states that make forms easier to use.

Four button-state tiles, swatch card and closed notebook on a walnut ledge in window light.
02Guide

04 Button States

Hover, focus, disabled, and active states in one simple set.

Clipped card mockups on a board, one gap, one spare card, silver accents.
03Tips

05 Card Grids

Keep cards even, tidy, and easy to scan on small screens.

Macro of acrylic design token chips, spacing blocks and a slim folder on a graphite table.

New

Figma Tokens Map

Name type, color, and spacing so handoff stays clean.

Tactile accessibility icon tray, angled screen, and earphone cases in a cozy dusk studio corner.
05A11y

ARIA for Designers

Use the right names for icons, menus, and dialogs.

Brushed trays and nested folders on a limestone ledge in a soft studio archive
06Guide

HTML Lists in UI

Use real lists for nav, feeds, and grouped actions.

Type specimen papers, linen cloth and ceramic cup on a sunlit studio bench.
07Basics

Type Scale Notes

Pick sizes that stay clear across phones and laptops.

London studio shelf with laptop, sketchbook, hard drive and stacked binders in cool morning light.
08UK

UK Agency Stack

A starter set for small teams in London, Leeds, and Bristol.

Journal

From the journal

Questions

Common questions

Quick answers before visitors choose a product, service, or next step.

01What do you publish each week?+

We publish UI design and front-end guides on CSS, HTML, Figma handoff, design systems, and accessibility.

02Who is Design Codes for?+

It is for designers, frontend developers, and teams who want clear, practical notes they can use on real work.

03Are the guides beginner friendly?+

Yes. Each post uses short steps, plain words, and small code samples so you can follow along fast.

04Do you cover UK design work?+

Yes. We write for UK teams and use examples that fit common local site needs, content, and access rules.

05Can I use the snippets in client work?+

Yes. The CSS and HTML snippets are made for real projects, with notes on edits and safe use.

06How do I get new posts?+

Join the newsletter or read the journal page. New guides land there first, with no long sign-up forms.

Weekly design notes

Get one clear guide each week on UI, CSS, HTML, Figma handoff, and accessibility. No noise, just useful notes for designers and frontend teams.