Late last year, Rob Austin, the founder of Shadcnblocks, asked if I’d like to design a theme for Shadcnblocks. It was so much fun we ended up doing three.
Each theme sold a made-up software start-up product. For each theme, I started by choosing a typeface (which had to be free given theme sharing constraints) and then play around with current website design trends (being a theme, it has to be generally applicable to trends). Once I’d completed both desktop and mobile versions, Rob coded them as Next.js and Astro templates.
My favorite theme is the Charter theme, which uses Github’s Hubot and Mona fonts. View the Charter Figma prototype here.
The Streamline theme uses the Inter and Inter Title fonts. In this one I experimented with complimentary flat pale shades. You can view the Figma prototype here.
Last but not least, the Mainline theme uses DM Sans and Inter. You can view the Figma prototype here.
All of the user interface graphics were also built in Figma. From high-point themeing and art directions down to the details of logos, background textures, title kerning and interaction states—it all adds up. Sometimes, designing even the most seemingly simple of legible, clean tables takes five drafts. But that’s how quality bubbles up.
Topics: