UI/UX Element Catalogue • Complete Edition • Vol. II + III + New • 2025
THE
INTERFACE
REVIEW
The complete design system reference — every component you need, nothing you don't.
Complete Edition — 61 Sections61
Sections
250+
Components
19
New Additions
8
Categories
01Color SystemSwatches · Semantic · Tones
Primary palette
Ink
#0a0a0a
Charcoal
#3a3a3a
Mid
#888888
Rule
#d0cdc6
Paper
#f7f5f0
White
#ffffff
Semantic colors
Success
#1b8a4c
Warning
#b07d00
Danger
#c0392b
Info
#1565c0
Purple
#7b1fa2
Orange
#e65100
Gray tone scale — hover to expand
02TypographyScale · Specimens
Type scale
The Interface Review
Component Catalogue
Design Foundations
Section Heading
Good typography is invisible. It serves the content, guiding the reader's eye through hierarchy without announcing itself.
const interface = new CatalogueReview();
Component label · metadata · timestamps
03Spacing & Grid4px base · 12-col
Spacing scale — 4px base
12-column grid
12
6
6
4
4
4
3
3
3
3
8
4
04Elevation & Shadow5 levels
Shadow depth scale
noneFlat
1pxxs
2pxsm
4pxmd
8pxlg
12pxxl
05Icon System32 icons · 4 sizes
Icon grid — click to copy name
Size variants
06Motion TokensEasing · Duration
Easing curves — hover to preview
ease-incubic-bezier(.4,0,1,1)
ease-outcubic-bezier(0,0,.2,1)
ease-in-outcubic-bezier(.4,0,.2,1)
springcubic-bezier(.34,1.56,.64,1)
linearlinear
Duration scale
100ms
instant
instant
150ms
micro
micro
200ms
fast
fast
300ms
base
base
500ms
slow
slow
800ms
deliberate
deliberate
07Responsive Breakpointsxs · sm · md · lg · xl
Breakpoint reference
| Token | Range | Device | Grid |
|---|---|---|---|
| xs | 0 – 479px | Small phone | 4 col |
| sm | 480 – 767px | Large phone | 4 col |
| md | 768 – 1023px | Tablet | 8 col |
| lg | 1024 – 1279px | Small desktop | 12 col |
| xl | 1280 – 1535px | Desktop | 12 col |
| 2xl | 1536px + | Large display | 12 col |
Visual scale
08Accessibility TokensFocus · Contrast · ARIA
Focus ring styles — click to focus
Contrast ratios (WCAG 2.1)
| Pair | Ratio | AA Normal | AAA |
|---|---|---|---|
| Ink on Paper | 17.4:1 | Pass | Pass |
| Charcoal on Paper | 9.8:1 | Pass | Pass |
| Mid on Paper | 3.5:1 | Fail | Fail |
| Success on Paper | 4.5:1 | Pass | Fail |
Common ARIA patterns
role="button" aria-expanded aria-label aria-live="polite" aria-describedby tabindex="0"
09Dark Mode ThemeFull dark palette
Light → Dark mapping
Paper →#1A1A1A
White →#242424
Ink →#E8E5DE
Rule →#3A3A3A
Dark mode card preview
Dark Mode Card
Content renders with inverted colors
Nested surface element
Uses elevated dark surface #242424
10Buttons12 variants
Style variants
Semantic
Sizes
Loading & states
Button group
11Form InputsStates · Types
Text fields
@
This field is required.
Search & more
12Selection ControlsCheckbox · Radio · Toggle
Checkboxes
Radio buttons
Toggles
Notifications
Dark mode
Auto-save
13Multi-select & ComboboxSearchable · Tags
Multi-select with tags
React ×
Vue ×
Svelte ×
Search...
14Chip InputTag input · Autocomplete
Chip input with removable tags
Design ×Engineering ×Product ×AI/ML ×
15OTP / Verification CodeSegmented · Auto-advance
Enter the 6-digit code sent to your email
Auto-advances on input · Supports paste of full code
16Password Strength MeterVisual feedback
Type to see strength indicator
Enter a password
17Date PickerCalendar · Range
Calendar
‹
March 2025
›
Su
Mo
Tu
We
Th
Fr
Sa
Date inputs
18Rating SystemStars · Interactive
Interactive star rating
Rating breakdown
19Badges & TagsStatus · Labels
Badges
DefaultFilledActivePendingErrorInfo✓ Verified
Tags / chips
Design×Engineering×Product×AI/ML×Research×
20Cards4 variants
Card catalogue
Standard
Surface card
White bg with subtle border. Hover elevates.
Highlight
Accented card
Thick left border for priority content.
Inverted
Dark variant
Ink background for visual contrast.
+
Add new
21AvatarsSizes · Status · Stack
Sizes & status dots
SS
SS
SS
SS
KJ
AY
Stacked group
SS
KJ
AY
+5
22Alerts & ToastsInline · Toast
Inline alerts
Information
Session expires in 10 minutes.Success
Changes saved successfully.Warning
Disk usage exceeds 80%.Error
Authentication failed.Toasts
Saved×
Processing×
Failed×
23Loading States5 patterns
Animated loaders
Spinner
Dots
Bar
Pulse
Skeleton screens
24Progress & SlidersBars · Range
Progress bars
Range sliders
Volume72
Opacity40%
25Tooltip VariantsTop · Bottom · Left · Right
Hover to see tooltips
Top
Tooltip above
Bottom
Tooltip below
Left
Tooltip left
Right
Tooltip right
26Skeleton Loading StatesCard · Table · Profile
Card skeleton
Table skeleton
Profile skeleton
27Notification Dots & BadgesCount badges on icons
Icon badges & avatar status
🔔
3
With badge
🔔
No badge
SS
Online
KJ
Busy
28Carousel / SliderNavigation · Dots
Content carousel
‹
›
29Stat Cards / KPI CardsBig number · Trend
Total Users
24,891
↑ +12.5%
Revenue
$48.2K
↑ +8.3%
Bounce Rate
32.1%
↓ -2.4%
Avg Session
4m 22s
↑ +0.8%
30Empty StatesZero data · CTAs
📭
No messages
Your inbox is empty.
🔍
No results
Try different keywords.
⚠
Access denied
Contact your admin.
31Error Pages404 · 500 · 403
404
Page not found
The page doesn't exist or was moved.
500
Server error
Something went wrong on our end.
403
Forbidden
No permission to access this resource.
32Navbar & SidebarDesktop · Mobile · Sidebar
Desktop navbar
Sidebar navigation
33Tabs & BreadcrumbTabs · Breadcrumb · Pagination
Tabs & breadcrumb
Overview summary.
Breadcrumb
Pagination
←
1
2
3
…
12
→
34Stepper & DropdownMulti-step · Dropdown · Dividers
Stepper
✓
Account
✓
Profile
3
Plan
4
Review
Dividers
or continue with
Dropdown
Select option▼
35Bottom Tab BarMobile navigation
Mobile bottom navigation
36Collapsible SidebarExpanded · Collapsed
Expanded vs collapsed sidebar
37Command Palette⌈K overlay
⌈K command overlay
38ModalsDialog pattern
Modal dialog
×
Confirm Action
This action cannot be undone. Are you sure you want to delete this item?
39Popover & Context MenuTrigger · Right-click
Popover
User options ▾
Context menu (right-click)
Right-click here
40Floating Action ButtonFAB · Speed dial
Standard FAB
Speed dial (click FAB)
Edit
Upload
41Snackbar & Bottom SheetMobile patterns
Snackbar
Bottom sheet
Content behind
Share
Copy link
Download
Delete
42Cookie & Consent BannerBottom bar
Cookie consent
43Data TableSort · Filter · Status
Interactive table
| Name ⇵ | Role | Joined ⇵ | Status | Actions |
|---|---|---|---|---|
| Shashank S. | AI Engineer | Jan 2025 | Active | |
| Aarav Mehta | Product Designer | Mar 2025 | Pending | |
| Priya Iyer | Backend Dev | Nov 2024 | Active | |
| Kiran Joshi | Data Scientist | Feb 2025 | Inactive |
44ChartsBar · Line · Donut
Bar chart
Line chart
Donut chart
45Data FiltersMulti-select · Search
Filter bar
Active: Engineering · 24 of 48 items
46Search ResultsQuery highlights
Search results for "design system"
24 results
Color System — Design Tokens
catalogue/foundations/color
Primary palette, semantic colors, and gray scale for consistent design system components.
Button Components — Variants
catalogue/inputs/buttons
12 button variants including primary, ghost, filled for the design system.
47Timeline & Activity FeedVertical log
Event timeline
Today, 09:41
Catalogue published
Vol. III released with 20 new sections.
Yesterday, 14:22
Code review approved
All components merged into main.
Mar 28, 11:05
Design review flagged
Spacing inconsistencies noted.
Mar 25
Project kickoff
Scope and timeline confirmed.
Activity feed
SS
Shashank pushed 3 commits to
main2 min ago
AY
Aarav opened issue #42
14 min ago
KJ
Kiran closed PR #38
1 hr ago
48Activity Feed & ChangelogEvent log · Version history
Changelog
v3.0.0 · Mar 31, 2025
Complete Edition Release
Merged Vol. II + III with 19 new components. 61 total sections.
v2.1.0 · Mar 15, 2025
Vol. III Released
20 new sections including command palette, chat, pricing.
v2.0.0 · Mar 1, 2025
Vol. II Expanded
22 sections covering foundations through complex patterns.
49Form PatternsLogin · Signup · Settings
Login form
Welcome back
Sign in to your account
or
Sign up form
Create account
Get started for free
Use letters, numbers & symbols
Settings form
Email notifications
Receive updates via email
Two-factor auth
Add extra security
Public profile
Visible to others
Dark mode
Use dark theme
50Settings & PreferencesToggle rows · Panels
Preference panel
Notification Preferences
Push notifications
Alerts on your device
Email digest
Weekly summary email
Sound effects
Play sounds for actions
Marketing emails
Product updates and offers
Analytics tracking
Help improve the product
51Onboarding & SpotlightCoach marks
Feature spotlight with coach mark
Dashboard
Analytics
Settings
Main content area
New: Analytics
Get detailed insights on component usage and performance.
52Pricing TableFree · Pro · Enterprise
Plan comparison
Starter
Free
forever
For personal projects.
✓5 projects
✓Basic components
✓Community support
✗Custom tokens
Most popular
Pro
₹999
per month
For professionals.
✓Unlimited projects
✓All 80+ components
✓Custom tokens
✓Team collab
Enterprise
Custom
contact us
For scale and compliance.
✓Everything in Pro
✓SSO & SAML
✓99.9% SLA
✓Dedicated support
53Notification CenterBell · Feed
Bell trigger
🔔
3
With badge
🔔
No badge
Notification panel
Notifications
SS
Aarav commented on your component.
2 min ago
KJ
Kiran assigned a task to you.
18 min ago
AY
Your export is ready.
1 hour ago
54AccordionCollapsible panels
FAQ accordion
What is a design system? ▼
A design system is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications.
Why use component catalogues? ▼
They improve consistency, speed up development, and serve as living documentation for teams.
How to maintain a design system? ▼
Treat it like a product — version it, document changes, assign ownership, and audit regularly.
55Drag & DropUpload · Sortable
File upload zone
Drop files here or click to browse
PNG, JPG, PDF up to 10MB
design-system.pdf2.4 MB×
logo-v3.png840 KB×
Sortable list
⠿Design tokens & variables
⠿Component architecture
⠿Accessibility guidelines
⠿Motion & animation
Drag to reorder
56Kanban Board4-column board
Project board
To Do3
Design token audit
Review all tokens for consistency.Mobile nav patterns
Document bottom tab bar variants.In Progress2
Component catalogue v3
Building complete edition.Review1
Accordion component
Animated collapsible panels.Done2
Button variants
All 12 variants complete.Color system
Palette + semantics done.57Code Block & SyntaxHighlighting · Line numbers
Syntax-highlighted code
TypeScript
1interface Component { 2 id: string; 3 name: string; 4 variant: 'primary' | 'ghost'; 5} 6 7// Factory function 8const createComponent = ( 9 props: Component 10): HTMLElement => { 11 const el = document.createElement('div'); 12 return el; 13};
58Rich Text EditorWYSIWYG toolbar
Editor
This is an editable rich text field. Try selecting text and applying formatting.
59Image Gallery & LightboxGrid · Lightbox
Masonry gallery — click to open
60Chat ThreadMessages · Typing
Message thread
KJ
Kiran Joshi
● Online
61File TreeNested · Collapsible
File explorer
Selected file preview
No file selected
Click a file in the tree to preview its info here.