Design Terminology Guide
Learn the essential terms and concepts every designer should know. Hover over each card to see live examples and practical tips!
How to Use This Guide
Each term includes a clear definition, practical usage tips, and an interactive preview. Simply hover over any card to see a live example of the concept in action. Perfect for beginners and a handy reference for pros!
Navigation Bar (Navbar)
The top bar of your app containing links, logo, and menu items. Usually fixed or sticky so it stays visible when scrolling.
Dropdown Menu
A menu that appears when you hover or click a button/link. Contains additional options hidden until triggered.
Hover State
The visual change that happens when your mouse cursor is over an interactive element (button, link, etc).
Component
A reusable piece of UI code. Like a LEGO block you can use multiple times throughout your app.
Props
Short for 'properties'. Data you pass into a component to customize how it looks or behaves.
State
Data that can change over time in your app. When state changes, the UI updates automatically.
Layout
The overall structure/wrapper of your app. Usually contains navbar, footer, and wraps all pages.
Hero Section
The big, eye-catching section at the top of a page. Usually has a headline, subtitle, and call-to-action.
Call-to-Action (CTA)
A button or link that prompts users to do something (Sign Up, Learn More, Buy Now, etc).
Responsive Design
Design that adapts to different screen sizes (mobile, tablet, desktop). Looks good everywhere.
Grid Layout
A way to organize content in rows and columns. Think of it like a spreadsheet for your UI.
Flexbox
A CSS layout method for arranging items in rows or columns with flexible spacing.
Modal / Dialog
A popup window that appears on top of the main content. Requires user action to dismiss.
Tooltip
Small popup text that appears when you hover over an element. Provides helpful hints.
Card
A container with rounded corners and shadow, grouping related content together.
Gradient
A smooth transition between two or more colors. Adds depth and visual interest.
Animation / Transition
Movement or change over time. Makes UI feel alive and guides user attention.
Z-Index
Controls which elements appear on top of others. Higher number = more forward.
Padding
Space inside an element, between its content and its border.
Margin
Space outside an element, between it and other elements.
Breakpoint
A screen width where your design changes (e.g., 768px for tablets, 1024px for desktop).
API
Application Programming Interface - how your frontend talks to the backend/database.
Frontend vs Backend
Frontend = what users see (UI). Backend = server, database, logic behind the scenes.
UX (User Experience)
How easy, intuitive, and pleasant your app is to use. The overall feel.
UI (User Interface)
The visual design - buttons, colors, typography, spacing. What users see and click.
Ready to Build?
Now that you know the basics, explore our component library and start creating!
Explore Components
