Vertical index page
Suitable for fintech, task management, and developer tools where clarity and content hierarchy are prioritized over decorative elements.
Summary
A clean, functional grayscale mobile list index with a fixed header, scrollable list items featuring icons and metadata, skeleton loading states, and a centered empty state component.
Style
The style is a functional wireframe aesthetic utilizing a strict grayscale palette (#FFFFFF, #F9FAFB, #E5E7EB, #9CA3AF, #6B7280, #111827). Typography uses 'General Sans' with weights ranging from 400 to 700. Layout emphasizes spacing and subtle borders over color. Interactions include background color shifts (hover/active) and scale transforms on buttons.
Layout & Structure
A vertical stack consisting of a fixed top header, a scrollable container with sectioned list groups, skeleton placeholders, and a dedicated empty state region.
Fixed Header
Section Header
List Row Component
Loading State
Empty State
Components
Interactive Action Row
A highly reusable list row with multiple visual states based on data type.
Skeleton Pulsing Row
Placeholder for async data loading.