JPG Store

Overview

JPG Store is the largest NFT marketplace on Cardano, serving a global community of digital artists, collectors, and creators. The design system embodies a philosophy of "Vibrant Clarity"—combining a light, accessible interface with strategic bursts of color (primary blue #3f83f8, secondary yellow #ffdb24, and tertiary green #0e9f6e) to create visual hierarchy and guide user intent. The aesthetic is contemporary and approachable, avoiding dark-mode heaviness in favor of a bright, optimistic canvas that celebrates the artwork and collections at the platform's core. The UI evokes confidence and transparency, essential for a financial marketplace where trust and clarity are paramount.

The brand voice is direct, encouraging, and community-focused. JPG Store speaks to users as peers in a shared creative economy—never condescending, always action-oriented. Vocabulary emphasizes ownership ("your collection," "your assets"), discovery ("explore," "trending"), and empowerment ("connect," "create"). Example sentence in brand voice: "Connect your wallet and discover the next generation of Cardano creators—your collection starts here."

Colors

The color system is rooted in a light, neutral foundation (surface #f9fafb, on-surface #1f2a37) that ensures legibility and accessibility across all content. The primary role is fulfilled by a vibrant blue (#3f83f8) used for interactive elements, CTAs, and data visualization; it conveys trust and energy without overwhelming. The secondary accent is a bold yellow (#ffdb24), reserved for high-priority actions ("Connect Wallet", "View Collection") and alerts—its warmth creates urgency and draws attention. The tertiary green (#0e9f6e) supports success states, positive metrics, and confirmations, reinforcing the platform's optimistic tone.

Surface stack follows Material 3 conventions: surface-container-low (#f3f4f6) for subtle backgrounds, surface-container (#e5e7eb) for elevated cards, and su

Typography

The type system uses Lexend as the primary font family, a geometric sans-serif that conveys modernity and approachability. The hierarchy spans from display (60px, 700 weight) for hero moments down to label-sm (12px, 500 weight) for metadata and badges. Headlines (headline-lg at 40px, headline-md at 28px) are set in 600 weight to establish visual dominance without excessive heaviness; body text (16px–18px, 400 weight) maintains legibility at all scales with 24px line-height. Letter-spacing is conservative (–0.04em for display, –0.02em for headlines) to create visual tightness that feels premium, while body text uses 0em spacing for neutral readability.

When displaying collection names or trending labels over imagery, apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) to ensure contrast. For s

Layout

The layout system uses a 12-column grid with a max-width of 1440px, providing flexibility for both desktop and tablet experiences. The gutter is consistently 24px, creating breathing room between sections without excessive whitespace. Container padding follows the spacing scale: 24px (md) for standard sections, 40px (lg) for hero and feature areas, and 64px (xl) for page-level margins on ultra-wide displays.

Whitespace is used strategically to separate concerns: featured collections are isolated with lg spacing (40px), while related items within a card use sm spacing (12px). The grid accommodates 2-column layouts for collection cards on desktop, collapsing to single-column on mobile. Section rhythm is established through consistent use of md spacing (24px) between headline and content, an

Elevation & Depth

Depth in JPG Store is conveyed through subtle shadows and layering, avoiding the heavy drop-shadows of older design systems. The elevation scale consists of three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for resting cards and inputs, md (0 4px 12px rgba(0, 0, 0, 0.08)) for hover and interactive states, and lg (0 3px 8px rgba(0, 0, 0, 0.15)) for modals and overlays. Cards at rest use sm elevation; on hover, they transition to md elevation over 200ms, creating a tactile sense of lift. The alert banner (red background, #f05252) sits at md elevation to ensure prominence without visual aggression

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used to soften the interface and create approachability, but not so aggressively as to feel playful or casual. Buttons and primary CTAs use rounded.lg (1rem / 16px), creating a friendly, clickable appearance. Cards and containers use rounded.xl (1.5rem / 24px) for a more generous, gallery-like feel that celebrates the artwork within. Input fields and smaller components use rounded.DEFAULT (0.5rem / 8px) for a more technical, form-like appearance. Chips and badges use rounded.full (9999px) to signal their compact, tag-like nature.

Th

Components

Action Elements Buttons are the primary affordance for user intent. The button-primary component uses primary blue (#3f83f8) with white text, 12px vertical and 24px horizontal padding, and rounded.lg (16px). On hover, the background transitions to #1a56db (primary-700) over 150ms, accompanied by a subtle shadow elevation (md). The button-secondary uses the bold yellow (#ffdb24) with black text for maximum contrast and urgency—reserved for wallet connection and high-stakes actions. Both button variants maintain a 44px minimum height for touch accessibility. A button-ghost variant provides a tertiary option with transparent background, primary text, and a 1px outline; on hover, it fills with surface-container-low (#f3f4f6) to signal interactivity without overwhelming the layout.

Con

Do's and Don'ts

**Do**

• Do use primary blue (#3f83f8) for all primary CTAs and interactive elements—it's the visual anchor that guides user intent across the marketplace.
• Do apply secondary yellow (#ffdb24) sparingly for high-priority actions like wallet connection and collection launches—its warmth creates urgency without overuse.
• Do maintain consistent 24px padding and gutter spacing throughout cards and sections to create a predictable, scannable rhythm.
• Do use tertiary green (#0e9f6e) exclusively for success states, positive metrics, and confirmations to reinforce optimism and trust.
• Do apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) when overlaying text on collection imagery to ensure legibility.
• Do transition all interactive states (hover, focus, active) over 150ms–200ms using cubic-bezier(0.4, 0, 0.2, 1) for a responsive, natural feel.

**Don't**

• Don't use dark backgrounds or high-contrast dark modes—the light surface palette (#f9fafb) is core to the brand's approachable, transparent identity.
• Don't apply rounded corners smaller than rounded.DEFAULT (8px) to buttons or cards; the soft-technical philosophy requires generous rounding to feel welcoming.
• Don't mix primary blue and secondary yellow in the same component or section—each color has a distinct role, and combining them creates visual noise.
• Don't use shadows larger than lg elevation (0 3px 8px rgba(0, 0, 0, 0.15)) for standard UI; heavy shadows undermine the clean, modern aesthetic.
• Don't override the Lexend font family with system fonts or serif typefaces—consistency in typography reinforces brand recognition.
• Don't apply color to text smaller than 14px without sufficient contrast; always test label-sm (12px) text against its background for WCAG AA compliance.