Promo.com

Overview

Promo.com is an AI-powered video creation platform designed for marketing teams and small-to-medium businesses who need to produce professional-quality video content at scale without specialized production skills. The brand embodies 'Energetic Pragmatism'—a design philosophy that balances vibrant, attention-grabbing visual accents (electric blue and hot pink) with clean, minimal surfaces and straightforward workflows. The UI evokes confidence and speed: users see a bright, optimistic interface that promises rapid results without overwhelming complexity. The emotional response is one of creative empowerment: 'I can make broadcast-quality videos in minutes, not weeks.' Voice: direct, encouraging, action-oriented. Promo speaks in imperatives and benefits, never jargon. Example sentence: 'Turn your Amazon listing into a video in 30 seconds—no editing skills required.'

Colors

The color system is anchored by a vibrant electric blue (#0080ff) as the primary accent, used exclusively for call-to-action buttons, interactive states, and key UI affordances. This blue conveys trust, technology, and forward momentum. Secondary accent is a hot pink (#ff4070), deployed for status badges, highlights, and secondary CTAs to inject energy and draw attention to new features or limited-time offers. Tertiary purple (#9013fe) provides a third accent for decorative elements and gradient overlays. The surface stack uses a clean white (#ffffff) as the base, with carefully calibrated grays for depth: surface-container-low (#edeef2) for subtle hover states, surface-container (#e5f2ff) for light blue tints on input backgrounds, and surface-container-highest (#bfc4cb) for disabled or re

Typography

The type system pairs Wes FY (a bold, geometric sans-serif custom font) for all display and headline layers, communicating confidence and modernity, with Proxima Nova for body text to ensure legibility at smaller sizes. Display (64px, 900 weight, -0.02em tracking) anchors hero sections with maximum visual impact. Headline-lg (48px, 700 weight) is used for section titles and major feature callouts. Headline-md (32px, 700 weight) breaks up content zones. Title-lg (24px, 600 weight) labels card headers and subsections. Body-lg and body-md (18px and 16px, 400 weight) carry descriptive copy and form labels. Label-md and label-sm (16px and 14px, 500–600 weight) are applied to buttons, badges, and navigation. All display and headline text uses 0.5px to 1px letter-spacing to enhance the geometric

Layout

The page layout uses a fixed 12-column grid with a max-width container of 1368px, centered on the viewport. The hero section spans full width with generous vertical padding (40px lg spacing top and bottom) to create breathing room around the headline and input form. Content sections use 24px (md spacing) for horizontal gutters and 40px (lg spacing) for vertical separation between major sections. The input field and primary CTA button are positioned inline within a container that uses 8px unit spacing for micro-adjustments. Cards and list items use 24px padding internally (md spacing) with 12px gaps between items (sm spacing). The grid is fluid at breakpoints but maintains consistent 24px gutters across responsive tiers. White space is treated as a design element: the hero headline sits in

Elevation & Depth

Depth is conveyed through a three-tier shadow system without glassmorphism or blur effects. Level 1 (Base/Surface): no shadow; flat white background (#ffffff) with 1px border in surface-variant (#d9dde2) for subtle definition. Level 2 (Standard Cards & Inputs): box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), applied to input fields, standard cards, and secondary CTAs. This shadow has a 8px vertical offset and 16px blur, creating a gentle lift. Level 3 (Elevated/Hover States): box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12), applied on card-hover and prominent modals. The increased blur (32px) and offse

Shapes

The shape philosophy is 'Geometric Precision with Approachability'—sharp enough to feel modern and tech-forward, rounded enough to feel friendly and accessible. Buttons use full-radius (500px border-radius) to create pill-shaped affordances that are unmistakably clickable and convey motion. Cards and containers use 10px (lg radius) for a subtle rounded corner that softens the grid without appearing organic. Input fields use full-radius (500px) to match button styling and create a cohesive input zone. Smaller UI elements like badges use 8px (md radius) for consistency. The most frequent radius

Components

Action Elements Buttons are the primary interaction primitive. The button-primary component uses #0080ff background, white text, 16px label-md typography, 13px top/11px bottom padding with 40px left/32px right padding (asymmetric to accommodate icon space), and full-radius (500px). On hover, the background shifts to #0066cc (a darker blue, -20% lightness) with a 200ms ease-in-out transition. On active/pressed state, background becomes #004d99 (even darker, -40% lightness). The button-primary always includes box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) to lift it off the surface. Button-secondary uses a white background with 1px outline in outline-variant (#969da7), 12px padding, and md radius (8px). On hover, the background fills with surface-container-low (#edeef2). Secondary buttons nev

Do's and Don'ts

**Do**

• Do use primary blue (#0080ff) exclusively on primary CTAs and interactive focus states to create a consistent 'click me' signal across the product.
• Do apply full-radius (500px) to all buttons and input fields to create a cohesive, recognizable input zone that users intuitively understand as interactive.
• Do maintain 24px (md spacing) as the default padding inside cards and containers; use 12px (sm spacing) only for compact lists or nested elements.
• Do transition all hover and focus states over 200ms with ease-in-out timing to feel responsive without appearing abrupt or laggy.
• Do use Wes FY for all headlines and display text to reinforce the brand's confident, geometric personality; reserve Proxima Nova for body copy only.
• Do layer shadows using the three-tier system (none, 0 8px 16px, 0 16px 32px) to create clear visual hierarchy without overusing elevation.

**Don't**

• Don't use secondary pink (#ff4070) on primary buttons or main CTAs; reserve it for badges, secondary actions, and accent highlights to avoid visual confusion.
• Don't apply rounded corners smaller than 4px (DEFAULT) or larger than 10px (lg) to standard UI components; these extremes break the geometric precision of the system.
• Don't use shadows with blur values below 8px or above 32px; the three-tier system (8px, 16px, 32px) is calibrated for this specific surface stack.
• Don't mix Wes FY and Proxima Nova weights arbitrarily; use Wes FY at 700+ weight for headlines and Proxima Nova at 400 weight for body to maintain legibility hierarchy.
• Don't apply text-shadow to body text or large headlines; reserve it only for small labels (label-sm) over colored backgrounds where contrast is at risk.
• Don't exceed 1368px container max-width even on ultra-wide displays; the layout is optimized for this constraint and wider layouts dilute the visual hierarchy.