CR8 Platform

Appearance

Agent L3 Component Library ​

Greyscale Component Specifications ​

Buttons ​

Primary Button ​

┌─────────────────────┐
│   Deploy Agent      │  ← Gray-900 bg, White text
└─────────────────────┘
   Height: 44px
   Padding: 12px 24px
   Border-radius: 8px
   Font: 16px, SemiBold

States:

  • Default: Gray-900 background, White text
  • Hover: Slightly darker (Gray-950 equivalent)
  • Active: Pressed appearance
  • Disabled: 40% opacity, Gray-300 background
  • Loading: Spinner icon + disabled state

Secondary Button ​

┌─────────────────────┐
│   Cancel            │  ← Transparent, Gray-800 text, Gray-300 border
└─────────────────────┘
   Border: 2px Gray-300
   Background: Transparent

Tertiary Button ​

   View Details →     ← Gray-700 text, underline on hover

Cards ​

Standard Card ​

┌─────────────────────────────┐
│                             │
│  [Content Area]             │
│                             │
└─────────────────────────────┘
   Background: White
   Border: 1px Gray-200
   Border-radius: 12px
   Padding: 24px
   Shadow: None (greyscale)

Interactive Card ​

┌─────────────────────────────┐
│  Agent Name                 │
│  Description text...       │
│                             │
│  Stats: 5.2 ETH | 42 Owners│
│                             │
│  [View Details →]           │
└─────────────────────────────┘
   Hover: Border changes to Gray-400
   Cursor: pointer

Stat Card ​

┌─────────────────┐
│  Total Agents   │  ← Label: 14px, Gray-500
│                 │
│  1,234          │  ← Value: 32px, Bold, Gray-900
└─────────────────┘

Forms ​

Input Field ​

┌─────────────────────────────┐
│ Agent Name                  │  ← Label: 14px, Bold, Gray-800
│ ┌─────────────────────────┐ │
│ │                         │ │  ← Input: 12px padding, Gray-300 border
│ └─────────────────────────┘ │
│ Enter agent name            │  ← Helper: 12px, Gray-500
└─────────────────────────────┘

States:

  • Default: Gray-300 border
  • Focus: Gray-700 border, outline offset 2px
  • Error: Gray-900 border, error message below
  • Disabled: Gray-200 background, Gray-400 text

Textarea ​

┌─────────────────────────────┐
│ Description                 │
│ ┌─────────────────────────┐ │
│ │                         │ │
│ │                         │ │  ← Multi-line, min-height 100px
│ │                         │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘

Select Dropdown ​

┌─────────────────────────────┐
│ Network                      │
│ ┌─────────────────────────┐ │
│ │ Sepolia            ▼    │ │  ← Gray-300 border, dropdown arrow
│ └─────────────────────────┘ │
└─────────────────────────────┘

Checkbox ​

☐ Integration Name            ← 20x20px box, Gray-300 border
☑ Integration Name            ← Checked: Gray-900 fill, White checkmark

Radio Button ​

○ Option 1                    ← 20x20px circle
● Option 2                    ← Selected: Gray-900 fill

Top Navigation Bar ​

┌─────────────────────────────────────────────┐
│ [Logo]  Products  Docs  Blog  [Connect]    │  ← 64px height
└─────────────────────────────────────────────┘
   Background: White
   Border-bottom: 1px Gray-200
   Padding: 0 32px
┌─────────────┐
│ Builder     │  ← Active: Gray-200 bg
│ Config      │
│ Test        │  ← Hover: Gray-100 bg
│ Deploy      │
│ History     │
└─────────────┘
   Width: 256px
   Background: Gray-50
   Border-right: 1px Gray-200
Home / Products / Agent Creator  ← 14px, Gray-600
                                  Separator: Gray-400 "/"

Data Display ​

Table ​

