Terms by topic · 50 guides

Design

Learn how to make screens clear, consistent, easy to use, and open to everyone.

01 / Atlas

All Design terms

Open a term for a simple meaning, an example, when to use it, how official it is, and its code name.

01 · Core
Accessibility

Accessibility helps people with different abilities understand and use a product.
02 · More detail
Affordance

An Affordance is a visible or felt clue that shows how an object can be used.
03 · More detail
Apple Human Interface Guidelines

Apple Human Interface Guidelines explain design for Apple platforms. They cover actions, visuals, controls, input, accessibility, and platform differences.
04 · More detail
Aqua

Aqua is a shiny interface style linked to early macOS. It uses glowing controls, gel-like depth, thin stripes, and bright blue accents.
05 · Core
B2B Corporate Site

A B2B Corporate Site helps business groups check a company's skills, rules, trust, and fit. It also supports buying or partnership.
06 · More detail
Border Radius & Squircle — Learning Bundle

This guide separates three ideas. They're standard CSS border-radius, draft corner-shape: squircle, and other squircle-like shapes or platform masks. The bundle is not one standard design term.
07 · More detail
Claymorphism

Claymorphism is a playful style with puffy shapes and round corners. Soft shadows and pastel surfaces make it look like clay.
08 · Core
Color Contrast

Color Contrast is the measured light difference between content and its nearby background. It shows whether key text and edges are easy to see.
09 · Core
Color Palette

A Color Palette is a planned color set. Each color has a clear role, state, or surface.
10 · Core
Component

A Component is a reusable part of an interface with clear structure, behavior, states, and limits.
11 · Core
CSS Border Radius

CSS border-radius makes box corners from quarter ellipses using horizontal and vertical radii. It changes painting and clipping, but not the box's layout size, and it does not make a mathematical squircle.
12 · More detail
CSS Squircle Corner

In the CSS Borders Level 4 draft, squircle is a corner-shape value for a convex superellipse between round and square. It equals superellipse(2), needs a nonzero border radius, and still requires a browser-support check.
13 · Core
Dark Mode

Dark Mode changes surfaces, text, borders, media, and states for a dark setting.
14 · Core
Design System

A Design System is a shared, maintained set of rules, design tokens, components, patterns, and guides.
15 · Core
Design Token

A Design Token names one design choice. Examples include a color, space, font, or motion speed.
16 · Core
Direct-to-Consumer E-commerce

DTC E-commerce lets a brand sell directly to consumers. It covers discovery, product choices, payment, delivery, and after-sale help.
17 · Core
Editorial Design

Editorial design arranges a story through reading pace, type, images, captions, and page patterns that repeat.
18 · Core
Flat Design

Flat design uses simple shapes, solid colors, and clear flat areas, with little fake depth.
19 · Core
Focus Ring

A visible line or highlight around the control that now receives keyboard input.
20 · More detail
Frutiger Aero

Frutiger Aero is a hopeful mid-2000s style. It mixes shiny interfaces with blue skies, water, green plants, bubbles, and friendly-looking technology.
21 · More detail
Glassmorphism

Glassmorphism is a visual style with clear layered surfaces. It uses blur, light borders, and a small sense of depth.
22 · Core
Gradient

A gradient is a smooth change between colors or transparency. It can follow a line, circle, angle, or mesh.
23 · More detail
Iconography

Iconography is a shared symbol set with matching looks and clear meanings for actions and ideas.
24 · Core
Interaction State

An Interaction State shows a control's current condition. Examples include default, hover, focus, pressed, disabled, loading, error, and success.
25 · More detail
Liquid Glass

Liquid Glass is a moving, clear material style. It uses lens-like bending, highlights, and shapes that seem to join or flex.
26 · Core
Material Design

Material Design is a system for components and interactions. It uses layered surfaces, motion with a purpose, flexible layouts, and shared design tokens.
27 · More detail
Memphis Style

Memphis Style is a bold postmodern look. It uses strong shapes, clashing colors, patterns, uneven balance, and playful energy.
28 · Core
Minimalism

Minimalism removes what a design doesn't need. It still keeps the product clear, useful, and distinct.
29 · More detail
Neobrutalism

Neobrutalism is a bold, high-contrast digital style. It uses simple shapes, thick borders, direct colors, and a clear mechanical layout.
30 · More detail
Neumorphism

Neumorphism is a soft, low-contrast style. Light and dark shadows make controls look raised from or pressed into one color surface.
31 · Core
Notion-style Workspace

A Notion-style Workspace uses a calm document look. It favors readable text, content blocks, quiet controls, and open space.
32 · Core
Organic Design

Organic Design follows forms found in nature. It uses uneven curves, tactile textures, natural colors, and less mechanical layouts.
33 · Core
Playful Illustration

Playful Illustration uses lively characters, shapes, colors, and visual jokes. It can add warmth, meaning, or brand character.
34 · More detail
Progressive Disclosure

Progressive Disclosure shows the needed choices first and reveals harder options only when they matter.
35 · Core
Responsive Design

Responsive Design lets layout, content, and controls change to fit the available space and device.
36 · Core
SaaS Marketing Site

A SaaS Marketing Site explains a problem and software service to one audience. It helps visitors judge fit and choose a next step.
37 · Core
Shadow & Elevation

A shadow is a visual effect. Elevation is the depth relationship that the shadow may explain between surfaces.
38 · More detail
Skeuomorphism

Skeuomorphism copies familiar real objects to explain a digital control. It may also copy their materials.
39 · Core
Spacing Scale

A Spacing Scale is a small set of gap sizes. It shows groups and keeps a steady visual rhythm.
40 · More detail
Swiss Style

Swiss Style uses clear grids and uneven but balanced layouts. It also uses sans-serif type, photos, and a strict visual order.
41 · Core
Terminal Aesthetic

Terminal Aesthetic borrows from command-line screens. It uses monospaced text, tight hierarchy, prompt marks, few colors, and clear status.
42 · More detail
Type Scale

A Type Scale is a small, planned set of text sizes and line heights.
43 · Core
Typography

Typography is how text styles are chosen and arranged to make words readable, ordered, and on-brand.
44 · Core
Variant

A Variant is an approved version of one component for a different size, strength, or setting.
45 · More detail
Vernacular Web

Vernacular web copies the everyday sites that communities make. It differs from polished systems made by large groups.
46 · Core
Visual Hierarchy

Visual Hierarchy guides what people notice first, next, and last through size, contrast, place, and space.
47 · More detail
Wabi-sabi

Wabi-sabi is a Japanese view of beauty. It values limits, change, uneven form, age, and honest materials over perfect polish.
48 · More detail
Web Brutalism

Web brutalism is a raw web style. It shows structure, browser defaults, plain type, and planned roughness instead of usual polish.
49 · More detail
Windows Aero

Windows Aero is a late-2000s desktop style. It uses see-through window frames, blurred glass, soft glow, and layered borders.
50 · More detail
Y2K Digital Aesthetic

This digital aesthetic is a retro-future style from late-1990s and early-2000s digital culture. It often uses chrome, pixels, bright gradients, and playful computer details.