Tweet Hunter

Overview

Tweet Hunter is a precision-engineered AI platform for X (Twitter) creators seeking rapid audience growth and monetization. Built on a **Dark-Technical aesthetic**—combining deep blacks (#0d0d0e) with electric cyan accents (#1ca1f2)—the interface conveys velocity, clarity, and data-driven confidence. The brand personality is direct, ambitious, and uncompromising: users are power-builders, not casual posters. The UI celebrates speed through sharp typography (68px display headlines in 600-weight Inter), minimal ornamentation, and a relentless focus on the primary CTA ("Try it for free"). Every interaction feels instantaneous; every surface is optimized for scanning and decision-making.

The voice is conversational yet authoritative: "Get sales, growth and new connections. Faster than what you're currently trying." Vocabulary leans into outcome-driven language ("Build," "Monetize," "Trusted by 5644+ X creators") rather than feature lists. Tone avoids hype; instead, it delivers proof through social proof (creator avatars, star ratings) and concrete value propositions. The brand assumes the user is intelligent, impatient, and results-obsessed.

Colors

The color system is built on **high-contrast dark-mode primacy** with a single, dominant accent. **Primary (#1ca1f2)** is the electric cyan used exclusively for CTAs, links, focus states, and brand moments—it commands attention against the near-black canvas and signals interactivity instantly. **Secondary (#ff7a00)** is a warm orange reserved for highlights, success states, and secondary actions; it provides warmth without competing with primary. **Tertiary (#144462)** is a deep navy used for data containers and supporting UI elements, grounding the interface in professionalism.

The **surface stack** progresses from pure black (#0d0d0e) at the base through carefully calibrated grays (#0f0f11, #141416, #1b1b1f) to create depth without lightness. **On-surface text** is off-white (#f7f8f8) f

Typography

The type system enforces a **hierarchy of urgency**: **Display (68px, 600-weight)** headlines command the hero section with -0.04em letter-spacing, creating a compressed, forward-leaning aesthetic. **Headline-lg (40px, 600-weight)** and **headline-md (28px, 600-weight)** break up content sections with consistent -0.02em tracking. **Body-lg (18px, 400-weight)** and **body-md (16px, 400-weight)** maintain 24–28px line-height for comfortable scanning; **label-md (14px, 600-weight)** and **label-sm (12px, 500-weight)** are reserved for buttons, badges, and metadata. All text uses Inter from Google Fonts (weights: 300, 400, 500, 600, 700) with `-webkit-font-smoothing: antialiased` and `-moz-osx-font-smoothing: grayscale` applied globally for crisp rendering on dark backgrounds. Apply `text-shad

Layout

The layout operates on a **12-column fluid grid** with a max-width of 1280px, centered on desktop and full-bleed on mobile (< 768px). **Gutter spacing is 24px** between columns; **section separation uses lg spacing (40px)** vertically to create breathing room between hero, features, and social proof sections. The hero section spans full-width with 64px (xl) padding top/bottom on desktop, reducing to 40px (lg) on tablet and 24px (md) on mobile. **Container padding** is consistently 24px (md) for cards and input fields, with 12px (sm) internal spacing for nested elements. The spacing scale is semantic: use **xs (4px)** for micro-interactions (icon-to-text gaps), **sm (12px)** for component internals, **md (24px)** for section gutters, and **lg (40px)** for major section breaks. This creates

Elevation & Depth

Depth is conveyed through **layered shadows and subtle borders** rather than color shifts. **Level 1 (Base)**: surface (#0d0d0e) with no shadow; used for the page background. **Level 2 (Standard Cards)**: surface-container (#141416) with `box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)` and a 1px border in outline-variant (#505050); used for feature cards, input fields, and list items. **Level 3 (Elevated/Modals)**: surface-container-high (#1b1b1f) with `box-shadow: 0px -2px 50px rgba(0, 0, 0, 0.1)` and a 1px border in outline (#818181); used for modals, popovers, and primary CTAs. Hover states on c

Shapes

The shape philosophy is **Architectural Precision**—clean, purposeful radii that signal function without ornamentation. **Buttons and primary CTAs** use `border-radius: 1rem` (16px) for a modern, approachable feel while maintaining geometric clarity. **Cards and containers** use `border-radius: 1rem` (16px) for consistency; **input fields** use `border-radius: 0.5rem` (8px) for a tighter, more technical appearance. **Badges and pills** use `border-radius: 9999px` (full) to signal secondary, non-critical information. **Dividers and borders** are always 1px solid, never rounded. This graduated a

Components

Action Elements **Button-primary** is the hero CTA: `background-color: #1ca1f2`, `color: #ffffff`, `padding: 12px 24px`, `height: 48px`, `border-radius: 1rem`, `font-weight: 600`, `font-size: 14px`. On hover, transition to `background-color: #1271b0` over 0.4s ease-in-out; on active, apply `transform: scale(0.98)` with a 134ms cubic-bezier(0.45, 0, 0.2, 1) transition. **Button-secondary** is a transparent outline variant: `background-color: transparent`, `border: 1px solid #505050`, `color: #f7f8f8`, same padding and height. On hover, fill with `background-color: #1b1b1f` and shift text to `color: #1ca1f2`.

Containers & Surfaces **Card-standard** is the default container: `background-color: #141416`, `border-radius: 1rem`, `padding: 24px`, `box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15

Do's and Don'ts

**Do**

• Do use primary (#1ca1f2) exclusively for interactive elements (buttons, links, focus states) to maintain a single, unmistakable accent.
• Do apply the full surface stack (surface-container-low through surface-container-highest) to create depth; never use pure black or pure white for UI elements.
• Do pair Inter 600-weight headlines with 400-weight body text to create clear visual hierarchy; never mix weights within a single text block.
• Do use 24px (md) gutter spacing between sections and 12px (sm) internal padding for components; this rhythm is non-negotiable.
• Do transition all interactive states (hover, focus, active) over 0.2–0.4s with ease-in-out timing; instant state changes feel broken on dark backgrounds.

**Don't**

• Don't use secondary (#ff7a00) or tertiary (#144462) as primary CTAs; they dilute the accent hierarchy and confuse users about what to click.
• Don't apply shadows larger than `0px -2px 50px rgba(0, 0, 0, 0.1)` or blur effects; the dark palette already provides sufficient depth.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii break the geometric precision.
• Don't set body text smaller than 16px or larger than 18px; readability on dark backgrounds requires generous sizing.
• Don't mix Inter with system fonts or fallbacks; always declare `font-family: Inter` with a sans-serif fallback, and ensure Google Fonts is loaded before rendering.