BidYourApp

Overview

BidYourApp is a competitive marketplace platform for iOS app developers seeking premium placement on a live leaderboard. The design aesthetic is **Playful Clarity**—combining the energy of a real-time auction with the trustworthiness of a transparent, fair system. The UI uses a light, neutral canvas (rgb(230, 230, 230)) as the foundation, allowing vibrant blue accents (#0091fc) to command attention on interactive elements and key data points. The brand personality is direct, energetic, and slightly irreverent: it celebrates the hustle of indie developers while maintaining professional credibility. The emotional response is one of excitement tempered by clarity—users feel empowered to compete, not overwhelmed by complexity.

The voice is conversational and metric-driven. Sentences are short, active, and often include numbers or live data. Example: "Bids start at $5. Bid under the #1 price and you still land on the board—exactly where your amount ranks." The brand avoids corporate jargon, preferring direct language that respects the user's intelligence and time.

Colors

The color system is built on a **light-neutral foundation with vibrant accent hierarchy**. The primary surface is a soft gray (rgb(230, 230, 230) / #e6e6e6), chosen to reduce eye strain during extended bidding sessions while providing enough contrast for accessibility. Text on surfaces uses a deep navy (rgb(26, 46, 63) / #1a2e3f) for maximum legibility and professional tone.

**Primary accent** (#0091fc, a vivid electric blue) is the signature brand color, applied exclusively to call-to-action buttons, active input states, and the #1 rank highlight in the headline. This blue is derived from the gradient used in the primary button (linear-gradient(#39abff 0%, #0094ff 100%)), creating a cohesive, energetic feel. **Secondary accent** (#0b7100, a live green) signals real-time activity and stat

Typography

The type system pairs two distinct typefaces to create visual hierarchy and personality. **Sunghyun Sans** (weights 600–900) is the display and headline family, chosen for its geometric, modern character and strong presence at large sizes. It conveys confidence and energy—essential for a competitive platform. **Inter** (weights 400–600) serves as the body and label family, providing excellent legibility at small sizes and a neutral, professional tone.

The scale is aggressive at the top: the main headline uses 98px / 800 weight with -0.06em letter-spacing, creating a bold, commanding presence. Body text sits at 16px / 400 weight with 24px line-height (1.5), ensuring comfortable reading. Labels use 14px / 600 weight with 0.01em letter-spacing for crisp, scannable UI text. When displaying li

Layout

The layout uses a **fluid, centered-column approach** with a max-width of 900px (container-max-width), ensuring content remains scannable on all devices. The grid is 12 columns, but the primary content area (hero section, leaderboard) uses a single centered column with symmetric padding (24px on mobile, 50px on desktop). This creates a gallery-like focus on the leaderboard cards.

Whitespace is used strategically: the hero section has 60px top padding (pt-[60px]) on desktop to create breathing room, and section separators use 18px margins (mt-[18px]) to group related content. The header is sticky (position: sticky; top: 0; z-index: 30) with a semi-transparent backdrop (bg-bg/85 backdrop-blur-md), allowing users to navigate without losing context. Gutter spacing (24px) is applied consistent

Elevation & Depth

Depth is achieved through **subtle shadows and glass-morphism**, avoiding heavy drop shadows that would feel dated. The elevation system uses three levels:

**Level 1 (Base)**: No shadow. Used for the main background and body text.

**Level 2 (Standard Cards & Inputs)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Applied to leaderboard cards, input fields, and standard UI containers. This creates a soft, approachable separation from the background.

**Level 3 (Glass & Modals)**: backdrop-filter: blur(12px), background: rgba(255, 255, 255, 0.85), border: 1px solid rgba(158, 171, 181, 0.45). Use

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are generous enough to feel approachable and modern, but not so rounded as to feel childish or overly playful. This balances the competitive, serious nature of bidding with the accessible, indie-friendly brand personality.

**Button radius**: 9999px (full) for primary and secondary buttons, creating pill-shaped CTAs that are instantly recognizable and highly clickable. The large radius softens the urgency of the action.

**Card radius**: 24px (rounded.xl) for leaderboard cards and major containers, providing a modern, premium feel wit

Components

Action Elements **Button Primary** uses a vibrant blue gradient (linear-gradient(#39abff 0%, #0094ff 100%)) with inset beveled shadows (inset 0 4px 3px rgba(255, 255, 255, 0.4), inset 0 4px 4px rgba(6, 151, 255, 1))) to create a tactile, pressable appearance. Height is 48px with 12px vertical padding and 28px horizontal padding. On hover, apply brightness(1.05) filter for a 150ms transition (cubic-bezier(0.4, 0, 0.2, 1)). On active, scale to 0.99 to provide haptic-like feedback. When disabled, set opacity to 0.5 and cursor to not-allowed.

**Button Icon Soft** (the +/- bid buttons) uses a semi-transparent blue background (rgba(46, 166, 255, 0.22)) with 15px border-radius. Size is 52px on mobile, 62px on desktop. On hover, apply brightness(0.95) filter. Focus state adds a 4px ring with

Do's and Don'ts

**Do**

• Do use the primary blue (#0091fc) exclusively for primary CTAs, active states, and the #1 rank highlight—never dilute it with secondary uses.
• Do apply inset shadows (inset 0 4px 3px rgba(255, 255, 255, 0.4)) to buttons to create tactile, pressable depth without external drop shadows.
• Do pair Sunghyun (display/headlines) with Inter (body/labels) to create clear visual hierarchy and personality contrast.
• Do use glass-morphism (backdrop-filter: blur(12px), rgba(255, 255, 255, 0.85)) for floating UI elements like the header and badges to maintain the light, modern aesthetic.
• Do keep card border-radius at 24px and button radius at 9999px (full) to maintain the soft-technical balance.

**Don't**

• Don't use the primary blue on non-interactive elements or backgrounds—it must remain a signal for action.
• Don't apply heavy drop shadows (> 0.2 opacity) that would contradict the light, glass-morphic aesthetic.
• Don't mix Sunghyun and Inter weights arbitrarily; reserve Sunghyun 800 for headlines and Sunghyun 600 for subheadings only.
• Don't use border-radius smaller than 12px on interactive elements; it reduces affordance and feels cramped.
• Don't place small text (< 14px) directly on glass surfaces without a text-shadow or background treatment—it reduces readability.