Articles by Topic

👋 Hey there!

This page is an organized archive (articles by topic) of all the articles/blog posts. You could navigate to posts of your liking!

---

UI/UX Design Journal

Design system Chronicles (building Tenet UI)

Phase 1 - Figma Design System

• Post#1 - Why I’m Building Tenet UI

• Post #2 - Setting up colours for Tenet UI with colorbox.io

• Post #3 - Organizing colour variables in Figma

• Post #4 - Designing a Scalable and Accessible Dark Theme

• Post #5 - Semantic tokens (colour) in action

• Post #6 - Establishing a typography system

• Post #7 - Typography variables

• Post #8 - Breaking Down Component Research

• Post #9 - Component Thinking: A recap of my component design workflow

Phase 2 - Designing with AI (Translating Tenet to code)

• Post #10 - From Figma to Code

• Post #11- Designing behavior before code

AI & Product Design

• Your design system lives in the docs - Building a context stack

• How I set up Cursor before I start vibe coding

• How to build prototypes that don’t drift

• A Context-First Design Process for 0→1 Work (With AI)

• How I vibe-coded my 90s-game themed portfolio using ChatGPT + Google AI Studio

• Context > Prompt: A designer’s system for an AI copilot

• Riffing With AI: My ChatGPT → v0 → Figma Workflow

• RedStack: Building a multi-role execution platform using a AI-augmented design workflow - case study

Design Systems

• The “invisible” middle layer of colour systems

• How to use a Figma Design System effectively in real projects

Colour

• Designing colour palettes that work for every project

• Colours Revisited: Optimizing Your Design Workflow

• Crafting a semantic colour system: Fixing the colour chaos, one semantic variable at a time

• Plotting matrices to create consistent and scalable colour tokens

Components

• Breaking It Down: The Basics of Component Properties

• Crafting Components with Subcomponents and Nested Instances

• Building for efficiency and usability: A Case Study on Component Design

• The "Icon properties" hack: Manipulating icon component properties

• Creating a simple "Input Text" component set

• Designing flexible data tables - an atomic approach

Miscellaneous

• “Auto layout” Chapter 1 - Fundamentals

• “Auto layout” Chapter 2 - Building a responsive card

• Auto-layout isn’t broken. Your mental model is!

• Where design debt begins (And how to stop it)

• Learning UI design through deliberate practice

• Just starting your UX/UI journey? Start with learning UI/visual design!

Pixels and Process

• Pixels and Process #1 - Geeking over the good stuff

• Pixels and Process #2 - Geeking over the good stuff

Case studies

• The Design System story: Turning design debt into a scalable system - a case study

• Designing a no-code e-learning platform for dentistry - a case study

• Designing a learning platform for busy dental students - a mobile design exploration

• Learning by Deconstructing: Trying to Reverse Engineer a Design System for the Coursera Mobile App - Part 1 (Foundations)

---

Artifacts.png (design comics)

• The Existential Crisis of the 27th Prop

• The Ontology of Colour Tokens

• Assisted Overthinking

---

Productivity/Personal Growth

• Careers Aren’t Found. They’re Compounded.

• Confidently Lost - Navigating growth when you don’t have all the answers

• Life Hacks

• Embracing uncertainty to do great work

• Tolerate boredom

• Sticking to your long term goals

• The meandering path of the Generalist or the "Late Specializer"

• On becoming better than "good enough"

• How to keep going when you feel uncertain

• How to find work you’ll love doing

• Learning how to LEARN

---

Entrepreneurship

• Is Entrepreneurship a "Good Life"? Happiness, Meaning and Psychological Richness

---