┌──────────┬──────────┬──────────┐
│ Name     │ Liquidity│ Fees     │  ← Header: Gray-100 bg, Bold
├──────────┼──────────┼──────────┤
│ Bot A    │ 5.2 ETH  │ $234     │  ← Row: White bg
│ Bot B    │ 8.1 ETH  │ $456     │  ← Alternating: Gray-50 bg
└──────────┴──────────┴──────────┘
   Border: 1px Gray-200
   Padding: 12px 16px

Badge ​

┌──────┐
│Active │  ← Background: Gray-200, Text: Gray-800
└──────┘     Padding: 4px 12px, Border-radius: 12px

Progress Bar ​

┌─────────────────────────────┐
│██████████░░░░░░░░░░░░░░░░░░│  ← 75% complete
└─────────────────────────────┘
   Background: Gray-200
   Fill: Gray-700
   Height: 8px
   Border-radius: 4px

Progress Steps ​

 ① ──── ② ──── ③ ──── ④
Basic  Integ  Config  Deploy

Current: Gray-900 circle, White number
Completed: Gray-700 circle, White number
Upcoming: Gray-300 circle, Gray-600 number

Modals & Overlays ​

┌─────────────────────────────────┐
│  Provide Liquidity          [×] │  ← Header: Bold, Gray-900
├─────────────────────────────────┤
│                                 │
│  Amount (ETH)                   │
│  ┌───────────────────────────┐  │
│  │ 0.5                       │  │
│  └───────────────────────────┘  │
│                                 │
│  Estimated Ownership: 2.5%      │  ← Info: Gray-500
│                                 │
│         [Cancel]  [Deposit]     │  ← Actions
└─────────────────────────────────┘
   Background: White
   Border-radius: 12px
   Max-width: 480px
   Shadow: Overlay (Gray-900, 20% opacity)

Drawer/Sidebar ​

┌─────────────────────┐
│ Settings        [×] │
├─────────────────────┤
│                     │
│ [Content]           │
│                     │
└─────────────────────┘
   Slides in from right
   Width: 400px
   Background: White

Feedback Components ​

Alert/Notification ​

┌─────────────────────────────────┐
││ Success! Agent deployed        │  ← Border-left: 4px Gray-700
└─────────────────────────────────┘     Background: Gray-50
   Border-radius: 8px
   Padding: 16px

Variants:

  • Success: Gray-700 border-left
  • Warning: Gray-600 border-left
  • Error: Gray-900 border-left
  • Info: Gray-500 border-left

Toast Notification ​

┌─────────────────────────────┐
│ ✓ Transaction confirmed     │  ← Appears top-right
└─────────────────────────────┘     Auto-dismisses
   Background: White
   Border: 1px Gray-200
   Shadow: Subtle

Loading Spinner ​

    ⭕                        ← 24px diameter
   ↻                          ← 2px stroke, Gray-700
   Animated rotation

Skeleton Loader ​

┌─────────────────────────────┐
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │  ← Shimmer animation
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
└─────────────────────────────┘
   Background: Gray-200
   Animated shimmer effect

Empty States ​

Empty State ​

        ┌─────┐
        │  📋 │  ← Icon: 48px
        └─────┘

    No Agents Yet

    Get started by creating your first agent

    [Create Agent]  ← CTA button

Components:

  • Icon: 48px, Gray-400
  • Heading: 24px, Bold, Gray-800
  • Description: 16px, Gray-600
  • CTA: Primary button

Search & Filter ​

┌─────────────────────────────┐
│ 🔍 Search agents...         │  ← Icon + placeholder
└─────────────────────────────┘
   Border: 1px Gray-300
   Border-radius: 8px
   Padding: 12px 16px

Filter Dropdown ​

┌─────────────────────────────┐
│ Filter by: [All ▼]          │
└─────────────────────────────┘
   Opens dropdown menu
   Options: All, DeFi, AI, NFT

Sort Dropdown ​

┌─────────────────────────────┐
│ Sort: [Recent ▼]            │
└─────────────────────────────┘
   Options: Recent, Liquidity, Fees, Yield

Agent-Specific Components ​

Agent Card ​

