Hi Bob
at the moment our design system server “mobile” and “desktop” as two separate platforms, because the UI and the components are also separate (we don’t have shared components between the two platforms, they have completely different requirements, is a design choice).

If I had to build a component that has different spacing for different viewports/breakpoints (for the sake of simplicity, let’s imagine two, small and large) I would imagine two possible approaches:

A) same “token” file with different naming (and then process the tokens where they are consumed, based on their naming). See a code example here: https://gist.github.com/didoo/cb0e6bc80d905ace5193236e64360a6f

B) a more elaborate solution that relies on how Style Dictionary works, using the same token name for the spacing scale, with different values for desktop and mobile, and using them as alias/reference inside the component declaration. See a code example here: https://gist.github.com/didoo/cb01bd4d0bbb4b1569366b3a8df063ed

But I can think of other possible ways to structure the code, much depends on your particular context, constraints, and needs.

I hope it helped to answer your question.

Notice: the examples are just code example, don’t expect them to work, :) they’re stripped down versions of possible real code, just to give you an idea)