imgMotion

Overview

imgMotion is a dark-mode-first AI video sharing platform that celebrates creative expression through a high-contrast, minimalist aesthetic. The brand embodies 'Stark Minimalism'—a design philosophy that strips away visual noise to focus user attention entirely on video content. The interface uses pure black (#000000) as the dominant canvas, pure white (#ffffff) as the primary accent for CTAs and text, and electric blue (#3b82f6) as a secondary accent for interactive states and highlights. This creates an energetic yet focused digital environment where AI-generated videos become the undisputed visual centerpiece. The emotional response is one of clarity, modernity, and creative empowerment: users feel they are entering a professional, cutting-edge platform designed for digital artists and creators.

The brand voice is direct, confident, and forward-thinking. Vocabulary emphasizes creative freedom ('Free Expression', 'Digital Artist', 'Stunning AI-created videos') without breathlessness or hype. Tone is conversational but precise—never flowery, always purposeful. Example sentence in brand voice: 'Discover stunning AI-created videos generated with the latest AI Gen Models. A new era of digital artist are waiting inside.'

Colors

The color system is built on a high-contrast dark foundation optimized for video content and extended viewing sessions. Primary (#ffffff) is the signature accent—used exclusively on call-to-action buttons ('Sign Up', 'Start Sharing'), primary navigation text, and the main headline. It commands attention through contrast against the black background (rgb(0, 0, 0)). Secondary (#3b82f6, a vivid electric blue) supports interactive states, focus rings, and secondary CTAs like 'Learn More'; it provides visual feedback without competing with the primary white. Tertiary (#a855f7, a vibrant purple) is reserved for badges, status indicators, and accent highlights in secondary UI surfaces. The surface stack descends from pure black (#000000) through carefully calibrated grays: surface-container (#1a1

Typography

The type system uses a single system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, etc.) to ensure consistent rendering across all platforms and devices. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and major page titles with maximum visual impact; headline-lg (40px, 600 weight, -0.02em) is used for section headers like 'Featured Creations'; headline-md (28px, 600 weight) for subsection titles; body-lg (18px, 400 weight) for hero copy and long-form descriptions; body-md (16px, 400 weight) for standard paragraph text; label-md (14px, 600 weight, 0.01em letter-spacing) for button text and interactive labels; label-sm (12px, 500 weight, 0.02em letter-spacing) for badges and micro-text. The hierarchy is built on weight contrast (700 → 600 → 400

Layout

The page uses a fluid 12-column grid system with a max-width container of 1280px (max-w-7xl in Tailwind) centered on the viewport. The hero section spans full width with centered text alignment and 24px horizontal padding (gutter) on mobile, expanding to 40px (lg spacing) on desktop. Featured Creations grid uses responsive column counts: 2 columns on mobile (sm), 3 on tablet, 4 on md breakpoints, 5 on lg, and 6 on xl—each video thumbnail maintains a 9/16 aspect ratio with 16px gap between items (md spacing). Section separation uses 40px vertical spacing (lg) between major blocks; internal component spacing uses 24px (md) for card padding and 12px (sm) for list items. The container max-width of 1280px ensures content remains scannable on ultra-wide displays while maintaining visual focus. W

Elevation & Depth

Depth is conveyed through a flat, high-contrast aesthetic rather than traditional shadows. The base layer (Level 1) is pure black (#000000) with subtle radial gradients (radial-gradient(ellipse_at_top, rgba(255, 255, 255, 0.05) via transparent to transparent)) to suggest atmospheric depth without visual clutter. Cards and panels (Level 2) sit at surface-container (#1a1a1a) with a 1px solid border at rgba(255, 255, 255, 0.2) to define edges crisply. Hover states elevate to surface-container-high (#2a2a2a) with a transition of 200ms ease-out, creating a subtle lift effect. Modals and dropdowns (

Shapes

The shape philosophy is 'Soft-Technical'—combining sharp, architectural precision with subtle human warmth. Buttons and primary CTAs use rounded-full (border-radius: 9999px) to signal friendliness and approachability while maintaining a modern, tech-forward aesthetic. Cards and panels use rounded-lg (1rem / 16px) for a balanced, professional appearance; video thumbnails use rounded-lg as well to create visual consistency across content containers. Input fields and smaller interactive elements use rounded-DEFAULT (0.5rem / 8px) for a tighter, more technical feel. Badges and micro-components use

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses background: {colors.primary} (rgb(255, 255, 255)), text-color: {colors.on-primary} (rgb(0, 0, 0)), border-radius: 9999px, padding: 12px 32px, height: 48px, and font-weight: 600. On hover, transition to button-primary-hover with background: {colors.primary-container} (rgb(229, 229, 229)) over 200ms ease-out. The button-secondary variant uses background: rgba(255, 255, 255, 0.1), border: 1px solid rgba(255, 255, 255, 0.2), text-color: {colors.primary}, and the same padding and height; on hover, background transitions to rgba(255, 255, 255, 0.2) over 200ms. All buttons must include transition: background-color 200ms ease-out, color 200ms ease-out to signal interactivity.

Containers & Surf

Do's and Don'ts

**Do**

• Do use pure white (#ffffff) exclusively for primary CTAs and main headlines to maximize contrast and draw attention to conversion points.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) to signal responsiveness without feeling sluggish.
• Do maintain the 9/16 aspect ratio for all video thumbnails and use the glassmorphic overlay (backdrop-filter: blur(4px), rgba(0, 0, 0, 0.4)) on hover to preview content without obscuring it.
• Do use the 8px spacing unit system consistently (4px, 12px, 24px, 40px, 64px) to create visual rhythm and predictability across all breakpoints.
• Do apply border-radius: 9999px to all primary buttons and badges to signal friendliness and reduce friction for key interactions.

**Don't**

• Don't use shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.12) or apply multiple layered shadows; the stark aesthetic relies on color and borders, not shadow depth.
• Don't mix rounded-full (9999px) with rounded-lg (1rem) on the same component type; reserve full-rounded for buttons and badges, 1rem for cards and panels.
• Don't apply text-shadow to body-md or larger text; reserve text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) only for label-sm and label-md overlaid on busy backgrounds.
• Don't use secondary (#3b82f6) or tertiary (#a855f7) as background colors for large surface areas; reserve them for accents, focus rings, and interactive highlights only.
• Don't exceed 200ms for transition durations on interactive elements; faster transitions (150ms) feel snappier, slower ones (300ms) feel sluggish in a high-contrast interface.