KPR | Story

Overview

KPR | Story is a Web3-native platform for digital collectibles and community storytelling, serving collectors, creators, and institutions seeking transparent, gallery-quality curation on blockchain. The design system embodies 'Architectural Minimalism'—a discipline rooted in Swiss typography, geometric precision, and high-contrast legibility. Every element is intentional: the white canvas (#ffffff) acts as a gallery wall, while the primary accent (#1a73e8, a vivid Google Blue) functions as the curatorial voice, drawing attention to CTAs, active states, and brand-critical interactions. The UI evokes a sense of institutional trust and technical sophistication, as if stepping into a museum's digital archive.

The brand voice is curatorial, precise, and unapologetically technical. Vocabulary favors specificity over warmth: 'Keeper', 'Protect', 'Reimagine' (the three pillars) are imperative, action-oriented, and speak to stewardship rather than ownership. Tone is calm, authoritative, never breathless. Example sentence: 'Keepers protect digital culture through transparent, immutable records.'

Colors

The color system operates on a principle of 'high-contrast legibility with institutional restraint.' Primary (#1a73e8) is the signature accent—used exclusively on CTAs ('Download Brand Book', 'Sign In'), active navigation states, and focus indicators. It appears sparingly but decisively, commanding attention without visual noise. Secondary (#0e4347, a deep teal) and Tertiary (#5b1a1d, a burgundy) serve as supporting accents for status badges, secondary CTAs, and thematic highlights—each distinct enough to avoid confusion but restrained enough to maintain the minimalist aesthetic.

The surface stack is deliberately monochromatic: white (#ffffff) as the primary canvas, with a graduated gray scale (surface-container-low: #f0f0f0, surface-container-high: #e8e8e8) for subtle depth and layering.

Typography

The type system is a dialogue between display and utility. Hexaframe (243px, 700 weight, -0.04em tracking) commands the hero space with monumental presence—the 'KEEPERS' heading sets the institutional tone immediately. ABCWhytePlus and ABCWhyte (headlines and titles, 48px down to 24px) provide a sophisticated, geometric voice that reinforces the architectural aesthetic. Body copy uses Roboto (16–18px, 400 weight, 24–28px line-height) for accessibility and clarity; it sits comfortably on the white canvas without strain. Utility labels and metadata employ IBMPlexMono (12–14px, 500–600 weight, 0.01–0.05em tracking) to signal technical precision—blockchain addresses, transaction IDs, and UI microcopy all benefit from monospace's inherent trustworthiness. Apply text-shadow: 0 2px 4px rgba(0, 0,

Layout

The layout operates on a 12-column grid with a fixed container max-width of 1280px, ensuring content remains scannable and focused even on large displays. The design favors generous white space: lg spacing (40px) separates major sections, md spacing (24px) divides content blocks, and sm spacing (12px) provides breathing room between related elements. This rhythm creates a gallery-like pacing—each section feels like a discrete exhibition, not a continuous scroll. The frame border (1px solid black, 2rem radius, 0.3 opacity) acts as a virtual gallery wall, anchoring the entire viewport and reinforcing the institutional aesthetic. Gutter spacing (24px) is consistent across all breakpoints, maintaining alignment and legibility. The layout is fluid on mobile (breakpoint: 375px design width) and

Elevation & Depth

Depth in this system is achieved through subtle layering and precise shadow application, never through darkness. Level 1 (Base): the white surface (#ffffff) with no shadow, establishing the primary plane. Level 2 (Cards & Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px solid border at surface-container-high (#e8e8e8), creating a crisp, lifted appearance without visual heaviness. Level 3 (Modals & Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with the same border treatment, signaling modal priority. Interactive hover states elevate cards to Level 2 with a smooth 200ms

Shapes

The shape philosophy is 'Architectural Precision'—favoring clean, geometric forms that echo Swiss design principles. Buttons and inputs use 0.5rem (8px) border-radius, a subtle softening that prevents harshness while maintaining geometric clarity. Cards and containers use 0.75rem (12px) radius for slightly more breathing room. The frame border employs 2rem (32px) radius, a generous curve that softens the viewport boundary and invites the eye inward. The full radius (9999px) is reserved for badges and pill-shaped elements, signaling completeness and finality. This graduated approach ensures vis

Components

Action Elements Buttons are the primary interface for user intent. The button-primary component uses a solid background (#1a73e8), white text, 12px 24px padding, and 48px height—large enough for touch targets on mobile (minimum 44px) while maintaining desktop elegance. On hover, the background shifts to #4285f4 with a subtle shadow (0 3px 8px rgba(26, 115, 232, 0.25)), creating a sense of lift without distraction. On active/pressed state, the background darkens to #1557b0, providing clear feedback. The button-secondary variant uses a transparent background with a 1px primary-colored border, allowing secondary actions to coexist without visual competition. All buttons transition over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, responsive feel.

Containers & Surfaces Cards a

Do's and Don'ts

**Do**

• Do use primary (#1a73e8) exclusively for CTAs, active states, and focus indicators—never for body text or backgrounds.
• Do maintain 24px gutter spacing and 40px section separation to preserve the gallery-like pacing and prevent visual clutter.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive elements for smooth, responsive feedback.
• Do use IBMPlexMono for technical metadata, blockchain addresses, and utility labels to signal precision and trustworthiness.
• Do respect the 1px border at surface-container-high (#e8e8e8) on all cards and containers—it's the architectural spine of the system.

**Don't**

• Don't use secondary (#0e4347) or tertiary (#5b1a1d) as primary accent colors—they are supporting roles only.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12)—the system prioritizes clarity over depth.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—consistency is architectural.
• Don't place small text (label-sm) over busy backgrounds without text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08)—legibility is non-negotiable.
• Don't override the frame border or viewport boundary—it's a curatorial gesture that grounds the entire experience.