Documentation

AI Color Generation

Chromacraft uses Google's Gemini AI to generate cohesive color palettes from text prompts and visual references.

How to Generate a Palette

1. Click the AI Prompt icon in the sidebar (sparkles icon)
2. Enter a description of the palette you want (e.g., "Modern tech startup with blue and purple tones")
3. Optionally, add up to 5 inspiration images
4. Click Generate

Adding Inspiration Images

You can add visual references in several ways:

• Local files: Click the + button and select images from your Mac
• Image URLs: Paste a direct image URL
• Pinterest: Paste a Pinterest pin URL (image is extracted automatically)

Generation Modes

Color Editing

Fine-tune your palette with powerful editing tools. Every color supports both light and dark mode variants.

Editing a Color

1. Hover over a color in the palette view
2. Click the Edit button (pencil icon)
3. Use the color wheel to adjust hue and saturation
4. Use the brightness slider for lightness
5. Or enter exact values in HEX, RGB, HSL, or HSB

Light & Dark Mode

Toggle between Light and Dark mode using the switch in the header. Each color can have different values for each mode.

• Copy to Other: Copy the current color to the other mode
• Reset Dark: Auto-generate a dark variant from the light color

Color Actions

Keyboard Shortcuts

Design Tokens

Design tokens bridge the gap between your color palette and real-world usage. Define semantic meanings for your colors.

Token Structure

Token Categories

• Text: Primary, Secondary, Tertiary, Disabled, Inverse, Link, Error, Success, Warning
• Background: Primary, Secondary, Tertiary, Surface, Elevated, Overlay, Inverse
• Action: Primary, Secondary, Destructive, Disabled, Hover, Pressed, Focus
• Status: Success, Warning, Error, Info, Neutral

Generating Tokens

1. Click the Design Tokens icon in the sidebar
2. Click Generate Tokens to create a default token set with AI-suggested mappings
3. Click any token row to manually adjust which primitive it references
4. Use Regenerate to re-map tokens when your palette changes

Publishing to Figma

1. Click the Publish button in the Design Tokens panel
2. Copy the generated Sync Code
3. Open the Chromacraft Figma plugin and paste the code
4. Click Sync Colors

Export Options

Export your colors in multiple formats for use in your projects.

Code Export (Dev Mode)

Toggle to Dev Mode using the switch in the header to access the code export panel.

Design Tokens Export

Export semantic tokens with primitive references:

• Figma Tokens: Tokens Studio compatible JSON
• CSS Variables: Full CSS with primitives and semantics
• Tailwind: Complete config with semantic names
• SwiftUI: Color extension with mappings

Credits & Purchases

Chromacraft uses a credit-based system for AI generations.

How Credits Work

• Each AI palette generation uses 1 credit
• New users get 3 free credits to try the app
• Credits never expire
• Credits are tied to your device

Purchasing Credits

1. Open Settings (Cmd+,)
2. Select a credit pack
3. Complete the purchase via App Store

Restore Purchases

If you've purchased credits on this device before, go to Settings and click Restore Purchases to recover them.

Alternative: BYOK

You can use your own Gemini API key for unlimited generations. Get a free key from Google AI Studio.