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

Kole Jain's UI/UX Design Fundamentals is a complete, opinionated methodology for designing and improving any interface — cards, landing pages, dashboards, and app screens. It covers ten linked principles: signifiers, visual hierarchy, white space, the four-point grid, semantic color, interaction states, micro interactions, and mode-specific depth. Use it whenever a design 'looks like a spreadsheet, not a design,' when interactions feel flat, or when you need to move from first sketch to final polish. The skill gives you a step-by-step workflow so you make deliberate design decisions instead of guessing.

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 do you need before applying this 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 Kole Jain's UI/UX methodology?

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 methodology 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 this UI/UX methodology look like in real examples?

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 mistakes should you avoid in UI/UX design?

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 are the key UI/UX terms you need to know?

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's a complete, opinionated UI/UX methodology covering ten principles — signifiers, visual hierarchy, white space, the four-point grid, semantic color, interaction states, micro interactions, and mode-specific depth. It gives you a step-by-step workflow to design, critique, or improve any interface, from a card component to a full dashboard, producing polished results without guesswork.

What is a signifier in UI design?

A signifier is a visual cue built into the UI — a container, grayed-out state, highlight, hover state, or tooltip — that tells users what an element affords without written instructions. Good UI signals how it works visually. If users need instructional copy to understand a button or state, the design has failed to signify properly.

How do I make a design not look like a spreadsheet?

Apply visual hierarchy: make the most important element large, bold, and near the top; move a key metric like price to the top-right in your brand color; add an image for color and scannability. Replace text labels with icons and connecting lines, then use four-point-multiple spacing to group related items and let the layout breathe.

How many states does a button need?

Every button needs at minimum four states: default, hovered, active/pressed, and disabled. Add a loading/spinner state when the button triggers an async action like a sign-up or data fetch. Inputs need even more — default, focus, error (red border plus message), and optional warning. No interaction should ever be silent.

How does this compare to just following a design system like Material Design?

A design system gives you pre-built components; this skill teaches the reasoning behind why components look and behave the way they do. It's method, not library. You can apply Kole Jain's principles inside any design system to make deliberate choices about hierarchy, spacing, color meaning, and feedback — rather than dropping in components and hoping they cohere.

When should I use a 12-column grid versus just spacing?

Use a 12-column grid 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 four-point-multiple spacing (like 32px between major sections). Generous, intentional white space matters more than strict grid adherence for most designs.

What color meanings should I use in UI design?

Colors must carry meaning, not decoration: blue signals trust, red signals danger or urgency, yellow signals warning, and green signals success. Reserve your primary brand color for emphasis and hierarchy — not as wallpaper. Use semantic colors purposefully for chips, badges, states, and alerts so every color earns its place.

How do I create depth in dark mode?

In dark mode, shadows disappear, so create depth by making card backgrounds slightly lighter than the page background. Remove high-contrast light borders, desaturate and dim bright accent chips, and flip chip text to a brighter version of the same hue to preserve hierarchy. Never rely on shadows as a primary depth tool in dark mode.

What results can I expect after applying this skill?

You'll get polished, professional-looking interfaces where hierarchy reads instantly, spacing feels intentional, color carries meaning, and every interaction gives feedback. Flat designs gain depth, spreadsheet-like layouts become scannable cards, and interactions feel responsive through proper states and micro interactions — all achieved through deliberate decisions rather than guesswork.

What is a micro interaction and why does it matter?

A micro interaction is feedback turned up a notch — a small animation that confirms an action completed, like a chip sliding up after a copy action. It's different from a state change: a hover shows state, but a micro interaction closes the feedback loop by confirming the action succeeded. Apply it to your 1–3 most critical user actions.

How do I handle text on top of an image?

Never place text directly on an image without an overlay — it ruins readability of both. Avoid full-screen flat overlays, which kill the image. Default to a linear gradient that lets the image show at the top and smoothly becomes a text-readable background at the bottom. For a modern look, layer progressive blur on top of the gradient.

What is the header tightening technique?

It's a typography trick for large display text: set letter-spacing to –2% to –3% and line-height to 110%–120%. Applied to headers and large headings, it instantly elevates the text to a professional standard. It only applies to large type — not body copy — and works with a single sans-serif typeface.

// GET THIS SKILL — FREE