PitchPerfect Mobile Portfolio
PitchPerfect is a high-energy, dark-themed mobile UI design system specifically crafted for video creators, sports portfolios, and media-heavy entertainment apps. It features a bold, athletic aesthetic characterized by high-contrast red accents (#DC2626), deep slate backgrounds (#020617), and aggressive uppercase typography using Cabinet Grotesk and Satoshi. The layout utilizes a bento-style video grid, a featured hero card with gold gradient text (#FDE047 to #EAB308), and a unique bottom tab navigation with a floating, rotated action button. It is optimized for mobile engagement with tactile micro-interactions and a sleek, modern professional look.
Summary
A bold, athletic mobile portfolio style guide for video-centric applications, utilizing a deep slate-950 dark mode, vibrant red accents, and heavy editorial typography to create a high-impact professional aesthetic.
Style
The style is 'Aggressive Editorial'. Typography combines Cabinet Grotesk (Weights: 700, 800, 900) for headers with Satoshi (Weights: 400, 500, 700) for body text. The primary color palette is Slate-950 (#020617) for backgrounds, Red-600 (#DC2626) for primary actions, and a gold text gradient (135deg, #FDE047, #EAB308). Spacing is tight (tracking-tighter) to enhance the athletic feel. UI elements feature large border-radii (up to 2.5rem) and subtle white borders (border-white/5) for depth.
Layout & Structure
A vertical-scrolling mobile layout with a fixed header and bottom navigation. Content is organized into semantic sections: Profile Overview, Hero/Featured content, Horizontal Category Filter, and a 2-column Video Grid.
Header
Creator Profile Section
Hero Featured Card
Category Filter
Video Grid
CTA / Fan Club Section
Bottom Navigation Bar
Components
Rotated Action Button
A high-visibility floating action button located in the center of the tab bar.
Gold Gradient Header
Selective emphasis on headings for premium feel.