Designtxt.org - design tokens in the atmosphere

Share your project
,
1

Here’s an idea I’ve had in my mind for a while, and whose time has come (I think): storing design tokens in atproto. I think having the building blocks of design in a public space can unlock a lot of possibilities for design teams (and agents).

So far I have lexicons, lots of documentation and a few example implementations at GitHub - designtxt/at-design-tokens: Your Design Tokens, in the Atmosphere · GitHub . I also have an online viewer at Token Viewer that reads the example collections I’ve published.

I will publish the lexicons when I’m sure they are correct (and finish fighting with DNS records :sweat_smile:) but am sharing this early proof of concept to get feedback and ideas.

Thanks in advance!

3 Likes
Theming Atproto
2

Nice! There has been some hacking on this context for theme-ability reasons like we did for AtmosphereConf.org website. I’ll point people at this endpoint

1 Like
3

The theme switcher on that site is wild, thanks for sharing that link! :star_struck:

1 Like
4

It’s a community project as is atmosphere.community

Atmosphere Community isn’t really styled yet and is where we could experiment with integrating design tokens.

5

Small update: the lexicons are now published, and the XRPC service that’s mentioned in the docs is up and running.

You can now use your usual ATProto calls to retrieve a complete tokenCollection, or use the XRPC service for fancier queries, like this one, that retrieves a single token from the GitHub Primer token collection (around 1900 tokens) without having to download the whole collection:

curl "https://xrpc.designtxt.org/xrpc/org.designtxt.getTokens?ref=at://did:plc:34yvx4hv64znmh2i2fezoyqx/org.designtxt.tokenCollection/github-primer&path=/fgColor/default&resolveReferences=true"

(The call will also resolve any references between tokens, so you get a color value instead of a {base.grey.500} reference)

1 Like