A token called color.action.primary means one thing on the web, where it becomes a CSS variable on a filled button with a focus ring. It means a subtly different thing on iOS, where the Human Interface Guidelines expect a tint color, Dynamic Type, and a particular tap-target rhythm. It means a different thing again in Material 3 on Android, where it lands in a Compose theme with state layers and ripple. And on watchOS and visionOS it strains, because a wrist and a room are not a rectangle of pixels. The dream of the agentic design system is that an AI agent can take one semantic token and round-trip it to all five surface families, generating native-idiomatic output everywhere. The reality is that the round-trip is faithful in the middle and lossy at the edges, and a design strategist who pretends otherwise will ship a watchOS app that feels like a shrunken website and a visionOS app that ignores the room it lives in. This lesson designs the cross-platform token-and-component round-trip honestly: where an agent can translate a primary CTA to native equivalents without flattening platform-idiomatic differences, where the translation is lossy and needs a human, and what the manual-finishing pattern looks like. The artifact is a cross-platform token-mapping matrix plus a worked round-trip on one component, the primary button.

The Fantasy of the Flat Round-Trip

There is a seductive pitch making the rounds in 2026: define your design system once, in tokens, and let agents generate native code for every platform automatically. Write the system, press the button, get web, iOS, Android, watchOS, and visionOS for free. It is seductive because the middle of it is genuinely true and the edges are quietly false, which is the most dangerous kind of pitch a strategist can encounter, because it works in the demo and fails in production.

The reason the middle is true: a great deal of a design system is platform-agnostic at the value level. A brand blue is a brand blue. A spacing scale is a set of numbers. A type ramp is a set of sizes and weights. An agent that reads color.action.primary from your token source can, with high fidelity, emit the right CSS variable, the right SwiftUI color, the right Material 3 color role, because the value travels cleanly. For colors, spacing, base typography, and radius, the round-trip is close to lossless, and an agent does this work well. If your cross-platform ambition stopped at values, the fantasy would be real.

The reason the edges are false: a design system is not only values. It is also platform-idiomatic behavior, and behavior does not travel. The iOS HIG does not want your web button; it wants a button that respects Dynamic Type, uses the system tint, sits at the platform's tap-target rhythm, and supports the back-swipe and the large-title navigation that iOS users expect. Material 3 wants state layers, ripple, and its own elevation and motion language. watchOS wants Digital Crown input, glanceable density, and haptics. visionOS wants depth, gaze-and-pinch targeting, and components that exist in a room rather than on a plane. An agent that flattens your one button into five identical buttons has not translated the system; it has copied the web to four places that did not ask for it. The strategist's job is to design the round-trip so the values travel and the idioms are respected, and to be explicit about where the second part requires a human.

The Three Tiers of Translatability

The organizing idea for the whole matrix is that not all of a design system translates equally, and you should sort every element of the system into one of three tiers before you let an agent near it. The tiers tell you where to trust the round-trip and where to install a human.

Tier One: The Clean Round-Trip (Values)

These are the elements that travel losslessly because they are values, not behaviors: color, spacing, base type sizes, radius, opacity. An agent reads the semantic token and emits the correct platform representation - CSS custom property, SwiftUI Color, Material 3 color role, watchOS and visionOS equivalents - with high fidelity. Tier one is where the fantasy is real and the agent earns its keep. You document the mapping once and trust it.

Tier Two: Translatable With Platform Mapping (Behaviors With Equivalents)

These are elements that do not travel as identical values but do have a well-defined native equivalent on each platform, so an agent can translate them if you give it the mapping. A primary button is the canonical example: the concept ("the prominent, single most important action") exists on every platform, but it manifests as a filled button with a focus ring on web, a tinted button respecting Dynamic Type on iOS, a Material 3 filled button with a state layer on Android, a full-width glanceable button on watchOS. The agent can produce all of these correctly, but only if the mapping matrix tells it what the native equivalent is on each surface. Tier two is where most of the design system lives, and it is where the matrix does its real work: it is the lookup table that lets the agent translate idiom, not just value.

