Sign in

Josh Black

@josh.black
767 followers 127 following 94 posts

Building a design system at GitHub. Previously worked on the Carbon Design System.

PostsRepliesMedia
Josh Black @josh.black · 27/09/2026
Also 🤦‍♂️ obviously GitHub and not GitHuh lol
020
Josh Black @josh.black · 27/09/2026
Things like container queries, anchor positioning, layers alongside great additions like popover, dialog, and invoke commands has been so much fun 🥳
010
Josh Black @josh.black · 27/09/2026
Using more and more CSS features has also been such a fun knock on effect of this transition, it really showed how willing we are to adopt new things and use them when they allow us to improve the overwll experience and ship less JS
110
Josh Black @josh.black · 27/09/2026
It was a lot of fun going through this experience. Definitely a big difference between Carbon and Primer has been how much closer I am to production when it comes to the design system and shipping changes
110
Josh Black @josh.black · 27/09/2026
Finally got a post up on the GitHuh blog github.blog/engineering/... 👀
github.blog
Improving site performance by shipping more CSS
How we fully migrated github.com away from CSS-in-JS.
4213
Josh Black @josh.black · 27/09/2026
It was a lot of fun doing this, I think a lot of us on Primer (especially @katielangerman.com) were so excited to lean into this direction. It also meant starting to use all the great new CSS features available these past few years 😊
160
Josh Black @josh.black · 13/09/2026
Makes a lot of sense! Thanks for explaining. What kind of rules/relationships/models are you finding are the most helpful to capture? 👀
110
Josh Black @josh.black · 09/09/2026
Would love to hear more about this if you ever write about it 👀 Is the idea that there is was always a structure in how the pieces are assembled and this is how that gets delivered/codified?
110
Josh Black @josh.black · 30/08/2026
Haven’t gone down the graph db route on our end, so far we’ve just been doing routing rules in skills to see how far that can go. Curious to see what you find out 👀
010
Josh Black @josh.black · 12/08/2026
It still feels like folks need to read the color guide on docs to even know what the categories are. One nice part of the tailwind config we've been trying out is that the LSP there helps with this challenge so would be cool to try an LSP in the future for design tokens for this 👀
110
Josh Black @josh.black · 12/08/2026
Ooof, definitely get what you mean. We have a blend of tools but I still think it can be difficult to discover/know what to use. Specifically we use stylelint for linting (moreso for using tokens broadly), a vscode extension for editor autocomplete, and tools in the MCP around tokens
110
Josh Black @josh.black · 12/08/2026
Selfishly I hope that these two use cases feed into each other. Discovery has always been so important and now there is another surface area to leverage for it which is cool. Although it sucks the answers at times still just are not right lol
010
Josh Black @josh.black · 12/08/2026
I hope it still matters (maybe foolishly lol). If you’re used to feedback in editor then the agent feedback loop will feel so slow by comparison. Definitely a bummer about the bundle size though :/ I bet you all have good ideas though for something just as good without that issue though
220
Josh Black @josh.black · 11/08/2026
Super curious what other folks are doing in this space 👀 If you have a project or technique that you've found helpful would love to hear about it! I would imagine we're all on some part of this same journey as we figure this out for our own design systems
000
Josh Black @josh.black · 11/08/2026
It will be interesting how useful this will be looking forward 👀 It feels so helpful for making sure tools we ship actually do _something_ in terms of improving outcomes. I also hope it will not only let us make helpful additions over time, but also removals as models change over time
100
Josh Black @josh.black · 11/08/2026
Under the hood, all this really does is bring in the different scenarios into a fresh Docker container and run the prompt using Copilot CLI. But it was cool to start seeing how different performed across not only the scenarios but against different models too
100
Josh Black @josh.black · 11/08/2026
So many LLM resources were flying around, from MCPs to skills to instructions to sub-agents 😅 I really wanted to find a way to create experiments to compare these different ways of doing things against scenarios that I cared about (and could deterministically test against)
100
Josh Black @josh.black · 11/08/2026
It's been wild catching up on LLM stuff after being out on parental leave for a bit 😵‍💫 One of the biggest things that came up when working on Primer for me was trying to find a way to answer the question "does this make things better, or not?" This lead to a fun project: github.com/primer/agent...
130
Josh Black @josh.black · 07/06/2026
Sadly US-only for this one 😞
000
Josh Black @josh.black · 05/06/2026
Come work with me on Primer! careers-githubinc.icims.com/jobs/5423/se... Feel free to reach out if you have any questions 😄
careers-githubinc.icims.com
GitHub Careers
GitHub Careers
120
Josh Black @josh.black · 09/02/2026
The idea is kind of what Mitchell talks about in: mitchellh.com/writing/my-a... with having just one agent running in the background.
mitchellh.com
My AI Adoption Journey
110
Josh Black @josh.black · 09/02/2026
Not sure if this 100% what you’re talking about but I love the cli tools for stuff like this (Claude code, copilot cli, etc). Really easy to go from plan mode to implementation (or just exploration) and you can decide if it’s worth opening a PR or not.
100
Josh Black @josh.black · 23/01/2026
I feel like any way that helps practitioners in either space connect is so helpful. It builds connections, relationships, and can really help both get to the bottom of opportunities or challenges and lead to proactive problem solving without the endless game of telephone between org layers.
020
Josh Black @josh.black · 23/01/2026
I think nowadays they have something similar to what you describe (I think they call them away missions?) but even having some idea of customer success being a part of your role would be so helpful. Even projects like building your own site or custom tooling UI with the DS can be insightful
110
Josh Black @josh.black · 23/01/2026
This topic has been on my mind for a bit the last year (relationship between system/product) and one thing I've come to really appreciate when I joined Carbon was how the group was meeting with all the other teams on Bluemix (IBM Cloud) at the time. It helped out so much with stuff like this.
110
Josh Black @josh.black · 23/01/2026
So cool! Also very curious to see the magic behind the ButtonSlot component 👀
020
Josh Black @josh.black · 20/01/2026
Apple Health has decided that now that I have a newborn it is time to talk about my sleep score 😂 I get it, Apple, I also want better sleep at nights but that might not happen for a bit 😅🥲
040
Josh Black @josh.black · 17/12/2025
It’s so much fun as a change of pace and the info you get out of it is such a game changer 🤯
020
Reposted by Josh Black
Shaun Bent @shaunbent.co.uk · 11/12/2025
A few years back, I nearly wrote "The Fallacy of Federated Design Systems." Then @nathanacurtis.bsky.social beat me to it. But what happens when you try it anyway? At Spotify, I watched federated fail twice, resulting in a huge number of barely reused components and damaged trust in design systems.
shaunbent.co.uk
Why Federated Design Systems Keep Failing
Why do federated design systems keep failing? I watched it happen twice at Spotify. Here's what actually happened, where they broke down, and why centralised models usually work better.
33211
Josh Black @josh.black · 12/12/2025
Just wanted to say thanks so much for taking the time to write this! Really enjoyed reading it and am sharing immediately in our work Slack 👀 haha
120
Josh Black @josh.black · 04/12/2025
I really credit so much of the Carbon ecosystem around this, personally. There is no way the Svelte, Vue, or React Native projects would have existed without this. So many of the DS sub-systems were created using this model too
140
Josh Black @josh.black · 04/12/2025
The biggest surprise to me with people against it is that treating the project as OSS really sets it up for success in so many ways (imo). The mindset behind it sets you up for contributions, shared ownership, and ultimately a roadmap to scale out the DS model as the project grows.
250
Josh Black @josh.black · 04/12/2025
Another one that came up was release confidence/testing since we are outside of the UI monolith. Thankfully for that we came up with a good process to test PRs in the OSS repo against internal ones 😮‍💨
120
Josh Black @josh.black · 04/12/2025
We've definitely gone through this a couple of times now, curious if others have had these challenges too. Probably the biggest one was moving our docs private so that we could deploy on GH's infra for a running server (definitely a bummer even just losing those edit page links 😞)
130
Josh Black @josh.black · 27/11/2025
Just wanted to say best of luck with your new adventure 🫡 It’s been such a blast working together, you’ll be missed so much! I hope our paths cross sometime soon for more design system shenanigans 🤞
030
Josh Black @josh.black · 22/11/2025
Relevant section: “…truncation is acceptable if the component's full content is available on focus or after user activation and an indication that this information can be accessed, is provided to the user in some way besides the fact that it is truncated.”
120
Josh Black @josh.black · 22/11/2025
Link to the SC that I’m referring to: www.w3.org/WAI/WCAG22/U...
w3.org
Understanding Success Criterion 1.4.4: Resize Text | WAI | W3C
110
Josh Black @josh.black · 22/11/2025
For folks that do truncation patterns in their components, how do you handle SC 1.4.4? We often see requests for truncation in different parts of the UI in GitHub but it seems difficult to satisfy this in a lot of scenarios 🤔
110
Josh Black @josh.black · 11/11/2025
Just wanted to say if you're looking to track down when the toasts page went up @ericwbailey.website added it last week!
120
Josh Black @josh.black · 07/11/2025
This reminded me that if you like Cholula definitely give Valentina a try 😋
120
Josh Black @josh.black · 05/11/2025
Hey! Just wanted to say thanks for responding 🙏 super curious, for your external stylesheet how are you applying shadow DOM styles from it if they are rolled up into one?
110
Josh Black @josh.black · 03/11/2025
I guess the thing for this would be that you would have a network request per custom element style you want to load in? e.g. you could bundle them and serve them together. Or is that not the case?
100
Josh Black @josh.black · 02/11/2025
Thanks @keithamus.social ! Do you know of any good interim solutions or any that you’d recommend? I saw the issue listed out some but obviously not ideal. I’ve seen some hide the custom element until it’s defined as another way to mitigate this but then you can get pop in everywhere 😵‍💫
100
Josh Black @josh.black · 01/11/2025
For folks using custom elements, how do you deal with styles when doing declarative shadow DOM? 🤔 Specifically would love to avoid duplication and also would like the styles present in the initial payload instead of styles having to be parsed from the JS bundle and applied during hydration
461
Josh Black @josh.black · 24/09/2025
Could be cool to try something like this @katielangerman.bsky.social @sid.st 👀👀
130
Reposted by Josh Black
Eric Bailey @ericwbailey.website · 18/09/2025
Focus rings! Plural! I wrote for @piccalil.li about how to create a branded double ring focus effect that is dynamically generated based on the interactive element's text color. piccalil.li/blog/taking-...
piccalil.li
Taking a shot at the double focus ring problem using modern CSS
A double focus ring is really useful in general but especially so with complex, themed systems. Eric Bailey shows us how to develop a really smart system, using modern CSS.
04611
Josh Black @josh.black · 25/08/2025
Very cool! I love it, thanks for sharing 🙏 I thought it was very interesting to have the `type` live on dropdown here for going between the different types of pickers (combobox, select, etc)
110
Josh Black @josh.black · 25/08/2025
Thanks for sharing! Enjoyed taking a look 😄 Was curious what your take would be on how to do design something like this if the target/tooltip needed to support popovertarget/popover 👀 (if this one already does then ignore me lol)
110
Josh Black @josh.black · 21/08/2025
Finally got around to making an MCP server for Primer: github.com/primer/react... 👀 It's been interesting playing around with tools to provide more context to agents, specifically around our components/tokens/icons/etc and their guidelines. Still holding my breath to see how much it can help 😅
120
Josh Black @josh.black · 21/08/2025
For example, with a tooltip it'd be awesome to have a component with a slot for the trigger and the content but as soon as I mess around with the Shadow DOM I lose the ability to relate these with attributes for a11y. I had assumed this is what ElementInternals was used for but now I'm not sure 🤔
110