​
Overview

The RippleCore Theme Editor allows consultants to create fully customized, white-label brand experiences for their client organizations. With 31 customizable colors, AI-powered theme generation, and real-time preview, you can match any client’s brand identity in minutes.
Unique Feature: Our theme editor exceeds commercial products like tweakcn.com, offering more customization options and intelligent AI generation.

​
Quick Start

​
Access the Theme Editor

Navigate to: Consultant Portal → Clients → [Select Client] → Branding Requirements:
  • Consultant account with client relationship
  • Active client organization
  • Modern browser (Chrome, Firefox, Safari 14+, Edge 90+)

​
Theme Editor Interface

​
Layout Overview

┌─────────────────────────────────────────┐
│  Theme Editor                           │
├───────────────────┬─────────────────────┤
│                   │                     │
│  Color Controls   │   Live Preview      │
│  (Left Sidebar)   │   (Center Panel)    │
│                   │                     │
│  • Light Mode     │   Dashboard         │
│  • Dark Mode      │   Components        │
│  • Presets        │   Forms             │
│  • AI Generate    │   Tables            │
│                   │                     │
└───────────────────┴─────────────────────┘
31 Customizable Colors:
  • Light Mode: 15 colors (background, foreground, primary, etc.)
  • Dark Mode: 15 colors (independent dark theme)
  • Radius: Border radius (0px - 20px)

​
Color Customization

​
Understanding Color Roles

Background

