Project Appearance

Overview

The appearance settings allow you to customize how your project portal looks to clients and team members. Create a branded experience that matches your organization's identity with custom colors, button styles, and saved palettes.

Accessing Appearance Settings

Navigate to: Projects → [Your Project] → Settings → Appearance

Workspace Style Configuration

The workspace style defines the overall look and feel of the project portal.

Background Color

Purpose: Sets the main page background
Default: #F7FAFC (light gray)

Considerations:
- Affects overall readability
- Creates visual hierarchy
- Should be neutral to avoid eye strain
- Typically light for better contrast

Examples:
✓ #F7FAFC - Light gray (professional)
✓ #FFFFFF - Pure white (clean, minimal)
✓ #F5F5F5 - Off-white (softer than pure white)

Primary Color

Purpose: Main brand identity element
Default: #121722 (dark slate)

Uses:
- Headers and navigation
- Main text and headings
- Primary brand emphasis
- Important UI elements

Considerations:
- Should have strong contrast with background
- Represents your brand
- Used most frequently in the UI

Examples:
✓ #121722 - Professional dark slate
✓ #1A202C - Deep charcoal
✓ #0066CC - Corporate blue

Secondary Color

Purpose: Supporting UI elements
Default: #2D3748 (medium gray)

Uses:
- Subheadings
- Less prominent content
- Supporting text
- Dividers and borders

Considerations:
- Complements primary color
- Slightly lighter/softer than primary
- Provides visual hierarchy

Examples:
✓ #2D3748 - Balanced gray
✓ #4A5568 - Warm gray
✓ #718096 - Light gray

Accent Color

Purpose: Highlights and interactive elements
Default: #A0AEC0 (soft blue-gray)

Uses:
- Links and hover states
- Interactive element highlights
- Badges and labels
- Call-to-action elements

Considerations:
- Draws attention without overwhelming
- Should stand out from primary/secondary
- Often brighter or more saturated

Examples:
✓ #A0AEC0 - Subtle blue-gray
✓ #00C9A7 - Vibrant teal
✓ #F59E0B - Warm amber

Button Style Configuration

Buttons are the primary call-to-action elements in your project portal.

Button Background

Purpose: Background color of action buttons
Default: #FFFFFF (white)

Considerations:
- Must be visible against page background
- Should invite interaction
- Often contrasts with workspace background

Examples:
✓ #FFFFFF - Clean white button
✓ #0066CC - Bold blue CTA
✓ #10B981 - Success green

Button Text

Purpose: Text color inside buttons
Default: #121722 (dark)

Considerations:
- Platform automatically checks contrast ratio
- Must meet accessibility standards (WCAG AA)
- Should be highly readable

Accessibility:
The platform validates that button text has sufficient 
contrast against button background. If contrast is 
insufficient, you'll receive a warning.

Examples:
✓ #121722 - Dark text on light button
✓ #FFFFFF - White text on dark button
✓ #1A202C - Very dark for maximum contrast

Color Palette Management

Save and reuse complete color schemes for quick switching.

Default Palettes

Monochrome Palette

Primary: #121722
Secondary: #2D3748
Accent: #A0AEC0
Button Background: #FFFFFF
Button Text: #121722
Background: #F7FAFC

Use Case: Professional, minimal, universally appropriate

Brand Palette (Auto-Inherited)

Automatically loads from Organization settings

If your organization has brand colors configured:
- Settings → Organization → Brand Colors
These colors are automatically available as a palette

Use Case: Consistent branding across all projects

Creating Custom Palettes

1. Configure your desired colors in the workspace and button style sections
2. Click "Save as New Palette"
3. Enter a palette name (e.g., "Client Acme Brand")
4. Click "Save"

Your custom palette is now available for quick switching.

Managing Palettes

Quick Switch Click any palette card to instantly apply all its colors to your project.

Edit Palette

1. Apply the palette
2. Modify individual colors
3. Click "Update Palette" to save changes

Delete Palette Click the trash icon on any custom palette card.

Note: Default palettes (Monochrome, Brand) cannot be deleted.

Palette Recommendations by Industry

Technology/SaaS

Primary: #1E40AF (Strong blue)
Secondary: #475569 (Slate gray)
Accent: #3B82F6 (Bright blue)
Button Background: #3B82F6
Button Text: #FFFFFF
Background: #F8FAFC

Creative/Agency

Primary: #831843 (Deep magenta)
Secondary: #9F1239 (Rose)
Accent: #F43F5E (Bright pink)
Button Background: #F43F5E
Button Text: #FFFFFF
Background: #FFF1F2

Finance/Professional Services

Primary: #1E3A8A (Navy blue)
Secondary: #475569 (Professional gray)
Accent: #0EA5E9 (Trust blue)
Button Background: #0EA5E9
Button Text: #FFFFFF
Background: #F1F5F9

Healthcare/Medical

Primary: #065F46 (Medical green)
Secondary: #047857 (Forest green)
Accent: #10B981 (Fresh green)
Button Background: #10B981
Button Text: #FFFFFF
Background: #ECFDF5

Live Preview

The appearance editor includes a real-time preview that updates as you adjust colors.

Preview Components

Page Header

• Shows how project name appears
• Displays primary color application
• Preview navigation elements

Content Cards

