ViewCash

Overview

ViewCash is a monetization platform built on the principle of accessible earning through entertainment consumption. The design system embraces a "Vibrant Minimalism" aesthetic—bold, saturated purple (#7f6ef2) as the signature accent against a clean white canvas, creating immediate visual hierarchy and conversion focus. The brand personality is energetic yet trustworthy: optimistic about earning potential, transparent about mechanics, and respectful of user time. The UI prioritizes clarity and action, avoiding clutter while maintaining warmth through generous spacing and rounded corners. Voice example: "Watch a 30-second trailer, earn $0.50 instantly—no surveys, no waiting."

Colors

The color system is anchored by a vibrant purple primary (#7f6ef2), used exclusively for call-to-action buttons, active states, and key interactive elements. This color conveys both energy and legitimacy—essential for a monetization platform. The surface stack uses a pure white (#ffffff) base with carefully calibrated grays (surface-container-high: #dee2e6, on-surface-variant: #6c757d) to create subtle depth without visual noise. Secondary cyan (#0dcaf0) and tertiary yellow (#ffc107) serve as supporting accents for status indicators and promotional highlights. Error red (#dc3545) is reserved for validation and critical feedback. All text on primary backgrounds uses pure white (#ffffff) for maximum contrast and readability. Hover states transition primary to #6d5ce0 (darker purple) with enh

Typography

The type system pairs Montserrat (geometric, modern, weights 300–700) for headlines and labels with Open Sans (humanist, highly legible, weights 300–700) for body text. This pairing communicates professionalism while remaining approachable. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; headline-lg (40px, 600 weight) breaks major sections; body-md (16px, 400 weight, 24px line-height) ensures comfortable reading at any screen size. Labels use Montserrat 600 at 14px with 0.01em tracking to emphasize actionability. On small labels over busy backgrounds (e.g., badges on cards), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to maintain legibility. Line heights are set generously (1.5× font size minimum) to support accessibility and reduce cognitiv

Layout

The layout uses a 12-column grid system with a maximum container width of 1280px, maintaining fluidity on mobile (single column) through tablet (6-column) to desktop (12-column). The spacing scale is semantic: unit (8px) as the base increment, with md (24px) as the primary gutter between sections and lg (40px) for major section separation. Hero sections occupy 100% viewport height with a curved bottom edge (border-radius applied via SVG or CSS clip-path) to create visual momentum. Card grids use consistent 24px gaps (md spacing) with 3-column layouts on desktop, collapsing to 1 column on mobile. White space is generous—never less than 40px vertical separation between major sections—to reduce cognitive friction and emphasize content hierarchy. Container padding is 24px on tablet/mobile, 40p

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids dark overlays, maintaining the bright, accessible aesthetic. Level 1 (Base cards and inputs): 0 1px 2px rgba(0, 0, 0, 0.06)—barely perceptible, used for subtle container separation. Level 2 (Hovered cards, modals): 0 3px 8px rgba(0, 0, 0, 0.15)—moderate lift, signals interactivity. Level 3 (PWA install banner, floating CTAs): 0 12px 35px rgba(28, 14, 60, 0.22), 0 2px 6px rgba(0, 0, 0, 0.06)—pronounced depth for attention-critical elements. Primary buttons add a custom shadow (0 4px 12px rgba(127, 110, 242, 0.35)) that echoes the

Shapes

The shape philosophy is "Approachable Modernity"—rounded corners signal friendliness and reduce visual harshness, but are never organic or overly soft. Buttons use full-radius (border-radius: 50px / 9999px) to create pill-shaped CTAs that feel inviting and clickable. Cards and containers use lg (1rem / 16px) for a balanced, modern appearance. Input fields use DEFAULT (0.5rem / 8px) for subtle rounding that maintains form-like clarity. Badges and small UI elements use full-radius for visual consistency. The curved hero section bottom edge uses a 120px vertical offset to create a gentle wave wit

Components

Action Elements Buttons are the primary conversion mechanism. The button-primary component uses 44px height, 10px 32px padding, Montserrat 600 at 14px, and full-radius (50px). Background is the brand primary (#7f6ef2) with white text. On hover, the background darkens to #6d5ce0 and shadow intensifies (0 6px 16px rgba(127, 110, 242, 0.45)); on active, scale to 0.98 for tactile feedback. Transition duration is 150ms ease. Secondary buttons use transparent background with a 2px primary-colored border and the same text color, allowing for hierarchy without overwhelming the page. The "Get Started Now!" CTA in the hero uses an icon (bi-collection-play-fill) left-aligned with 8px gap to reinforce the video-watching action.

Containers & Surfaces Cards use 24px padding, 1px border (surface

Do's and Don'ts

**Do**

• Do use the primary purple (#7f6ef2) exclusively for CTAs, active states, and key interactive elements—never for decorative backgrounds or body text.
• Do maintain at least 40px vertical spacing between major sections to reduce cognitive load and emphasize content hierarchy.
• Do apply Montserrat 600 to all labels and button text; reserve Open Sans 400 for body paragraphs and descriptions.
• Do use full-radius (50px) on buttons and md-radius (12px) on cards consistently—never mix sharp and rounded corners in the same component family.
• Do elevate cards on hover with a 2px translateY and shadow increase (sm to md) over 200ms ease to signal interactivity.
• Do ensure all interactive elements have a minimum 44px touch target height on mobile for accessibility compliance.

**Don't**

• Don't use the primary purple for backgrounds, body text, or non-interactive elements—it must remain reserved for conversion-critical UI.
• Don't apply shadows darker than 0 12px 35px rgba(28, 14, 60, 0.22) or use blur filters; the system prioritizes clarity and performance.
• Don't mix Montserrat and Open Sans weights arbitrarily; follow the typography scale (display/headline/body/label) strictly.
• Don't use sharp corners (0px border-radius) on any component; all UI elements must use at least DEFAULT (8px) rounding.
• Don't reduce spacing below 24px (md) between major sections or below 12px (sm) between inline elements.
• Don't apply color overlays or gradients to the white surface—maintain the clean, accessible aesthetic by using the surface-container stack for depth.