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

# Theming & Design Changes

> Customize your app's visual identity and branding with Specode AI

## Logo and Branding Assets

Upload your logo and favicon as separate files directly in Specode, simply drag and drop or click to upload:

* **Logo**: Upload your main logo file (PNG, JPG, or SVG)
* **Favicon**: Upload your browser tab icon separately

<Tip>
  Upload files first, then reference them in your prompts. For example, after uploading, say: "Apply the logo I just uploaded to the header and login page"
</Tip>

## Understanding Shadcn Theming

Specode uses Shadcn UI, which provides a powerful CSS variable-based theming system. The easiest way to transform your app's look is by customizing these key elements:

### Essential Customizations

<CardGroup cols={2}>
  <Card title="Primary Color" icon="palette">
    Changes buttons, links, selected states, and active elements throughout the app
  </Card>

  <Card title="Font Colors" icon="font">
    Adjusts all text from headings to body content for better readability
  </Card>

  <Card title="Button Styling" icon="rectangle">
    Modifies all interactive buttons including size, radius, and hover effects
  </Card>

  <Card title="Backgrounds" icon="square">
    Updates page backgrounds, card backgrounds, and surface colors
  </Card>
</CardGroup>

<Note>
  **How it works:** Shadcn uses CSS variables like `--primary`, `--background`, and `--foreground`. When you change these, the entire app updates automatically. Learn more at [Shadcn Theming Docs](https://ui.shadcn.com/docs/theming).
</Note>

## Practical Styling Examples

Here are specific prompts for customizing different parts of your application:

<CodeGroup>
  ```text Forms theme={null}
  Style all forms with rounded corners (radius-md), 
  add focus rings in our brand color #0066CC, 
  and increase input height to 48px for better touch targets
  ```

  ```text Cards theme={null}
  Update all cards to have subtle shadows (shadow-sm),
  8px border radius, and light gray borders (#E5E7EB)
  ```

  ```text Navigation theme={null}
  Change the sidebar background to dark blue (#1E3A8A),
  make navigation text white, and highlight active items
  with a lighter blue background
  ```

  ```text Buttons theme={null}
  Make all primary buttons use our brand color #0066CC,
  add 12px padding, rounded-lg corners, and a darker
  shade on hover (#0052A3)
  ```

  ```text Tables theme={null}
  Style data tables with alternating row colors,
  sticky headers, and our brand color for sorting indicators
  ```

  ```text Modals theme={null}
  Update all modals with 16px border radius,
  semi-transparent backdrop, and slide-up animation
  ```

  ```text Alerts theme={null}
  Style success alerts with green (#10B981),
  errors with red (#EF4444), and add icons
  to each alert type
  ```

  ```text Typography theme={null}
  Set all headings to use Inter font,
  body text to use system fonts,
  and increase base font size to 16px
  ```
</CodeGroup>

## Best Practices

<CardGroup cols={2}>
  <Card title="Do" icon="check" color="#10B981">
    * Upload logo and favicon early
    * Apply branding incrementally
    * Test on different screen sizes
    * Ensure text readability
    * Consider accessibility
  </Card>

  <Card title="Don't" icon="xmark" color="#EF4444">
    * Use too many colors
    * Make text too small
    * Ignore mobile users
    * Forget dark mode option
    * Sacrifice usability for style
  </Card>
</CardGroup>

<Note>
  **Ready to customize?** Start with "Upload logo and set primary color to \[your brand color]" or explore [Adding Features vs. Modifying](/overview/getting-started/adding-features-vs-modifying) for functional changes.
</Note>