Mark Tomlinson

@marktomlinson.dev

526 Followers 1030 Following

Web dev. Building tools for better design-development workflows. Currently building @sugarcube.sh There is another world, but it's in this one. EN•FR•DE 🌐 marktomlinson.dev 🍃 loanwords.leaflet.pub

User types "pn sugarcube lint" in a terminal window where the pwd is the sugarcube website repo. Lint command runs and shows very many undeclared custom properties in the repo.
@sugarcube-sh/core, npm v0.2.13, downloads 11k
Demo of an in-progress sugarcube command called 'analyze' which analyses your token graph and allows you to see how your tokens are being used.
Split-screen video. Left side shows a JSON file containing a sugarcube scale recipe with fields for mode, base size, ratio, and steps. Right side shows a webpage rendering the resulting type scale as a column of "Ag" samples at progressively larger sizes. As the ratio value is edited from 1.2 to 1.5, every sample on the page grows in real time.
Screenshot showing @sugarcube-sh/core package having reached 1k downloads.
A browser demo of sugarcube's design token pipeline running entirely client-side. A slider adjusts the radius.md DTCG token, and 12 coloured boxes spelling 'sugarcube.sh' morph from sharp to rounded in real time. A readout shows the full pipeline resolving 1138 tokens consistently well under 10ms.
Screenshot of a very early version of the Libcard home screen. Vintage-style borrowing record cards are displayed in a grid.
Demo video of sugarcube's in-development visual editing capabilities. The demo shows someone changing the ratio of the type scale as well as the overall ratio of the sizing and spacing system.
Screen recording of sugarcube GUI allowing designing in the browser.
JSON showing a proposed sugarcube scale extension configuration. Defines an exponential type scale with viewport bounds (320-1440px), base size (1rem to 1.125rem), ratio (1.2 to 1.25), and step range (-2 to +10). The scale would generate fluid CSS clamp values at build time.
Screenshot of a GitHub pull request titled "feat: cascade layers".
No runtime, no lock-in. Sugarcube outputs plain CSS — no runtime dependency in your bundle. Use the CLI directly, or add the Vite plugin for automatic regeneration during dev.
Book cover of the Penguin Classics title, The Metaphysical Poets.
Screenshot of a vite plugins config that shows the sugarcube vite plugin accepting a unocss preset (in this case, the presetWind3 plugin with preflights disabled).
A demo video of a split screen setup - text editor on one side, browser tab on the other. The demo shows me adding utility classes to the markup of a card component. As I add them, we see the demo card in the browser update with the new styles.
Screenshot of part of an example sugarcube config file, including part of an example utilities config.
A screen recording of me using sugarcube (a new dev tool for building design token driven UIs). It shows a split screen - text editor on one side and browser window on the other. As I change token values in the text editor, the UI in the browser window updates. The visual update is essentially a change from a monochromatic color scheme to a pink one.
Design system rigour, right out of the box. Build on solid foundations. Token-driven CSS and components — wired up and ready to go. npx make-sugarcube init Standards-based, token-driven development Design decisions, made programmable Design tokens represent design decisions as structured data — a single source of truth for color, type, spacing, and more. Sugarcube transforms those tokens into CSS variables and utilities, helping your UI stay consistent from the start. - Built on the DTCG Design Token Specification for maximum interoperability and future-proofing. - Powerful theming capabilities. Change your whole brand with a few dozen token updates. - No tokens? No problem. We'll detect that and add a complete starter kit on initialization.
Sugarcube has first-class support for utility classes. You can generate utilities directly from your design tokens. You also have the option to integrate UnoCSS presets for access to a wide range of non-token-based classes.
Screenshot of part of a sugarcube config file showing the current experimental mixes API. The mixes config takes an array of mixes. Each mix defines a base design token to mix from, a token or CSS color to mix with, and an outputs objects that defines virtual token paths such as color.text.quiet and a percentage value for the mix
Screen recording of a walkthrough demo of someone running the sugarcube init command.
Screenshot of a text editor displaying two files in split-pane view. On the left side is a react select component with minimal markup, on the right side is the same react component but with a great many tailwindcss classes. Over the file on the left is a banner that reads "sugarcube react components". Over the file on the right is a banner that reads "shadcn react components".
A demonstration of someone adding W3C-compliant design tokens to a JSON file. A card component in the browser updates as a result of those changes
A demo video showing someone running npx make-sugarcube validate. The command returns validation errors from design tokens that failing various W3C validation checks
A small demo of a new CLI tool called sugarcube. The demo shows what a typical journey through the "init" command looks like: design token setup, optional CSS architecture installation, and optional component installation.
Screenshot of the Cursor IDE trying to index a codebase but the progress bar is stuck at 98.7%
Screenshot of a porkbun account dashboard page, displaying multiple domains