Tier Three: Lossy, Needs a Human (Affordances Without Equivalents)

These are the elements where the round-trip genuinely loses information because the target platform has an affordance the source platform has no concept of, or vice versa. There is no web equivalent of a visionOS component existing at a depth in a room, no clean translation of a watchOS haptic into a CSS property, no automatic mapping of iOS Dynamic Type's full accessibility range onto a fixed web layout. Tier three is where the agent should stop and a human should finish, and the matrix's most important job is to name these cases explicitly so they are flagged rather than silently flattened. An agent that confidently produces tier-three output is producing plausible-wrong work; the strategist's design must route tier three to manual finishing.

The values travel; the idioms need a map; the affordances need a human. A cross-platform round-trip that does not distinguish the three will flatten your wrist and your room into a rectangle, confidently, at machine speed.

Where the Round-Trip Is Lossy, Named Explicitly

A strategist must be able to name the specific lossy cases, because "it's lossy somewhere" is not actionable and "here are the four places it breaks" is. Four recur across real cross-platform systems in 2026.

Spatial computing affordances (visionOS). visionOS components live in a volume, with depth, with content that responds to where the user looks and exists at a physical scale in a room. A token system designed for flat surfaces has no representation for "this panel floats two meters away and tilts toward the user." An agent translating a web layout to visionOS will produce a flat plane pinned in space - technically a visionOS app, idiomatically a website on a floating screen. The depth, the gaze targeting, and the ergonomics of a room are tier-three losses that a human spatial designer must finish.

Dynamic Type (iOS) and accessibility scaling. iOS Dynamic Type lets users scale text across a wide accessibility range, and idiomatic iOS layouts reflow to accommodate it. A web layout's fixed or loosely-responsive type does not carry this behavior, so an agent translating web-to-iOS will frequently produce a layout that looks right at the default type size and breaks at the largest accessibility sizes. The token can carry the base size; it cannot carry the reflow behavior, which is a tier-three loss requiring a human to design the scaling.

Haptics (watchOS and iOS). Haptic feedback is a first-class part of the watchOS and iOS interaction language - a tap, a success, a notification each has a distinct haptic. There is no token for "this confirmation should feel like a gentle double-tap on the wrist," and no web or Android-default equivalent that translates cleanly. Haptics are a tier-three affordance the agent cannot synthesize from a flat token system; a human must assign them per interaction.

Glanceable density and input (watchOS). A watch is read in two seconds, operated by a Digital Crown and a fingertip, on a screen smaller than a business card. The information density, the interaction model, and the navigation that work on web are not shrinkable to the wrist; they must be rethought. An agent that scales a web component down to watch size produces something unusable, because watchOS density is a tier-three redesign, not a tier-two translation.

The Manual-Finishing Pattern

Once you have named the lossy cases, you need a repeatable pattern for handling them, because "a human finishes it" is a hope, not a process. The manual-finishing pattern has three moves, and it is the operational heart of the cross-platform round-trip.

First, the agent produces the tier-one and tier-two output and explicitly stops at tier three. The agent emits the colors, spacing, type, and the platform-mapped components it can translate faithfully, and where it hits a tier-three affordance it does not guess - it leaves a clearly-marked placeholder and a note: "visionOS depth and gaze targeting required here; not synthesizable from tokens." The worst failure is the agent confidently producing flat tier-three output that looks finished; the pattern's first job is to make the agent declare its own boundary.

Second, a platform specialist finishes the tier-three work by hand, using their knowledge of the platform's idioms - the spatial designer adds the depth and gaze ergonomics, the iOS designer designs the Dynamic Type reflow, someone assigns the haptics, the watchOS designer rethinks the density. This is craft work that does not get automated, and the strategist's plan should staff for it rather than pretend the round-trip is complete without it.

Third, the finished tier-three decisions are captured back into the system where they can be, so that the next round-trip is a little less lossy. Some tier-three decisions can be partially tokenized after the fact - a haptic vocabulary, a Dynamic Type reflow rule, a depth convention - so that what was manual finishing this quarter becomes a documented tier-two mapping next quarter. The round-trip never becomes fully lossless at the edges, but the manual-finishing surface shrinks over time as the system learns to encode more of its own idioms. This third move is what separates a team that finishes tier three the same way forever from a team that compounds its cross-platform knowledge into the substrate.

