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;
}