Appearance, Skins, and Brand Customization

Customize how your Double and Card look. Choose color themes, apply skins, set backgrounds, adjust fonts, and brand everything to match your identity.

​

\

Overview Appearance customization spans three main areas:

1. Double appearance — Colors, skins, voice orb styling in the Double chat interface
2. Card appearance — Card page colors, backgrounds, fonts, themes
3. Overall branding — Consistent colors and visual identity across both

​

\

Double Appearance Access through Configure → Double → Style panel (right sidebar)

​

Skins (Pre-built Color Themes)

Double comes with preset color skins. Click any swatch to apply instantly. Light theme skins

• Multiple light color combinations (blues, greens, oranges, purples, pinks)
• Best for: Light backgrounds, daytime viewing
• Each skin includes coordinated accent colors

Dark theme skins

• Multiple dark color combinations
• Best for: Dark backgrounds, night mode, modern aesthetic
• High contrast for accessibility

How to apply a skin

1. Go to Configure → Double
2. In the Style panel, view all available skins
3. Click the skin swatch you want
4. Changes apply instantly
5. Skin affects: primary buttons, accents, gradients

​

Custom Color Control

Beyond pre-built skins, customize individual colors: Backgrounds section

• Accent color — Primary button color (e.g., chat button)
• Body/Chat background — Choose between SOLID or GRADIENT
  • Solid: Single color background
  • Gradient: Blended color transition
• Additional color pairs for specific UI elements

Voice Orb styling

• Choose between Dot or Pulse animation style
• Customize Voice Orb appearance (see Voice Orb options below)

​

Voice Orb Customization

The animated orb shown during voice calls. Orb style options

• Dot — Static circular avatar
• Pulse — Animated pulsing effect with waves

Customize Orb

• Source speed — How fast the animation originates (0.7 default)
• Orbit speed — How fast orbits move (2.5 default)
• Dot count — Number of dots in animation (384 default)
• Color — Choose orb accent color (auto-adjusts from theme)

Example configurations

• Fast pulse: High orbit speed, more dots
• Subtle pulse: Low orbit speed, fewer dots
• Static dot: Switch to “Dot” mode

​

Text Styling (Double)

Customize text appearance in Double interface: Side identity panel

• Font selection (defaults to Inter)
• Text color

Center identity preview

• Font selection
• Heading color
• Description color

Greetings

• Font selection
• Greeting title color
• Greeting description color

​

\

Card Appearance Access through Card builder (when editing your Card page)

​

Themes

Choose an overall design direction for your Card. Available themes

• Flat — Clean, minimal, modern
• Memphis — Bold shapes, playful, 90s-inspired
• Glass — Frosted glass effect, modern minimalist
• Neuromorphism — Soft shadows, organic shapes, skeuomorphic

How to apply a theme

1. Go to Card builder
2. Click Themes button (modal opens)
3. Select desired theme
4. View preview on left
5. Click “Save changes”

What theme affects

• Card layout and spacing
• Button and element shapes
• Shadow and border styles
• Overall aesthetic direction

​

Corners & Shadows

Fine-tune the physical appearance of UI elements. Corner radius (how rounded corners are)

• S — Small, subtle rounding
• M — Medium rounding (default)
• L — Large, pronounced rounding
• XL — Extra large, very rounded

Shadow depth

• Slider from 0% (no shadow) to high shadow intensity
• Controls depth perception and layering
• Higher = more dramatic 3D effect

​

Backgrounds

Customize Card page background appearance. Background options Color

• Choose solid background color
• Pre-tinted widget colors (light, dark, bright variants)
• Or enter custom HEX color
• Color picker with preset palette

Pattern

• Select Pattern tab
• Geometric or textured patterns
• Customize color (HEX input)

Image

• Select Image tab
• Choose from Gallery (pre-built collections):
  • Minimal Abstract
  • Nature 1, Nature 2
  • Abstract
  • OS wallpaper
  • More galleries available
• Or Custom → Upload your own image
• Image scales to fit Card

How to set background

1. Open Card builder
2. Click background button (modal)
3. Choose Color, Pattern, or Image
4. Configure settings
5. Click “Save changes”

​

Fonts

Control typography across your Card. Font pairs (pre-matched combinations)

• Inter (Inter + Inter) — Clean, modern
• Playfair (Playfair + Open Sans) — Elegant, editorial
• Montserrat (Montserrat + Roboto) — Bold, contemporary
• Lora (Lora + Open Sans) — Serif + sans-serif mix
• Merriweather (Source Sans + Merriweather) — Friendly serif
• Poppins (Poppins + Inter) — Geometric, playful
• And more…

Custom font selection

• Heading font — Used for titles, names, large text
• Description font — Used for body text, smaller copy

Available fonts

• Inter, Playfair, Montserrat, Lora
• Open Sans, Source Sans, Roboto
• PT Sans, Raleway, Oswald
• Crimson Text, Space Grotesk
• And 10+ others

How to change fonts

1. Open Card customization
2. Go to Fonts section
3. Click font pair button to select from pre-made pairs
4. Or individually select:
   • Heading font dropdown
   • Description font dropdown
5. Click “Save changes”

​

\

Tinted Widgets Apply color tints to chat widgets without changing text or layout. How tinted widgets work

• Toggle “Tinted widgets” ON
• Choose from preset color tints
• Light tints: Pastel shades
• Dark tints: Bold, saturated colors
• Bright tints: High contrast colors

Custom widget tint colors

• Widget (HEX) — Background color of widget
• Background (HEX) — Card background that widget sits on
• Adjust to match your brand colors

​

\

Brand Consistency Keep your Double and Card visually aligned: Matching your brand

1. Choose a primary color (e.g., brand blue)
2. Apply as accent in Double skins
3. Use same color in Card background or widget tint
4. Select matching theme (Flat = minimalist, Memphis = playful, etc.)
5. Choose fonts that match brand personality

Example brand setup

• Tech startup: Flat theme, dark skin, sans-serif fonts (Inter, Roboto)
• Creative agency: Memphis or Glass theme, bold colors, elegant fonts (Playfair, Montserrat)
• Professional services: Flat theme, neutral colors, serious fonts (Lora, Open Sans)

​

\

Voice Orb Advanced The Voice Orb is the animated element shown during voice conversations.

​

Customize for brand

• Match orb color to primary brand color
• Adjust animation speed to match brand energy (fast = energetic, slow = calm)
• Choose Pulse for lively brand, Dot for serious/minimal

​

Presets

• Lively: Pulse, high speed, bright color
• Calm: Dot, low speed, soft color
• Professional: Static dot, neutral color

​

\

Best Practices Visual hierarchy

• Use theme to establish overall aesthetic
• Use colors to highlight important actions (buttons, CTAs)
• Use backgrounds to create depth and visual interest

​

Brand alignment

• All customization should reflect your personal or company brand
• Colors should complement your existing branding
• Fonts should match brand personality

​

Accessibility

• Choose high-contrast colors for text readability
• Avoid very light text on light backgrounds
• Test on mobile (colors may look different)

​

Consistency

• Apply same primary color across Double and Card
• Use matching theme on both (or complimentary themes)
• Keep fonts consistent (max 2 fonts total)

​

Testing

• Preview changes before saving
• Test on both desktop and mobile
• Ask others for feedback on aesthetic

​

Quick Reference

\