Skip to main content

Color Palette

The Applied AI Society color system. Warm, natural, and intentionally not techy.

Our palette draws from nature: sunrise oranges, cream skies, olive hills. No neon. No gradients that scream "futuristic." Just colors that make you feel good.

Primary Orange​

Our signature color. Warm, energetic, and trendy. Orange stands out without being aggressive. It's having a moment in fashion and design. Used for CTAs, links, and key highlights.

Orange
#E67B35
Orange Light
#F09550
Orange Dark
#C95F1C

Amber & Gold​

Warm accent tones for gradients and secondary highlights.

Logo Yellow
#FFC14D
Amber
#D4A017
Gold
#E8B923

Cream Backgrounds​

Warm and human. Pure white feels clinical. Dark backgrounds feel dystopian. Cream splits the difference: soft, approachable, and easy on the eyes.

Cream
#FAF7F1
Cream Dark
#F5F0E6
Cream Darker
#EDE7DA

Olive Green​

The rolling hills. Think Windows XP. Green pastures make us feel calm and grounded. This is intentional. AI doesn't have to feel cold and mechanical. Our olive greens remind people that technology can be part of a natural, positive progression.

Olive
#5B6E4D
Olive Light
#7A8F6A
Olive Dark
#3F4D36

Text Colors​

Readable, accessible text hierarchy.

Text Dark
#1A1A1A
Text Medium
#4A4A4A
Text Light
#6B6B6B

Gradients​

Key gradient combinations used throughout the brand.

Logo Wordmark
The 'SOCIETY' gradient
Primary Button
CTAs and actions
Orange Section
Highlighted sections
Cream Background
Page backgrounds
Sun Glow
Decorative elements

Usage Guidelines​

Primary Actions​

Use Orange (#E67B35) for buttons, links, and interactive elements that need attention.

Backgrounds​

Use Cream (#FAF7F1) as the primary background. Use darker creams for cards and sections.

Text​

Use Text Dark (#1A1A1A) for headings, Text Medium (#4A4A4A) for body copy.

Accents​

Use Olive (#5B6E4D) sparingly for variety. Great for icons and decorative elements.

CSS Variables​

All colors are available as CSS custom properties for easy theming.

:root {
  /* Primary Orange */
  --aais-orange: #E67B35;
  --aais-orange-light: #F09550;
  --aais-orange-dark: #C95F1C;
  
  /* Amber & Gold */
  --aais-logo-yellow: #FFC14D;
  --aais-amber: #D4A017;
  --aais-gold: #E8B923;
  
  /* Cream Backgrounds */
  --aais-cream: #FAF7F1;
  --aais-cream-dark: #F5F0E6;
  --aais-cream-darker: #EDE7DA;
  
  /* Olive Green */
  --aais-olive: #5B6E4D;
  --aais-olive-light: #7A8F6A;
  --aais-olive-dark: #3F4D36;
  
  /* Text Colors */
  --aais-text-dark: #1A1A1A;
  --aais-text-medium: #4A4A4A;
  --aais-text-light: #6B6B6B;
}