> ## Documentation Index
> Fetch the complete documentation index at: https://codinitdev-mintlify-update-changelog-codinit-dev-90028.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# customization & settings

> customize CodinIT with design palette, AI providers, and application preferences

## Overview

CodinIT is a web-based AI-powered development platform with extensive customization options. Personalize your color palette, configure AI providers, manage connections, and adjust application behavior through the Control Panel.

### control panel

The Control Panel is your central hub for all customization:

1. Click your **profile avatar** in the top-right corner
2. Select **Settings** from the dropdown menu
3. Browse settings categories or use the search bar

<Tip>
  The Control Panel has two modes: **User** (simplified) and **Developer** (advanced). Toggle between modes based on your needs.
</Tip>

### keyboard shortcuts

* **Toggle Theme**: `Cmd/Ctrl + Alt + Shift + D`
* **Toggle Terminal**: `` Cmd/Ctrl + ` ``

## design palette (experimental)

<Info>
  The Design Palette guides AI in creating designs that match your brand and aesthetic preferences. Customize colors, typography, and visual features for AI-generated interfaces.
</Info>

### accessing design palette

Click the **palette icon** in the chat interface to open the Design System dialog.

### color customization

Control 11 color roles with separate light and dark mode palettes:

<AccordionGroup>
  <Accordion title="brand colors">
    * **Primary**: Main brand color for primary buttons, active links, and key interactive elements
    * **Secondary**: Supporting brand color for secondary buttons, inactive states, and complementary elements
    * **Accent**: Highlight color for badges, notifications, focus states, and call-to-action elements
  </Accordion>

  <Accordion title="base colors">
    * **Background**: Page backdrop for the main application/website background
    * **Surface**: Elevated content areas for cards, modals, dropdowns, and panels
    * **Text**: Primary text for headings, body text, and main readable content
    * **Text Secondary**: Muted text for captions, placeholders, timestamps, and less important information
    * **Border**: Separators for input borders, dividers, table lines, and element outlines
  </Accordion>

  <Accordion title="status colors">
    * **Success**: Positive feedback for success messages, completed states, and positive indicators
    * **Warning**: Caution alerts for warning messages, pending states, and attention-needed indicators
    * **Error**: Error states for error messages, failed states, and destructive action indicators
  </Accordion>
</AccordionGroup>

### typography options

Choose from 9 professionally selected fonts:

* **Inter** - Default, modern sans-serif
* **Roboto** - Google's popular sans-serif
* **Open Sans** - Friendly and readable
* **Montserrat** - Geometric sans-serif
* **Poppins** - Geometric with playful character
* **Lato** - Humanist sans-serif
* **JetBrains Mono** - Monospace for code
* **Raleway** - Elegant display font
* **Lora** - Serif for traditional look

<Tip>
  Select multiple fonts for fallback support. The first font will be primary, with others serving as backups.
</Tip>

### design features

Toggle visual design features to match your aesthetic:

<CardGroup cols={2}>
  <Card title="rounded corners" icon="circle">
    Adds smooth, rounded corners to elements for a modern, friendly appearance
  </Card>

  <Card title="subtle border" icon="square">
    Adds refined borders to elements for clear visual separation
  </Card>

  <Card title="gradient accent" icon="palette">
    Applies gradient effects to accent elements for visual depth
  </Card>

  <Card title="soft shadow" icon="cloud">
    Adds subtle shadows for elevation and depth perception
  </Card>

  <Card title="frosted glass" icon="eye">
    Creates translucent, blurred backgrounds for modern aesthetics
  </Card>
</CardGroup>

### styling controls

Fine-tune visual appearance:

**border radius**

* None (0px)
* Small (0.25rem)
* Medium (0.375rem) - Default
* Large (0.5rem)
* Extra Large (0.75rem)
* Full (9999px) - Pill-shaped

**shadow**

* None
* Small
* Medium
* Large
* Extra Large

**spacing**

* Tight (0.75rem)
* Normal (1rem) - Default
* Relaxed (1.25rem)
* Loose (1.5rem)

### live preview

The Design Palette includes real-time preview with:

* Hero sections with your color scheme
* Button styles (primary and secondary variants)
* Typography hierarchy
* Pricing cards with features
* FAQ sections
* Stats displays

Changes reflect instantly for experimentation before saving.

<Warning>
  The Design Palette is experimental. Preferences are stored locally and not synced across devices.
</Warning>

### preset themes

11 preset design themes to jumpstart customization:

* **Minimal** - Clean, distraction-free design
* **Modern** - Contemporary with bold accents
* **Carbon** - IBM Carbon-inspired system
* **Material** - Google Material Design principles
* **Flat** - Flat design with vibrant colors
* **Neobrutalism** - Bold borders and stark contrasts
* **Glassmorphism** - Frosted glass effects
* **Claymorphism** - Soft, 3D clay-like elements
* **Retro** - Nostalgic design patterns
* **Neumorphism** - Soft UI with subtle shadows
* **Cyberpunk** - Futuristic neon aesthetics

## control panel settings

### profile

Manage your account and personal information:

* Username and display name
* Bio and avatar
* Theme preference (Light/Dark/System)
* Language and timezone
* Notification preferences

### features

Toggle experimental features and new capabilities:

* **Auto-select template**: Automatically select templates for new projects
* **Context optimization**: Optimize AI context window usage
* **Developer mode**: Enable advanced developer features and tools
* **Event logs**: Enable detailed system event logging

<Info>
  Features marked as experimental may change or be removed in future versions.
</Info>

### cloud providers

Configure cloud-based AI providers:

<CardGroup cols={3}>
  <Card title="anthropic" icon="brain">
    Claude models with extended thinking
  </Card>

  <Card title="openai" icon="sparkles">
    GPT-4 and o1 reasoning models
  </Card>

  <Card title="google" icon="robot">
    Gemini Pro and Flash models
  </Card>

  <Card title="mistral ai" icon="zap">
    Mistral and Codestral models
  </Card>

  <Card title="groq" icon="gauge">
    Ultra-fast inference platform
  </Card>

  <Card title="deepseek" icon="code">
    DeepSeek reasoning models
  </Card>
</CardGroup>

**Configuration per provider:**

* Enable/disable provider
* API key management
* Base URL (for compatible providers)
* Model selection

### local providers

Configure local AI inference:

* **Ollama**: Run models locally via Ollama
* **LM Studio**: Desktop application for local models
* **OpenAI-compatible**: Custom OpenAI-compatible endpoints

**Local provider settings:**

* Custom base URL
* Connection testing
* Model discovery
* Enable/disable toggle

<Tip>
  Local providers require the respective software running on your machine. Connection status is shown in real-time.
</Tip>

### API keys

Centralized API key management for all AI providers:

* Add, edit, or remove API keys
* Test key validity
* Export keys for backup
* Import keys from backup

<Warning>
  API keys are stored in browser localStorage. Use browser profiles or incognito mode for additional security.
</Warning>

### connections

Manage integrations with external services:

**github**

* Authenticate with GitHub
* Browse repositories
* Clone templates
* Push local projects

**vercel**

* Connect Vercel account
* Deploy projects
* View deployment status

**netlify**

* Connect Netlify account
* Deploy sites
* Manage domains

**cloudflare**

* Configure Cloudflare Pages
* Deploy applications

**diagnostics**

* Test connection status
* View connection logs
* Troubleshoot issues

### data management

Control how CodinIT handles your data:

* View storage usage
* Export chat history
* Clear conversation data
* Download project files
* Manage local storage

<Info>
  All data is stored locally in your browser. Clearing browser data will remove all CodinIT data.
</Info>

### notifications

Configure notification preferences:

* System notifications
* Deployment status updates
* Error alerts
* Feature announcements

### service status

Monitor AI provider availability:

* Real-time service status for 19+ providers
* Uptime monitoring
* Incident reports
* Historical data

### event logs

View detailed system events:

* AI model interactions
* WebContainer operations
* File system changes
* Network requests
* Error tracking

<Tip>
  Enable event logs in Features settings for detailed debugging information.
</Tip>

### debug

Advanced debugging tools:

* System diagnostics
* Memory usage
* Browser information
* WebContainer status
* Console logs
* Performance metrics

### updates

Check for CodinIT updates:

* Current version information
* Available updates
* Release notes
* Auto-update configuration

### task manager

Monitor system resources:

* CPU usage
* Memory consumption
* Active processes
* WebContainer status
* Terminal sessions

### tab management

Customize Control Panel tabs:

* Show/hide tabs
* Reorder tabs
* Reset to defaults
* Separate User and Developer modes

<Tip>
  Drag and drop tabs to reorder them. Changes save automatically.
</Tip>

### light and dark modes

CodinIT supports three theme modes:

* **Light**: Optimized for bright environments
* **Dark**: Reduces eye strain in low light (Default)
* **System**: Follows operating system preference

**Change theme:**

1. Open Control Panel → Profile
2. Select theme preference
3. Or use keyboard shortcut: `Cmd/Ctrl + Alt + Shift + D`

### theme persistence

Theme preference is stored in browser localStorage and persists across sessions.

## keyboard shortcuts

CodinIT has minimal keyboard shortcuts by design:

| Action          | Shortcut                     |
| --------------- | ---------------------------- |
| Toggle theme    | `Cmd/Ctrl + Alt + Shift + D` |
| Toggle terminal | `` Cmd/Ctrl + ` ``           |

