Design Aesthetic Showcase

Four Colors

The bold, flat, saturated color system that defined a generation of consumer products -- from the iPod Silhouette campaign to iPhone 5C. Four colors. Infinite energy.

The Aesthetic

Four Colors is a color scheme and design aesthetic that dominated consumer products and consumer technology from the mid-2000s to the mid-2010s. First gaining prominence through Apple's iPod "Silhouette" advertising campaign around 2004, the style is characterized by flat visuals that predominantly use four colors -- electric lime, sky blue, hot pink, and neon orange. It functions as a subgenre bridging Superflat Pop and Frutiger Aero, emphasizing personalization, bold saturation, and eye-catching consumer appeal.

Four-Color Constraint

Designs predominantly use exactly four saturated colors as the organizing principle. No more, no less -- the limitation creates the system.

Flat Rendering

No gradients, drop shadows, or 3D effects. All surfaces are solid color fills. The flatness is absolute and uncompromising.

Bold Saturation

Colors are pushed to maximum vibrancy and chroma. Muted tones are avoided entirely. Every hue screams with energy.

Consumer Focus

The aesthetic originates from and is most at home on physical products, packaging, and advertising for mass markets.

Silhouette Compositions

Human or object silhouettes placed against vivid solid-color backgrounds -- directly from the iconic iPod campaign.

Color Variants

The same product or design offered in each of the four colors, encouraging personalization and collection behavior.

Clean Surfaces

Products and designs feature smooth, unadorned surfaces where the color itself is the primary and only design element.

🌈

Rainbow Extensions

The four core colors occasionally expand into wider rainbow arrangements while maintaining the original four as anchors.

Primary Color Palette

The four colors reference Japanese seasonal symbolism: pink for spring, green for summer, orange for autumn, blue for winter. Together they form a balanced system representing completeness.

Lime
Electric Lime
#7FFF00 / #ADFF2F
Summer
Sky
Sky Blue
#00BFFF / #38BDF8
Winter
Pink
Hot Pink
#FF1493 / #FF69B4
Spring
Orange
Neon Orange
#FF6600 / #FF8C00
Autumn

Extended Rainbow + Neutrals

Vivid Red
Bright Yellow
True Purple
Pure White
Silver
Near-Black
Black

Color Usage Rules

How the four colors are deployed across every surface, product, and pixel.

Lime
Sky
Pink
Orange

Typography

Four Colors typography reflects the mid-2000s to mid-2010s consumer tech era: clean, modern sans-serif typefaces with medium-weight, confident letterforms and wide tracking on display text.

Display / 900 Montserrat
Bold Energy
Heading / 700 Montserrat
Product Catalog Headline
Subhead / 600 Poppins
Geometric sans, friendly and approachable for subheadings
Body / 400 DM Sans
Clean geometric body text designed for legibility at all sizes. The style avoids decorative or serif typefaces -- it is emphatically modern and sans-serif. Slightly rounded terminals soften the forms, referencing the friendly, consumer-oriented tone.
Label / 600 Montserrat
Product Label -- All Caps -- Wide Tracking

Recommended Web Fonts

Montserrat Poppins Inter DM Sans Outfit Nunito Sans Sora Lexend

Design Principles

The philosophical foundation underlying every Four Colors composition.

01

Color as Identity

Each of the four hues serves as a distinct identity marker. Products are differentiated by color alone -- no ornamentation necessary.

02

Flat Composition Without Texture

Surfaces are smooth and plastic-like. No noise, grain, or material texture. The absence of depth is the aesthetic statement.

03

Personalization Through Color

The aesthetic empowers the consumer to express individuality via color selection. Which color are you?

04

Eye-Catching Adjacency

The four colors are placed in direct proximity for maximum visual impact and energy. Side by side, they vibrate.

05

Youthful, Optimistic Tone

The palette and its application communicate fun, energy, and accessibility. This is design that wants to be picked up and played with.

06

Seasonal / Cyclical Balance

The four colors form a balanced system representing completeness -- four seasons, four directions, four elemental energies.

07

Product Photography as Design

The product itself, rendered in one of the four colors against a contrasting solid background, constitutes the complete visual composition.

Layout Principles

How Four Colors compositions are structured across space.

