Design Implementation Guide

How to Use This Design System

Step 1: Review Brand Kit

• Read DESIGN_SYSTEM.md for foundations
• Understand greyscale palette
• Review typography and spacing

Step 2: Reference Component Library

• Use COMPONENT_LIBRARY.md for component specs
• Follow spacing and sizing guidelines
• Maintain consistency

Step 3: Design Screens

• Follow UI_DESIGN_DOCUMENT.md for screen layouts
• Use SCREEN_FLOWS.md for user journeys
• Create wireframes based on specifications

Step 4: Add Sketches

• Draw hand-drawn sketches
• Scan/photograph at 300 DPI
• Place in design/sketches/ directory
• Reference in documentation

Step 5: Create Digital Wireframes

• Use Figma, Sketch, or similar
• Follow greyscale palette
• Match component specifications
• Export as PNG/PDF

Step 6: Annotate Designs

• Add notes for interactions
• Specify states
• Document edge cases
• Note responsive behavior

---

Design Tool Recommendations

Wireframing

• Figma (Recommended) - Free, collaborative
• Sketch - Mac only
• Adobe XD - Cross-platform
• Pen & Paper - Start here!

Prototyping

• Figma - Built-in prototyping
• InVision - Advanced interactions
• Principle - Micro-interactions

Hand Sketching

• Paper: Grid or dot paper recommended
• Pens: Fine tip (0.5mm) for details
• Scanning: Use phone camera or scanner

---

Design File Organization

design/
├── brand-kit/
│   ├── logos/
│   │   ├── logo-primary.svg
│   │   ├── logo-secondary.svg
│   │   └── logo-icon.svg
│   ├── icons/
│   │   └── [icon-set]
│   └── colors/
│       └── [future color palette]
│
├── wireframes/
│   ├── website/
│   │   ├── homepage.png
│   │   ├── about.png
│   │   └── docs-layout.png
│   ├── creator/
│   │   ├── step1-basic.png
│   │   ├── step2-integrations.png
│   │   ├── step3-config.png
│   │   ├── step4-deploy.png
│   │   └── dashboard.png
│   ├── operator/
│   │   ├── dashboard.png
│   │   └── control-panel.png
│   ├── investor/
│   │   ├── registry.png
│   │   ├── agent-detail.png
│   │   └── portfolio.png
│   └── desktop/
│       └── main-window.png
│
├── mockups/
│   ├── greyscale/
│   │   └── [same structure as wireframes]
│   └── color/
│       └── [future - add colors]
│
├── components/
│   ├── buttons.png
│   ├── forms.png
│   ├── cards.png
│   ├── navigation.png
│   └── data-display.png
│
└── sketches/
    ├── website/
    │   └── [hand-drawn sketches]
    ├── creator/
    │   └── [hand-drawn sketches]
    ├── operator/
    │   └── [hand-drawn sketches]
    └── investor/
        └── [hand-drawn sketches]

---

Design Checklist

For Each Screen Design

Layout:

• [ ] Follows grid system
• [ ] Proper spacing (4px base unit)
• [ ] Responsive breakpoints considered
• [ ] Content hierarchy clear

Components:

• [ ] Uses standard components
• [ ] Consistent styling
• [ ] Proper states (hover, active, disabled)
• [ ] Accessibility considered

Content:

• [ ] Placeholder text realistic
• [ ] Labels clear and descriptive
• [ ] Error states included
• [ ] Empty states designed

Interactions:

• [ ] Click/tap targets ≥ 44px
• [ ] Hover states defined
• [ ] Loading states included
• [ ] Success/error feedback

Documentation:

• [ ] Annotations added
• [ ] Notes for developers
• [ ] Edge cases documented
• [ ] Responsive behavior noted

---

Hand Sketch Guidelines

What to Include

Essential:

• Layout structure
• Component placement
• Navigation elements
• Key content areas

Helpful:

• Annotations/notes
• Interaction indicators
• State variations
• Responsive notes

Sketch Quality Tips

1. Use Grid Paper: Helps with alignment
2. Clear Lines: Dark pen, avoid erasing
3. Label Everything: Component names, actions
4. Show States: Draw hover/active states
5. Multiple Views: Mobile + desktop if different

Scanning Tips

1. High Resolution: 300 DPI minimum
2. Good Lighting: Avoid shadows
3. Clean Background: White paper
4. Straight: Use scanner or photo editor to straighten
5. Crop: Remove unnecessary whitespace

---

Design Review Process

Self-Review Checklist

• [ ] Follows design system
• [ ] Consistent with other screens
• [ ] All states designed
• [ ] Responsive considered
• [ ] Accessibility checked
• [ ] Annotations complete

Peer Review Points

• Usability: Can users accomplish goals?
• Consistency: Matches other screens?
• Clarity: Information hierarchy clear?
• Accessibility: Meets standards?

Developer Handoff

Include:

• Design files (Figma/Sketch)
• Export assets (PNG/SVG)
• Specifications document
• Component notes
• Interaction details

---

Implementation Priorities

Phase 1: Core Screens (MVP)

1. Main website homepage
2. Agent Creator - Step 1-4
3. Agent Investor - Registry
4. Agent Investor - Detail page
5. Portfolio dashboard
6. Staking page

Phase 2: Enhanced Screens

1. Operator dashboard
2. Agent configuration
3. Documentation pages
4. Advanced search/filter

Phase 3: Polish

1. Empty states
2. Error states
3. Loading states
4. Micro-interactions

---

Design Tokens (For Developers)

Spacing Tokens

--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-base: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;

Color Tokens (Greyscale)

--gray-50: #FAFAFA;
--gray-100: #F5F5F5;
--gray-200: #E5E5E5;
--gray-300: #D4D4D4;
--gray-400: #A3A3A3;
--gray-500: #737373;
--gray-600: #525252;
--gray-700: #404040;
--gray-800: #262626;
--gray-900: #171717;

Typography Tokens

--font-family: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;

--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 24px;
--text-2xl: 30px;
--text-3xl: 36px;
--text-4xl: 48px;

Border Radius Tokens

--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;

---

Design-to-Development Workflow

1. Design Phase

• Create wireframes
• Add annotations
• Review with team
• Get approval

2. Handoff Phase

• Export assets
• Create specs document
• Share design files
• Answer questions

3. Development Phase

• Implement components
• Match design specs
• Test interactions
• Request feedback

4. Review Phase

• Compare with design
• Check responsive
• Test accessibility
• Refine as needed

---

Resources & References

Design Inspiration

• DeFi platforms (Uniswap, Aave)
• Agent platforms (AutoGPT, LangChain)
• Investment platforms (Coinbase, Binance)

Accessibility Resources

• WCAG 2.1 Guidelines
• WebAIM Contrast Checker
• A11y Project

Tools

• Figma Community (component libraries)
• Icon libraries (Lucide, Heroicons)
• Font resources (Google Fonts)

---

This implementation guide provides the roadmap for turning designs into reality. Follow these steps to ensure consistency and quality throughout the design process.