┌─────────────────────────────┐
│ 🤖 AI Trading Bot      [Active]│  ← Name + Status badge
├─────────────────────────────┤
│ Automated trading using ML │  ← Description
│                             │
│ ┌─────┐ ┌─────┐ ┌─────┐    │
│ │5.2  │ │$234 │ │42   │    │  ← Stats
│ │ETH  │ │Fees │ │Owners│    │
│ └─────┘ └─────┘ └─────┘    │
│                             │
│ 🔄 Uniswap  🤖 OpenAI       │  ← Integration badges
│                             │
│         [View Details →]    │
└─────────────────────────────┘

Ownership Chart ​

┌─────────────────────────────┐
│ Ownership Distribution       │
├─────────────────────────────┤
│ 0x1234...5678               │  ← Owner address
│ ████████████░░░░░░░░░░ 20%  │  ← Bar + percentage
│                             │
│ 0xabcd...efgh               │
│ █████████░░░░░░░░░░░░░ 15%  │
│                             │
│ Others                      │
│ ████████████████████░░ 65%  │
└─────────────────────────────┘

Integration Badge ​

┌──────────────┐
│ 🔄 Uniswap   │  ← Icon + Name
└──────────────┘
   Background: Gray-100
   Border-radius: 8px
   Padding: 6px 12px
   Font: 12px, Medium

Transaction Components ​

Transaction Status ​

┌─────────────────────────────┐
│ ⏳ Transaction Pending      │  ← Status icon + text
│                             │
│ Waiting for confirmation... │
└─────────────────────────────┘

States:

  • Pending: ⏳ Spinner
  • Confirming: ⏳ Spinner + "Confirming..."
  • Success: ✓ Checkmark + "Confirmed"
  • Error: ✗ X + Error message

Transaction Preview ​

┌─────────────────────────────┐
│ Transaction Preview         │
├─────────────────────────────┤
│ Method: registerAgent       │
│ Gas Estimate: 200,000       │
│ Network: Sepolia            │
│                             │
│ [View on Etherscan]         │
└─────────────────────────────┘

Dashboard Components ​

Metric Card ​

┌─────────────────┐
│ Total Agents    │  ← Label: 14px, Gray-500
│                 │
│ 1,234           │  ← Value: 32px, Bold, Gray-900
│                 │
│ ↗ +12% this week│  ← Change: 12px, Gray-600
└─────────────────┘

Activity Feed ​

┌─────────────────────────────┐
│ Recent Activity             │
├─────────────────────────────┤
│ • Fee collected: $50        │  ← List items
│   2 minutes ago             │     Timestamp: Gray-500
│                             │
│ • Task completed: Swap      │
│   5 minutes ago             │
│                             │
│ • User interaction: API call│
│   10 minutes ago            │
└─────────────────────────────┘

Component Usage Guidelines ​

Spacing Between Components ​

  • Cards: 24px gap
  • Form fields: 16px gap
  • Sections: 32px gap
  • Page margins: 32px mobile, 48px desktop

Grouping ​

  • Related items: 12px gap
  • Unrelated items: 24px gap
  • Sections: 48px gap

Alignment ​

  • Left-align text (except numbers)
  • Right-align numbers in tables
  • Center-align CTAs in empty states

Responsive Behavior ​

Mobile (< 640px) ​

  • Stack components vertically
  • Full-width cards
  • Single column layouts
  • Touch-optimized (44px min targets)

Tablet (640px - 1024px) ​

  • 2-column grids possible
  • Sidebar collapses to menu
  • Adjusted spacing

Desktop (> 1024px) ​

  • Multi-column layouts
  • Sidebar always visible
  • Hover states active
  • Maximum content width: 1280px

Accessibility Notes ​

  • All interactive elements: Minimum 44x44px
  • Focus indicators: 2px Gray-700 outline
  • Color contrast: Minimum 4.5:1
  • No color-only information
  • ARIA labels on icons
  • Keyboard navigation support

This component library provides detailed specifications for all UI elements. Use these as reference when creating wireframes and mockups.

CR8 Platform Documentation

Copyright © 2024 CR8 Platform