Paua-shell iridescent border
A CSS gradient border that mimics the colour-shifting surface of New Zealand paua (abalone) shell, cycling through the deep purple, fern green, and silver of the palette.
.element {
border: 2px solid transparent;
background-clip: padding-box;
position: relative;
}
.element::before {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(135deg, #2A1A4A, #5B6F4A, #C0C0C0, #2A1A4A);
z-index: -1;
}
Koru spiral accent
A CSS-drawn koru spiral used as a decorative corner accent on hero sections and feature panels — the unfurling fern frond rendered in kokowai crimson.
.element::after {
content: '';
position: absolute;
bottom: -24px;
right: -24px;
width: 96px;
height: 96px;
border: 3px solid #8B2A1F;
border-radius: 0 0 50% 0;
border-top: none;
border-left: none;
opacity: 0.6;
}
Tukutuku grid weave background
A repeating CSS pattern inspired by tukutuku woven wall panels, creating a subtle diamond-lattice texture on dark surfaces.
.element {
background-color: #1F1438;
background-image:
linear-gradient(45deg, rgba(192, 192, 192, 0.04) 25%, transparent 25%),
linear-gradient(-45deg, rgba(192, 192, 192, 0.04) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(192, 192, 192, 0.04) 75%),
linear-gradient(-45deg, transparent 75%, rgba(192, 192, 192, 0.04) 75%);
background-size: 24px 24px;
background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}