CR8 Platform

Appearance

Agent L3 Design System & Brand Kit ​

Brand Identity ​

Brand Name ​

Agent L3 - Layer 3 Agent Network

Brand Tagline Options ​

  • "Own the Future of Autonomous Agents"
  • "Invest in AI. Own the Agents."
  • "The Agent Economy Starts Here"

Brand Personality ​

  • Professional yet approachable
  • Technical but accessible
  • Decentralized and transparent
  • Innovative and forward-thinking

Design Philosophy ​

Core Principles ​

  1. Clarity First

    • Clear information hierarchy
    • Easy to scan and understand
    • Minimal cognitive load

  2. Trust Through Transparency

    • Show real-time data
    • Clear transaction states
    • Honest about risks/rewards

  3. Accessibility

    • WCAG 2.1 AA compliance
    • High contrast ratios
    • Keyboard navigation
    • Screen reader support

  4. Consistency

    • Unified component library
    • Consistent spacing and typography
    • Predictable interactions

Color System (Greyscale Foundation) ​

Base Palette ​

Primary Greyscale Scale:

White:       #FFFFFF  (Base background)
Gray-50:     #FAFAFA  (Subtle backgrounds)
Gray-100:    #F5F5F5  (Light backgrounds)
Gray-200:    #E5E5E5  (Borders, dividers)
Gray-300:    #D4D4D4  (Disabled states)
Gray-400:    #A3A3A3  (Placeholder text)
Gray-500:    #737373  (Secondary text)
Gray-600:    #525252  (Body text)
Gray-700:    #404040  (Headings)
Gray-800:    #262626  (Strong headings)
Gray-900:    #171717  (Primary text, dark mode base)
Black:       #000000  (Maximum contrast)

Semantic Greyscale:

Success:     Gray-700  (Dark - indicates positive)
Warning:     Gray-600  (Medium - attention needed)
Error:       Gray-900  (Very dark - urgent)
Info:        Gray-500  (Light - informational)

Note: Colors will be layered on top of this greyscale foundation in future iterations.

Typography System ​

Font Families ​

Primary Font: Inter (or System Font Stack)

  • Clean, modern, highly readable
  • Excellent for UI and data

Monospace Font: JetBrains Mono (or 'Courier New')

  • Code, addresses, numbers
  • Technical data display

Fallback Stack:

css
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 
              'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;

Type Scale ​

Headings:

H1: 48px / 56px  |  Bold   | Gray-900
H2: 36px / 44px  |  Bold   | Gray-900
H3: 30px / 38px  |  SemiBold | Gray-800
H4: 24px / 32px  |  SemiBold | Gray-800
H5: 20px / 28px  |  Medium  | Gray-700
H6: 18px / 26px  |  Medium  | Gray-700

Body Text:

Large:   18px / 28px  |  Regular | Gray-600
Base:    16px / 24px  |  Regular | Gray-600
Small:   14px / 20px  |  Regular | Gray-500
Tiny:    12px / 16px  |  Regular | Gray-500

Monospace (for addresses/code):

Base:    14px / 20px  |  Regular | Gray-700
Small:   12px / 18px  |  Regular | Gray-600

Type Usage ​

Headings: Clear hierarchy, maximum 3 levels visible at once Body: Comfortable reading, consistent line-height Labels: Smaller, uppercase or small-caps option Numbers: Use tabular figures for alignment Addresses: Monospace, breakable, truncatable

Spacing System ​

Base Unit: 4px ​

Scale:

xs:    4px   (0.25rem)
sm:    8px   (0.5rem)
md:    12px  (0.75rem)
base:  16px  (1rem)
lg:    24px  (1.5rem)
xl:    32px  (2rem)
2xl:   48px  (3rem)
3xl:   64px  (4rem)
4xl:   96px  (6rem)

Spacing Applications ​

Component Padding:

  • Cards: lg (24px)
  • Buttons: md horizontal, sm vertical (12px/8px)
  • Inputs: md (12px)
  • Sections: xl (32px)

Layout Gaps:

  • Tight: sm (8px)
  • Normal: md (12px)
  • Loose: lg (24px)
  • Spacious: xl (32px)

Margins:

  • Page margins: xl (32px) mobile, 2xl (48px) desktop
  • Section margins: xl (32px)
  • Element margins: md (12px) or lg (24px)

Icon System ​

Icon Style ​

  • Line icons (outlined style)
  • Weight: 1.5-2px stroke
  • Size: 16px, 20px, 24px, 32px
  • Consistency: Uniform stroke weight, rounded corners

Icon Library ​

  • Lucide Icons (or Heroicons)
  • Consistent icon set across all apps
  • Contextual icons for actions

Icon Usage ​

  • 16px: Inline with text, small badges
  • 20px: Buttons, navigation items
  • 24px: Cards, medium emphasis
  • 32px: Empty states, large features

Layout System ​

Grid System ​

Base Grid: 12-column system

  • Max width: 1280px (desktop)
  • Gutter: 24px
  • Margins: Responsive (32px mobile, 48px desktop)

Breakpoints:

Mobile:      < 640px   (1 column)
Tablet:      640px - 1024px  (2-3 columns)
Desktop:     1024px - 1440px  (3-4 columns)
Large:       > 1440px  (4+ columns)

Container Sizes ​

Full:        100vw
Wide:        1536px  (max-width)
Standard:    1280px  (max-width)
Narrow:      1024px  (max-width)

Component Library ​

Buttons ​

Primary Button:

  • Background: Gray-900
  • Text: White
  • Padding: 12px 24px
  • Border-radius: 8px
  • Font-weight: 600

Secondary Button:

  • Background: Transparent
  • Border: 2px Gray-300
  • Text: Gray-800
  • Padding: 12px 24px
  • Border-radius: 8px

Tertiary Button:

  • Background: Transparent
  • Text: Gray-700
  • Padding: 8px 16px
  • Underline on hover

Disabled State:

  • Opacity: 40%
  • Cursor: not-allowed

Cards ​

Standard Card:

  • Background: White
  • Border: 1px Gray-200
  • Border-radius: 12px
  • Padding: 24px
  • Shadow: None (greyscale)

Elevated Card:

  • Background: White
  • Border: 1px Gray-200
  • Border-radius: 12px
  • Padding: 24px
  • Shadow: Subtle (multiple layers of gray borders)

Interactive Card:

  • Same as standard
  • Hover: Border changes to Gray-400
  • Cursor: pointer

Forms ​

Input Field:

  • Background: White
  • Border: 1px Gray-300
  • Border-radius: 8px
  • Padding: 12px 16px
  • Focus: Border Gray-700, outline offset

Textarea:

  • Same as input
  • Min-height: 100px
  • Resize: vertical

Label:

  • Font-size: 14px
  • Font-weight: 600
  • Color: Gray-800
  • Margin-bottom: 8px

Helper Text:

  • Font-size: 12px
  • Color: Gray-500
  • Margin-top: 4px

Error State:

  • Border: 2px Gray-900
  • Error text: Gray-900, bold

Top Navigation:

  • Height: 64px
  • Background: White
  • Border-bottom: 1px Gray-200
  • Padding: 0 32px

Sidebar Navigation:

  • Width: 256px (collapsed: 64px)
  • Background: Gray-50
  • Border-right: 1px Gray-200
  • Active state: Gray-200 background

Breadcrumbs:

  • Font-size: 14px
  • Color: Gray-600
  • Separator: Gray-400 "/"

Data Display ​

Table:

  • Border: 1px Gray-200
  • Header: Gray-100 background, bold
  • Rows: Alternating Gray-50 background
  • Padding: 12px 16px

Stat Card:

  • Large number: 32px, Bold, Gray-900
  • Label: 14px, Gray-500
  • Border: 1px Gray-200
  • Padding: 24px

Badge:

  • Background: Gray-200
  • Text: Gray-800
  • Padding: 4px 12px
  • Border-radius: 12px
  • Font-size: 12px, Bold

Feedback Components ​

Alert/Notification:

  • Border-left: 4px Gray-700
  • Background: Gray-50
  • Padding: 16px
  • Border-radius: 8px

Success State:

  • Border-left: 4px Gray-700
  • Background: Gray-100

Warning State:

  • Border-left: 4px Gray-600
  • Background: Gray-50

Error State:

  • Border-left: 4px Gray-900
  • Background: Gray-100

Loading Spinner:

  • Circular: 24px diameter
  • Stroke: 2px Gray-300
  • Animated: Gray-700 stroke

Skeleton Loader:

  • Background: Gray-200
  • Shimmer animation (subtle)
  • Border-radius: 4px

Patterns & Layouts ​

Page Layout ​

Standard Page:

┌─────────────────────────────────┐
│  Header (64px)                  │
├─────────────────────────────────┤
│                                 │
│  Container (max-width: 1280px) │
│  Padding: 32px                  │
│                                 │
│  [Page Content]                 │
│                                 │
├─────────────────────────────────┤
│  Footer                         │
└─────────────────────────────────┘

Dashboard Layout:

┌──────────┬──────────────────────┐
│ Sidebar  │  Header              │
│          ├──────────────────────┤
│          │                      │
│          │  Main Content        │
│          │                      │
└──────────┴──────────────────────┘

Motion & Animation ​

Principles ​

  • Subtle and purposeful
  • Fast (200-300ms typical)
  • Easing: Ease-in-out for most transitions

Standard Animations ​

Fade In:

  • Duration: 200ms
  • Easing: ease-out
  • Use: Page transitions, modals

Slide In:

  • Duration: 300ms
  • Easing: ease-out
  • Use: Drawers, sidebars

Scale:

  • Duration: 150ms
  • Easing: ease-out
  • Use: Button presses, card hovers

Loading:

  • Duration: 1.5s (loop)
  • Easing: linear
  • Use: Loading states

Accessibility Standards ​

Contrast Ratios ​

  • Normal text: Minimum 4.5:1
  • Large text (18px+): Minimum 3:1
  • UI components: Minimum 3:1

Interactive Elements ​

  • Minimum touch target: 44x44px
  • Clear focus states (outline: 2px Gray-700)
  • Keyboard navigation for all interactions

Screen Readers ​

  • Semantic HTML
  • ARIA labels where needed
  • Alt text for images
  • Skip links for navigation

Dark Mode Support (Future) ​

Dark Mode Palette (Foundation) ​

  • Background: Gray-900
  • Surface: Gray-800
  • Text: Gray-100
  • Borders: Gray-700

Note: Implement after color system is defined

File Organization for Sketches ​

Structure ​

design/
├── sketches/
│   ├── wireframes/
│   │   ├── agent-creator/
│   │   ├── agent-operator/
│   │   └── agent-investor/
│   └── mockups/
│       ├── web/
│       └── desktop/
└── assets/
    ├── logos/
    ├── icons/
    └── images/

Naming Convention ​

[app]-[screen]-[version].png
Example: creator-registration-v1.png

This design system provides the foundation for all applications. Colors will be added in future iterations, but the greyscale foundation ensures excellent contrast and accessibility.

CR8 Platform Documentation

Copyright © 2024 CR8 Platform