A Worked Round-Trip: The Primary Button

Make it concrete with one component carried across all five surfaces, because the matrix is abstract until you watch a single token become five native artifacts. Take color.action.primary and the PrimaryButton component and round-trip them.

Web. Tier one and two are clean. The agent emits a CSS custom property for the color and a filled button component with the brand radius, the correct padding from the spacing scale, a focus ring meeting the 3:1 focus-appearance ratio, and hover and active states. This is the source idiom and the most lossless target. Nothing tier-three here.

iOS (SwiftUI / HIG). Tier one travels (the color becomes a SwiftUI tint). Tier two translates with the mapping (a filled, tinted button at the HIG tap-target rhythm, not a web button transplanted). Tier three appears: the button must respect Dynamic Type, so its label scales and the layout around it must reflow at large accessibility sizes - the agent flags this, and an iOS designer designs the reflow. A success haptic on tap is also tier three and gets assigned by hand.

Android (Material 3 / Compose). Tier one travels (the color becomes a Material 3 color role). Tier two translates (a Material 3 filled button with the correct state layer, ripple, and elevation - idiomatic Material, not a transplanted iOS or web button). Tier three is minimal here but includes the ripple and state-layer motion timing, which the agent can scaffold but a motion-literate designer should tune to feel native.

watchOS. Tier one travels (the color). Tier two is thin, because the button concept barely survives: a watch primary action is typically full-width, glanceable, and may be Crown-driven. Tier three dominates: the density must be rethought (the agent flags that the web/iOS layout does not shrink to the wrist), and the confirmation haptic is assigned by hand. This is where the round-trip is most lossy and the manual-finishing surface is largest.

visionOS. Tier one travels (the color). Tier two is also thin: there is a button, but its idiom is spatial. Tier three dominates and is the deepest of all five: the button exists at a depth, responds to gaze-and-pinch, and must be ergonomically placed in the user's volume - none of which the token system represents. The agent emits the color and a flat placeholder, flags the spatial work explicitly, and a spatial designer finishes it. A flat visionOS button is the single clearest example in the whole lesson of plausible-wrong tier-three output.

Watch what the worked example reveals: the same token is near-lossless on web, mostly-clean on Android, partly-lossy on iOS, substantially-lossy on watchOS, and deeply-lossy on visionOS. The lossiness is not random - it increases as the surface diverges from the flat-rectangle assumption the token system was born under. That gradient is the single most useful thing a strategist can internalize about cross-platform round-trips, and it is exactly what the matrix encodes.

The Artifact: The Cross-Platform Token-Mapping Matrix

Here is how to build the matrix that is the lesson's primary artifact. It is a table whose rows are system elements (tokens and components) and whose columns are the five surface families, with each cell carrying three things: the native equivalent, the tier (one, two, or three), and - for tier two and three - the mapping rule or the manual-finishing note.

1. Rows: every system element you intend to round-trip. Start with the tokens (color, spacing, type, radius, motion, elevation) and the core components (button, input, card, navigation, list). You do not need every component on day one; you need the high-traffic ones the agents generate most.
2. Columns: the five surface families. Web (CSS variables), iOS (SwiftUI / HIG), Android (Material 3 / Compose), watchOS, visionOS. Naming the platform conventions in the column header keeps the matrix honest about idiom, not just value.
3. Each cell: native equivalent, tier, and rule. For a tier-one cell, the native representation and "clean." For tier two, the native equivalent plus the mapping rule the agent follows. For tier three, the placeholder convention plus the manual-finishing note naming who finishes it and what idiom is at stake (spatial depth, Dynamic Type reflow, haptics, glanceable density).
4. A tier-three index. A pulled-out list of every tier-three cell in the matrix, because these are the cells that need human staffing, and a strategist sizing the manual-finishing workload reads this list, not the whole table.
5. The compounding note. A column or annotation tracking which tier-three cells have been partially tokenized over time, so the matrix records the shrinking manual-finishing surface and proves the system is learning its own idioms.

