“What is a design system?” A two-minute answer, from one colour to every screen. Then one decision changes, and everything follows. On a computer, the page plays it widescreen: deramond.dev/what-is-a-de...
Julien Déramond
Julien Déramond
@deramond.dev
Design systems tools · Upstream contributions · Bootstrap core team · Creator of Open {re}Source · Design System Tech Lead at Thales · deramond.dev
578 followers529 following85 posts
It plays in any brand, with its own colours, corners and logo. Four I like (none of them made or endorsed it): - Bootstrap deramond.dev/what-is-a-de... - Orange deramond.dev/what-is-a-de... - Salomon deramond.dev/what-is-a-de... - LEGO deramond.dev/what-is-a-de...
En français, sous-titres et voix off compris : deramond.dev/what-is-a-de...
Quantum’s design tokens are now open source: github.com/ThalesGroup/... It’s the first public package of the Thales Digital Design System, under the MIT license. Why we opened them, what’s inside, and what’s next: quantum.thalesdigital.io/blog/quantum...
🅱️ Bootstrap Deprecated Classes 0.3.0 is out! Pick your site's Bootstrap version and the one you're migrating to: removed classes are highlighted in red, deprecated ones in yellow. Now with Bootstrap 6 alpha 👀 🦊 Firefox: addons.mozilla.org/firefox/addo... Chrome & Edge: in review
This is the new dashboard Mark and I use to triage everything open on Bootstrap. Agents analyze each issue, PR and discussion, and draft the answer. We still make every call. blog.getbootstrap.com/2026/10/15/t...
Played with Claude Mods this morning: the conductor of my Claude agents now has a live dashboard. Running agents, the weekly budget, what's waiting on me, and the repos where my review queue is full, all in one pane next to the chat. #ClaudeCode #OpenSource
New way of keeping up with my open source projects, Bootstrap included: Claude agents do the reading and the drafting, and I answer one question at a time. Wrote it all up. You can't create time, but honestly, this comes close.
Not sure how to describe this week. Agents work on my repos while I do other things. Now and then, I answer a batch of their questions. On Bootstrap, the triage dashboard dug up easy issues and PRs buried in the noise for me, and drafted the heavy ones. Feels like flying.
New way of keeping up with my open source projects, Bootstrap included: Claude agents do the reading and the drafting, and I answer one question at a time. Wrote it all up. You can't create time, but honestly, this comes close.
Bootstrap 6 alpha 1 is out 🎉 Sass modules with tokens, CSS variables you can change at runtime, native <dialog> and <details>, md:d-none-style responsive classes, ESM-only JS. It’s an alpha: try it, break it, tell us. blog.getbootstrap.com/2026/10/08/b...
New way of keeping up with my open source projects, Bootstrap included: Claude agents do the reading and the drafting, and I answer one question at a time. Wrote it all up. You can't create time, but honestly, this comes close.
I rebranded everything I publish (site, docs, slides, socials) in eight days, on spare time, with Claude and a private repo. Not a designer: Claude did the visuals, I was a human colour picker. Then tokens, 4 npm packages, ~80 PRs. deramond.dev/blog/rebrand...
Another experiment: I wanted a new representation of my design tokens, so dtgraph draws them as a node graph. One node per token, one edge per reference. A few thousand tokens is hard to hold in your head. Much easier to look at. julien-deramond.github.io/dtgraph/
There's also a CLI, an MDX/Astro component and a Storybook panel in the repo, but they're rough drafts. Everything so far has gone into the graph itself. github.com/julien-deram...
Another experiment: I wanted a new representation of my design tokens, so dtgraph draws them as a node graph. One node per token, one edge per reference. A few thousand tokens is hard to hold in your head. Much easier to look at. julien-deramond.github.io/dtgraph/
A side experiment: Bootstrap 6's design system as DTCG tokens, plus a visual theme builder that writes them. Pick a brand colour, a radius, a density: out comes a custom.scss. Very draft, and not an official Bootstrap thing. julien-deramond.github.io/bootstrap-to...
Source, and the longer write-up of what it does and doesn't do: github.com/julien-deramond/bootstrap-tokens
Experimenting with Transtyle, a compiler for design systems. Define your system once in a small DSL built around DTCG, then compile it into native themes for shadcn, Bootstrap, and more. Experiment + AI slop. Very alpha. 🌎 transtyle.github.io/transtyle/ 📝 transtyle.github.io/transtyle/bl...
🧩 New open-source library: Component Anatomy Interactive anatomy docs for design systems. Get two-way hover sync between the rendered component and its docs. Framework-agnostic core, plus @astro.build & @storybook.js.org integrations. github.com/julien-deram...
Update the article at openresource.dev/articles/run... to mention the latest Gemma 4 open model. Let's test if this provides better results. 🧪
Julien Déramond reposted
Julien Déramond reposted
npmx is now in alpha: this is our story, as told by our team and friends
The latest 2025 State of JavaScript survey results.
Julien Déramond reposted
Replying to @patak.cat
We have a unique opportunity with npmx. We're building something very special together. I want to give myself the chance to focus on helping steward the project. I'm going to be working as an independent open source developer this year. Support my work and help me focus on npmx long-term 🙏
I integrated this into my note-taking system and I’m experimenting with using it instead of remote LLMs when I just need basic help. Less powerful, but possibly good enough for summarizing, grammar, or reformatting. Still early, and I haven’t tried other local models yet.
A short article explaining how to run a local AI model inside Obsidian using Ollama. If you try out this setup, let me know how it goes! Share your experiences, tips, or custom workflows. Happy note-taking! #obsidian #ollama #OSS #OpenSource
Le replay est disponible sur la chaîne YouTube d'Open Source Experience par ici : www.youtube.com/watch?v=SOPW...
Rendez-vous demain à @osxp2023.bsky.social à la Cité des Sciences et de l'Industrie (Paris 19) à 16 h 20 dans la salle 4. Présentation en français de "Design Systems : Stratégies Inner & Open Source". #OSXP2025 #Paris
Rendez-vous demain à @osxp2023.bsky.social à la Cité des Sciences et de l'Industrie (Paris 19) à 16 h 20 dans la salle 4. Présentation en français de "Design Systems : Stratégies Inner & Open Source". #OSXP2025 #Paris
Julien Déramond reposted
No fresh Advent of Open Source this year... but the Winter Open Source Village is still waiting for you! ❄️🏘️ Enjoy last year’s challenges with 3 difficulty levels and a cozy little lore: adventofopensource.com/advent/
It’s that spooky season again 🎃 The @github.com contributions graph gets its Halloween look via `data-holiday="halloween"`. There’s even a “winter” variant waiting in the CSS for when things get frosty ❄️
Design Tokens specification reaches first stable version 🙌 www.w3.org/community/de...
Julien Déramond reposted
I recently published an early preview of a new Visual Studio Code extension providing IntelliSense for Starlight Markdown and MDX content links: internal links completions, fragments completions, go to definition/follow link, and hover preview. github.com/HiDeoo/starl...
Represented Bootstrap with @mdo.bsky.social at the 2nd session of @github.com Secure Open Source Fund! Intense sessions with presentations, actions & homework: ready to boost security! Thanks to all Hubbers, Funding & Ecosystem Partners! You're maintaining an OSS project? Apply for a future session!
Julien Déramond reposted
📜 Interested in publishing changelogs with your Starlight docs? Just released a new plugin to do just that: - Support generating changelogs from many sources like Changesets, GitHub Releases, and more to come - Paginated list of all versions with individual version pages github.com/HiDeoo/starl...
Looks interesting 👀 github.blog/changelog/20...
Interesting discussion on the challenges of Open Source with Adam Wathan, TJ, Trash Dev, and Prime at youtu.be/OrHorwH5Pco?...
Julien Déramond reposted
Looks like eslint-plugin-prettier and eslint-config-prettier might have been compromised 😬 github.com/prettier/esl...
Still in French 👇 Le replay du meetup "Design System : et si on devait tout refaire ?" chez Frontguys est maintenant disponible sur YouTube : www.youtube.com/watch?v=GI_Z... Bon visionnage !
Post in French for a Francophone audience 👇 Rendez-vous le mercredi 11 juin à 18:45 dans les locaux de FrontGuys à Paris pour une table ronde avec Cyriaque Billard autour des Design Systems 🙌 Inscription : www.meetup.com/designops-me...
Julien Déramond reposted
pnpm v10.12 is a huge release! We’ve added many new features to the version catalogs system. We also shipped a new experimental option that makes installation almost instant on most dev machines. github.com/pnpm/pnpm/re...
If you maintain some npm projects, www.npmjs.com/package/npm-... can be useful now and then. It updates package.json to the latest versions, ignoring semver ranges. Just run `ncu -u`, then `npm install`.
Post in French for a Francophone audience 👇 Rendez-vous le mercredi 11 juin à 18:45 dans les locaux de FrontGuys à Paris pour une table ronde avec Cyriaque Billard autour des Design Systems 🙌 Inscription : www.meetup.com/designops-me...
It’s here! Bootstrap 5.3.6 is now live — and the docs are now powered by @astro.build 🎉 No flashy changes (as expected — it's meant to feel seamless 😆), but I’m excited to see it live and running smoothly! blog.getbootstrap.com/2025/05/05/b...
Merged! 🙌 It will be available in production with the next Bootstrap patch release. In the meantime, you can preview it here: twbs-bootstrap.netlify.app