# 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