• Multiple card states (default, hover, active)
• Typography hierarchy
• Background and text contrast

Button Interactions

• Default button state
• Hover effects
• Disabled states
• Text readability

Typography Hierarchy

• Heading levels (H1, H2, H3)
• Body text
• Links and accents
• Secondary text

Using the Preview

1. Make color changes in the editor
2. Preview updates instantly
3. Hover over preview elements to see interaction states
4. Toggle between light/dark backgrounds (if supported)
5. Check readability at different sizes

The preview exactly matches what clients will see in the published portal.

Resetting Appearance

Reset Individual Colors

Each color picker has a reset button to restore the default value:

• Click the circular arrow icon
• Color reverts to platform default
• Other colors remain unchanged

Reset Workspace Style

Click "Reset Workspace Style" to revert all workspace colors to the monochrome default palette:

• Background Color → #F7FAFC
• Primary Color → #121722
• Secondary Color → #2D3748
• Accent Color → #A0AEC0

Button style colors remain unchanged.

Reset Button Style

Click "Reset Button Style" to restore default button colors:

• Button Background → #FFFFFF
• Button Text → #121722

Workspace style colors remain unchanged.

Full Reset

To reset everything:

1. Click "Reset Workspace Style"
2. Click "Reset Button Style"
3. Optionally delete custom palettes

Accessibility Considerations

The platform automatically enforces accessibility standards:

Contrast Ratios

WCAG AA Standards:
- Normal text: Minimum 4.5:1 contrast ratio
- Large text (18pt+): Minimum 3:1 contrast ratio
- UI components: Minimum 3:1 contrast ratio

Button Validation:
If button text contrast is insufficient:
- Warning indicator appears
- Recommendation to adjust colors
- Prevents poor readability

Color Blindness

When choosing colors, consider:

Avoid Relying Solely on Color

• Use text labels in addition to color coding
• Implement patterns or icons
• Provide alternative indicators

Safe Color Combinations

• Blue + Orange (most universally distinguishable)
• Black + White (maximum contrast)
• Purple + Green (works for most types of color blindness)

Test Your Colors Use color blindness simulators to verify your palette remains distinguishable.

Advanced Customization

CSS Variables (For Developers)

The platform exposes CSS variables for advanced theming:

:root {
  --workspace-background: /* Background Color */
  --workspace-primary: /* Primary Color */
  --workspace-secondary: /* Secondary Color */
  --workspace-accent: /* Accent Color */
  --button-background: /* Button Background */
  --button-text: /* Button Text */
}

These variables are applied dynamically when appearance settings change.

Metadata Storage

Appearance settings are stored in the project metadata:

project.metadata = {
  appearance: {
    workspaceBackground: "#F7FAFC",
    workspacePrimary: "#121722",
    workspaceSecondary: "#2D3748",
    workspaceAccent: "#A0AEC0",
    buttonBackground: "#FFFFFF",
    buttonText: "#121722"
  },
  colorPalettes: [
    {
      name: "Custom Palette 1",
      colors: { /* ... */ }
    }
  ]
}

Best Practices

Start with Brand Colors

1. Use your organization's existing brand colors
2. Apply them via the Brand Palette
3. Fine-tune for web readability if needed
4. Save as a custom palette for easy reuse

Test on Multiple Devices

View your project portal on:

• Desktop browsers (Chrome, Firefox, Safari)
• Mobile devices (iOS, Android)
• Tablets
• Different screen sizes

Colors may appear different across devices.

Keep It Simple

Good Approach:
✓ 3-4 main colors
✓ High contrast between text and background
✓ Consistent with existing brand
✓ Professional and readable

Avoid:
✗ Too many colors (overwhelming)
✗ Low contrast (hard to read)
✗ Clashing combinations
✗ Overly bright or neon colors

Update Regularly

• Refresh colors when brand evolves
• Update for seasonal campaigns
• Adjust based on client feedback
• Test accessibility periodically

Troubleshooting

Colors Not Applying

Issue: Changed colors but portal still shows old colors

Solutions:

1. Click "Save" after making changes
2. Hard refresh browser (Ctrl+Shift+R or Cmd+Shift+R)
3. Check in incognito window
4. Wait 30 seconds for cache revalidation
5. Verify you're viewing the correct project

Poor Contrast Warning

Issue: Warning about button text contrast

Solutions:

1. Darken button text or lighten button background
2. Use platform's contrast checker recommendation
3. Try contrasting colors (e.g., white text on dark button)
4. Test in preview before saving

Colors Look Different on Mobile

Issue: Colors appear different on mobile devices

Causes:

• Screen brightness settings
• Color profiles differ between devices
• Mobile browsers render colors slightly differently

Solutions:

• Test on actual devices, not just emulators
• Use standard web-safe colors when possible
• Avoid extreme saturations
• Maintain high contrast

Lost Custom Palette

Issue: Accidentally deleted a custom palette

Current Behavior:

• Palette deletions are permanent
• No built-in recovery mechanism

Prevention:

• Document color values externally
• Take screenshots of palettes
• Export color values to design tools
• Create backup palettes

Next Steps

• Team Collaboration - Add team members to your branded project
• Publishing Projects - Share your branded portal with clients
• Advanced Configuration - Explore metadata and custom fields