Color system

Our color system is designed for reliability, clarity, and trust. Windmill is destined to be used by big companies, so colors must convey a sense of professionalism and seriousness. We stay away from vibrant colors in the application interface and use monochromatic tones with purposeful accent colors.

Design Principles

• Meaningful, not decorative: Every color serves a functional purpose
• Reliability over vibrancy: Muted tones convey trust and professionalism
• Context-aware: Different palettes for app vs marketing contexts
• Accessible: All colors meet WCAG AA contrast requirements
• Consistent: Systematic approach to color usage across all interfaces

Color Philosophy

Colors are meaningful and never decorative. We distinguish between:

• App palette: Less vibrant colors for the core application interface
• Web palette: More vibrant colors for marketing and brand recognition
• Monochromatic scale: Nord-based neutrals for surfaces and backgrounds

Color Palette Overview

Our complete color system in action, showing how all color categories work together across light and dark themes:

Accent Colors

The luminance-blue is our primary accent color, used throughout the app for interactive elements, active states, and user actions.

accent-primary

#758ff8

Primary accent color for buttons, links, active states

accent-hover

#5074f6

Hover state for interactive accent elements

accent-clicked

#2c5beb

Active/pressed state for accent elements

accent-secondary

#293676

Secondary accent for strong emphasis

accent-secondary-hover

#1e255f

Hover state for accent secondary elements

accent-secondary-clicked

#303f82

Active/pressed state for accent secondary elements

accent-selected

#bfdbfe4c

Selected state background

When to use:

• Call-to-action buttons
• Active navigation items
• Toggle switches (on state)
• Progress bars
• Interactive links
• Selected states

Surface Colors

Surface colors create depth and layout structure with clear hierarchy between different interface levels.

surface-primary

#fbfbfd

Main application background

surface-secondary

#efeff4

Secondary backgrounds, sections

surface-tertiary

#ffffff

Cards, modals, elevated surfaces

surface-hover

#cfcfe233

Hover states for neutral elements

surface-selected

#ffffff

Selected neutral elements

surface-disabled

#d8d8e433

Disabled elements, inactive states

surface-sunken

#e8e8ef

Sunken or inset surfaces

surface-input

#ffffff

Input field backgrounds

Text Colors

Text colors provide clear hierarchy and readability across light and dark themes.

text-primary

#3d4758

Default text, body content

text-emphasis

#1d2430

Headers, labels, emphasized content

text-secondary

#718096

Supporting information, metadata

text-tertiary

#505c70

Subtle text, captions

text-hint

#8d93a1

Placeholders, tooltips, hints

text-disabled

#a0aec0

Disabled states, unavailable options

text-accent

#5074f6

Accent colored text, links

Border Colors

Border colors define element separation and structure.

border-light

#e5e7eb

Subtle borders, dividers

border-normal

#9ca3af

Standard borders, form inputs

border-accent

#2c5beb

Accent borders, focus states

border-selected

#a0affa

Selected element borders

Feedback Colors

Standard semantic colors for system feedback and status communication.

success

#32c76d

Success states, positive feedback, completed actions (green-500)

warning

#eab308

Warning states, caution messages, pending actions (yellow-500)

error

#e63b49

Error states, failed actions, destructive operations (red-500)

info

#2c5beb

Information states, neutral notifications (blue-500)

Reserved Colors

These colors are exclusively reserved for specific features and should not be used elsewhere.

ai-primary

#a02cde

AI features, magic wand icon, AI-powered functionality

Usage:

• AI-powered script generation
• Magic wand icons
• AI assistance features
• Smart suggestions

Web/Marketing Colors

More vibrant colors used exclusively for marketing materials and the website (not in the core application).

brand-vibrant

#3B82F6

Marketing primary, website headers, brand materials

brand-secondary

#1E40AF

Marketing accent, call-to-action buttons on website

brand-tertiary

#DBEAFE

Marketing backgrounds, website sections

Important: These colors should never be used in the core application interface. They are reserved for:

• Marketing website
• Landing pages
• Documentation site headers
• Brand materials
• Social media assets

Color Reference

Complete color system with usage guidelines, hex values, and Tailwind classes:

Implementation Rule: Always use the provided Tailwind classes in your components. Never use hex values directly in styles - this ensures consistency and theme switching compatibility.

