Kru Profile - Unified Glassmorphism
Premium glassmorphic mobile profile interface featuring high-transparency UI components, soft pastel gradients, and editorial typography. Designed for high-end lifestyle apps, travel platforms, and social networking, the style leverages heavy backdrop blurs (20px-24px), subtle white borders (rgba 255,255,255, 0.4), and a sophisticated pairing of Archivo Black and Manrope. Key elements include a floating navigation bar, negative-margin content containers, and spring-based micro-interactions. Suitable for mobile-first SaaS, fintech personal dashboards, or modern social media profiles that require a unified, glassy aesthetic with a clean, airy feel.
Summary
A sophisticated mobile profile UI characterized by a 'Unified Glassmorphism' theme. It uses multi-layered transparency, a pastel tritone gradient background, and a combination of bold sans-serif headlines and functional body text. The layout is vertically structured with a hero image header and floating interactive elements.
Style
The style essence is 'Modern Glass'. It utilizes two main levels of transparency: a high-opacity glass (65%) for primary controls and a low-opacity glass (25%) for decorative or secondary elements. Typography pairs Archivo (weights 700-800 for headings) with Manrope (weights 400-600 for body). The color palette is built on a pastel background gradient (#f0f4ff to #fdf2f8 to #f0fdf4) with high-contrast text (#0f172a) and vibrant accent colors (Blue-500, Emerald-500, Rose-500). Animations utilize a signature 'spring' curve: cubic-bezier(0.175, 0.885, 0.32, 1.275).
Layout & Structure
A single-column mobile layout featuring a full-bleed hero banner with an overlapping content card system. The navigation is detached and floats at the bottom of the viewport.
Hero Banner
Insights Dashboard
Horizontal Scroll Tags
Settings Menu
Floating Bottom Nav
Components
Spring-Loaded Stats Cards
High-transparency interactive stats grid
Glass Floating Navigation
Detached, high-blur navigation bar