Celo UI Design System Prompt

Create a modern, clean, and accessible user interface for an app built with Celo Composer that strictly follows the official Celo brand guidelines and design system.

Celo Brand Identity Implementation

Primary Color Palette

Use the exact Celo brand colors as shown in the design system:

:root {
  /* Primary Brand Colors */
  --celo-green: #35D07F;
  --celo-gold: #FBCC5C;
  --celo-dark: #2E3338;
  --celo-purple: #5F33E1;
  
  /* Supporting Colors */
  --celo-light-green: #73E7A6;
  --celo-forest-green: #1AB65C;
  --celo-orange: #FF8B47;
  --celo-red: #FB7B6B;
  --celo-blue: #5EA7F5;
  --celo-pink: #F299D7;
  
  /* Neutrals */
  --celo-white: #FFFFFF;
  --celo-light-gray: #F8F9FA;
  --celo-gray: #9CA3AF;
  --celo-dark-gray: #6B7280;
  --celo-charcoal: #374151;
}

Typography System

Follow Celo's typography hierarchy:

/* Primary Font: Inter or system font fallback */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

/* Typography Scale */
--text-xs: 0.75rem;     /* 12px */
--text-sm: 0.875rem;    /* 14px */
--text-base: 1rem;      /* 16px */
--text-lg: 1.125rem;    /* 18px */
--text-xl: 1.25rem;     /* 20px */
--text-2xl: 1.5rem;     /* 24px */
--text-3xl: 1.875rem;   /* 30px */
--text-4xl: 2.25rem;    /* 36px */

/* Font Weights */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;

UI Component Design Guidelines

Button System

Implement exactly as shown in the Celo design system:

Primary CTAs

• Background: --celo-green (#35D07F)
• Text: --celo-dark (#2E3338)
• Border radius: 12px
• Padding: 12px 24px
• Font weight: 600
• Hover: Slightly darker green with smooth transition

Secondary CTAs

• Background: transparent
• Border: 2px solid --celo-green
• Text: --celo-green
• Same dimensions as primary

Disabled State

• Background: --celo-gray
• Text: --celo-dark-gray
• No hover effects

States to implement:

• Inactive (default)
• Hover (subtle color shift)
• Pressed (slightly darker)
• Disabled (grayed out)

Card Components

Design clean card layouts following Celo's style:

.celo-card {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.celo-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

Form Elements

Create consistent form styling:

Input Fields

• Border: 2px solid --celo-light-gray
• Border radius: 8px
• Padding: 12px 16px
• Focus border: --celo-green
• Font size: --text-base

Labels

• Font weight: 600
• Color: --celo-dark
• Margin bottom: 8px

Validation States

• Error: Red border with error icon
• Success: Green border with checkmark
• Warning: Orange border with warning icon

Layout Structure

Header/Navigation

• Clean minimal header with Celo logo
• Connect wallet button in top right
• Transparent background with subtle bottom border

Hero Section

• Large heading using --text-4xl
• Subtitle in --celo-gray
• Primary CTA button prominent
• Clean background with subtle geometric patterns (optional)

Form Layout

• Multi-step wizard with progress indicator
• Each step in its own card
• Clear section headers
• Logical grouping of related fields

Interactive Elements

Progress Indicators

• Use Celo green for active/completed steps
• Gray for inactive steps
• Smooth transitions between steps

Loading States

• Celo green spinner/loading animation
• Skeleton screens for content loading
• Progress bars for transaction status

Notifications/Toasts

• Success: Green background with white text
• Error: Red background with white text
• Warning: Orange background with dark text
• Position: Top right corner
• Auto-dismiss after 5 seconds

Responsive Design

Mobile-First Approach

• Stack cards vertically on mobile
• Larger touch targets (min 44px)
• Simplified navigation
• Collapsible sections where appropriate

Breakpoints

/* Mobile */
@media (max-width: 640px) { }

/* Tablet */  
@media (min-width: 641px) and (max-width: 1024px) { }

/* Desktop */
@media (min-width: 1025px) { }

Accessibility Requirements

WCAG 2.1 AA Compliance

• Color contrast ratios: 4.5:1 minimum
• Keyboard navigation support
• Screen reader friendly
• Alt text for all images
• Proper heading hierarchy
• Focus indicators visible

Semantic HTML

• Use proper HTML5 elements
• ARIA labels where needed
• Form labels properly associated
• Clear error messages

Animation & Transitions

Micro-interactions

• Button hover effects (0.2s ease)
• Card hover elevation
• Form field focus animations
• Loading spinners
• Success checkmarks

Page Transitions

• Smooth step-to-step navigation
• Fade in/out for content changes
• Slide animations for mobile navigation

Brand Consistency Checklist

✅ Use only official Celo colors
✅ Implement proper typography hierarchy
✅ Follow button design system exactly
✅ Maintain consistent spacing (8px grid)
✅ Use appropriate icons (Lucide React recommended)
✅ Include Celo logo/branding appropriately
✅ Ensure mobile responsiveness
✅ Test accessibility compliance
✅ Implement proper loading states
✅ Use consistent border radius (8px, 12px, 16px)

Implementation Notes

• Use Tailwind CSS utility classes configured with Celo colors
• Implement dark mode support (optional future enhancement)
• Ensure all animations are smooth and purposeful
• Test across different devices and browsers
• Performance optimize all images and assets
• Use proper semantic HTML for better SEO

This design system ensures the token launchpad feels like a native part of the Celo ecosystem while providing an excellent user experience that encourages token creation and builds trust in the platform.