The matrix is executive-ready in the sense that a design lead can look at the tier-three index and immediately understand the cross-platform staffing implication: these are the cells AI cannot finish, this is the platform-specialist headcount the round-trip actually requires, and here is the evidence that the agent handles the rest. That translation - from a technical mapping table to a staffing and trust decision - is why the matrix is a strategist's artifact and not just a system-team reference.

The Anti-Pattern: The Lowest-Common-Denominator System

There is one tempting wrong answer the matrix exists to prevent, and a strategist should name it. Faced with the lossiness at the edges, some teams "solve" it by designing only to the intersection of what all five platforms share - a lowest-common-denominator system that has no haptics because the web has none, no spatial depth because four platforms are flat, no Dynamic Type reflow because it is hard to round-trip. This makes the round-trip lossless by amputating everything that made each platform good. The result is a system that translates perfectly into five mediocre, identical experiences, each ignoring the affordances that would have made it native.

This is the cross-platform version of shipping the average, and it is exactly the failure the agentic round-trip will produce by default if you let it, because the average is what flattening produces. The strategist's matrix is the explicit refusal of the lowest-common-denominator: it preserves the tier-three affordances as named, human-finished work rather than deleting them to make the automation clean. A system that is lossless because it is rich-on-no-platform is worse than a system that is lossy because it is excellent-on-every-platform. The matrix is how you choose the second.

What This Makes You as a Strategist

The cross-platform round-trip is where a strategist demonstrates that they understand both AI's genuine reach and its honest limits, in the same artifact. The matrix says, in one table, "trust the agent here, map the agent there, and staff a human for these specific cells" - and that triple judgment, made explicitly and defensibly, is the strategist's value. A leader who has been told AI will generate all platforms for free needs someone who can show them the gradient: where it is true, where it needs a map, and where the wrist and the room demand a human. The matrix is that showing.

And note the through-line from the previous two lessons. The substrate argument said the system must be agent-legible; the re-platform made it token-first and semantic; this lesson extends that legible substrate across five surface families and marks, honestly, where its legibility runs out. Each lesson builds a more capable substrate and is more honest about its edges. That combination - ambition about what the substrate enables and honesty about where it is lossy - is the mature design-strategist posture, and the cross-platform matrix is its sharpest expression.

Key Takeaways

• The cross-platform round-trip is faithful in the middle and lossy at the edges: values (color, spacing, base type, radius) travel near-losslessly, but platform-idiomatic behavior does not, so an agent that flattens one button into five identical buttons has copied the web rather than translated the system.
• Sort every system element into three tiers: tier one (clean value round-trip), tier two (translatable with a platform-mapping rule, where most of the system and most of the matrix's work lives), and tier three (lossy affordances that need a human).
• Name the lossy cases explicitly: spatial computing affordances (visionOS depth and gaze), Dynamic Type and accessibility reflow (iOS), haptics (watchOS and iOS), and glanceable density and Digital Crown input (watchOS). "It's lossy somewhere" is not actionable; "here are the four places it breaks" is.
• The manual-finishing pattern has three moves: the agent produces tier one and two and explicitly stops at tier three (no confident flat output), a platform specialist finishes the tier-three idiom by hand, and the finished decisions are captured back into the system so the manual-finishing surface shrinks over time.
• The worked primary-button round-trip shows the lossiness gradient: near-lossless on web, mostly-clean on Android (Material 3), partly-lossy on iOS (Dynamic Type, haptics), substantially-lossy on watchOS (density, haptics), and deeply-lossy on visionOS (spatial depth, gaze) - increasing as the surface diverges from the flat-rectangle assumption.
• The artifact is a token-mapping matrix (rows of elements, columns of the five surfaces, cells carrying native equivalent, tier, and rule, plus a tier-three index and a compounding note), and it exists to refuse the lowest-common-denominator system - the lossless-but-mediocre average - in favor of one that is lossy because it is excellent on every platform.