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

# Customize Your Athlete Portal Design

> Learn how to customize your Athlete Portal's appearance with themes, brand colors, and button styling for a professional look.

<Info>
  **Where to find this**: Dashboard → App Builder → Settings → Design
</Info>

<img src="https://mintcdn.com/coachiq/klKOk2dzH6UoNHDF/images/athlete-portal-design-settings.png?fit=max&auto=format&n=klKOk2dzH6UoNHDF&q=85&s=dc35792109a2e6b319122607b04fc6f3" alt="CoachIQ Athlete Portal design settings with theme and color options" width="2210" height="1370" data-path="images/athlete-portal-design-settings.png" />

## What you'll accomplish

Customize your Athlete Portal's visual appearance to match your brand. You'll configure the theme (dark or light mode), set your primary brand color, and customize button text colors.

## Accessing design settings

<Steps>
  <Step title="Navigate to App Builder">
    From your dashboard, select **App** in the left sidebar.
  </Step>

  <Step title="Go to Settings">
    Click on **Settings** in the navigation menu.
  </Step>

  <Step title="Select Design">
    Choose **Design** to access your portal's visual customization options.
  </Step>
</Steps>

## Configuring your design

### Theme selection

<Steps>
  <Step title="Choose your theme">
    In the Theme dropdown, select either:

    * **Light mode** - Clean, bright interface ideal for daytime use
    * **Dark mode** - Reduced eye strain, modern appearance

    <Frame>
      <img src="https://mintcdn.com/coachiq/EMRNm-QKOwFJSO2Y/images/design-settings-portal.png?fit=max&auto=format&n=EMRNm-QKOwFJSO2Y&q=85&s=0a911b783bc7befcde3435d066276802" alt="Design Settings Portal" width="4132" height="2360" data-path="images/design-settings-portal.png" />
    </Frame>
  </Step>

  <Step title="Preview changes">
    Your selection updates the preview immediately. Athletes will see this theme when they access your portal.
  </Step>
</Steps>

### Brand colors

<img src="https://mintcdn.com/coachiq/klKOk2dzH6UoNHDF/images/Athlete-portal-design-settings-selectcolor.png?fit=max&auto=format&n=klKOk2dzH6UoNHDF&q=85&s=dbff6a75e1805be51fca0ac598fe075d" alt="CoachIQ Athlete Portal color picker for selecting brand colors" width="2210" height="1370" data-path="images/Athlete-portal-design-settings-selectcolor.png" />

<Steps>
  <Step title="Set Primary Color">
    Click the **Primary Color** selector and choose your main brand color. This affects:

    * Navigation highlights
    * Active buttons
    * Links and accents
    * Selected items

    Use your hex code (e.g., #ff0000) for exact brand matching.
  </Step>

  <Step title="Set Button Text Color">
    Choose the **Primary Button Text Color** to ensure readable text on your buttons.

    * Use white (#ffffff) for dark primary colors
    * Use black (#000000) for light primary colors
  </Step>
</Steps>

## Saving your design

<Steps>
  <Step title="Review your choices">
    Check that your theme and colors work well together.
  </Step>

  <Step title="Update Design">
    Click **Update Design** to save and apply your changes.

    <Check>
      Changes apply immediately. Athletes see the new design on their next login or refresh.
    </Check>
  </Step>
</Steps>

## Design best practices

<Tip>
  **Color contrast**: Ensure your primary color and button text color have sufficient contrast for readability. Test with both themes if you allow athletes to switch.
</Tip>

<Tip>
  **Brand consistency**: Use the exact hex codes from your brand guidelines to maintain professional consistency across all touchpoints.
</Tip>

<Tip>
  **Theme selection**: Consider your primary user base - dark mode works well for early morning/evening training apps, while light mode is ideal for daytime facilities.
</Tip>

## Common questions

<AccordionGroup>
  <Accordion title="Can athletes choose their own theme?">
    No, the theme you select applies to all athletes. This ensures brand consistency across your portal.
  </Accordion>

  <Accordion title="How do I find my brand's hex color?">
    You can:

    * Ask your designer for brand hex codes
    * Use online color pickers
    * Extract colors from your logo using free tools
    * Common format: #ff0000 (red) or #000000 (black)
  </Accordion>

  <Accordion title="Will this affect my website too?">
    No, these settings only apply to your Athlete Portal (App Builder). Website design is configured separately in Website Builder.
  </Accordion>

  <Accordion title="Can I use different colors for different sections?">
    The primary color applies globally throughout the portal. Individual section customization is not currently available.
  </Accordion>
</AccordionGroup>

## Related articles

* [Understanding the Athlete Portal](/athlete-portal/understanding-your-athlete-portal)
* [Website Overview](/website/overview)
* [Paywall Settings](/athlete-portal/paywall-settings)