Choppity

Overview

Choppity is a creator-first AI clip generation platform that transforms long-form video into viral-ready short clips through intelligent moment detection and automated formatting. The brand embodies a "Vibrant Minimalism" aesthetic—a clean, light-neutral canvas (rgb(250, 250, 248)) paired with a bold, saturated primary accent (rgb(89, 46, 255)) that commands attention on CTAs and key interactions. The UI communicates speed, precision, and creative empowerment: every interaction feels instantaneous, every surface is purposefully minimal, and every color choice reinforces the brand's core promise—turning complexity into simplicity. The emotional response is one of clarity and confidence: users feel they're using a tool built by creators, for creators, not a generic SaaS platform.

The brand voice is direct, energetic, and human. Choppity speaks in short, punchy sentences that avoid jargon—"Upload any long video or podcast and our clips AI finds 30+ viral-ready Shorts, TikToks and Reels with animated captions." The vocabulary leans into creator culture ("viral," "Shorts," "Reels," "podcasters") and emphasizes outcomes over features. Tone is optimistic without being breathless; confident without arrogance. Example sentence in brand voice: "Your hour-long podcast becomes 30 ready-to-post clips in 15 minutes—no editing skills required."

Colors

The color system is built on a light, warm-neutral foundation (surface: #fafaf8, on-surface: #353241) that prioritizes clarity and reduces cognitive load. The primary accent—a vivid, saturated purple (rgb(89, 46, 255) / #592eff)—is reserved exclusively for high-intent interactions: primary CTAs ("Generate Clips," "Get started"), active states, and brand-critical moments. This purple is never used for passive UI; it signals "click me" with unmistakable authority. Secondary and tertiary accents provide visual rhythm: the lime accent (#dfff9d, on-secondary: #353241) appears in announcement banners and celebratory moments, while the pink accent (#ff82fb) highlights premium features and special moments. The surface stack uses subtle shifts in luminosity (surface-container-lowest: #f7f7f8, surfa

Typography

The type system uses Geist exclusively—a modern, geometric sans-serif that conveys both technical precision and approachability. Display and headline levels (60px–40px) use tight negative letter-spacing (-0.04em to -0.02em) to create visual impact and reinforce the brand's confidence; body text (18px–16px) sits at 0em letter-spacing with a generous 1.5x line-height (28px) to ensure readability on light backgrounds. All headings are set in fontWeight 700 (bold), while body text defaults to 400 (regular) with 600 (semibold) reserved for labels and secondary CTAs. The hierarchy is strict: h1 elements are always headline-lg (40px, 700 weight, -0.02em spacing), h2 elements are headline-md (28px, 700 weight, -0.01em spacing), and body copy never exceeds body-lg (18px, 400 weight). On small label

Layout

The page layout follows a 12-column grid with a max-width of 1280px, centered on screen with 24px gutters on mobile and 40px on desktop. The hero section uses an asymmetric two-column split: the left column (40% width) anchors the value proposition and social proof, while the right column (60% width) contains the primary interaction zone (video URL input, file upload, and CTA). White-space is used aggressively—the surface-container-lowest background (#f7f7f8) provides breathing room, and section separations use lg spacing (40px) to create visual rhythm. Cards and input fields use md spacing (24px) for internal padding, while button padding is fixed at 16px vertical × 24px horizontal to maintain a 48px minimum touch target. The container-max-width of 1280px ensures content never feels cramp

Elevation & Depth

Depth in Choppity is achieved through subtle shadows and surface-color shifts rather than dramatic layering. The elevation system uses three levels: Level 1 (Base) is the background surface (#fafaf8) with no shadow. Level 2 (Standard Card) applies a soft, close shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and input fields, creating a gentle lift. Level 3 (Elevated/Hover) uses a multi-layer shadow (0 14px 6px rgba(126, 137, 153, 0.05), 0 8px 4px rgba(126, 137, 153, 0.18), 0 4px 4px rgba(126, 137, 153, 0.31), 0 0 2px rgba(126, 137, 153, 0.36)) to create a pronounced floating effect on card ho

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used consistently to soften the geometric precision of the interface, but never so much that the UI feels playful or childish. Buttons use a 1rem (16px) border-radius, creating a pill-like shape that feels modern and clickable. Cards use a 26px border-radius (--radius-card), which is notably generous and creates a distinctive, approachable aesthetic that differentiates Choppity from competitors. Input fields use 12px border-radius, striking a balance between softness and clarity. Badges and secondary buttons use a full border-radius

Components

Action Elements Primary buttons are the most prominent interactive element: backgroundColor rgb(89, 46, 255), textColor white, typography label-md (14px, 600 weight), rounded 16px, padding 16px 24px, height 48px, fontWeight 700. On hover, the background darkens to #440e78 with a shadow lift (0 8px 24px rgba(89, 46, 255, 0.24)) and a smooth 150ms transition. On active/pressed, the background becomes #3d0a5f with no shadow, creating tactile feedback. Secondary buttons are transparent with a 1px border in primary color, rounded to full (pill shape), padding 10px 24px, height 40px. On hover, the background fills with a subtle primary tint (rgba(89, 46, 255, 0.08)) while maintaining the border. All buttons use cursor: pointer and disable pointer-events when in a loading or disabled state.

Do's and Don'ts

**Do**

• Do use the primary purple (#592eff) exclusively on high-intent CTAs and active states—never on passive UI or backgrounds.
• Do maintain the 26px card border-radius consistently across all card components to reinforce the brand's distinctive soft-technical aesthetic.
• Do apply the multi-layer shadow (0 14px 6px rgba(126, 137, 153, 0.05), ...) on card hover to create a clear visual lift without overwhelming the interface.
• Do use Geist fontFamily exclusively across all text elements—never substitute with system fonts or serif typefaces.
• Do preserve the light, warm-neutral background (#fafaf8) as the default surface—never darken it or apply gradients without explicit brand approval.
• Do ensure all interactive elements maintain a minimum 48px height and 12px spacing between them to meet accessibility and usability standards.

**Don't**

• Don't use the primary purple (#592eff) on non-interactive elements, backgrounds, or text that isn't a CTA—it dilutes the brand's signal strength.
• Don't apply shadows darker than 0 8px 24px rgba(0, 0, 0, 0.15) on standard cards—the brand relies on subtle depth, not dramatic layering.
• Don't round button corners to less than 16px or more than 26px—the soft-technical aesthetic depends on this precise range.
• Don't mix Geist with other typefaces in the same component or section—consistency is critical to the brand's visual coherence.
• Don't use the secondary lime (#dfff9d) or tertiary pink (#ff82fb) accents on primary CTAs or high-priority interactions—reserve them for secondary moments and badges.
• Don't apply letter-spacing tighter than -0.04em on display text or looser than 0.02em on labels—the brand's typography hierarchy depends on precise spacing control.