Neo Pop (also known as Neo-Pop Art or New Pop) is a postmodern art movement that emerged in the 1980s as a direct evolution of the Pop Art pioneered by Andy Warhol, Roy Lichtenstein, and Jasper Johns in the 1950s and 1960s. Where classic Pop Art maintained a cool, mechanical detachment from its commercial subjects, Neo Pop fully embraces and exaggerates the kitsch, sentimentality, and commodity-driven spectacle of consumer culture. The term “Neo-Pop” was coined by Japanese critic Noi Sawaragi in 1992, though the movement’s visual identity had already crystallized through the work of Jeff Koons, Keith Haring, Kenny Scharf, and Damien Hirst throughout the preceding decade. By the 2000s, Takashi Murakami’s Superflat movement and KAWS’s reinterpretation of cartoon iconography pushed Neo Pop into global mainstream consciousness, blurring the boundary between fine art, fashion, and brand identity.
Visually, Neo Pop is defined by bold black outlines, flat planes of saturated color, clean graphic surfaces, and the appropriation of commercial imagery – logos, product packaging, cartoon characters, celebrity portraits, and advertising tropes rendered at gallery scale. Unlike the mechanical reproduction aesthetic of Warhol-era Pop Art, Neo Pop frequently employs industrial fabrication, polished surfaces, and digital production methods. There are no visible brushstrokes, no muted earth tones, no subtle gradations. Everything is high-chroma, high-contrast, and unapologetically commercial in its visual language while simultaneously offering ironic or critical commentary on the culture it depicts.
Translated to web and UI design, the Neo Pop aesthetic produces graphic-forward, poster-like layouts with bold outlined shapes, saturated primary and secondary color blocks, comic-inspired typography, and playful iconography drawn from consumer culture. The approach favors hard edges over soft gradients, solid fills over textures, and maximum visual impact over understated elegance. It is a celebration of surface, color, and commercial visual culture – design that looks like it could hang in both a Gagosian gallery and a streetwear flagship store. When executed well, Neo Pop web design feels simultaneously art-world sophisticated and pop-culture accessible, channeling the same tension between high and low that defines the movement’s greatest works.
Neo Pop draws its palette from the saturated primaries and secondaries of commercial printing, pop art screen-printing, and cartoon illustration. The colors are pure, unapologetic, and deliberately reminiscent of product packaging and advertising. Black and white serve as structural anchors, while vivid chromatic colors compete for attention in equal measure. There are no pastels, no earth tones, and no desaturated grays in the core palette – every hue is pushed to maximum saturation and confidence.
| Swatch | Hex | Role/Usage |
|---|---|---|
| Pop Red | #FF0033 |
Primary accent, call-to-action buttons, headline emphasis, danger/energy |
| Electric Blue | #0066FF |
Primary accent, link color, interactive elements, trust/coolness |
| Sunshine Yellow | #FFD600 |
Highlight color, badges, notification dots, optimism/energy |
| Hot Magenta | #FF00AA |
Secondary accent, hover states, decorative fills, feminine energy |
| Vivid Green | #00CC44 |
Secondary accent, success states, badges, freshness/commerce |
| Pure Orange | #FF6600 |
Tertiary accent, warning states, price tags, urgency/warmth |
| Deep Violet | #7700CC |
Tertiary accent, premium elements, creative expression |
| Cyan Pop | #00CCDD |
Tertiary accent, informational elements, cool contrast |
| Outline Black | #111111 |
Primary outlines, text, structural borders, graphic definition |
| Canvas White | #FFFFFF |
Page background, negative space, gallery-wall cleanliness |
| Soft White | #F5F5F0 |
Secondary background, card surfaces, off-white warmth |
| Halftone Gray | #CCCCCC |
Ben-Day dot fills, disabled states, secondary structure |
| Warm Cream | #FFF8E7 |
Warm background variant, vintage print paper feel |
| Deep Black | #000000 |
Bold backgrounds, dramatic inversions, dark-mode base |
| Bubble Gum | #FF88CC |
Softer pink accent, secondary hover, playful highlights |
:root {
/* Primary accents */
--np-red: #ff0033;
--np-blue: #0066ff;
--np-yellow: #ffd600;
/* Secondary accents */
--np-magenta: #ff00aa;
--np-green: #00cc44;
--np-orange: #ff6600;
/* Tertiary accents */
--np-violet: #7700cc;
--np-cyan: #00ccdd;
--np-bubblegum: #ff88cc;
/* Structural neutrals */
--np-black: #111111;
--np-deep-black: #000000;
--np-white: #ffffff;
--np-soft-white: #f5f5f0;
--np-cream: #fff8e7;
--np-gray: #cccccc;
/* Functional mappings */
--np-bg-primary: var(--np-white);
--np-bg-secondary: var(--np-soft-white);
--np-bg-dark: var(--np-deep-black);
--np-text-primary: var(--np-black);
--np-text-inverse: var(--np-white);
--np-outline: var(--np-black);
--np-accent: var(--np-red);
--np-accent-alt: var(--np-blue);
--np-highlight: var(--np-yellow);
--np-border-width: 3px;
--np-outline-width: 4px;
/* Shadows -- bold, graphic, non-diffused */
--np-shadow-hard: 4px 4px 0 var(--np-black);
--np-shadow-color: 4px 4px 0 var(--np-red);
--np-shadow-large: 6px 6px 0 var(--np-black);
}
Neo Pop typography is bold, graphic, and confrontational. Display type should feel like it was ripped from a comic book cover, a protest poster, or a product advertisement – oversized, high-impact, and impossible to ignore. Body text remains clean and readable but maintains the sans-serif crispness that keeps the overall design feeling manufactured and commercial. Decorative or script fonts are generally avoided; the aesthetic favors geometric precision and industrial weight over organic handwriting.
| Font | Weight(s) | Usage | Link |
|---|---|---|---|
| Anton | 400 | Hero headlines, oversized display text | Google Fonts |
| Black Ops One | 400 | Impactful display headings, badge text | Google Fonts |
| Bebas Neue | 400 | Condensed headlines, navigation labels, all-caps treatments | Google Fonts |
| Dela Gothic One | 400 | Ultra-bold display, comic-style impact text | Google Fonts |
| Inter | 400, 500, 700 | Body text, UI labels, readable content | Google Fonts |
| Space Grotesk | 400, 500, 700 | Subheadings, secondary display, modern geometric | Google Fonts |
| Outfit | 400, 600, 800 | Versatile sans-serif for body and subheads | Google Fonts |
| Bungee | 400 | Decorative display, pop-culture references, inline/outline variants | Google Fonts |
| Bangers | 400 | Comic-book style headlines, onomatopoeia, playful emphasis | Google Fonts |
| Heading | Body | Vibe |
|---|---|---|
| Anton 400 | Inter 400 | High-impact poster meets clean readability |
| Bebas Neue 400 | Outfit 400 | Condensed commercial headline with modern body |
| Dela Gothic One 400 | Space Grotesk 400 | Ultra-bold comic display with geometric body |
| Bangers 400 | Inter 500 | Playful comic energy with professional content |
| Black Ops One 400 | Outfit 600 | Aggressive display with structured body text |
| Bungee 400 | Space Grotesk 400 | Pop-culture display with crisp geometric body |
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bangers&family=Bebas+Neue&family=Inter:wght@400;500;700&family=Space+Grotesk:wght@400;500;700&family=Outfit:wght@400;600;800&display=swap');
body {
font-family: 'Inter', 'Outfit', sans-serif;
font-weight: 400;
font-size: 1rem;
line-height: 1.65;
color: var(--np-text-primary);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: 'Anton', 'Bebas Neue', sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.05;
color: var(--np-black);
}
/* Pop display heading with outline stroke */
.np-display {
font-family: 'Anton', sans-serif;
font-size: clamp(3rem, 8vw, 7rem);
text-transform: uppercase;
color: var(--np-yellow);
-webkit-text-stroke: 3px var(--np-black);
paint-order: stroke fill;
letter-spacing: 0.02em;
}
/* Comic-style onomatopoeia text */
.np-comic-text {
font-family: 'Bangers', cursive;
font-size: 2.5rem;
color: var(--np-red);
text-shadow: 3px 3px 0 var(--np-black);
transform: rotate(-5deg);
display: inline-block;
}
/* Clean label / category text */
.np-label {
font-family: 'Bebas Neue', 'Space Grotesk', sans-serif;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--np-black);
}
.np-card {
background: var(--np-white);
border: 3px solid var(--np-black);
border-radius: 0;
padding: 2rem;
position: relative;
box-shadow: 5px 5px 0 var(--np-black);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.np-card:hover {
transform: translate(-3px, -3px);
box-shadow: 8px 8px 0 var(--np-black);
}
/* Colored accent bar at top */
.np-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: var(--np-red);
}
.np-card--blue::before { background: var(--np-blue); }
.np-card--yellow::before { background: var(--np-yellow); }
.np-card--magenta::before { background: var(--np-magenta); }
.np-card h3 {
font-family: 'Anton', sans-serif;
font-size: 1.6rem;
text-transform: uppercase;
margin-bottom: 0.75rem;
color: var(--np-black);
}
.np-card p {
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
line-height: 1.6;
color: #333;
}
.np-button {
display: inline-block;
padding: 0.85rem 2.5rem;
font-family: 'Bebas Neue', 'Anton', sans-serif;
font-size: 1.1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
color: var(--np-white);
background: var(--np-red);
border: 3px solid var(--np-black);
border-radius: 0;
box-shadow: 4px 4px 0 var(--np-black);
cursor: pointer;
transition: all 0.15s ease;
position: relative;
}
.np-button:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 var(--np-black);
}
.np-button:active {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 var(--np-black);
}
/* Color variants */
.np-button--blue { background: var(--np-blue); }
.np-button--yellow { background: var(--np-yellow); color: var(--np-black); }
.np-button--magenta { background: var(--np-magenta); }
.np-button--green { background: var(--np-green); color: var(--np-black); }
/* Outline variant */
.np-button--outline {
background: var(--np-white);
color: var(--np-black);
}
.np-button--outline:hover {
background: var(--np-yellow);
}
.np-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
height: 64px;
background: var(--np-white);
border-bottom: 3px solid var(--np-black);
position: sticky;
top: 0;
z-index: 100;
}
.np-nav__logo {
font-family: 'Anton', sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
color: var(--np-black);
text-decoration: none;
letter-spacing: 0.05em;
}
.np-nav__links {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.np-nav__links a {
font-family: 'Bebas Neue', sans-serif;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.08em;
text-decoration: none;
color: var(--np-black);
padding: 0.5rem 1rem;
border: 2px solid transparent;
transition: all 0.15s ease;
}
.np-nav__links a:hover {
background: var(--np-yellow);
border-color: var(--np-black);
}
.np-nav__links a.active {
background: var(--np-red);
color: var(--np-white);
border-color: var(--np-black);
}
.np-hero {
text-align: center;
padding: 6rem 2rem;
background: var(--np-white);
position: relative;
overflow: hidden;
border-bottom: 4px solid var(--np-black);
}
/* Halftone dot background pattern */
.np-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, var(--np-gray) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.3;
pointer-events: none;
}
.np-hero h1 {
font-family: 'Anton', sans-serif;
font-size: clamp(3.5rem, 10vw, 8rem);
text-transform: uppercase;
color: var(--np-red);
-webkit-text-stroke: 3px var(--np-black);
paint-order: stroke fill;
position: relative;
z-index: 1;
line-height: 0.95;
margin-bottom: 1.5rem;
}
.np-hero p {
font-family: 'Inter', sans-serif;
font-size: 1.15rem;
color: #333;
max-width: 600px;
margin: 0 auto 2rem;
position: relative;
z-index: 1;
line-height: 1.7;
}
/* Decorative color blocks behind hero */
.np-hero__accent {
position: absolute;
border: 3px solid var(--np-black);
z-index: 0;
}
.np-hero__accent--1 {
width: 120px;
height: 120px;
background: var(--np-yellow);
top: 10%;
left: 5%;
transform: rotate(12deg);
}
.np-hero__accent--2 {
width: 80px;
height: 80px;
background: var(--np-blue);
bottom: 15%;
right: 8%;
transform: rotate(-8deg);
border-radius: 50%;
}
.np-hero__accent--3 {
width: 60px;
height: 60px;
background: var(--np-magenta);
top: 20%;
right: 12%;
transform: rotate(25deg);
}
/* Classic halftone dot pattern overlay -- apply to any container */
.np-halftone {
position: relative;
}
.np-halftone::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, var(--np-black) 1px, transparent 1px);
background-size: 8px 8px;
opacity: 0.08;
pointer-events: none;
mix-blend-mode: multiply;
}
/* Colored halftone variant -- Lichtenstein-style */
.np-halftone--red::after {
background-image: radial-gradient(circle, var(--np-red) 1.5px, transparent 1.5px);
background-size: 10px 10px;
opacity: 0.15;
}
.np-halftone--blue::after {
background-image: radial-gradient(circle, var(--np-blue) 1.5px, transparent 1.5px);
background-size: 10px 10px;
opacity: 0.12;
}
/* Large-dot decorative halftone -- for backgrounds */
.np-halftone--large::after {
background-image: radial-gradient(circle, var(--np-gray) 3px, transparent 3px);
background-size: 16px 16px;
opacity: 0.2;
}
/* Comic-style speech bubble */
.np-speech-bubble {
position: relative;
display: inline-block;
background: var(--np-yellow);
border: 3px solid var(--np-black);
border-radius: 24px;
padding: 1.25rem 2rem;
font-family: 'Bangers', cursive;
font-size: 1.3rem;
color: var(--np-black);
box-shadow: 3px 3px 0 var(--np-black);
}
/* Speech bubble tail */
.np-speech-bubble::after {
content: '';
position: absolute;
bottom: -20px;
left: 30px;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 20px solid var(--np-yellow);
filter: drop-shadow(2px 2px 0 var(--np-black));
}
/* Outline for the tail to match the border */
.np-speech-bubble::before {
content: '';
position: absolute;
bottom: -24px;
left: 28px;
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 24px solid var(--np-black);
}
/* Thought bubble variant */
.np-speech-bubble--thought {
border-radius: 50%;
padding: 1.5rem 2.5rem;
}
.np-speech-bubble--thought::after {
border: none;
width: 14px;
height: 14px;
background: var(--np-yellow);
border: 3px solid var(--np-black);
border-radius: 50%;
bottom: -18px;
left: 35px;
filter: none;
}
.np-speech-bubble--thought::before {
border: none;
width: 8px;
height: 8px;
background: var(--np-yellow);
border: 2px solid var(--np-black);
border-radius: 50%;
bottom: -28px;
left: 28px;
}
/* Color variants */
.np-speech-bubble--red { background: var(--np-red); color: var(--np-white); }
.np-speech-bubble--red::after { border-top-color: var(--np-red); }
.np-speech-bubble--blue { background: var(--np-blue); color: var(--np-white); }
.np-speech-bubble--blue::after { border-top-color: var(--np-blue); }
/* Starburst / explosion badge -- used for price tags, labels, callouts */
.np-starburst {
display: inline-flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
background: var(--np-yellow);
color: var(--np-black);
font-family: 'Anton', sans-serif;
font-size: 1.3rem;
text-transform: uppercase;
text-align: center;
line-height: 1.1;
clip-path: polygon(
50% 0%, 61% 11%, 75% 3%, 79% 18%,
95% 20%, 88% 35%, 100% 44%, 90% 56%,
98% 70%, 83% 72%, 82% 88%, 68% 82%,
58% 98%, 50% 85%, 42% 98%, 32% 82%,
18% 88%, 17% 72%, 2% 70%, 10% 56%,
0% 44%, 12% 35%, 5% 20%, 21% 18%,
25% 3%, 39% 11%
);
position: relative;
}
.np-starburst--red { background: var(--np-red); color: var(--np-white); }
.np-starburst--magenta { background: var(--np-magenta); color: var(--np-white); }
/* Rotating animation for attention */
@keyframes np-wiggle {
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
}
.np-starburst--animated {
animation: np-wiggle 2s ease-in-out infinite;
}
| Aesthetic | Relationship |
|---|---|
| Pop Art | Direct ancestor; Neo Pop inherits Pop Art’s fascination with consumer culture, bold color, and commercial imagery but updates it for a post-digital, globally connected world |
| Memphis Design | Shares bold color, geometric shapes, and anti-minimalist attitude; Memphis is more pattern-driven and postmodern-architectural while Neo Pop is more illustrative and culture-referencing |
| Superflat | Takashi Murakami’s Superflat is a direct branch of Neo Pop, fusing Japanese anime/manga flatness with Pop Art consumer critique |
| Colorful Pop | J-core-influenced maximalist aesthetic that shares Neo Pop’s saturated palette and bold graphics but pushes toward anime illustration and digital chaos |
| Flat Design | Shares the commitment to flat surfaces and clean edges, but Flat Design is utilitarian and minimal where Neo Pop is expressive and maximal |
| Dopamine Design | Both embrace saturated, high-energy color palettes for emotional impact; Dopamine Design is trend-driven while Neo Pop has deeper art-historical roots |
| Graffiti Pop | Street-art-influenced cousin that shares bold color and graphic energy but favors spray-paint texture and urban decay over Neo Pop’s clean, polished surfaces |
| Corporate Memphis | Both use flat illustration with bold color, but Corporate Memphis is deliberately bland and inoffensive while Neo Pop is confrontational and culturally charged |
| Ligne Claire | Shares the emphasis on bold, uniform outlines and flat color fills; Ligne Claire derives from Franco-Belgian comics while Neo Pop derives from American commercial culture |
| Neubrutalism | Both feature bold outlines and hard shadows on white backgrounds, but Neubrutalism has a rawer, more utilitarian tone compared to Neo Pop’s playful commercial energy |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neo Pop</title>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Bangers&family=Bebas+Neue&family=Inter:wght@400;500;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--np-red: #ff0033;
--np-blue: #0066ff;
--np-yellow: #ffd600;
--np-magenta: #ff00aa;
--np-green: #00cc44;
--np-orange: #ff6600;
--np-violet: #7700cc;
--np-cyan: #00ccdd;
--np-bubblegum: #ff88cc;
--np-black: #111111;
--np-deep-black: #000000;
--np-white: #ffffff;
--np-soft-white: #f5f5f0;
--np-cream: #fff8e7;
--np-gray: #cccccc;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--np-white);
color: var(--np-black);
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 1rem;
line-height: 1.65;
min-height: 100vh;
overflow-x: hidden;
}
/* ========== NAVIGATION ========== */
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
height: 64px;
background: var(--np-white);
border-bottom: 3px solid var(--np-black);
position: sticky;
top: 0;
z-index: 100;
}
.logo {
font-family: 'Anton', sans-serif;
font-size: 1.6rem;
text-transform: uppercase;
color: var(--np-black);
text-decoration: none;
letter-spacing: 0.04em;
}
.logo span {
color: var(--np-red);
}
.nav-links {
display: flex;
gap: 0.25rem;
list-style: none;
}
.nav-links a {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 0.08em;
text-decoration: none;
color: var(--np-black);
padding: 0.4rem 1rem;
border: 2px solid transparent;
transition: all 0.15s ease;
}
.nav-links a:hover {
background: var(--np-yellow);
border-color: var(--np-black);
}
.nav-links a.active {
background: var(--np-red);
color: var(--np-white);
border-color: var(--np-black);
}
/* ========== HERO ========== */
.hero {
text-align: center;
padding: 6rem 2rem 5rem;
position: relative;
overflow: hidden;
border-bottom: 4px solid var(--np-black);
}
/* Halftone dot background */
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, var(--np-gray) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.25;
pointer-events: none;
}
.hero h1 {
font-family: 'Anton', sans-serif;
font-size: clamp(3.5rem, 10vw, 8rem);
text-transform: uppercase;
color: var(--np-red);
-webkit-text-stroke: 3px var(--np-black);
paint-order: stroke fill;
position: relative;
z-index: 1;
line-height: 0.95;
margin-bottom: 1.5rem;
}
.hero p {
font-family: 'Inter', sans-serif;
font-size: 1.15rem;
color: #444;
max-width: 580px;
margin: 0 auto 2.5rem;
position: relative;
z-index: 1;
line-height: 1.7;
}
.hero .buttons {
position: relative;
z-index: 1;
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Decorative accent shapes */
.accent {
position: absolute;
border: 3px solid var(--np-black);
z-index: 0;
}
.accent--1 {
width: 110px;
height: 110px;
background: var(--np-yellow);
top: 12%;
left: 4%;
transform: rotate(15deg);
}
.accent--2 {
width: 80px;
height: 80px;
background: var(--np-blue);
bottom: 12%;
right: 6%;
border-radius: 50%;
}
.accent--3 {
width: 60px;
height: 60px;
background: var(--np-magenta);
top: 18%;
right: 10%;
transform: rotate(25deg);
}
.accent--4 {
width: 40px;
height: 40px;
background: var(--np-green);
bottom: 20%;
left: 8%;
transform: rotate(-10deg);
}
/* ========== BUTTONS ========== */
.btn {
display: inline-block;
padding: 0.85rem 2.5rem;
font-family: 'Bebas Neue', sans-serif;
font-size: 1.1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
color: var(--np-white);
background: var(--np-red);
border: 3px solid var(--np-black);
border-radius: 0;
box-shadow: 4px 4px 0 var(--np-black);
cursor: pointer;
transition: all 0.15s ease;
}
.btn:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 var(--np-black);
}
.btn:active {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 var(--np-black);
}
.btn--blue { background: var(--np-blue); }
.btn--yellow { background: var(--np-yellow); color: var(--np-black); }
.btn--outline {
background: var(--np-white);
color: var(--np-black);
}
.btn--outline:hover { background: var(--np-yellow); }
/* ========== COLOR BAND DIVIDER ========== */
.color-band {
display: flex;
height: 8px;
border-bottom: 3px solid var(--np-black);
}
.color-band span {
flex: 1;
}
.color-band span:nth-child(1) { background: var(--np-red); }
.color-band span:nth-child(2) { background: var(--np-yellow); }
.color-band span:nth-child(3) { background: var(--np-blue); }
.color-band span:nth-child(4) { background: var(--np-magenta); }
.color-band span:nth-child(5) { background: var(--np-green); }
.color-band span:nth-child(6) { background: var(--np-orange); }
/* ========== FEATURES SECTION ========== */
.features {
max-width: 1080px;
margin: 0 auto;
padding: 4rem 2rem;
}
.features h2 {
font-family: 'Anton', sans-serif;
font-size: clamp(2rem, 5vw, 3.5rem);
text-transform: uppercase;
text-align: center;
margin-bottom: 3rem;
color: var(--np-black);
}
.features h2 span {
color: var(--np-blue);
-webkit-text-stroke: 2px var(--np-black);
paint-order: stroke fill;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.card {
background: var(--np-white);
border: 3px solid var(--np-black);
padding: 2rem;
position: relative;
box-shadow: 5px 5px 0 var(--np-black);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translate(-3px, -3px);
box-shadow: 8px 8px 0 var(--np-black);
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
}
.card:nth-child(1)::before { background: var(--np-red); }
.card:nth-child(2)::before { background: var(--np-blue); }
.card:nth-child(3)::before { background: var(--np-yellow); }
.card-icon {
width: 56px;
height: 56px;
border: 3px solid var(--np-black);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
margin-bottom: 1.25rem;
}
.card:nth-child(1) .card-icon { background: var(--np-red); color: var(--np-white); }
.card:nth-child(2) .card-icon { background: var(--np-blue); color: var(--np-white); }
.card:nth-child(3) .card-icon { background: var(--np-yellow); color: var(--np-black); }
.card h3 {
font-family: 'Anton', sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
margin-bottom: 0.75rem;
color: var(--np-black);
}
.card p {
font-size: 0.95rem;
line-height: 1.6;
color: #444;
}
.card-tag {
display: inline-block;
margin-top: 1.25rem;
font-family: 'Bebas Neue', sans-serif;
font-size: 0.85rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--np-black);
border: 2px solid var(--np-black);
padding: 0.2rem 0.8rem;
}
/* ========== QUOTE / SPEECH BUBBLE SECTION ========== */
.quote-section {
background: var(--np-soft-white);
border-top: 4px solid var(--np-black);
border-bottom: 4px solid var(--np-black);
padding: 4rem 2rem;
text-align: center;
position: relative;
}
/* Halftone overlay */
.quote-section::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, var(--np-red) 1px, transparent 1px);
background-size: 12px 12px;
opacity: 0.06;
pointer-events: none;
}
.speech-bubble {
position: relative;
display: inline-block;
background: var(--np-yellow);
border: 3px solid var(--np-black);
border-radius: 28px;
padding: 2rem 3rem;
max-width: 600px;
box-shadow: 5px 5px 0 var(--np-black);
z-index: 1;
}
.speech-bubble::before {
content: '';
position: absolute;
bottom: -22px;
left: 40px;
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 22px solid var(--np-black);
}
.speech-bubble::after {
content: '';
position: absolute;
bottom: -17px;
left: 43px;
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 18px solid var(--np-yellow);
}
.speech-bubble p {
font-family: 'Bangers', cursive;
font-size: 1.5rem;
color: var(--np-black);
line-height: 1.4;
}
.speech-bubble cite {
display: block;
margin-top: 0.75rem;
font-family: 'Inter', sans-serif;
font-style: normal;
font-size: 0.85rem;
color: #555;
}
/* ========== GALLERY / GRID SECTION ========== */
.gallery {
max-width: 1080px;
margin: 0 auto;
padding: 4rem 2rem;
}
.gallery h2 {
font-family: 'Anton', sans-serif;
font-size: clamp(2rem, 5vw, 3.5rem);
text-transform: uppercase;
text-align: center;
margin-bottom: 3rem;
}
.gallery h2 span {
color: var(--np-magenta);
}
.pop-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 3px solid var(--np-black);
}
.pop-cell {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--np-black);
font-family: 'Anton', sans-serif;
font-size: 2.5rem;
text-transform: uppercase;
position: relative;
overflow: hidden;
transition: transform 0.2s ease;
}
.pop-cell:hover {
z-index: 2;
transform: scale(1.08);
}
/* Halftone on each cell */
.pop-cell::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(0,0,0,0.15) 1px, transparent 1px);
background-size: 6px 6px;
pointer-events: none;
}
.pop-cell:nth-child(1) { background: var(--np-red); color: var(--np-white); }
.pop-cell:nth-child(2) { background: var(--np-yellow); color: var(--np-black); }
.pop-cell:nth-child(3) { background: var(--np-blue); color: var(--np-white); }
.pop-cell:nth-child(4) { background: var(--np-magenta); color: var(--np-white); }
.pop-cell:nth-child(5) { background: var(--np-green); color: var(--np-black); }
.pop-cell:nth-child(6) { background: var(--np-orange); color: var(--np-white); }
.pop-cell:nth-child(7) { background: var(--np-violet); color: var(--np-white); }
.pop-cell:nth-child(8) { background: var(--np-cyan); color: var(--np-black); }
.pop-cell:nth-child(9) { background: var(--np-white); color: var(--np-black); }
.pop-cell:nth-child(10) { background: var(--np-bubblegum); color: var(--np-black); }
.pop-cell:nth-child(11) { background: var(--np-black); color: var(--np-white); }
.pop-cell:nth-child(12) { background: var(--np-cream); color: var(--np-black); }
/* ========== CTA SECTION ========== */
.cta {
background: var(--np-deep-black);
color: var(--np-white);
text-align: center;
padding: 5rem 2rem;
border-top: 4px solid var(--np-black);
position: relative;
}
.cta::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 16px 16px;
pointer-events: none;
}
.cta h2 {
font-family: 'Anton', sans-serif;
font-size: clamp(2.5rem, 7vw, 5rem);
text-transform: uppercase;
color: var(--np-yellow);
-webkit-text-stroke: 2px var(--np-white);
paint-order: stroke fill;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.cta p {
font-size: 1.1rem;
color: var(--np-gray);
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.cta .btn {
position: relative;
z-index: 1;
}
/* Starburst badge in CTA */
.starburst {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background: var(--np-red);
color: var(--np-white);
font-family: 'Anton', sans-serif;
font-size: 0.9rem;
text-transform: uppercase;
text-align: center;
line-height: 1.1;
clip-path: polygon(
50% 0%, 61% 11%, 75% 3%, 79% 18%,
95% 20%, 88% 35%, 100% 44%, 90% 56%,
98% 70%, 83% 72%, 82% 88%, 68% 82%,
58% 98%, 50% 85%, 42% 98%, 32% 82%,
18% 88%, 17% 72%, 2% 70%, 10% 56%,
0% 44%, 12% 35%, 5% 20%, 21% 18%,
25% 3%, 39% 11%
);
position: absolute;
top: 2rem;
right: 3rem;
z-index: 2;
animation: wiggle 2.5s ease-in-out infinite;
}
@keyframes wiggle {
0%, 100% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
}
/* ========== FOOTER ========== */
footer {
background: var(--np-white);
border-top: 3px solid var(--np-black);
padding: 2rem;
text-align: center;
}
footer p {
font-family: 'Bebas Neue', sans-serif;
font-size: 0.9rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--np-black);
}
footer p span {
color: var(--np-red);
}
footer .footer-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 0.75rem;
}
footer .footer-dots i {
width: 10px;
height: 10px;
border: 2px solid var(--np-black);
}
footer .footer-dots i:nth-child(1) { background: var(--np-red); }
footer .footer-dots i:nth-child(2) { background: var(--np-yellow); }
footer .footer-dots i:nth-child(3) { background: var(--np-blue); }
footer .footer-dots i:nth-child(4) { background: var(--np-magenta); }
footer .footer-dots i:nth-child(5) { background: var(--np-green); }
/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
nav {
padding: 0 1rem;
}
.nav-links {
gap: 0;
}
.nav-links a {
font-size: 0.85rem;
padding: 0.3rem 0.6rem;
}
.hero {
padding: 4rem 1.5rem 3.5rem;
}
.accent { display: none; }
.card-grid {
grid-template-columns: 1fr;
}
.pop-grid {
grid-template-columns: repeat(3, 1fr);
}
.speech-bubble {
padding: 1.5rem 2rem;
}
.starburst {
width: 80px;
height: 80px;
font-size: 0.7rem;
top: 1rem;
right: 1rem;
}
}
@media (max-width: 480px) {
.pop-grid {
grid-template-columns: repeat(2, 1fr);
}
.nav-links a {
font-size: 0.75rem;
padding: 0.25rem 0.4rem;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav>
<a href="#" class="logo">Neo<span>Pop</span></a>
<ul class="nav-links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Artists</a></li>
<li><a href="#">Shop</a></li>
</ul>
</nav>
<!-- Hero Section -->
<header class="hero">
<div class="accent accent--1"></div>
<div class="accent accent--2"></div>
<div class="accent accent--3"></div>
<div class="accent accent--4"></div>
<h1>Bold Is Beautiful</h1>
<p>Neo Pop brings the energy of pop art into the modern age.
Saturated color, bold outlines, consumer culture remixed
as high art. Everything is a statement.</p>
<div class="buttons">
<a href="#" class="btn">Explore Now</a>
<a href="#" class="btn btn--outline">Learn More</a>
</div>
</header>
<!-- Color Band Divider -->
<div class="color-band">
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<!-- Features Section -->
<section class="features">
<h2>What Makes It <span>Pop</span></h2>
<div class="card-grid">
<div class="card">
<div class="card-icon">★</div>
<h3>Bold Outlines</h3>
<p>Thick black contour lines define every shape, creating
a graphic, comic-book clarity that is instantly
recognizable. Form is defined by the line.</p>
<span class="card-tag">Visual Identity</span>
</div>
<div class="card">
<div class="card-icon">■</div>
<h3>Flat Color</h3>
<p>Pure, saturated color fills with no gradients or shading.
Every surface reads as a clean, confident plane of
pigment at maximum chroma.</p>
<span class="card-tag">Color Theory</span>
</div>
<div class="card">
<div class="card-icon">●</div>
<h3>Culture Remix</h3>
<p>Logos, products, cartoons, and advertising tropes
appropriated and elevated. Consumer culture becomes
the raw material for artistic expression.</p>
<span class="card-tag">Commentary</span>
</div>
</div>
</section>
<!-- Quote Section with Speech Bubble -->
<section class="quote-section">
<div class="speech-bubble">
<p>"I want to be as artificial as possible. If I could be
a machine, I would be a machine."</p>
<cite>-- The spirit of Pop, channeled through Neo Pop</cite>
</div>
</section>
<!-- Color Band Divider -->
<div class="color-band">
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<!-- Pop Art Grid Gallery -->
<section class="gallery">
<h2>The <span>Palette</span></h2>
<div class="pop-grid">
<div class="pop-cell">Pop</div>
<div class="pop-cell">Art</div>
<div class="pop-cell">Neo</div>
<div class="pop-cell">Bold</div>
<div class="pop-cell">Flat</div>
<div class="pop-cell">Loud</div>
<div class="pop-cell">Hue</div>
<div class="pop-cell">Ink</div>
<div class="pop-cell">Line</div>
<div class="pop-cell">Fun</div>
<div class="pop-cell">Wow</div>
<div class="pop-cell">Max</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta">
<div class="starburst">New!</div>
<h2>Start Creating</h2>
<p>Embrace the boldness. Make something that pops.</p>
<a href="#" class="btn btn--yellow">Get Started</a>
</section>
<!-- Footer -->
<footer>
<p>Designed in the spirit of <span>Neo Pop</span></p>
<div class="footer-dots">
<i></i><i></i><i></i><i></i><i></i>
</div>
</footer>
</body>
</html>
box-shadow with zero blur (4px 4px 0 #111) for the signature Neo Pop look; any blur radius immediately breaks the flat graphic illusionpaint-order: stroke fill: When applying -webkit-text-stroke to create outlined display text, this property ensures the stroke renders behind the fill, keeping letterforms clean and readable at all sizesradial-gradient) should be subtle (opacity 0.05-0.15); it references Pop Art heritage without overwhelming the primary contentbackdrop-filter or complex filter chains that contradict the flat aesthetic and hurt rendering performance