Product Grid
Four Columns
Centered
Poster-Like
Whitespace
No Borders
Full-Bleed
Color = Divider
Flat Sections
Catalog Style
Ample Padding
Card Grids
Silhouette Hero
Breathing Space
Color Hierarchy
Responsive

CSS / Design Techniques

The technical building blocks of the Four Colors system.

Solid Color Section Panels

Full-width sections with vivid solid backgrounds. Text is white on saturated colors, dark on lime. Generous padding (5rem+) creates poster-like impact.

.fc-section-pink { background: var(--fc-pink); color: var(--fc-white); padding: 5rem 2rem; text-align: center; }

Four-Color Card Grid

A repeating grid where each card is assigned a color via nth-child rotation. Cards scale on hover with no shadow -- just pure flat color interaction.

.fc-card:nth-child(4n+1) { background: var(--fc-lime); color: var(--fc-dark); } .fc-card:nth-child(4n+2) { background: var(--fc-sky); }

iPod Silhouette Hero

Dark silhouette figures overlaid on vivid backgrounds with brightness(0) filter. The silhouette-on-color pattern is the signature of the aesthetic.

.fc-hero-silhouette { position: absolute; filter: brightness(0); opacity: 0.9; }

Color-Cycle Animation

Backgrounds cycle through all four colors on a continuous loop, creating the iconic iPod-ad energy on hero sections and landing areas.

@keyframes fc-color-cycle { 0% { background: var(--fc-lime); } 25% { background: var(--fc-sky); } 50% { background: var(--fc-pink); } 75% { background: var(--fc-orange); } }

Four-Color Stripe Divider

A thin horizontal bar split into four equal segments, each a different color. Used as a divider, header accent, or loading indicator.

.fc-stripe { display: flex; height: 6px; } .fc-stripe > span { flex: 1; } .fc-stripe > span:nth-child(1) { background: var(--fc-lime); }

Flat Button System

Bold, borderless buttons in pill or square variants. Each color variant is available. Hover state is scale + subtle opacity shift -- never a shadow.

.fc-button { padding: 0.85rem 2.5rem; border: none; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .fc-button:hover { transform: scale(1.05); }

Color Swatch Selector

Circular swatches for product color variant selection, inspired by Apple's product configurators. Active state indicated by border, not shadow.

.fc-swatch { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 3px solid transparent; } .fc-swatch.active { border-color: var(--fc-dark); }

Product Showcase Card

Clean product cards on white backgrounds with no shadow, no border. The product image and color are the complete composition. Price in accent color.

.fc-product-card { background: var(--fc-white); padding: 2rem; text-align: center; border: none; box-shadow: none; }

Button Variants

Lime Pill Sky Pill Pink Pill Orange Pill
Lime Square Sky Square Pink Square Orange Square

Silhouette on Color

The signature compositional technique -- dark human figures dancing against vivid saturated backgrounds. Directly inspired by the iPod campaign that started it all.

Applications by Medium

Four Colors permeated consumer electronics, games, television, packaging, and advertising across a decade of visual culture.

1996
Nintendo 64 "Funtastic Series"
Translucent colored console variants -- an early precursor to the four-color product philosophy.
2004
iPod Silhouette Campaign
The origin point. Apple's dancing silhouettes on vivid color backgrounds defined the aesthetic for a generation.
2004
Katamari Damacy
Vibrant four-color flat compositions in gaming, carrying the aesthetic into interactive media.
2005
iPod Nano / Shuffle / Motorola Pebl
Each model available in lime, sky blue, pink, and orange. The four-color variant system fully established.
2006
Nintendo Wii Accessories
Colored controller jackets and accessories brought the four-color system into living rooms worldwide.
2009
Just Dance / The Fresh Beat Band
Neon silhouettes on saturated backgrounds in gaming; four-color character assignment in children's television.
2010
Wii Party
Four-player color coding matching the aesthetic perfectly -- one color per player, maximum fun.
2013
iPhone 5C
Extended the Four Colors philosophy to smartphones. "For the colorful." The culmination of a decade of color-as-identity.

Which Color Are You?

The power of Four Colors is personalization. Every product, every surface, every identity -- defined by a single, bold color choice.