Visual Design Principles
Visual design principles are the rules that make a layout easy to read: hierarchy, contrast, alignment, proximity, repetition, balance and white space. They explain why one screen feels calm and clear and another feels noisy, even with the same content.
Example. Aligning every card to one grid and giving the main action the only bright colour on the page applies three principles at once: alignment, repetition and contrast.
Also called: principles of design, design principles
Visual Hierarchy
Visual hierarchy is the order in which the eye reads a screen, set by size, weight, colour, contrast and position. A strong hierarchy shows the most important thing first and the next step second, without any instructions.
Example. On a pricing page, the recommended plan is larger, sits in the middle and has the only filled button, so most people read it first.
Also called: hierarchy in design
Gestalt Principles
Gestalt principles describe how people group what they see: elements that are close together, look similar, are enclosed together or move together are read as one group. They come from early twentieth-century German psychology and explain most layout decisions.
Example. Putting a label right above its input field (proximity) tells the user they belong together, with no lines or boxes needed.
Also called: gestalt principles in design, gestalt laws
White Space
White space is the empty space between and around elements. It separates groups, gives important content room to stand out and makes text easier to read. It is a design element in its own right, whatever colour the background is.
Example. Doubling the space above each section heading lets readers scan a long settings page and find the right block in seconds.
Also called: negative space, whitespace
Typography
Typography is the choice and arrangement of type: typefaces, sizes, weights, line height, line length and spacing. In UI, good typography makes text readable at every size and builds hierarchy before colour is added.
Example. Setting body text at 16 px with a line height of about 1.5 and lines of 60 to 75 characters makes long help articles much easier to read.
Also called: type design, UI typography
Type Scale
A type scale is a fixed set of font sizes, often built by multiplying a base size by a ratio, used across a whole product. It keeps headings and text consistent and stops every screen from inventing its own sizes.
Example. A scale of 12, 14, 16, 20, 24, 32 and 40 px covers captions to page titles, and nothing outside it gets shipped.
Also called: typographic scale, modular scale
Spacing Scale
A spacing scale is a fixed set of spacing values, often multiples of 4 or 8 pixels, used for every margin and padding. It gives layouts a steady rhythm and makes handoff faster, because developers use the same values.
Example. With an 8-point scale, a card uses 16 px padding, 24 px between groups and 32 px between sections, on every screen.
Also called: 8-point grid, 8pt grid, spacing system
Grid System
A grid system divides a screen into columns, gutters and margins so elements line up consistently. It speeds up layout decisions and keeps pages coherent across breakpoints.
Example. A 12-column grid on desktop becomes 4 columns on a phone, and the same cards simply span fewer columns.
Also called: layout grid, column grid
Color Theory
Colour theory explains how colours relate, combine and carry meaning: hue, saturation, lightness, harmonies and contrast. In UI it guides palettes, states (success, warning, error) and how much colour a screen can carry before it gets loud.
Example. A product uses one accent colour for actions only, so every time people see it, they know it is clickable.
Also called: colour theory, color in UI
Design System
A design system is the shared source of truth for building a product's interface: reusable components, design tokens, patterns, guidelines and the code that matches them. It lets a team ship consistent screens faster and change the look in one place.
Example. When the brand colour changes, the team updates one token and every button in the app and the website changes with it.
Also called: design systems, UI kit, component library
Design Tokens
Design tokens are named values for the smallest design decisions, such as colours, font sizes, spacing and radii, stored so both design files and code use them. A token like color-action-primary replaces a raw hex code everywhere.
Example. Dark mode becomes a second set of token values; the components themselves do not change.
Also called: tokens
Component
A component is a reusable interface element, such as a button, input or card, built once with all its variants and states and used everywhere. Changing the main component updates every copy.
Example. A button component has primary, secondary and ghost variants, plus hover, focus, disabled and loading states.
Also called: UI component, reusable component
Micro-Interactions
Micro-interactions are small, single-purpose responses to an action: a toggle sliding, a button showing a spinner, a field shaking on an error. They confirm what happened and make an interface feel alive and trustworthy.
Example. A Save button that turns into a check mark for one second removes the doubt about whether the change was stored.
Also called: microinteractions, micro interactions
Dark Mode
Dark mode is a colour theme with light content on a dark background. Done well, it uses dark greys instead of pure black, adjusts colours for contrast and keeps the same hierarchy as the light theme.
Example. A reading app offers dark mode at night; its accent colour is slightly lighter in the dark theme so buttons keep enough contrast.
Also called: dark theme, dark mode vs light mode
Responsive Design
Responsive design makes one layout adapt to any screen size by reflowing columns, resizing elements and changing navigation at breakpoints. The content stays the same; its arrangement changes.
Example. A three-column product grid on desktop becomes two columns on a tablet and one on a phone, with filters moving into a bottom sheet.
Also called: responsive web design, adaptive layout
