Kole Jain UI/UX Design Fundamentals Skill

Last updated: 24 May 2026

Apply a complete, opinionated UI/UX design methodology to any interface — from hierarchy to micro interactions — producing polished, professional results without guesswork.

// TL;DR

The Kole Jain UI/UX Design Fundamentals Skill is a complete, opinionated design methodology that transforms flat or spreadsheet-like interfaces into polished, professional UI. It covers visual hierarchy, spacing with a four-point grid, semantic color systems, typography, interaction states, micro interactions, and mode-specific depth techniques. Use it whenever you're designing, critiquing, or improving any UI screen — cards, landing pages, dashboards, or mobile apps — especially when a design feels lifeless, cluttered, or unresponsive. It eliminates guesswork by providing a ten-step workflow from content audit to final polish.

Framework

UI design UX design visual hierarchy typography color systems interaction states micro interactions Figma

// When should you use the Kole Jain UI/UX Design Fundamentals Skill?

Use this skill whenever you are designing, critiquing, or improving a UI screen, component, landing page, dashboard, or app — from first sketch to final polish. Especially useful when a design 'looks like a spreadsheet, not a design' or when interactions feel flat and unresponsive.

// What inputs do you need before applying the Kole Jain UI/UX methodology?

Design targetrequired
What are you designing or reviewing? (e.g. a card component, a landing page hero, a dashboard, a settings screen)
Moderequired
Light mode or dark mode?
Content inventoryrequired
List the pieces of content or UI elements that need to appear (text labels, images, CTAs, inputs, icons, etc.)
Brand color
Primary brand color, if known. Used as the seed for the color ramp.
Platform
Web (landing page / dashboard) or mobile app? Affects typography scale and grid approach.

// What are the core principles of the Kole Jain UI/UX design framework?

Signifiers

Good UI signals how it works without written instructions. Every state — selected, inactive, hoverable, pressed — must be visually communicated through containers, color, opacity, or tooltip so the user never has to guess what a UI affords or what it can do.

Visual Hierarchy

Use size, position, and color to rank information by importance. The most important element should be large, bold, and near the top; supporting details smaller and below. It is the contrast — the difference between big and small, colorful and not — that creates the hierarchy.

White Space / Letting Things Breathe

Generous, intentional spacing is more important than strict grid adherence. Group elements that belong together (announcement + heading, heading + subtext) and separate groups with consistent spacing multiples so the layout reads naturally.

Four-Point Grid System

All spacing and sizing values should be multiples of 4. Not because it inherently looks better, but because you can always split things in half, which creates consistency throughout a design.

Semantic Color

Colors must carry meaning, not just decoration. Blue = trust, red = danger or urgency, yellow = warning, green = success. Use color for purpose; reserve your primary brand color for emphasis and hierarchy, not as wallpaper.

Every Interaction Needs a Response

When a user does anything, there should be a response. Buttons need at minimum four states (default, hovered, active/pressed, disabled). Inputs need focus, error, and warning states. Data fetches need spinners; completed actions need success messages.

Micro Interactions as Confirmation

Micro interactions are a form of feedback turned up a notch. They don't just show state — they confirm that an action has completed (e.g. a chip sliding up after a copy action). They range from highly practical to fun and playful, but they must close the feedback loop.

Depth Through Appropriate Tools per Mode

In light mode, use shadows to create depth — but if the shadow is the first thing you notice, you're not using it right. In dark mode, shadows disappear; create depth instead by making cards lighter than the background.

// How do you apply the Kole Jain UI/UX skill step by step?

