Techniques
Unikko tile hero
Full-bleed background using a CSS repeating pattern of oversized poppy silhouettes in flat colour — the signature Marimekko move of pattern-as-architecture.
.unikko-hero {
background-color: #E63A4F;
background-image:
radial-gradient(ellipse 120px 100px at 130px 110px, #E84A8C 60%, transparent 61%),
radial-gradient(ellipse 100px 80px at 80px 90px, #E84A8C 60%, transparent 61%),
radial-gradient(circle 20px at 105px 95px, #E8B82E 60%, transparent 61%),
radial-gradient(ellipse 40px 60px at 105px 160px, #0F0F0F 50%, transparent 51%);
background-size: 220px 240px;
background-repeat: repeat;
min-height: 100vh;
}
Colour block section divider
Adjacent full-width sections in contrasting saturated colours — no border, no shadow, just a hard chromatic cut, the way Marimekko prints butt colour against colour.
.section-red { background: #E63A4F; color: #FFFFFF; padding: 64px 0; }
.section-cobalt { background: #1B3A9B; color: #FFFFFF; padding: 64px 0; }
.section-mustard { background: #E8B82E; color: #0F0F0F; padding: 64px 0; }
.section-white { background: #FFFFFF; color: #0F0F0F; padding: 64px 0; }
Tasaraita stripe accent
Horizontal stripe bands inspired by Annika Rimala's 1968 Tasaraita jersey — used as decorative section separators or accent panels.
.tasaraita-stripe {
background: repeating-linear-gradient(
to bottom,
#0F0F0F 0px, #0F0F0F 6px,
#FFFFFF 6px, #FFFFFF 12px
);
height: 24px;
width: 100%;
}