Skip to content
Meursault
Posts
About
EN
简体中文
Search
Posts
About
EN
简体中文
Search
Glossary
Visual UI Catalog
Box Model Catalog
All
Page Structure
Navigation
UI Parts
Form
Interaction
Layout
Typography
Color & Style
Media
Dev Basics
84 terms
Page Structure
Header
Header
A foundational page-structure term that helps AI understand where each major area of a website belongs.
Page Structure
Footer
Footer
A foundational page-structure term that helps AI understand where each major area of a website belongs.
Page Structure
Sidebar
Sidebar
A foundational page-structure term that helps AI understand where each major area of a website belongs.
Page Structure
Section
Section
A foundational page-structure term that helps AI understand where each major area of a website belongs.
Page Structure
Hero Section
Hero Section
A foundational page-structure term that helps AI understand where each major area of a website belongs.
Page Structure
Container
Container
A foundational page-structure term that helps AI understand where each major area of a website belongs.
Page Structure
CTA (Call To Action)
Call To Action
A foundational page-structure term that helps AI understand where each major area of a website belongs.
Navigation
Navbar
Navigation Bar / Navbar
A navigation pattern that helps users move between pages, sections, or states.
Navigation
Hamburger Menu
Hamburger Menu
A navigation pattern that helps users move between pages, sections, or states.
Navigation
Breadcrumb
Breadcrumb
A navigation pattern that helps users move between pages, sections, or states.
Navigation
Pagination
Pagination
A navigation pattern that helps users move between pages, sections, or states.
Navigation
Tab
Tab
A navigation pattern that helps users move between pages, sections, or states.
Navigation
Anchor Link
Anchor Link
A navigation pattern that helps users move between pages, sections, or states.
UI Parts
Button
Button
A common UI part you can name directly when prompting AI to create interface components.
UI Parts
Card
Card
A common UI part you can name directly when prompting AI to create interface components.
UI Parts
Modal / Dialog
Modal / Dialog
A common UI part you can name directly when prompting AI to create interface components.
UI Parts
Dropdown
Dropdown
A common UI part you can name directly when prompting AI to create interface components.
UI Parts
Accordion
Accordion
A common UI part you can name directly when prompting AI to create interface components.
UI Parts
Tooltip
Tooltip
A common UI part you can name directly when prompting AI to create interface components.
UI Parts
Toast / Snackbar
Toast / Snackbar
A common UI part you can name directly when prompting AI to create interface components.
UI Parts
Badge
Badge
A common UI part you can name directly when prompting AI to create interface components.
UI Parts
Avatar
Avatar
A common UI part you can name directly when prompting AI to create interface components.
UI Parts
Tag / Chip
Tag / Chip
A common UI part you can name directly when prompting AI to create interface components.
UI Parts
Progress Bar
Progress Bar
A common UI part you can name directly when prompting AI to create interface components.
UI Parts
Spinner / Loading
Spinner / Loading
A common UI part you can name directly when prompting AI to create interface components.
UI Parts
Carousel / Slider
Carousel / Slider
A common UI part you can name directly when prompting AI to create interface components.
UI Parts
Divider / Separator
Divider / Separator
A common UI part you can name directly when prompting AI to create interface components.
UI Parts
Skeleton Screen
Skeleton Screen
A common UI part you can name directly when prompting AI to create interface components.
Form
Input / Text Field
Input / Text Field
A form element used to collect, select, validate, or submit user input.
Form
Textarea
Textarea
A form element used to collect, select, validate, or submit user input.
Form
Checkbox
Checkbox
A form element used to collect, select, validate, or submit user input.
Form
Radio Button
Radio Button
A form element used to collect, select, validate, or submit user input.
Form
Select
Select / Dropdown
A form element used to collect, select, validate, or submit user input.
Form
Toggle Switch
Toggle Switch
A form element used to collect, select, validate, or submit user input.
Form
Label
Label
A form element used to collect, select, validate, or submit user input.
Form
Placeholder
Placeholder
A form element used to collect, select, validate, or submit user input.
Form
Validation
Validation
A form element used to collect, select, validate, or submit user input.
Interaction
Hover
Hover
An interaction state or gesture that describes how the interface should respond to user action.
Interaction
Click / Tap
Click / Tap
An interaction state or gesture that describes how the interface should respond to user action.
Interaction
Scroll
Scroll
An interaction state or gesture that describes how the interface should respond to user action.
Interaction
Transition
Transition
An interaction state or gesture that describes how the interface should respond to user action.
Interaction
Animation
Animation
An interaction state or gesture that describes how the interface should respond to user action.
Interaction
Focus
Focus
An interaction state or gesture that describes how the interface should respond to user action.
Interaction
Drag & Drop
Drag & Drop
An interaction state or gesture that describes how the interface should respond to user action.
Interaction
Swipe
Swipe
An interaction state or gesture that describes how the interface should respond to user action.
Layout
Flexbox
Flexbox
A layout and spacing term for describing arrangement, distance, stacking, and responsive behavior.
Layout
CSS Grid
CSS Grid
A layout and spacing term for describing arrangement, distance, stacking, and responsive behavior.
Layout
Responsive Design
Responsive Design
A layout and spacing term for describing arrangement, distance, stacking, and responsive behavior.
Layout
Breakpoint
Breakpoint
A layout and spacing term for describing arrangement, distance, stacking, and responsive behavior.
Layout
Margin
Margin
A layout and spacing term for describing arrangement, distance, stacking, and responsive behavior.
Layout
Padding
Padding
A layout and spacing term for describing arrangement, distance, stacking, and responsive behavior.
Layout
Gap
Gap
A layout and spacing term for describing arrangement, distance, stacking, and responsive behavior.
Layout
z-index
z-index
A layout and spacing term for describing arrangement, distance, stacking, and responsive behavior.
Typography
Font / Font Family
Font / Font Family
A typography term that controls text style, hierarchy, spacing, and readability.
Typography
Font Size
Font Size
A typography term that controls text style, hierarchy, spacing, and readability.
Typography
Font Weight
Font Weight
A typography term that controls text style, hierarchy, spacing, and readability.
Typography
Line Height
Line Height
A typography term that controls text style, hierarchy, spacing, and readability.
Typography
Letter Spacing
Letter Spacing
A typography term that controls text style, hierarchy, spacing, and readability.
Typography
Text Align
Text Align
A typography term that controls text style, hierarchy, spacing, and readability.
Typography
Heading (h1-h6)
Heading
A typography term that controls text style, hierarchy, spacing, and readability.
Typography
Text Truncation / Ellipsis
Text Truncation / Ellipsis
A typography term that controls text style, hierarchy, spacing, and readability.
Color & Style
Background Color
Background Color
A visual styling term for color, borders, radius, shadows, opacity, and surface treatment.
Color & Style
Gradient
Gradient
A visual styling term for color, borders, radius, shadows, opacity, and surface treatment.
Color & Style
Box Shadow / Drop Shadow
Box Shadow / Drop Shadow
A visual styling term for color, borders, radius, shadows, opacity, and surface treatment.
Color & Style
Border
Border
A visual styling term for color, borders, radius, shadows, opacity, and surface treatment.
Color & Style
Border Radius
Border Radius
A visual styling term for color, borders, radius, shadows, opacity, and surface treatment.
Color & Style
Opacity
Opacity
A visual styling term for color, borders, radius, shadows, opacity, and surface treatment.
Color & Style
Backdrop Blur / Glassmorphism
Backdrop Blur / Glassmorphism
A visual styling term for color, borders, radius, shadows, opacity, and surface treatment.
Media
Image (img)
Image (img)
A media term for images, video, icons, and share-preview presentation.
Media
Video
Video
A media term for images, video, icons, and share-preview presentation.
Media
Icon
Icon
A media term for images, video, icons, and share-preview presentation.
Media
Favicon
Favicon
A media term for images, video, icons, and share-preview presentation.
Media
Open Graph Image
Open Graph Image
A media term for images, video, icons, and share-preview presentation.
Media
Object Fit
Object Fit
A media term for images, video, icons, and share-preview presentation.
Dev Basics
Component
Component
A development concept that helps AI understand frontend implementation and delivery requirements.
Dev Basics
API
API (Application Programming Interface)
A development concept that helps AI understand frontend implementation and delivery requirements.
Dev Basics
Deploy
Deploy
A development concept that helps AI understand frontend implementation and delivery requirements.
Dev Basics
npm (Node Package Manager)
npm (Node Package Manager)
A development concept that helps AI understand frontend implementation and delivery requirements.
Dev Basics
DOM
DOM (Document Object Model)
A development concept that helps AI understand frontend implementation and delivery requirements.
Dev Basics
Event
Event
A development concept that helps AI understand frontend implementation and delivery requirements.
Dev Basics
CSS Variables
CSS Custom Properties / Variables
A development concept that helps AI understand frontend implementation and delivery requirements.
Dev Basics
CSS Class
CSS Class
A development concept that helps AI understand frontend implementation and delivery requirements.
Dev Basics
Dark Mode
Dark Mode
A development concept that helps AI understand frontend implementation and delivery requirements.
Dev Basics
Accessibility (a11y)
Accessibility (a11y)
A development concept that helps AI understand frontend implementation and delivery requirements.