This week brought a sharp mix of practical front-end updates and regulatory shifts that directly affect how our team builds and maintains client websites. From streamlined dark mode toggles and powerful new CSS capabilities to EU rules on AI labelling and hard truths about AI in design workflows, here’s what matters and what we’re doing about it.

Key Takeaways

• Dark mode toggles should use two states, not three — simplifying both UX and implementation.
• New CSS features including Custom Highlight API and navigation matching open up cleaner, more performant design patterns.
• The EU has published concrete guidelines on AI labelling that affect any site using AI-powered features.
• AI tool adoption in design is accelerating, but the gap between looking reliable and being reliable is where real damage occurs.
• The democratisation of design tools gives professional designers more agency, not less — if they lead the conversation.

Strip Your Dark Mode Toggle Down to Two States

Lea Verou makes a compelling case that dark mode toggles with two states are enough. The argument is straightforward: offering light, dark, and system as three separate options creates unnecessary cognitive load. The system preference is already the default. A toggle only needs to let users override that default — light or dark. Done.

We’ve already started auditing client sites where three-state toggles were implemented. In every case, switching to a two-state model reduced confusion in user testing. The toggle respects the OS-level preference on first load, then lets the visitor flip it. Fewer choices, cleaner code, better experience.

CSS Custom Highlight API and Navigation Matching Are Production-Ready Tools

The latest roundup from CSS-Tricks covers ground our front-end team has been watching closely. Issue #17 of What’s !important highlights the Custom Highlight API, CSS Navigation Matching, fixes to text-stroke, skeleton UI styling techniques, and diagonal scrolling patterns.

• Custom Highlight API: Lets us style arbitrary text ranges without injecting wrapper elements. We’re testing this for search result highlighting and inline annotations on content-heavy client sites.
• CSS Navigation Matching: Enables styling active navigation states purely through CSS, reducing JavaScript dependency.
• Skeleton UIs: Proper CSS-driven skeleton screens improve perceived load times — a direct ranking and UX factor.

These aren’t experimental toys. They solve real problems we encounter in every build cycle.

EU AI Labelling Rules Now Apply to Your Website Features

Smashing Magazine has published a thorough breakdown of new EU guidelines for AI labelling. The short version: if your site uses AI-generated content, chatbots, recommendation engines, or AI-powered personalisation, you may now be required to disclose that to users. A sparkle icon tucked in a corner won’t cut it.

For our clients operating in or serving EU markets, we’re reviewing every AI touchpoint. Chatbots need clear labelling. AI-generated product descriptions need disclosure. The guidelines are specific about when and how labels must appear. Non-compliance isn’t just a legal risk — it erodes user trust.

AI in Design Workflows: The Reliability Gap Is the Danger Zone

A candid piece on UX Collective spells out a problem we see daily: getting started with AI is not the same as getting it right. AI outputs look polished. They pass a quick glance. But the gap between apparent reliability and actual reliability is exactly where client-facing damage happens — wrong copy, hallucinated data, broken logic.

Our internal policy is clear: AI assists, humans verify. Every AI-generated deliverable goes through the same QA process as manually produced work. No exceptions.

Designers Who Lead the Conversation Will Own It

The phrase “everyone can design” used to make professionals flinch. Now, as UX Collective argues, designers are in control of that narrative. Accessible tools don’t diminish expertise — they raise the baseline. Professional designers who set standards, define systems, and guide strategy become more valuable, not less.

We encourage our design team to treat democratised tools as amplifiers. When clients can prototype a rough idea themselves, our conversations start at a higher level. That’s a net positive.

Every item on this list points in the same direction: simpler interfaces, stricter compliance, and sharper human oversight of AI. The teams that act on these signals now — trimming unnecessary UI states, adopting modern CSS, labelling AI features correctly, and treating AI as a tool rather than a replacement — will build sites that perform better, rank higher, and earn more trust.

Frequently Asked Questions

What is the best practice for dark mode toggles on a website?

Use a two-state toggle that lets users switch between light and dark, with the system preference as the automatic default. A three-option toggle adds unnecessary complexity without meaningful benefit.

How do web designers need to comply with EU AI labelling rules?

Any AI-powered feature — chatbots, generated content, recommendation engines — must be clearly labelled for users in EU markets. A small icon alone is insufficient; the guidelines require explicit, contextual disclosure.

Why is the CSS Custom Highlight API useful for modern web design?

It allows developers to style specific text ranges without adding extra HTML elements, keeping the DOM clean. This is particularly useful for search highlighting, annotations, and accessible content features.

What are the risks of using AI-generated content on a business website?

AI output often looks convincing but can contain factual errors, hallucinated data, or off-brand messaging. Every piece of AI-generated content should go through the same quality assurance process as human-written work before publication.