Polynesian Tapa HTML Style Guide

A design system rooted in the Pacific Island tradition of bark cloth — bold geometric patterns, earth-dyed pigments, and the rhythmic beauty of triangles, diamonds, and zigzags beaten into mulberry bark by generations of artisans.

Color Palette

Colors drawn from the natural dyes of tapa cloth making: candlenut soot for blacks, turmeric root for golds, red clay and mangrove bark for rusts and browns, and the pale inner bark of the paper mulberry tree itself.

Bark & Earth
Bark
#8B6914
Warm accent, borders
Brown
#5C3D2E
Primary borders, text
Brown Dark
#3E271C
Strong borders, headings
Rust & Clay
Rust
#A0522D
Primary accent, buttons
Rust Light
#C06A3E
Hover states
Terracotta
#C2452D
Error states, emphasis
Ochre & Gold
Ochre
#CC7722
Secondary accent, warning
Gold
#D4A017
Highlights, decorative
Gold Light
#E6B938
Warm highlights
Charcoal & Soot
Black
#1E1810
Text, dark backgrounds
Charcoal
#3A3228
Dark panels
Charcoal Light
#504838
Secondary text
Natural Cloth
Cloth
#E8D5B5
Secondary background
Cloth Light
#F2E8D5
Page background
White
#FAF6F0
Card surfaces
Ocean & Forest
Ocean
#2C5F5C
Info states, links
Forest
#3B5E3A
Success states

Typography

Three font layers echo the tapa tradition: a bold display face for stamped motif-like titles, an elegant serif for headings that recall carved ceremonial forms, and a clean sans-serif body that lets the patterns and colors breathe.

Display — Archivo Black / 3.5rem
Mana of the Islands
Font: Archivo Black • Weight: 400 (Black) • Use: Hero titles, section headers
Heading 1 — Playfair Display / 2.5rem
Patterns Beaten Into Bark
Font: Playfair Display • Weight: 900 • Use: Page headings, feature titles
Heading 2 — Playfair Display / 1.75rem
The Art of Ngatu and Siapo
Font: Playfair Display • Weight: 700 • Use: Subsection headings
Heading 3 — Archivo Black / 1.25rem
Kupesi Design Templates
Font: Archivo Black • Weight: 400 • Uppercase • Use: Small headings, labels
Body — Nunito Sans / 1.0625rem
Tapa cloth, known as ngatu in Tonga, siapo in Samoa, and kapa in Hawai'i, is made from the inner bark of the paper mulberry tree. The bark is stripped, soaked, and then beaten with carved wooden mallets called ike until it forms a thin, flexible sheet. Artisans then apply geometric designs using natural dyes made from candlenut soot, turmeric, mangrove bark, and red clay.
Font: Nunito Sans • Weight: 400/700 • Line height: 1.7 • Use: Body copy
Caption — Nunito Sans / 0.8125rem
Traditional kupesi motifs • Geometric precision
Font: Nunito Sans • Weight: 600 • Uppercase • Use: Captions, metadata
Small Text — Nunito Sans / 0.75rem
Fine print, footnotes, and auxiliary information styled at a reduced scale for secondary content.
Font: Nunito Sans • Weight: 400 • Use: Fine print, timestamps

Spacing Scale

A 4px base unit builds a rhythmic spacing scale, much like the repetitive geometric units of tapa cloth patterns that create harmony through consistent intervals.

XS — 4px
--space-xs
SM — 8px
--space-sm
MD — 16px
--space-md
LG — 32px
--space-lg
XL — 64px
--space-xl
2XL — 96px
--space-2xl

Buttons

Bold, stamp-like buttons with thick borders and a characteristic notched corner that recalls the angular geometry of tapa motifs. Hover states lift with a carved shadow.

Primary
Secondary
Outline
Dark
Disabled
Button Group

Forms

Form elements styled with the earthy warmth and clean geometry of tapa cloth. Decorative corner marks on panels echo the angular motifs found at borders of traditional bark cloth.

We will never share your email.

Cards & Panels

Content containers that carry the tapa aesthetic through decorative pattern strips, bold borders, and geometric CSS backgrounds that evoke traditional bark cloth motifs.

Ngatu — Tongan Tapa
Tongan tapa cloth, called ngatu, is created in a communal process where women gather to beat, dye, and decorate large sheets that can measure over 30 meters long.
Siapo — Samoan Tapa
Samoan siapo features intricate freehand designs painted with natural pigments. The motifs often represent plants, animals, and celestial bodies significant to Samoan culture.
Kapa — Hawaiian Tapa
Hawaiian kapa is known for its exceptional softness and elaborate watermark-like patterns created by carved beaters, with distinctive scented finishes from native plants.
The Kupesi: Design Templates
In Tongan tapa-making, the kupesi is a relief tablet made from coconut leaf midribs and pandanus, sewn onto a flat base. When the beaten bark is laid over the kupesi and rubbed with dye, the raised design transfers as a repeating pattern across the cloth. These templates are family heirlooms, passed down through generations, each carrying specific cultural meanings and stories.
“Tapa is not merely cloth. It is the record of our ancestors, the geometry of the ocean currents and the mountain ridges, beaten into being with patience and reverence.”
— Pacific Island Proverb

Alerts & Notifications

Status messages styled with tapa-inspired diamond icons and bold stripe accents. Each alert state uses colors drawn from the natural dye palette while maintaining clear semantic distinction.

i
Ocean Tide
The communal tapa-making session begins at dawn tomorrow. Bring your ike beaters and fresh bark strips to the fale.
Pattern Complete
Your ngatu has been successfully completed. The 20-meter cloth is ready for the ceremony.
!
Drying Conditions
Rain is expected this afternoon. Please move all drying tapa sheets under the covered shelter before noon.
Bark Shortage
The paper mulberry supply has been depleted. New plantings will not be ready for harvest until the next growing season.