1
Audit your content inventory for signifiers
For every interactive or state-bearing element, ask: does the UI visually signal what it affords without written instructions? Add containers to group related items, gray out inactive elements, highlight the selected/active state. Do NOT write instructional copy where a visual signifier can do the job.
2
Apply visual hierarchy using size, position, and color
Rank every content element: most important = large, bold, near the top, and/or colored. Supporting info = smaller, lower, neutral. If an image is available, always include it — images add color and make scanning easy. Price or primary metric should be top-right aligned and in your primary color to draw the eye. Use icons and visual metaphors (lines, arrows) instead of verbose labels wherever possible.
3
Set spacing using the Four-Point Grid System, prioritising white space over strict column grids
Use 12-column grids only for highly structured, repeating-content pages (galleries, blogs) where responsive behavior across 8-column tablet and 4-column mobile matters. For everything else, default to consistent 4pt-multiple spacing (e.g. 32px between major sections). Group tightly related elements (announcement + header, header + subtext) with tighter spacing to reinforce hierarchy. Let things breathe.
4
Lock in typography with one sans-serif font and a max of six sizes
Never use more than one typeface. For landing pages/websites, cap yourself at six font sizes with a wide range. For dashboards, shrink the range — rarely exceed 24px due to information density. Apply the header tightening technique to any large display text: letter-spacing –2% to –3%, line-height 110%–120%. This instantly elevates large text to a professional standard.
5
Build your color system from one primary brand color outward
Lighten the primary color for backgrounds; darken it for text. This creates a partial color ramp. Layer in semantic colors purposefully: blue (trust), red (danger/urgency), yellow (warning), green (success). Use these for chips, states, badges, and alerts — not for decoration. Color must earn its place.
6
Apply mode-specific depth techniques (shadows vs. layered backgrounds)
Light mode: use drop shadows for depth, but keep opacity low and blur high. Cards need subtle shadows; popovers and overlaid content need stronger ones. Dark mode: eliminate borders with high contrast; instead, make cards slightly lighter than the background to establish depth. Desaturate and dim bright chips; invert text color on chips to maintain hierarchy. Explore deep purples, reds, or greens — don't default to navy or gray.
7
Size and integrate icons to match line height
Icons are almost always too large. Match the icon size to the line height of the adjacent font (e.g. if line height is 24px, set icon to 24px). Sidebar navigation links are ghost buttons (buttons without a background until hover) — treat them as such. For standalone buttons, use a padding ratio of 2:1 width-to-height. Every button needs at minimum four states: default, hovered, active/pressed, disabled. Add a loading/spinner state when async actions are involved.
8
Define all interaction states and feedback responses
Map every interactive element to its full state set. Inputs require: default, focus (on click), error (red border + message), warning (optional issues). Global patterns: loading spinners when data is fetching; success messages when actions complete; micro animations on scroll or swipe. No interaction should be silent.
9
Elevate key interactions with micro interactions that close the feedback loop
Identify the 1–3 most critical user actions (submit, copy, delete, toggle). For each, design a micro interaction that confirms the action completed — not just a state change. Examples: a chip sliding up to confirm a copy, a success animation after form submission. These can range from purely functional to playful depending on brand tone.
10
Handle all image-text overlays with gradients or progressive blur
Never leave text directly on an image without an overlay — it ruins both the image and the text readability. Avoid full-screen flat overlays (they kill the image). Default solution: linear gradient that lets the image display at the top and smoothly converts into a text-readable background at the bottom. For a more modern look, layer a progressive blur on top of the gradient.

// What does the Kole Jain UI/UX skill look like in practice?

A developer hands you a data card for a ride-sharing app. It has five text fields (trip name, origin, destination, time, price) arranged in a plain list — 'it looks like a spreadsheet, not a design.'

Apply visual hierarchy: add a route image at the top. Make the trip name large and bold (most important). Move price to the top-right in the primary brand color — it's different from the rest, which draws the eye. Place time and date below in a smaller, neutral size. Replace 'from' and 'to' text labels with icons and a connecting line to show movement between the two locations. Use the Four-Point Grid System for spacing (e.g. 16px between inline elements, 32px between card sections). In light mode, add a low-opacity, high-blur drop shadow to lift the card off the background.

You are designing a CTA section for a SaaS landing page with a primary button ('Start Free Trial') and a secondary button ('See Demo') side by side.

