CSS @function, AI Design Systems, and the Signal Beneath

Native CSS just got a logic layer. And if you’re running a design system at scale — across five languages, three platforms, and an AI assistant that keeps hallucinating your brand colors — you should care.

Two developments landed this week that, read separately, look like niche frontend news. Read together, they sketch something more consequential: a path toward design systems that are actually deterministic at scale.

CSS @function Is the Reusable Logic Layer You’ve Been Polyfilling

The @function at-rule, now documented properly on CSS-Tricks by Declan Chidlow, lets you define named CSS functions that accept arguments, run conditional logic, and return computed values — all natively in the browser, no JavaScript required.

This isn’t a cosmetic update. For years, teams have been achieving this with a combination of custom properties, calc() chains, and Sass mixins — a stack that works until it doesn’t, usually when a junior dev touches it six months later and can’t trace why a spacing value is what it is.

@function makes that logic explicit, portable, and inspectable. A function like --fluid-type(--min, --max) can now live in your design token layer and be called anywhere in your stylesheet with a consistent, auditable contract. For Southeast Asian teams managing multilingual UIs — where Thai script needs more line-height, Arabic requires RTL adjustments, and Indonesian copy routinely runs 20% longer than English — the ability to encode responsive typography logic once and call it across hundreds of components is not a minor efficiency. It’s a structural advantage.

The spec is still maturing and browser support will trail the spec by the usual 12–18 months, so production timelines should account for that. But the authoring conversation can start now.

---

AI-Ready Design Systems: The Spec Nobody Is Writing Carefully Enough

Vitaly Friedman’s piece in Smashing Magazine this week addresses a problem that’s quietly burning engineering hours at every brand running AI-assisted prototyping: AI tools routinely drift from your design system because your design system wasn’t written for AI to read.

The core diagnosis is sharp. Most design systems are optimized for human designers — they rely on implicit conventions, visual hierarchy, and organizational memory. AI tools don’t have organizational memory. When a design system’s token naming is inconsistent, its component documentation is sparse, or its spacing logic is undocumented, the AI fills the gaps with plausible-looking noise. The result is prototypes that pass a 10-second visual check and then fall apart in QA.

Friedman’s recommendations center on reducing ambiguity at the token and component documentation level: consistent naming conventions, explicit constraint documentation, and structured component annotations that AI agents can parse without inference. Think of it as writing your design system for a very literal-minded new hire who has read every design article ever published but has never worked at your company.

The practical implication for teams in the region: if you’re using Figma AI, Cursor, or any LLM-assisted prototyping workflow, your design system’s return on investment is now partly a function of how machine-readable it is. That’s a new accountability that most design system owners haven’t priced into their roadmaps.

Where These Two Stories Converge

Here’s the angle that neither article explicitly makes but that’s worth sitting with: CSS @function and AI-ready design system documentation solve adjacent halves of the same problem.

The problem is design logic leakage — the slow erosion of intentional design decisions as they pass through handoff, implementation, iteration, and AI-assisted generation. Every undocumented convention is a potential drift point. Every hardcoded value that should be a token is a liability. Every spacing rule living in a designer’s head rather than a structured annotation is an inconsistency waiting to ship.

@function addresses the implementation layer: logic that was implicit becomes explicit and callable. AI-ready documentation addresses the specification layer: intent that was implicit becomes structured and parseable. Together, they describe a design system architecture that is genuinely auditable end-to-end — from the design token through the CSS function through the AI-generated prototype and back.

For a marketing team shipping campaigns across Shopee, LINE, and a bespoke web storefront simultaneously, that kind of end-to-end fidelity isn’t an engineering luxury. It’s what makes it possible to move fast without the design divergence that quietly erodes brand equity.

The teams worth watching right now are the ones treating design system maintenance as a signal engineering problem — asking not just “does this look right” but “where is correctness being enforced, and where is it just assumed?”

That question has a more interesting answer than it did six months ago.

---

At grzzly, we work with digital teams across Southeast Asia who are navigating exactly this intersection — scaling design systems, integrating AI tooling, and keeping implementation fidelity intact across platforms and languages. If your current setup relies more on convention than constraint, that’s usually where the drift starts. Let’s talk