STORE Brand - UI Guide Implementation

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 ComponentCard 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

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.