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 methodology for designing polished interfaces — from visual hierarchy and typography to interaction states and micro interactions. It uses a 10-step workflow covering signifiers, the four-point grid system, semantic color, mode-specific depth, and feedback loops. Use it whenever you're designing, critiquing, or improving any UI screen, component, landing page, dashboard, or app — especially when a design feels flat, looks like a spreadsheet, or interactions lack responsiveness. It eliminates guesswork and produces professional results systematically.

Framework

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

// When should I 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 I need before applying this UI/UX design 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 approach?

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 method look like in real design scenarios?

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 applying 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 UI/UX terms and definitions does this skill use?

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, typography, color systems, spacing, interaction states, micro interactions, and depth techniques for both light and dark mode. Created from Kole Jain's comprehensive breakdown of every core UI/UX concept, it provides a 10-step workflow you can apply to any interface — cards, landing pages, dashboards, or mobile apps — to produce polished, professional results without guesswork.

What are signifiers in UI design?

Signifiers are visual cues built into the UI — containers, grayed-out states, highlights, hover states, tooltips — that communicate what the interface affords without requiring written instructions. If users need to read instructions to understand what a button does or which tab is selected, the UI has failed. Good signifiers make every state (selected, inactive, hoverable, pressed) visually self-evident through color, opacity, and containers.

How do I create visual hierarchy in a UI design?

Rank every content element by importance, then use size, position, and color to signal that ranking. The most important element should be large, bold, and near the top. Supporting details should be smaller, lower, and neutral. Use your primary brand color on the single most important metric or CTA. The hierarchy comes from contrast — the difference between big and small, colorful and neutral — not from making everything prominent.

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

Set all spacing and sizing values to multiples of 4 (e.g., 4px, 8px, 12px, 16px, 24px, 32px). This creates consistency because every value can always be split in half. Use tighter spacing (e.g., 8px or 12px) between tightly related elements like a heading and its subtext, and larger spacing (e.g., 32px) between major sections. Prioritize generous white space over strict 12-column grid adherence for most designs.

How does the Kole Jain method compare to generic UI design checklists?

Generic checklists list UI principles without connecting them into a workflow or providing opinionated defaults. The Kole Jain method is a sequenced 10-step process with specific rules: one typeface maximum, six font sizes maximum, icons matched to line height, 2:1 button padding ratio, header tightening at –2% letter-spacing. It also includes mode-specific depth techniques and mandates four minimum button states. It's a system, not a list of tips.

When should I use this UI/UX design skill?

Use it whenever you are designing, critiquing, or improving any UI screen — a card component, landing page hero, dashboard, settings screen, or mobile app. It's especially valuable when a design 'looks like a spreadsheet, not a design,' when interactions feel flat, when converting between light and dark mode, or when you want to systematically elevate a rough wireframe to a polished, professional interface.

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 single adjustment instantly makes large text look professional and polished. It works because default browser and design-tool settings leave too much space between letters and lines at large sizes, making headers feel loose and amateurish.

How do I handle dark mode depth without shadows?

In dark mode, shadows are invisible against dark surfaces, so depth is created differently. Make card backgrounds slightly lighter than the page background to establish layering. Remove high-contrast light borders. For accent chips, desaturate and reduce brightness on the chip background, then flip the chip text to a brighter version of the same hue. Avoid defaulting to navy or gray — consider deep purples, muted reds, or greens.

What results can I expect after applying this UI/UX methodology?

Expect interfaces that look intentionally designed rather than assembled from random elements. Specific outcomes include clear visual hierarchy where users' eyes go to the right element first, consistent spacing with no cramped areas, professional typography, mode-appropriate depth, and interactions that never feel silent or unresponsive. Designs move from 'spreadsheet layout' to polished, scannable interfaces with closed feedback loops on every user action.

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. For example, a chip sliding up after a copy action, or a success animation after form submission. They close the feedback loop so users never wonder whether their action worked. They range from purely functional to playful, depending on brand tone, but their core job is confirmation.

How many button states do I need in UI design?

Every button needs at minimum four states: default, hovered, active/pressed, and disabled. If the button triggers an asynchronous action (like a form submission or API call), add a fifth loading/spinner state. Ghost buttons — secondary CTAs with no background fill until hover — also require all four states. No interaction in the UI should be silent; users must always see a visual response.

// GET THIS SKILL — FREE