yope

Overview

yope is a friends-only social game that celebrates authentic moments shared every hour, designed for Gen-Z users who value real connection over curated feeds. The visual language embraces **Vibrant Maximalism**—a design movement that rejects minimalist restraint in favor of bold color gradients, energetic typography, and playful layering. The interface evokes the energy of social media stickers, mobile gaming, and contemporary youth culture, creating an environment where every interaction feels spontaneous and joyful. The brand personality is irreverent, inclusive, and unapologetically colorful: the tone is conversational and encouraging, never corporate. Example: 'Your life = daily & monthly recaps—no filters, just you and your crew.'

Colors

The color system balances a clean, light foundation (surface: #f5f5f7, on-surface: #141414) with three vibrant accent roles that drive emotional energy. Primary (#0040dd, a saturated electric blue) anchors interactive elements—buttons, links, and focus states—and conveys trust and action. Secondary (#ff2d55, a hot pink-red) is deployed on CTAs, badges, and highlights to create urgency and playfulness; it appears frequently in the hero and card imagery. Tertiary (#ffcc00, a bright golden yellow) serves as a tertiary accent for badges, tags, and celebratory moments. The error state (#ff3b30, system red) maintains Apple's semantic consistency. Surface containers layer from #e7e7e7 (lowest) through #ffffff (highest) to create depth without relying on shadows alone. All interactive states use e

Typography

The type system uses Apple's native SF Pro family across display, headline, title, body, and label scales, ensuring native iOS familiarity while maintaining web accessibility. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines; Headline-lg (40px, 700 weight) anchors major sections; Body-md (16px, 400 weight, 24px line-height) is the default reading size with generous line-height to support mobile scanning. Label-md (14px, 600 weight, 0.01em tracking) is used for buttons and interactive labels, with a minimum touch target of 48px height. All text over busy gradient backgrounds receives a text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility. Weights are strictly limited to 400 (regular), 500 (medium), 600 (semibold), and 700 (bold) to avoid rendering incon

Layout

The page uses a responsive 12-column grid with a max-width of 1280px, collapsing to single-column on mobile (< 768px). The hero section spans full-width with a 40px (lg spacing) gutter on desktop, 24px (md spacing) on tablet, and 12px (sm spacing) on mobile. Card layouts use 24px (md spacing) for internal padding and 40px (lg spacing) between sections. The left sidebar navigation occupies 260px on desktop, hidden on mobile via a hamburger menu. White-space rhythm follows the 8px unit system: section separators use 64px (xl spacing), component groups use 40px (lg spacing), and inline elements use 12px (sm spacing). Container max-width ensures readability: body text never exceeds 65 characters per line, achieved through the 1280px constraint and 24px padding.

Elevation & Depth

Depth is conveyed through a three-tier shadow system and strategic use of borders. Level 1 (Base Surface) has no shadow, appearing flush with the page background (#f5f5f7). Level 2 (Standard Cards) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px solid border at rgba(0, 0, 0, 0.1), creating subtle separation. Level 3 (Elevated/Modals) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with a 1px border at rgba(0, 0, 0, 0.15), establishing clear hierarchy. Interactive hover states increase shadow to 0 4px 12px rgba(0, 0, 0, 0.15), signaling responsiveness. The modal overlay applies a semi

Shapes

The shape language follows **Soft-Technical Modernism**: rounded corners are used strategically to soften the geometric precision of a grid-based layout without sacrificing clarity. Buttons and primary interactive elements use 10px (lg radius), creating a friendly, approachable feel while remaining distinctly digital. Cards and containers use 10px (lg radius) for consistency. Input fields and smaller components use 6px (DEFAULT radius), maintaining visual hierarchy. Badges and chips use 9999px (full radius) to signal lightweight, dismissible content. The rationale: larger radii (10px+) on prim

Components

Action Elements Buttons are the primary interaction pattern. Button-primary (background: #0040dd, height: 48px, padding: 12px 24px, rounded: 10px) is used for primary CTAs like 'Get' or 'Learn More'; on hover, the background shifts to #0035c4 with an increased shadow (0 4px 12px rgba(0, 64, 221, 0.3)), and the transition duration is 150ms ease-out. Button-secondary (transparent background, 1.5px border at #0040dd, same dimensions) is used for secondary actions; on hover, it fills with #e0e7ff (primary-container). Button-accent (background: #ff2d55) is deployed sparingly for high-energy CTAs like 'Download' or 'Join Now'. All buttons include a focus ring: 0 0 0 3px rgba(0, 64, 221, 0.2) when keyboard-focused, meeting accessibility standards.

Containers & Surfaces Cards (background:

Do's and Don'ts

**Do**

• Do use primary blue (#0040dd) on all CTAs and interactive elements to establish a consistent action language across the app.
• Do apply the 48px minimum touch target height to all buttons and interactive elements to ensure mobile accessibility.
• Do layer cards with the three-tier shadow system (0 3px 8px, 0 4px 12px, 0 8px 24px) to create clear visual hierarchy without overusing depth.
• Do maintain 24px (md spacing) gutters on desktop and 12px (sm spacing) on mobile to preserve readability and breathing room.
• Do use SF Pro typography exclusively with weights limited to 400, 500, 600, and 700 to ensure consistent rendering across platforms.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on all text overlaid on gradient backgrounds to maintain legibility.

**Don't**

• Don't use colors outside the defined palette—avoid custom hex values or system colors not listed in the color token system.
• Don't apply border-radius values smaller than 4px (sm) or larger than 16px (xl) except for full (9999px) on badges; inconsistent radii break the visual system.
• Don't use shadows with blur radius > 24px; they create visual clutter and reduce clarity on smaller screens.
• Don't set line-height below 1.4 (24px minimum for body-md) on mobile; cramped text reduces readability and accessibility.
• Don't mix font families—SF Pro is the only approved typeface; system-ui, -apple-system fallbacks are acceptable only as last-resort web-safe stacks.
• Don't apply opacity-based overlays without a corresponding backdrop-filter; flat transparency over complex backgrounds reduces contrast and legibility.