> ## Documentation Index
> Fetch the complete documentation index at: https://help.thedouble.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

| **Element**       | **Double**           | **Card**                            |
| :---------------- | :------------------- | :---------------------------------- |
| **Color themes**  | Skins (pre-built)    | Themes (Flat, Memphis, Glass, etc.) |
| **Backgrounds**   | Solid/Gradient       | Color, Pattern, or Image            |
| **Fonts**         | Individual selection | Font pairs or custom                |
| **Customization** | Style panel          | Card builder modal                  |
| **Animation**     | Voice Orb            | N/A                                 |
| **Primary color** | Accent color         | Background/widget tint              |

\\