Techniques
Kente strip panel
Vertical loom-strip panels — narrow colored columns side by side with a 2px weft accent line running horizontally across, evoking the structure of woven kente cloth.
.kente-strip-panel {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
position: relative;
}
.kente-strip-panel > * {
border-left: 2px solid var(--color-neutral-700);
padding: 24px 16px;
}
.kente-strip-panel > *:first-child {
border-left: none;
}
.kente-strip-panel::after {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: repeating-linear-gradient(
90deg,
var(--color-primary-500) 0 12px,
var(--color-accent-500) 12px 24px,
var(--color-secondary-500) 24px 36px
);
}
Weft thread border
A repeating color-segment border that simulates the alternating weft threads of a kente loom — gold, crimson, jade, purple segments cycling along the edge.
.weft-border {
border: 2px solid transparent;
border-image: repeating-linear-gradient(
90deg,
#EAB308 0 16px,
#991B1B 16px 32px,
#10B981 32px 48px,
#7C3AED 48px 64px
) 2;
}
Adinkra symbol accent
Decorative Adinkra-symbol-inspired SVG used as section dividers or card ornaments — rendered in royal gold on the coffee ground, keeping geometry abstract to respect cultural context.
.adinkra-accent {
display: flex;
align-items: center;
gap: 16px;
color: #EAB308;
opacity: 0.6;
}
.adinkra-accent::before,
.adinkra-accent::after {
content: '';
flex: 1;
height: 2px;
background: currentColor;
}
.adinkra-accent svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2px;
}