VibeRaven

Overview

VibeRaven is a production-readiness intelligence platform designed for developers shipping AI-built applications. It embodies a "Technical Warmth" aesthetic—combining the precision of architectural diagrams with the approachability of a craft interface. The brand personality is confident yet collaborative: it speaks to developers as peers, offering clarity without condescension. The UI employs a warm, cream-to-tan color palette (primary #c28b2d, surface #fffdf8) anchored by a dark navigation bar (#0c0d0d), creating visual contrast that emphasizes the hero content and radar visualization. The emotional response is one of clarity and readiness: users feel equipped to ship.

The voice is direct, technical, and action-oriented. VibeRaven uses imperative language ("Map your stack," "Scan repo," "Know the next fix") and avoids marketing fluff. Vocabulary leans into developer tooling ("stack," "agent," "prompt," "production," "evidence") and nautical/radar metaphors ("Stack Radar," "Mission Map," "Cockpit"). Example sentence in brand voice: "VibeRaven reads your repo, shows the services already in use, and points your agent at the next production fix."

Colors

The color system is built on a warm, earthy foundation that conveys trust and craftsmanship. Primary (#c28b2d, a warm bronze-gold) is used exclusively for CTAs, interactive highlights, and the brand accent—it appears on the 'Download' button, hover states, and radar warning badges. The primary-container variant (#d59a39) provides a lighter, more saturated version for hover and elevated states, with a shadow treatment of 0 12px 28px rgba(194, 139, 45, 0.22) to reinforce depth. Surface colors range from cream (#fffdf8) to warm beige (#fff7df to #fff8e8), creating a subtle gradient that guides the eye without distraction. On-surface text is a near-black (#0f1419) for maximum legibility. Secondary (#61dafb, cyan) and Tertiary (#00e9a3, teal) are used sparingly for status indicators and provide

Typography

The type system uses Geist as the primary typeface, paired with JetBrains Mono for technical labels and code-adjacent content. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section breaks. Headline-lg (47px, 690 weight, -0.015em) matches the rendered H1 and conveys authority. Headline-md (32px, 600 weight) is used for section titles. Body text (16px–18px, 400 weight) maintains a generous 24–28px line-height for comfortable reading on light backgrounds. Label-md (14px, 600 weight, 0.01em tracking) is applied to navigation links, button text, and UI labels. Label-sm (12px, 500 weight, 0.05em tracking) in JetBrains Mono is used for status badges, metadata, and technical annotations. The type hierarchy emphasizes contrast: headlines use negative le

Layout

The page uses a fluid, centered layout with a max-width of 1792px (112rem), allowing content to breathe on large screens while remaining readable on mobile. The grid is 12 columns with a 24px gutter, and sections are separated by 40px (lg spacing) vertically. The hero section occupies 100dvh (full viewport height) and uses a layered background: a linear gradient (180deg, #fffdfa to #100d09), a radial gradient for warmth (circle at 50% 18%, rgba(255,255,255,0.95)), and a subtle grid overlay (54px × 54px, 4% opacity) to add texture without distraction. Container padding is 20px on mobile, 32px on tablet, and 40px on desktop. The radar visualization is centered within a card (rounded-lg, 24px padding, 1px border at outline color) and uses concentric circles and radial lines to organize stack

Elevation & Depth

Depth is conveyed through a subtle shadow and border system that avoids heavy drop-shadows. Level 1 (Base): the page background (#fffdf8) with a subtle grid overlay (opacity 0.04) and radial gradients. Level 2 (Standard Card): 24px padding, 1px solid border at outline color (#08090a1b), and box-shadow 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/CTA): box-shadow 0 12px 28px rgba(194, 139, 45, 0.22) on primary buttons, creating a warm glow that reinforces the brand accent. On hover, buttons translate up 2px (transform: translateY(-2px)) and the shadow expands to 0 16px 36px rgba(194, 139, 4

Shapes

The shape philosophy is "Architectural Softness"—combining the precision of technical interfaces with approachable, rounded corners. Buttons and primary interactive elements use rounded-full (9999px) to feel friendly and clickable, while cards and containers use rounded-lg (1rem) for a balanced, professional appearance. Input fields use rounded-md (0.375rem) for a slightly tighter, more technical feel. Radar nodes and status badges use rounded-lg (1rem) to align with card styling. The navigation bar and hero section use sharp corners (border-radius: 0) to establish a strong architectural basel

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses background #c28b2d, white text, 44px height, 12px 24px padding, rounded-full, and a warm shadow (0 12px 28px rgba(194, 139, 45, 0.22)). On hover, the background shifts to #d59a39, the element translates up 2px (transition duration 300ms), and the shadow expands to 0 16px 36px rgba(194, 139, 45, 0.28). The secondary button (button-secondary) uses a transparent background with a 1px outline border, rounded-full, and on hover shifts to surface-container-high (#fff8e8). Ghost buttons (button-ghost) are transparent with no border and shift to surface-container-low (#fffaf0) on hover. All buttons use label-md typography (14px, 600 weight) with 0.01em letter-spacing.

Containers & Surface

Do's and Don'ts

**Do**

• Do use primary (#c28b2d) exclusively for CTAs, hover states, and brand-critical interactive elements—never for body text or neutral backgrounds.
• Do apply the warm shadow (0 12px 28px rgba(194, 139, 45, 0.22)) to elevated elements like primary buttons and modals to reinforce the brand accent.
• Do use rounded-full (9999px) for all primary buttons and interactive pills to convey friendliness and approachability.
• Do maintain generous white-space: 24px between inline elements, 40px between sections, 64px before major breaks.
• Do use Geist for all body and headline text; reserve JetBrains Mono for technical labels, badges, and code-adjacent content.
• Do apply negative letter-spacing (-0.04em to -0.015em) to headlines to create visual confidence and compact hierarchy.

**Don't**

• Don't use primary (#c28b2d) for body text, backgrounds, or neutral UI elements—it should feel like an accent, not a base color.
• Don't apply heavy drop-shadows (> 0.2 opacity) to cards or containers; use subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to maintain the warm, craft aesthetic.
• Don't mix rounded-full with sharp corners on the same component; use rounded-lg for cards and rounded-full for buttons to maintain visual consistency.
• Don't use secondary (#61dafb) or tertiary (#00e9a3) as primary accent colors; reserve them for status indicators and provider icons in the radar.
• Don't reduce line-height below 24px on body text; the warm, light background requires generous vertical spacing for legibility.
• Don't apply text-shadow to large headlines; use it only on small labels (12px–14px) over busy backgrounds to ensure clarity.