Techniques
PH5 Cross-Section Hairline Diagram
Louis Poulsen's visual identity centers on the technical cross-section drawing — five nested shade curves rendered as hairline strokes, revealing the engineering that eliminates glare. This recipe creates that signature look as a decorative element.
.ph5-section-diagram {
position: relative;
width: 240px;
height: 120px;
margin: 0 auto;
}
.ph5-section-diagram .shade {
position: absolute;
left: 50%;
transform: translateX(-50%);
border: 1px solid #C19A4A;
border-top: none;
border-radius: 0 0 50% 50%;
background: transparent;
}
.ph5-section-diagram .shade:nth-child(1) { width: 220px; height: 40px; top: 0; }
.ph5-section-diagram .shade:nth-child(2) { width: 180px; height: 35px; top: 12px; }
.ph5-section-diagram .shade:nth-child(3) { width: 140px; height: 30px; top: 22px; }
.ph5-section-diagram .shade:nth-child(4) { width: 100px; height: 25px; top: 30px; }
.ph5-section-diagram .shade:nth-child(5) { width: 60px; height: 20px; top: 36px; }
Brass-Rule Divider
The hairline rule is Louis Poulsen's primary structural element — a single-pixel brass line that separates content sections with quiet authority, replacing conventional borders or spacing-only separation.
.brass-rule {
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
#C19A4A 15%,
#C19A4A 85%,
transparent 100%
);
border: none;
margin: 48px 0;
}
Bulb-Glow Radial Accent
The warm golden glow of an incandescent bulb diffused through the PH5's shades — a subtle radial gradient that can be placed behind hero content or product imagery to evoke the lamp's characteristic light cone.
.bulb-glow {
position: relative;
}
.bulb-glow::before {
content: '';
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 80%;
background: radial-gradient(
ellipse at center top,
rgba(245, 210, 132, 0.15) 0%,
rgba(245, 210, 132, 0.06) 40%,
transparent 70%
);
pointer-events: none;
z-index: 0;
}