// ✅ Correct - use Tailwind classes
<button class="bg-accent-primary text-white">Save</button>
<div class="bg-surface-primary border-border-normal">Content</div>

// ❌ Wrong - don't use hex values
<button class="bg-[#758FF8]">Save</button>

Do's and Don'ts

✅ Do

• Use provided Tailwind classes for all color implementations
• Use accent-primary sparingly for important actions
• Rely on surface colors for most interface backgrounds
• Apply text colors according to content hierarchy
• Use proper border colors for element separation
• Apply feedback colors consistently for their semantic meaning
• Test color combinations for accessibility compliance
• Reserve AI purple exclusively for AI features
• Follow the defined color token structure

❌ Don't

• Use hex values directly in component styles or CSS
• Mix web/marketing colors with app interface colors
• Use AI purple for non-AI features
• Create custom color variations between defined tokens
• Use color alone to convey meaning (pair with icons/text)
• Apply accent colors to large surface areas
• Use marketing blue (#3B82F6) in the app interface
• Use accent-primary for large backgrounds
• Mix different color token categories inappropriately

Color-Blind Considerations

• Never use color alone to convey information
• Pair color with icons, text, or patterns
• Test designs with color-blind simulation tools
• Ensure sufficient contrast in monochrome

Quick Reference

Color Token	Light Theme	Dark Theme	Usage
Accent Colors
accent-primary	#758ff8	#7085db	Primary accent color for buttons, links, active states
accent-hover	#5074f6	#5670d5	Hover state for interactive accent elements
accent-clicked	#2c5beb	#425bbd	Active/pressed state for accent elements
accent-secondary	#293676	#e8ebfb	Secondary accent for strong emphasis
accent-secondary-hover	#1e255f	#c3c9df	Hover state for accent secondary elements
accent-secondary-clicked	#303f82	#9da6ca	Active/pressed state for accent secondary elements
accent-selected	#bfdbfe4c	#6790c44c	Selected state background
Surface Colors
surface-primary	#fbfbfd	#2e3441	Main application background
surface-secondary	#efeff4	#272c35	Secondary backgrounds, sections
surface-tertiary	#ffffff	#353c4a	Cards, modals, elevated surfaces
surface-hover	#cfcfe233	#7784a119	Hover states for neutral elements
surface-selected	#ffffff	#434c5e	Selected neutral elements
surface-disabled	#d8d8e433	#212732	Disabled elements, inactive states
surface-sunken	#e8e8ef	#242832	Sunken or inset surfaces
surface-input	#ffffff	#292e38	Input field backgrounds
Text Colors
text-primary	#3d4758	#d4d7dd	Default text, body content
text-emphasis	#1d2430	#eeeff2	Headers, labels, emphasized content
text-secondary	#718096	#a9b0ba	Supporting information, metadata
text-tertiary	#505c70	#a8aeb7	Subtle text, captions
text-hint	#8d93a1	#8d93a1	Placeholders, tooltips, hints
text-disabled	#a0aec0	#9098a2	Disabled states, unavailable options
text-accent	#5074f6	#c7cefc	Accent colored text, links
Border Colors
border-light	#e5e7eb	#374457	Subtle borders, dividers
border-normal	#9ca3af	#a9b0ba	Standard borders, form inputs
border-accent	#2c5beb	#a0affa	Accent borders, focus states
border-selected	#a0affa	#6475b7	Selected element borders
Feedback Colors
success	#32c76d	#32c76d	Success states, positive feedback, completed actions (green-500)
warning	#eab308	#eab308	Warning states, caution messages, pending actions (yellow-500)
error	#e63b49	#e63b49	Error states, failed actions, destructive operations (red-500)
info	#2c5beb	#2c5beb	Information states, neutral notifications (blue-500)
Reserved Colors
ai-primary	#a02cde	#f0c6fb	AI features, magic wand icon, AI-powered functionality
Web/Marketing Colors
brand-vibrant	#3B82F6	#3B82F6	Marketing primary, website headers, brand materials
brand-secondary	#1E40AF	#1E40AF	Marketing accent, call-to-action buttons on website
brand-tertiary	#DBEAFE	#DBEAFE	Marketing backgrounds, website sections

Remember: Colors are meaningful, not decorative. Every color choice should serve a clear functional purpose in the user interface.