Stalkr

Overview

Stalkr is a social listening platform designed for startup founders and product teams who need to monitor brand, product, and competitor mentions across X, Reddit, YouTube, and LinkedIn in real time. The design aesthetic is "Minimalist Precision"—a clean, light-first interface with strategic use of bold accent colors (particularly the signature Reddit orange, #FF4500) to draw attention to actionable insights. The brand personality is direct, no-nonsense, and slightly irreverent: it speaks to scrappy founders who want to move fast and catch market signals before competitors do. The UI evokes a sense of control and clarity, transforming the chaos of social media into a focused feed of what actually matters.

The tone is conversational yet authoritative. Stalkr uses short, punchy sentences and avoids corporate jargon. Example: "Your agent watches the internet. You only hear what matters." The vocabulary is grounded in startup culture ("stalking," "mentions," "alerts") and emphasizes speed and agency. Every interaction—from the search input to the mention cards—is designed to feel responsive and lightweight, reflecting the brand's commitment to helping teams move quickly from insight to action.

Colors

The color system is built on a high-contrast, light-dominant foundation with two strategic accent colors. **Primary (#FF4500)** is the signature Reddit orange, used exclusively for call-to-action buttons ("Start stalking"), interactive highlights, and the animated hero text. This warm, energetic orange commands attention without feeling corporate, reinforcing the brand's scrappy, action-oriented personality. **Secondary (#18181B)** is a near-black zinc used for the main CTA button in the header and secondary actions, providing a professional counterweight to the primary accent. **Tertiary (#0A66C2)** is LinkedIn blue, used sparingly for platform-specific badges and social proof elements.

The surface stack uses a pure white (#FFFFFF) as the dominant background with a carefully calibrated g

Typography

The type system pairs Funnel Sans (a geometric, modern sans-serif from Google Fonts) for all body and UI text with occasional use of Fraunces (a high-contrast serif) for brand moments like the logo wordmark. Funnel Sans was chosen for its clarity at small sizes and its contemporary, tech-forward feel—it reads as efficient and trustworthy without being sterile. The hierarchy is steep: display (64px, 600 weight, -0.035em tracking) commands attention in hero sections, headline-lg (46px, 600 weight) anchors section breaks, and body-md (16px, 400 weight, 24px line-height) ensures comfortable reading for mention content. All headings use negative letter-spacing (-0.035em to -0.01em) to tighten the visual rhythm and reinforce the "precision" aesthetic. Labels and buttons use 14px at 500 weight wi

Layout

The layout uses a 12-column grid with a fixed max-width of 1200px, centered with 24px gutters on desktop and 16px on mobile. The hero section spans full width with a subtle radial gradient background (from-zinc-100/70 to-transparent, blur-3xl) that creates depth without distraction. Content sections use a 2-column split on large screens (0.95fr for text, 1.15fr for the mention feed card) with 40px gap, collapsing to single-column on tablet and mobile. Spacing follows a semantic scale: 12px (sm) for tight component spacing, 24px (md) for section padding and card internals, 40px (lg) for vertical rhythm between major sections, and 64px (xl) for hero-to-content separation. The container max-width of 1200px ensures text remains readable (line lengths ~65–75 characters) while allowing the menti

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle borders rather than layering or blur effects. **Level 1 (Base)**: The white background (#FFFFFF) with a subtle grain texture (opacity 60%) applied via a pseudo-element, creating tactile depth without visual noise. **Level 2 (Standard Cards & Inputs)**: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border at outline-variant (#9F9FA9). This shadow is tight and close, suggesting elements are just slightly lifted from the surface. **Level 3 (Modals, Elevated Cards, Hover States)**: 0 8px 24px rgba(0, 0, 0, 0.12) with the same 1px border, c

Shapes

The shape philosophy is **"Geometric Softness"**—sharp enough to feel modern and precise, soft enough to feel approachable and not sterile. Buttons use border-radius: 9999px (full pill shape) to emphasize their interactive nature and create a friendly, action-oriented appearance. Cards and containers use 1rem (16px) border-radius for a balanced, contemporary look that's neither too sharp nor too rounded. Input fields use 1rem to match cards, creating visual cohesion. The logo icon uses a 0.5rem radius on the platform badges (X, Reddit, YouTube, LinkedIn) to maintain visual hierarchy—these smal

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses #FF4500 background with white text, 12px vertical / 24px horizontal padding, 44px height, and border-radius: 9999px. On hover, the background shifts to #E63D00 (a darker orange) over 150ms. The label uses 14px Funnel Sans at 500 weight. **button-secondary** uses #18181B background with white text, 10px vertical / 20px horizontal padding, 40px height, and the same pill shape. On hover, it darkens slightly to #27272A. **button-ghost** has a transparent background with a 1px border at outline-variant, 12px padding, and on hover receives a surface-container-low background (rgba equivalent: #F4F4F5) over 150ms. All buttons include a transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth state changes

Do's and Don'ts

**Do**

• Do use #FF4500 exclusively for primary CTAs and interactive highlights—it's the brand's signature accent and should feel rare and intentional.
• Do maintain 24px padding inside cards and 40px vertical spacing between sections to preserve the generous, uncluttered aesthetic.
• Do apply negative letter-spacing (-0.035em to -0.01em) on all headings to reinforce the precision and modernity of the brand.
• Do use the full-pill button shape (border-radius: 9999px) for primary actions and reserve 1rem for secondary containers to create clear visual hierarchy.
• Do pair Funnel Sans with Fraunces only for the logo wordmark—keep body text in Funnel Sans for consistency and readability.
• Do apply the soft shadow system (0 3px 8px rgba(0, 0, 0, 0.15)) to all elevated elements and reserve the heavier shadow (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and hover states.

**Don't**

• Don't use #FF4500 for body text, backgrounds, or non-interactive elements—it should feel like a deliberate accent, not a default color.
• Don't exceed 1rem border-radius on cards or containers; the design system relies on graduated roundness to signal interactivity.
• Don't add drop shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12)—the aesthetic is minimalist and relies on subtle depth cues.
• Don't use system fonts or fallback sans-serifs in place of Funnel Sans; the geometric clarity of the typeface is core to the brand identity.
• Don't reduce padding below 12px (sm) inside components or below 24px (md) inside cards—white-space is essential to the clean, precision-focused aesthetic.
• Don't apply animations longer than 200ms or easing functions other than cubic-bezier(0.4, 0, 0.2, 1)—interactions should feel snappy and responsive, not sluggish.