Treat the secondary as a ghost button — no background fill, just a border, until hover. Both buttons must have four states: default, hovered, active/pressed, disabled. Set button padding so width is approximately double the height. Ensure both buttons are the same height with icon-matched sizing if icons are used. Place a loading/spinner state on the primary for the async sign-up flow. Use the primary brand color (semantic: trust) for the primary CTA. Keep the ghost button in a neutral or muted tone so the hierarchy is clear — primary CTA always wins the eye.

You are converting an existing light-mode dashboard to dark mode and the cards look flat and the accent chips are painfully bright.

Remove high-contrast light borders from cards — they create too much contrast. Make card backgrounds slightly lighter than the page background to create depth (since shadows don't work in dark mode). Take any bright accent chips: desaturate and reduce brightness on the chip background, then flip the text to a brighter version of the same hue to preserve internal hierarchy. Avoid defaulting to navy blue or gray — consider deep purples or muted greens for variety. Never use a shadow as a primary depth tool in dark mode.

// What are the most common mistakes to avoid when using this UI/UX methodology?

Writing instructional copy where a visual signifier (container, color, opacity) should do the job — if users need to read instructions, the UI has failed.
Treating the 12-column grid as mandatory for all designs — it is a guideline for responsive, repeating-content layouts, not a universal rule.
Using more than one typeface — you almost never need more than one font for any design.
Making shadows too strong — if the shadow is the first thing you notice on a design, you're not using it right; reduce opacity, increase blur.
Using color purely for decoration — every use of color must carry purpose (brand, hierarchy, or semantic meaning).
Applying light-mode depth techniques (shadows, light borders) directly to dark mode designs — dark mode requires lighter card surfaces and reduced-contrast borders instead.
Leaving text on top of images without a gradient or progressive blur overlay — it ruins both the image and the text.
Setting icons to an arbitrary size — always match icon size to the line height of the adjacent text.
Designing interactions with only a default state — every interactive element needs at minimum four states; inputs need even more.
Skipping the micro interaction confirmation step — a state change (e.g. button hover) is not the same as action confirmation (e.g. the copy chip sliding up); the feedback loop must close.

// What key terms and concepts does the Kole Jain UI/UX skill define?

Signifiers: Visual cues built into the UI (containers, grayed-out states, highlights, hover states, tooltips) that tell the user what the UI affords or what it can do — without requiring written instructions.
Visual Hierarchy: The use of size, position, and color to rank content by importance, so the user's eye travels to the right element first. Created through contrast — the difference between big and small, colorful and not.
Four-Point Grid System: A spacing discipline where all spacing and sizing values are multiples of 4. Ensures consistency because any value can always be split in half, creating predictable relationships throughout a design.
Letting Things Breathe: The practice of using generous white space — more important than rigid column grids — so content reads clearly and doesn't feel cramped.
Color Ramp: A systematic range of tints and shades derived from a primary brand color, used by large companies to build chips, states, charts, and other UI components consistently.
Semantic Colors: Colors that carry fixed meaning and act as signifiers: blue = trust, red = danger or urgency, yellow = warning, green = success. Must be used for purpose, not decoration.
Ghost Buttons: Buttons with no background fill — only a border or text — until the user hovers. Commonly used as secondary CTAs alongside a filled primary button.
Micro Interactions: A form of feedback turned up a notch. Not just a state change, but a small animation or visual event that confirms an action has completed (e.g. a chip sliding up after copying). Ranges from highly practical to fun and playful.
Progressive Blur: A blur effect layered on top of a gradient overlay on an image, creating a modern look where the image gradually becomes readable text background.
Header Tightening Technique: A typography 'hack': set letter-spacing to –2% to –3% and line-height to 110%–120% on large display/header text to instantly make it look professional.
Four States (Button): The minimum required states for any button: default, hovered, active/pressed, and disabled. A loading/spinner state is added when async actions are involved.
Depth (Dark Mode): In dark mode, depth is created by making card backgrounds lighter than the page background — not through shadows, which are invisible against dark surfaces.

// FREQUENTLY ASKED QUESTIONS

What is the Kole Jain UI/UX Design Fundamentals Skill?

It is a complete, opinionated UI/UX design methodology that covers visual hierarchy, spacing, typography, color systems, interaction states, and micro interactions in a structured ten-step workflow. Developed from Kole Jain's framework, it transforms flat or cluttered interfaces into polished, professional designs by applying consistent principles — from signifiers and semantic color to mode-specific depth techniques — without guesswork.

What are signifiers in UI design?

Signifiers are visual cues built into the UI — containers, grayed-out states, highlights, hover effects, tooltips — that communicate what an element can do without requiring written instructions. Good signifiers show every state (selected, inactive, hoverable, pressed) through color, opacity, or shape so the user never has to guess what the interface affords.

How do you create visual hierarchy in a UI design?

Use size, position, and color to rank information by importance. Place the most important element large, bold, and near the top. Supporting details go smaller and below. The hierarchy is created through contrast — the difference between big and small, colorful and neutral. For example, a price in your primary brand color at the top-right draws the eye immediately against smaller, neutral body text.

How do you apply the four-point grid system in UI design?

Set all spacing and sizing values as multiples of 4 (e.g., 8px, 12px, 16px, 24px, 32px). This creates consistency because every value can be split in half cleanly. Use tighter spacing (e.g., 8px) between closely related elements like a heading and its subtext, and wider spacing (e.g., 32px) between major sections. Prioritize generous white space over rigid 12-column grid adherence.

How does the Kole Jain UI/UX skill compare to generic UI design guidelines?

Generic guidelines often present principles in isolation without a structured workflow. The Kole Jain skill provides a specific ten-step sequence — from auditing signifiers to handling image-text overlays — with opinionated defaults like one typeface maximum, six font sizes, 2:1 button padding ratios, and header tightening. It also gives mode-specific rules: shadows for light mode, lighter card surfaces for dark mode. This eliminates the decision paralysis that generic advice creates.

When should I use the Kole Jain UI/UX design methodology?

Use it whenever you are designing, critiquing, or improving any UI screen — cards, landing pages, dashboards, settings screens, or mobile apps. It is especially useful when a design looks flat, feels like a spreadsheet, or when interactions feel unresponsive. Apply it from first sketch to final polish, or use individual steps to diagnose specific problems in an existing design.

What results can I expect after applying the Kole Jain UI/UX skill?

You can expect interfaces that look polished and professional, with clear information hierarchy, purposeful color usage, consistent spacing, and responsive interactions. Designs will feel intentional rather than arbitrary. Users will understand what elements do without instructions. Dark mode conversions will maintain depth and readability. Buttons, inputs, and interactive elements will have complete state coverage, closing every feedback loop.

What is the header tightening technique in typography?

The header tightening technique sets letter-spacing to –2% to –3% and line-height to 110%–120% on large display or header text. This simple adjustment instantly makes large text look professional and polished, closing the gap between amateur and expert typography. Apply it to any heading or display text but not to body copy, where normal spacing aids readability.

How do you handle dark mode design properly?

In dark mode, shadows are invisible against dark surfaces, so create depth by making card backgrounds slightly lighter than the page background. Remove high-contrast light borders. Desaturate and dim bright accent chips, then flip chip text to a brighter version of the same hue. Avoid defaulting to navy or gray — explore deep purples, reds, or greens. Never apply light-mode techniques like drop shadows directly to dark mode.

What are micro interactions and why do they matter?

Micro interactions are small animations or visual events that confirm an action has completed — not just a state change, but a feedback loop closure. Examples include a chip sliding up after a copy action or a success animation after form submission. They matter because they eliminate user uncertainty about whether their action worked, and they add polish that distinguishes professional interfaces from amateur ones.

How many button states do I need in UI design?

Every button needs at minimum four states: default, hovered, active/pressed, and disabled. When the button triggers an asynchronous action like a form submission or API call, add a loading/spinner state as a fifth. Designing only a default state is a common pitfall that makes interfaces feel unresponsive and leaves users guessing whether their click registered.

// GET STARTED

Turn Any YouTube Video Into An AI Skill

SkillForge captures a creator's exact methodology from their video and turns it into a reusable AI skill you can invoke in Claude, ChatGPT, or any LLM.

Forge your own skill