Main background colorDefault: White (#FFFFFF)Used for: Page backgrounds, card containers

Foreground

Main text colorDefault: Black (#000000)Used for: Body text, headings

Primary

Brand accent colorDefault: RippleCore Purple (#0d1594)Used for: Buttons, links, highlights

Muted

Secondary text/backgroundsDefault: Light Grey (#F5F5F7)Used for: Secondary text, disabled states

​
Color Picker Controls

Each color has 3 controls:
  1. Hue Slider (0° - 360°)
    • Changes the base color (red, orange, yellow, green, etc.)
    • Example: 270° = purple, 180° = cyan
  2. Saturation Slider (0% - 100%)
    • Controls color intensity
    • 0% = grey, 100% = vivid
  3. Lightness Slider (0% - 100%)
    • Controls brightness
    • 0% = black, 50% = color, 100% = white
OKLCH Color Space: The theme editor uses OKLCH (modern, perceptually-uniform color space) for consistent brightness across all hues. Colors are automatically converted to RGB for web display.

​
Light vs. Dark Mode

Independent Themes:
  • Light mode and dark mode have separate color palettes
  • Edit each mode independently
  • Toggle between modes to preview
Best Practices: 
Light Mode:
- Background: Very light (95-100% lightness)
- Foreground: Very dark (0-10% lightness)
- High contrast for readability

Dark Mode:
- Background: Very dark (5-15% lightness)
- Foreground: Very light (85-95% lightness)
- Slightly lower contrast to reduce eye strain

​
Professional Presets

​
Built-in Theme Presets

  • Default RippleCore
  • Corporate Blue
  • Nature Green
  • Tech Purple
Brand: RippleCore official themeColors:
  • Primary: Ripple Purple (#0d1594)
  • Accent: Teal (#26dbd9)
  • Highlight: Pink (#ff66c4)
Use Case: RippleCore standard branding, demo presentations
How to Apply:
  1. Click “Presets” dropdown
  2. Select desired preset
  3. Preview loads instantly
  4. Customize further or save as-is

​
AI Theme Generation

✨ AI-Powered: Use GPT-4 to generate custom themes from natural language descriptions.

​
How AI Generation Works

Input: Natural language description of brand/feeling Output: Complete 31-color theme matching your description Processing: Uses OpenAI GPT-4 with color theory expertise

​
Using the AI Generator

Step 1: Open AI Dialog
  • Click “AI Generate” button in theme editor
  • Modal opens with text input
Step 2: Describe Your Brand Write a natural language description:
Prompt:
Professional financial services company. Navy blue primary,
gold accents, trustworthy and conservative feel.
Result: Navy/gold theme with high contrast, serif-inspired
Prompt:
Environmental charity focused on reforestation. Natural greens,
earthy browns, warm and approachable.
Result: Forest green/earth brown theme with organic feel
Prompt:
Modern SaaS startup. Electric purple and cyan, vibrant gradients,
innovative and energetic.
Result: Purple/cyan theme with gradient-ready colors
Prompt:
Healthcare provider. Calming blue, medical white, clean and
trustworthy with gentle accents.
Result: Soft blue/white theme with healing aesthetic
Prompt:
University with tradition. Royal blue and gold, academic,
prestigious but modern.
Result: Royal blue/gold theme with scholarly elegance
Prompt:
Italian restaurant. Warm reds, cream, and olive green.
Appetizing and welcoming.
Result: Warm red/cream theme with Mediterranean feel
Step 3: Generate & Preview
  • Click “Generate Theme”
  • AI processes in 3-5 seconds
  • Theme loads in preview panel
Step 4: Refine or Accept
  • Manually adjust any colors
  • Regenerate with different prompt
  • Save when satisfied

​
AI Generation Tips

Be Specific:
  • ✅ “Navy blue primary, gold accents, financial services”
  • ❌ “Make it look professional”
Include Emotions:
  • ✅ “Trustworthy, conservative, established”
  • ❌ Just color names without context
Mention Industry:
  • ✅ “Healthcare provider, calming blue”
  • ❌ Generic descriptions
Reference Brands (if similar):
  • ✅ “Similar to Stripe’s branding but greener”
  • ❌ No reference points

​
Rate Limits

AI Generation Limits:
  • Free Tier: 5 generations per day
  • Paid Tier: 10 generations per day
  • Enterprise: Unlimited
Workaround: If you hit limits, use presets + manual customization

​
WCAG Compliance Validation

Accessibility Required: All themes must meet WCAG 2.1 AA contrast standards for text readability.

​
Automatic Contrast Checking

The theme editor automatically validates:
  • Background vs. Foreground contrast (≥4.5:1 for normal text)
  • Primary vs. Background contrast (≥3:1 for large text)
  • Muted vs. Background contrast (≥4.5:1)
Warnings:
  • 🔴 Red indicator: Fails WCAG AA (< 4.5:1 ratio)
  • 🟡 Yellow indicator: Passes AA, fails AAA (4.5:1 - 7:1)
  • 🟢 Green indicator: Passes WCAG AAA (≥7:1)
What to do:
  1. If you see 🔴 red, adjust lightness sliders
  2. Increase contrast between text and background
  3. Test with preview panel readability

​
Manual Contrast Testing

Test your theme:
  1. Preview with actual client data
  2. Check all text sizes (headings, body, captions)
  3. Test light mode AND dark mode
  4. Verify form inputs are readable
External Tools:

​
Live Preview Panel

​
What You See

Preview Components:
  • Dashboard layout with cards
  • Data tables
  • Forms and inputs
  • Buttons and links
  • Charts and graphs
  • Navigation elements
Real-time Updates:
  • Changes apply instantly (< 100ms)
  • No page reload required
  • Preview all components simultaneously

​
Testing Your Theme

Checklist:
  • Dashboard cards readable?
  • Primary buttons visible?
  • Form inputs clear?
  • Table rows distinguishable?
  • Charts colors distinct?
  • Navigation clickable?
  • Error states visible?
  • Success messages stand out?
Toggle between modes:
  • Test light mode thoroughly
  • Switch to dark mode
  • Verify both work well

​
Saving & Applying Themes

​
Save Theme to Client

Step 1: Review Your Theme
  • Check all colors in preview
  • Verify WCAG compliance (all 🟢 green)
  • Test both light and dark modes
Step 2: Click “Save Theme”
  • Button in top-right of editor
  • Confirmation modal appears
  • Option to apply immediately or save as draft
Step 3: Choose Application Mode

​
Exporting Themes

Export Formats:
  • JSON: Theme configuration for version control
  • CSS: Static stylesheet for direct use
  • Tailwind Config: For Tailwind CSS projects
How to Export:
  1. Open theme in editor
  2. Click “Export” dropdown
  3. Select format
  4. Download file
Use Cases:
  • Share theme with client for approval
  • Version control theme configurations
  • Apply theme to external websites
  • Backup before major changes

​
Email Template Theming

Automatic: Client email templates (invitations, reports) automatically use their custom theme.

​
How Email Theming Works

Colors Applied:
  • Primary: Header background, button colors
  • Background: Email body background
  • Foreground: Text color
  • Accent: Links and highlights
Compatibility:
  • OKLCH colors converted to RGB for email clients
  • Tested in Gmail, Outlook, Apple Mail, Yahoo
  • Fallback colors for unsupported clients
Preview Email Themes:
  1. Save theme in editor
  2. Navigate to client invitation page
  3. Click “Preview Email”
  4. See themed invitation template

​
Advanced Techniques

​
Color Harmony Strategies

Monochromatic:
  • Use one hue, vary lightness/saturation
  • Example: All blues from navy to sky
  • Effect: Calm, unified, professional
Analogous:
  • Use adjacent hues (e.g., blue + green + teal)
  • Example: Ocean theme (blue-green-teal)
  • Effect: Harmonious, natural
Complementary:
  • Use opposite hues (e.g., blue + orange)
  • Example: Corporate (navy + gold)
  • Effect: Bold, energetic, high contrast
Triadic:
  • Use 3 evenly-spaced hues (e.g., red + yellow + blue)
  • Example: Primary colors scheme
  • Effect: Vibrant, balanced

​
Brand Color Matching

From Client Logo:
  1. Extract Colors:
    • Use eyedropper tool on logo file
    • Get hex codes (#RGB format)
  2. Input in Theme Editor:
    • Paste hex code
    • Adjust lightness for backgrounds
    • Create variations for hover states
  3. Build Palette:
    • Primary: Main brand color
    • Secondary: Accent from logo
    • Neutral: Complement for text
From Brand Guidelines:
  • Clients often have PANTONE, CMYK, or HEX codes
  • Convert to HSL using online tools
  • Input HSL directly into sliders

​
Performance Optimization

Compiled vs Runtime:
MetricBuild-timeRuntime
Load Time10ms50ms
Cache✅ Yes❌ No
Build StepRequiredNone
UpdatesRecompileInstant
Recommendation:
  • Development: Runtime (faster iteration)
  • Production: Compiled (best performance)

​
Troubleshooting

​
Common Issues

Symptoms: Preview shows changes, but client app doesn’tCauses:
  • Theme not saved
  • Client hasn’t refreshed browser
  • Cache not cleared
Solutions:
  1. Click “Save Theme” button
  2. Ask client to hard-refresh (Ctrl+Shift+R / Cmd+Shift+R)
  3. Clear browser cache
  4. Recompile theme if using build-time mode
Symptoms: 🔴 Red indicators on color pickersCause: Text/background contrast too low (< 4.5:1)Solutions:
  1. Increase lightness difference between text and background
  2. Use darker text on light backgrounds
  3. Use lighter text on dark backgrounds
  4. Test with actual content, not just preview
Symptoms: “Generation failed” errorCauses:
  • Rate limit hit (10/day)
  • OpenAI API issues
  • Invalid prompt
Solutions:
  1. Check rate limit (wait 24 hours or upgrade)
  2. Try simpler, more specific prompt
  3. Use presets + manual customization
  4. Contact support if persistent
Symptoms: Dark mode looks wrongCause: Light mode colors copied directly to dark modeSolution:
  1. Edit dark mode separately
  2. Invert lightness (light bg → dark bg, dark text → light text)
  3. Reduce saturation slightly for dark mode
  4. Test both modes independently
Symptoms: Emails still use default RippleCore colorsCauses:
  • Theme not compiled
  • Email client doesn’t support custom CSS
Solutions:
  1. Ensure theme is saved and compiled
  2. Test with different email client
  3. Check email preview before sending
  4. Use high-contrast colors for better email compatibility

​
Best Practices

​
Do’s ✅

  • Test Both Modes: Always preview light AND dark mode
  • Check Accessibility: Ensure all 🟢 green contrast indicators
  • Use Presets: Start with preset, customize from there
  • Name Themes: Use descriptive names (e.g., “Acme Corp - Royal Blue”)
  • Export Backups: Download JSON backups before major changes
  • Compile for Production: Use build-time compilation for live clients

​
Don’ts ❌

  • Don’t Skip Dark Mode: Even if client doesn’t use it, configure it properly
  • Don’t Ignore Warnings: 🔴 Red indicators mean readability issues
  • Don’t Copy Light→Dark: Dark mode needs inverted lightness values
  • Don’t Forget Emails: Test email previews with new themes
  • Don’t Overuse AI: AI is a starting point, always manually refine
  • Don’t Use Extreme Colors: Very bright/dark colors cause eye strain

​
FAQs

Answer: One active theme per client organization, but you can export unlimited backups and re-import later.
Answer: Yes! Export theme as JSON, then import into other client organizations. Great for consulting firms with similar clients.
Answer: Yes, themes apply to all platforms: web dashboard, mobile web, and email templates. Native mobile apps coming in Phase 3.
Answer: Currently consultant-only. Self-service theme editing for clients coming in v1.3.
Answer: Changes apply immediately for runtime themes. For compiled themes, recompile and redeploy. Users see changes on next login.
Answer: Custom fonts coming in v1.2. Currently limited to system fonts (Helvetica, Arial, etc.).

​
Next Steps

Consultant Guide

Complete guide to consultant portal features

White-Label Branding

Full white-label capabilities overview

Known Issues

Current limitations and workarounds

API Reference

Theme API endpoints for developers
Need Help? Contact consultant support at partners@ripplecore.co.uk