Design reference index · 8/27
2153 source-linked definitions with individual URLs. JavaScript is not required to browse these documents.
Try 379 interactive reference cards
Stylized Realism
An approach retaining realistic structure while deliberately exaggerating proportions, colors, or shapes.
Isometric Illustration
Illustration representing space with consistent axes using a parallel-projection approach.
Paper-cut Style
A style based on layered paper, cut edges, and shadows between layers.
Collage
Creating a new image by combining fragments of photographs, textures, or text.
Dithered Style
Using patterns of a limited set of colored dots to suggest intermediate tones or texture.
CRT Aesthetic
A visual treatment imitating CRT characteristics such as scanlines, curved screens, and color bleed.
Landing Page
A page focused on one primary conversion action for a particular campaign or traffic source.
Above the Fold
The content visible before scrolling; its extent varies with the device and viewport.
Feature Section
A content block explaining product features and the value they provide.
Social Proof
Evidence such as reviews, customer examples, or usage results that supports a user's judgment.
Testimonial
Content quoting a customer's or user's experience.
Pricing Table
A table comparing plan prices, features, and limits to support a choice.
Comparison Table
A structure comparing products or options against the same criteria.
FAQ Section
A collection of frequently asked questions and their answers.
Feature Grid
A repeated grid of feature names, descriptions, and icons.
Sticky Navigation
A navigation area that stays at a particular position during scrolling.
Scrollytelling
A storytelling approach that reveals text, images, and visualizations in response to scrolling.
Scroll-driven Animation
Animation whose progress is directly determined by scroll progress.
Mega Footer
A broad footer containing major site categories, policies, and supplementary navigation.
Utility Navigation
Navigation grouping shared functions such as language, account, and support.
Application Shell
The shared application structure containing navigation, headers, and work areas.
Master–Detail Layout
A layout showing an item list together with details of the selected item.
Dashboard Layout
Organizes metrics, trends and detail tables by analytical priority.
Portal Layout
A layout concentrating entry points to multiple services and content areas.
Full-bleed Layout
A layout extending an image or background to the screen edges without container margins.
Split-screen Layout
A composition dividing the screen into two or more contrasting areas.
Content-first Design
An approach that establishes real content volume and structure before designing the layout.
Graceful Degradation
A strategy preserving essential tasks in environments that do not support advanced features.
CSS
The stylesheet language for describing presentation, layout, and visual styling of HTML, SVG, and related content.
Selector
An expression identifying the elements to which a style rule applies.
Cascade
The rules deciding which CSS declarations apply based on origin, importance, layers, specificity, and order.
Specificity
A weighting system for determining precedence among competing selectors.
Inheritance
The passing of some property values from a parent element to its children.
Box Model
A model calculating occupied space from content, padding, border, and margin.
box-sizing
A property determining whether width and height include only content or also padding and borders.
Normal Flow
The default rules placing elements in document order without special positioning changes.
Block Formatting Context
A layout region that independently handles block layout and interactions with floats.
Flexbox
A primarily one-dimensional layout model arranging items along main and cross axes.
CSS Grid
A two-dimensional layout model placing items within defined rows and columns.
Subgrid
A feature allowing a child grid to share its parent grid's track definitions.
Grid Track
The row or column space between two adjacent grid lines.
Grid Area
A placement region consisting of one or more grid cells.
gap
A property setting space between items in supported layouts such as grid and flexbox.
Intrinsic Sizing
Determining size from the content's own characteristics rather than an explicit fixed value.
min-content / max-content
Keywords describing minimum or maximum intrinsic content sizes under line-breaking constraints.
clamp()
A function constraining a flexible CSS value between a minimum, preferred value, and maximum.
min() / max()
Functions choosing the smallest or largest of multiple calculated CSS values.
calc()
A function applying arithmetic to compatible numbers and units.
Positioning
Determining an element's placement basis using modes such as static, relative, absolute, fixed, or sticky.
Containing Block
The rectangular area used as a reference for percentage sizes and positioning calculations.
Stacking Context
A group of elements whose z-axis stacking order is calculated as a unit.
z-index
A property specifying front-to-back ordering within an applicable stacking context.
Overflow
Behavior controlling how content extending beyond its box is displayed, hidden, or scrolled.
Aspect Ratio
A constraint representing or maintaining the ratio between width and height.
Object Fit
A property controlling how an image or video fills, fits, or crops within its container.
Media Query
A rule applying styles conditionally based on viewport, input capabilities, user preferences, or related features.
Container Query
A rule changing styles based on an ancestor container's size or supported state.
Logical Properties
Properties using inline and block axes rather than physical left and right to accommodate writing direction.
Viewport Units
Units representing viewport-based dimensions, including vw, vh, svh, lvh, and dvh.
Relative Units
CSS units relative to another value or reference, such as em, rem, ch, and percentages.
Custom Properties
Cascading values declared with a --name and referenced through var().
CSS Cascade Layers
A feature using @layer to explicitly organize major levels of style precedence.
CSS Nesting
A feature for writing related selector rules nested within another rule.
Pseudo-class
Selector syntax matching element states or structural conditions, such as hover, focus, or checked.
Pseudo-element
Syntax styling a particular part of an element or a generated visual region.
:has()
A relational pseudo-class matching elements according to a relative selector condition.
Focus-visible
A focus state used when the browser determines that a visible focus indicator is appropriate.
CSS Transitions
A feature interpolating between style values over a specified duration and easing curve.
CSS Keyframes
An @keyframes rule specifying property values at stages of an animation.
Transform
A visual coordinate transformation such as translation, rotation, scaling, or skewing.
Transform Origin
The reference point around which a transformation such as rotation or scaling occurs.
Filter
A feature altering rendered appearance through effects such as blur, contrast, and saturation.
Backdrop Filter
A feature applying visual processing, such as blur, to the region visible behind an element.
Blend Mode
A setting specifying how foreground and background colors are mathematically combined.
Clip Path
A feature restricting an element's visible area to a path or basic shape.
CSS Mask
A feature controlling visibility using another image's alpha or luminance.
Box Shadow
A property drawing a shadow around an element's box.
Text Shadow
A property adding shadows following glyph shapes.
Scroll Snap
A feature encouraging scrolling to align with specified items or positions.
Scroll Margin
A property adding alignment space around a scroll target.