STORE UI Implementation Guide

This guide provides practical implementation details for the STORE UI design system, with specific examples of how to apply the design principles to create consistent interfaces across the platform.

UI
Design Philosophy

The STORE UI system prioritizes:

Trust and Transparency - Clean interfaces with clear data presentation to build user confidence

Information Hierarchy - Structured content organization for quick scanning and comprehension

Consistent Branding - Cohesive visual identity through color, typography, and component design

Modular Components - Reusable interface elements that maintain styling across applications

The design language is structured to handle complex blockchain, governance, and economic data in an accessible way, with a particular focus on permanent data storage and verification.

Component Implementation
Cards
Cards are the primary content containers in the STORE UI. They should:
Clean Code Snippet Component
Card Implementation Example
Copied!
// Card implementation example
<div className="bg-white p-6 rounded-lg shadow-sm">
    <div className="flex justify-between items-center mb-6">
        <h2 className="font-bold text-sm uppercase text-teal-500 flex items-center gap-2">
            Card Title
            <svg /* Info icon here */ />
        </h2>
        {/* Optional action buttons */}
    </div>

    {/* Card content */}
</div>
Implementation Notes:
Use uppercase, teal-colored headers with info icons for section titles
Maintain 24px padding consistently
Include a subtle box-shadow for depth
Group related information in clear sections within the card
Data Points
Data presentation follows a consistent label-value pattern:
Data Point Implementation
Copied!
// Data point implementation
<div>
  <div className="text-sm text-gray-500 mb-1">DATA LABEL</div>
  <div className="font-medium">Data Value</div>
</div>
For STORE token values:
STORE Token Values
Copied!
<div className="flex items-center gap-2">
  <div className="w-4 h-4 rounded-full bg-teal-500"></div>
  <span className="font-medium">91,565 STORE</span>
</div>
Implementation Notes:
Always use gray, uppercase labels above values
For STORE tokens and bits, include the teal circle icon
Right-align numeric values in tables
Format large numbers with commas for readability
Buttons
Buttons
Copied!
// Primary (purple) button
<button className="px-6 py-2 bg-purple-500 text-white rounded-md">
  Request to Buy $STORE
</button>

// Secondary (blue) button
<button className="px-6 py-2 bg-blue-600 text-white rounded-md">
  Subscribe
</button>

// Tertiary button
<button className="px-6 py-2 border border-gray-300 rounded-md">
  Cancel
</button>

// Icon button
<button className="p-2 rounded-full bg-teal-500 text-white">
  <svg /* Icon SVG */ />
</button>
Implementation Notes:
Use purple for primary actions related to token purchases
Use blue for secondary actions like subscriptions
Use border-only buttons for tertiary/cancel actions
Maintain consistent 4px border-radius
Include appropriate hover/active states
Status Indicators
Status Indicators
Copied!
// Completed status
<div className="flex items-center">
  <svg className="h-5 w-5 text-green-500" /* ... */ />
  <span className="ml-1 text-sm text-green-500">Completed</span>
</div>

// Coming Soon status
<span className="text-gray-500">Coming Soon</span>

// Badge-style status
<span className="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">
  Completed
</span>
Implementation Notes:
Use green for positive statuses like "Completed"
Use gray for neutral statuses like "Coming Soon"
For important statuses, use badge-style with colored background
Layout Patterns
Navigation Header
Navigation Header
Copied!
<header className="bg-white p-4 flex justify-between items-center border-b border-gray-200">
  <div className="flex items-center gap-2">
    <div className="w-8 h-8 rounded-full bg-teal-500 flex items-center justify-center text-white">
      {/* STORE logo */}
    </div>
    <span className="font-bold">STORE</span>
  </div>
  
  <div className="flex items-center gap-4">
    {/* Navigation items */}
    <button className="bg-purple-500 text-white px-4 py-2 rounded-lg">
      Request to Buy $STORE
    </button>
  </div>
</header>
Implementation Notes:
Maintain 64px height for main navigation
Place logo on left, actions on right
Use subtle border to separate from content
Include subscription form in the header
Page Structure
Page Structure
Copied!
<div className="bg-gray-100 min-h-screen p-8">
  <header className="mb-8">
    <h1 className="text-2xl font-bold mb-2">Page Title</h1>
    <p className="text-gray-500">Page description text.</p>
  </header>
  
  {/* Primary content cards */}
  <div className="grid grid-cols-1 gap-6">
    {/* Cards go here */}
  </div>
</div>
Implementation Notes:
Use light gray background for the application
White cards provide content containers
Maintain consistent page title styling
Use 24px spacing between major sections
Tables
Tables
Copied!
<div className="overflow-hidden rounded-lg border border-gray-200">
  <table className="min-w-full divide-y divide-gray-200">
    <thead className="bg-gray-50">
      <tr>
        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
          Column Header
        </th>
        {/* Additional headers */}
      </tr>
    </thead>
    <tbody className="bg-white divide-y divide-gray-200">
      <tr>
        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
          Cell content
        </td>
        {/* Additional cells */}
      </tr>
      {/* Additional rows */}
    </tbody>
  </table>
</div>
Implementation Notes:
Use light gray background for headers
Left-align text data, right-align numeric data
Use consistent cell padding (16px horizontal, 12px vertical)
Add subtle borders between rows
For responsive tables, enable horizontal scrolling on small screens
Data Presentation
Transaction Details
Transaction data should be organized in a consistent hierarchy:
Transaction Type & Status - Displayed prominently as badges
Title & Description - Clear, concise summary of the transaction`
Key Metrics - STORE amount, USD amount, cloudspace fee
Metadata - Creation date, security model, branch information
Verification Details - Cloud ID, on-chain proof
Example implementation:
Transaction Details
Copied!
<div className="bg-white rounded-lg border border-gray-200">
  <div className="p-6">
    {/* Header with type & status */}
    <div className="flex justify-between items-start mb-4">
      <div>
        <h3 className="font-bold text-lg mb-1">{transaction.title}</h3>
        <p className="text-gray-600">{transaction.description}</p>
      </div>
      <div className="flex items-center">
        <span className="text-sm bg-teal-100 text-teal-800 px-2 py-1 rounded mr-2">
          {transaction.type}
        </span>
        <span className="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">
          {transaction.status}
        </span>
      </div>
    </div>
    
    {/* Key metrics grid */}
    <div className="grid grid-cols-3 gap-4 mb-4">
      {/* STORE amount */}
      {/* USD amount */}
      {/* Cloudspace fee */}
    </div>
    
    {/* Verification info */}
    <div className="flex items-center gap-2">
      <svg /* ... */ />
      <span className="text-sm text-gray-500">Cloud ID:</span>
      <a href="#" className="text-sm text-teal-500 hover:underline">
        {transaction.cloudId}
      </a>
    </div>
  </div>
</div>
Value Formatting
Maintain consistent formatting for different data types:
STORE Tokens:
Format with commas: "91,565 STORE"
Include teal circle icon before values
For large amounts, consider abbreviating (e.g., "1.2M STORE")
Bits:
Format with commas: "9,156,500,000,000 bits"
Consider scientific notation for very large values
Include teal circle icon before values
Currency:
Always include the currency symbol: "$3,401 USD"
Right-align in tables
Format with proper decimal places for precision
Currency:
Always include the currency symbol: "$3,401 USD"
Right-align in tables
Format with proper decimal places for precision
UI Components
Electricity for Web3