<Info>
  More keyboard shortcuts are planned for future releases based on user feedback.
</Info>

## browser storage

All CodinIT customization is stored in browser localStorage:

**Stored data:**

* Design palette preferences
* Provider configurations
* API keys
* Theme preference
* Feature toggles
* Tab configuration
* Connection tokens

<Warning>
  Clearing browser data or using incognito mode will reset all settings. Export important data before clearing browser storage.
</Warning>

## developer mode

Enable advanced features for power users:

**Enabled features:**

* Additional debug tabs
* Extended event logging
* System diagnostics
* Memory monitoring
* WebContainer controls

**Enable developer mode:**

1. Open Control Panel → Features
2. Toggle "Developer mode"
3. Additional tabs appear in Developer window

## troubleshooting

### settings not saving

* Check browser localStorage permissions
* Disable browser extensions that block storage
* Try a different browser
* Clear cache and reload

### theme not applying

* Check browser theme preference
* Try toggling theme manually
* Clear browser cache
* Refresh the page

### API keys not working

* Verify key validity in API Keys tab
* Test connection in Cloud Providers tab
* Check provider status in Service Status
* Review event logs for errors

### design palette changes not visible

* Click "Save Changes" after customization
* Refresh the page
* Clear browser cache
* Check that Design Palette is enabled

## next steps

<CardGroup cols={2}>
  <Card title="ai chat & commands" icon="robot" href="/essentials/ai-chat-commands">
    Master development
  </Card>

  <Card title="select your model" icon="brain" href="/getting-started/select-your-model">
    Choose the best AI provider
  </Card>

  <Card title="integrations" icon="plug" href="/integrations/git">
    Connect external services
  </Card>

  <Card title="troubleshooting" icon="wrench" href="/support/troubleshooting">
    Fix common issues
  </Card>
</CardGroup>