62 lines
5.0 KiB
Markdown
62 lines
5.0 KiB
Markdown
# Vibely design preview
|
|
|
|
**Personality:** Solar Kinetic Social
|
|
|
|
Warm sunlit editorial geometry meets crisp, instantaneous feed clarity for expressive micro-connections.
|
|
|
|
**Design read:** Reading Vibely as a vibrant, community-focused social updates network that prioritizes authentic human momentum over algorithmic noise. It needs warm editorial structure, clean spatial hierarchy, and immediate tactile responsiveness for micro-interactions like photo publishing, chronological scrolling, and real-time social reactions.
|
|
|
|
## Taste dials
|
|
- Design variance: 6/10
|
|
- Motion intensity: 5/10
|
|
- Visual density: 4/10
|
|
|
|
## System
|
|
- Direction: An approachable editorial-social direction anchored by warm chalk surfaces, deep cobalt typography, crisp border boundaries, and vivid terracotta accents. Avoid dark synthwave glows and generic floating cards in favor of a cohesive, structured timeline flow.
|
|
- Default mode: light
|
|
- Display font: Sora, sans-serif
|
|
- Body font: Plus Jakarta Sans, sans-serif
|
|
- Landing composition: An asymmetric two-column split screen pairing an editorial pitch and M-Auth button on the left with a cascading live preview feed of photo posts on the right.
|
|
|
|
## Surfaces
|
|
|
|
### landing
|
|
Navigation: Header navigation bar with brand logo, feature quick links, and a primary elevated M-Auth login trigger button.
|
|
- Public Landing Page (/landing): Introduce Vibely's chronological social updates network and convert visitors via M-Auth sign in.
|
|
- hero-section: asymmetric-editorial-split - Warm chalk background, deep cobalt headings, terracotta badge highlighting chronological feature.
|
|
- feed-philosophy-section: single-column-centered-feed - Crisp white cards bounded by thin zinc border rules and generous vertical whitespace.
|
|
- creator-discovery-section: two-column-sticky-sidebar - Light neutral gray surface with terracotta pill badges for trending accounts.
|
|
- notifications-and-reactions-section: masonry-discovery-grid - White card container layout with status alerts using success and accent color indicators.
|
|
- cta-footer-banner: single-column-centered-feed - Deep cobalt primary background with crisp white typography and high-contrast terracotta primary button.
|
|
|
|
### application
|
|
Navigation: responsive-sidebar-and-bottom-tabs
|
|
- Home Feed & Post Composer (/app): Browse chronological social updates from followed accounts, post text and photo updates, and engage through instant likes and comments.
|
|
- post-composer-and-filters: single-column-centered-feed - White surface container with warm border definition and high-contrast publish button.
|
|
- chronological-feed-stream: single-column-centered-feed - Bordered white feed cards with explicit divider lines and terracotta active like state.
|
|
- Search & Creator Discovery (/app/search): Search creators and post updates by keyword, with social follow management.
|
|
- search-input-section: single-column-centered-feed - Clean elevated surface header with clear border stroke.
|
|
- search-results-list: single-column-centered-feed - Bordered white container cards with generous text spacing.
|
|
- Profile & Connections (/app/profile): View personal profile details, inspect follower/following connections, and manage user posts.
|
|
- profile-header-summary: asymmetric-editorial-split - Warm white hero card with subtle border framing.
|
|
- user-posts-timeline: single-column-centered-feed - Clean white post containers separated by divider rules.
|
|
- Notification Center (/app/notifications): Track social activity including likes, comments on user posts, and new followers.
|
|
- notification-feed-list: single-column-centered-feed - Unread items highlighted with soft surface background tint and accent dot.
|
|
- Account Settings (/app/settings): Manage account profile details and personal display preferences.
|
|
- settings-options-form: single-column-centered-feed - Clean white form cards with crisp dividing lines.
|
|
|
|
### admin
|
|
Navigation: top-bar-and-sticky-sidebar
|
|
- System Operations & Audit Dashboard (/admin): Provide platform operators with system health metrics, token authentication access, and global user management tools.
|
|
- admin-auth-header: single-column-centered-feed - Crisp white top panel bounded by warm border rules with terracotta accent triggers
|
|
- system-metrics-summary: asymmetric-editorial-split - Three high-contrast cards with Sora bold display figures and subtle cobalt borders
|
|
- user-directory-table-section: two-column-sticky-sidebar - Dense structured tabular surface with crisp inner divider lines and alternating row tinting
|
|
|
|
## Generated image placements
|
|
- landing-01-hero-section: landing /landing / hero-section
|
|
- landing-02-feed-philosophy-section: landing /landing / feed-philosophy-section
|
|
- landing-03-creator-discovery-section: landing /landing / creator-discovery-section
|
|
- landing-04-notifications-and-reactions-section: landing /landing / notifications-and-reactions-section
|
|
- application-01-post-composer-and-filters: application /app / post-composer-and-filters
|
|
- application-02-chronological-feed-stream: application /app / chronological-feed-stream
|
|
- admin-01-admin-auth-header: admin /admin / admin-auth-header |