Design System

Core Warm-Earth Palette

Status Severity Scale (Warm-Earth Mapped)

Typefaces

Type Scale

Volta-Language Glyph Coverage

Self-hosted at public/assets/fonts/noto-sans-subset.woff2. If glyphs render as boxes, the font file path is wrong.

Spacing Scale

Border Radius Scale

Available Animations (prefers-reduced-motion safe)

Accessibility & Motion Preference

All animations check @media (prefers-reduced-motion: reduce). Motion is never required — it's always a refinement for user preference.

Token Hierarchy — Kente Cloth & Weave

Like Kente cloth's warp and weft, tokens layer from raw primitives (primary) through semantic meaning (semantic) to complex compositions (composite). Each layer is visible, independently useful, and reversible.

Buttons

Status Badges

Dividers

Kente cloth-inspired divider

Cornrow dividers

Forms — input, textarea, label

Disclaimer

Rust-accented advisory block. Use for safety notices, terms, and legal copy.

Surface Variants

Brand Palette

Status Indicators

Elevation Steps (Terracotta Relief)

Border Radius (Bolga Basket Inspiration)

Glassmorphism Variants

Spacing Scale (4px Base Ladder)

Glass Variants

• Standard (Burnished Clay): The default panel surface — warm cream translucency with rust-tinted border.
• Deep (Kiln-Fired): For modals and popovers over dark grounds — higher blur, gold-tinted border, stronger shadow.
• Shimmer (Aluminium): Featured cards and premium CTAs — lower opacity with diagonal highlight streak.
• Grain (Tactile): Hand-crafted feel — glass with feTurbulence noise overlay.

Surface Overlay Patterns

Easing Functions (Inspired by Àṣẹ & Material Dynamics)

Duration Scale

Wordmark & Logo Design

Ðekawɔwɔ takes its name from Ewe, a Gbe language of Ghana, Togo and Benin. Deka = one; wɔwɔ = doing / making. Together: "the making of oneness" — a fitting root for a design system whose whole purpose is to make many parts read as one.

The brand deliberately adopts Ð (U+00D0, capital eth) for its stronger geometric crossbar — cleaner as a monogram and widely font-supported. The ɔ (open-o) is kept faithful to strict Ewe orthography. All logo assets (monogram, wordmark, lockup) are pure vector outlines with glyphs pre-converted to paths, so they render identically with no font dependency — safe in email, OG images, and any renderer.

Wordmark Rendering (Brand Application)

Warm-earth gradient: gold (#c8862a) → rust (#9c3b1b) → green (#2f5d44) via background-clip: text. Drop-shadow at 8px blur, 16% gold opacity. The entrance animation (wordmark-fade-in) fades in + rises 12px over 600ms, respects prefers-reduced-motion.

Color Palette Inspiration (Physical Materials)

Elevation & Shadow Inspiration (Terracotta Relief)

Drawn from terracotta relief carving, burnished clay sheen, and El Anatsui metal cloth drape. In light mode, elevation reads as darker shadows on cream. In dark mode, surfaces grow warmer-lighter as they rise with inset hairline edges.

Border Radius & Spacing Inspiration (Woven Organic)

Soft, generous corners suit the warm palette: Bolga basket coils (generous curves) for larger radii, abebuu adekai vessel edges (angular clip-paths at xl), and kente strip-weave seams (smaller radii). Soft corners = woven organic; sharp corners = carved geometric.

The 4px base spacing ladder echoes the tight coil-spacing of a Bolga basket: each revolution adds one consistent increment outward. Larger steps (2xl, 3xl) mark section boundaries like the dye-bands that separate colour zones in the weave.

Motion & Animation Inspiration (Àṣẹ Pulse)

Short, purposeful, earthy motion: àṣẹ pulse (expanding life-force), aerial silk drape (fabric gravity), copper wire flow (energy). Slow = ambient, fast = responsive.

Token Hierarchy

1. Design Tokens (CSS variables): --dkw-* are the source of truth for all values.
2. Component Classes: .btn, .card, .glass-card, .tag, .kente-hr, .cornrow-divider apply tokens to build reusable patterns.
3. Theme/Surface Aliases: --dkw-surface-base, --dkw-surface-1, --dkw-surface-2, --dkw-surface-3 map to tokens and support dark mode.

Dark mode: set data-theme="dark" on <html>. All tokens resolve to dark variants automatically.

Kente Cloth & Weave

Asante & Ewe textile tradition — interlocking strip-weaving where every pattern is named and every colour carries meaning.

• Warp stripes: Vertical foundation threads — evenly-spaced vertical bands in colour sequence
• Weft bands: Horizontal threads — crossing the warp at right angles
• Plain weave: Over-under checker of two colours — the atomic interlace unit
• Babadua block: Ribbed weft floats — dense horizontal bars + thin vertical accents
• Adweneasa motif: "My skill is exhausted" — tessellated diamonds in two accent tones
• Strip seam: Narrow strips sewn edge-to-edge, motifs deliberately offset

Bolga Baskets (Gurunsi Weaving)

Veta vera elephant grass, split and twisted by hand in Bolgatanga. Tight coiled spirals from centre outward, dyed with local plant extracts.

• Twill weave: Straw passes over two, under one — diagonal emerges from offset rhythm
• Dye bands: Boiled bark (red-brown), leaf extract (green), mud (black) — band width signals pattern
• Spiral centre: Single coiled rope wound outward — base flat, gap between coils narrows toward centre
• Zigzag field: Herringbone or zigzag from reversed twill direction every few rows
• Rim binding: Top edge rolls and wraps with contrasting rope — structural + decorative
• Paired handle: Two thick ropes twisted into arch — diamond-pattern surface from the twist

Veta Vera Grass & Coiling (Upper East Ghana)

Elephant grass (Vetiveria zizanioides, locally kinkahe) harvested, split by thumbnail, sun-dried to golden, twisted into rope and coiled outward.

• Split straw: Single blade splits into 3–5 strips — each dries to slightly different tone
• Dyed bundles: Undyed (golden), mango-bark (green), dawadawa-pod (rust-brown) — dye penetrates unevenly
• Twisted rope: 4–6 split strips rolled between palm and thigh into single rope
• Coil cross-section: Each coil sits atop the last, bound by thin-straw wrapping stitch
• Wet fibre: Soaked straw darkens to olive-green, becomes translucent — ready for weaving
• Sun-drying: Freshly split straw lightens from olive to gold over 2–3 days

Aluminium — Flattened Liquor Bottle Caps

Light, reflective, infinitely repeatable. Foil-bright, crimped, scored, oxidised — when flattened cap meets binding wire, rigid metal learns to drape like fabric.

• Cap field: Tessellated flattened caps, brick-offset — palette-cycled fills
• Crimp ridges: Fluted edge of bottle cap — alternating bright/dark vertical stripes
• Brushed grain: Directional polish on raw aluminium — fine horizontal lines, two tones
• Specular shimmer: Opalescent flash of foil catching light — sharp light/dark transitions
• Oxidised: Weathered metal blooms green-grey — soft organic patches over grey-metal base

Copper Wire — the Binding Thread

Pliable, warm-toned, structural. The joinery that holds cloth together — loops, twists, coils, meshes, stitches.

• Coil: Single wire wound in a spring — two phase-shifted sine paths with thin highlight
• Twisted pair: Two strands wound around each other — mirrored sine paths, alternating overlap
• Mesh: Wires crossing at right angles, knotted at nodes — two stroke sets + dots at intersections
• Interlinked loops: Rings hooked through rings, chainmail-style — offset circle rows, faint highlight rim
• Verdigris: Copper greening as it ages — warm strands transitioning to muted green/teal
• Stitch binding: Wire sewing caps edge-to-edge — looping stitch arcs + dark knot dots

Terracotta & Clay (Nkyinkyim Craft)

Fired earth and worked clay — carved, moulded, burnished. The surface, the incision, the relief, the coil.

• Raw surface: Warm base + dual-tone speckle (dark grog, light temper)
• Burnished: Polished-stone smoothing leaves tonal bands + directional sheen
• Incised lines: Grooves cut into leather-hard clay — dark stroke + light stroke just below
• Relief: Raised form lit from upper-left — light edge top/left, dark edge bottom/right
• Coil-built: Stacked clay ropes leave horizontal ridges — thick arcs + thin highlight arc on upper edge
• Fired crackle: Kiln stress + temper grit — thin irregular crack polylines + dark speckle

Carving & Molding — the Hand Process

Chisel into wood, thumb into clay, knife into form. Subtractive and additive processes leave irreducible textures: gouge marks, press dents, chip scars, smoothed planes.

• Chisel gouges: Curved chisel scoops concave channels — dark shadow at cut, lit rim on curve
• Adze facets: Flat adze blade chops broad planes — tilted planes catching light at different angles
• Thumb press: Direct hand in clay — depression + raised lip — most basic additive tool
• Knife cut: Sharp blade slices clean — exposed face lighter than weathered outer surface
• Smoothed plane: Sanded or polished until tool marks disappear — faint grain + satin sheen
• Chip scatter: Workshop floor evidence — every subtracted piece falls and accumulates

Hand-Painted Signage (Ga Mashie Tradition)

Self-taught artists painting hairstyles, portraits and cultural commentary on plywood with acrylics. Strokes vary in width; paint drips at terminals.

• Brush lettering: Strokes vary in width — paint drips at terminals where loading is heaviest
• Cornrow stroke: Parallel wavy strokes: thick dark + thin highlight offset — use as horizontal rule or divider
• Plywood grain: Warm wood texture — wavy horizontal lines + knot ellipse + paint-drip stain
• Flat-colour zones: Bold blocks with thin white dividers — 3-4 colours max, no gradients
• Typographic poster: Bold title with drop-shadow + italic subtitle + wavy rule + service list + corners
• Visible brushstroke: Thick wavy paths with dry-brush highlight edges — one-pass painting energy

Trotros & Transport (Ga: "Three Pence")

Accra's privately-owned minibuses as rolling exhibition. Each vehicle layered with overlapping stickers: wisdom slogans, colour combinations, rotating badges.

• Rotated badge: Hard shadow, skewed angle — use for toast notifications, callouts
• Palimpsest: Layered overlapping stickers at varying opacity (age) — notification stacks
• Tricolour band: Horizontal accent stripe (rust–gold–green) — section separator, progress base
• Proverb slogan: Italic serif with accent-colour keyword + decorative underline — "No Condition Is Permanent"
• Dust fade: Warm bottom-up haze gradient — page-bottom fade, card footer overlay
• Fleet composition: Three adjacent colour blocks at staggered heights — pricing tiers, feature columns

Fantasy Coffins — Abebuu Adekai (Ga Tradition)

Figurative coffins — "proverb boxes." A fisherman rests in a fish, a pilot in an eagle. Each encodes a life in carved and painted wood. Originated by Seth Kane Kwei, carried on by Paa Joe.

• Fish form: Directional movement in tapered form — pointed outline ellipse + internal arc repetitions
• Cocoa pod: Kane Kwei's first coffin — longitudinal ridges define silhouette, ripening gradient signals fullness
• Enamel finish: High-gloss saturated paint — reflective, smooth, catch specular highlight
• Carved wood: Wawa or onyina softwood — grain flows around knots, gouge marks leave concave scallops
• Cockerel crest: Serrated crown motif — zigzag peaks rising from rounded mass, pure geometry pattern
• Motif vocabulary: Concentric circles (watchfulness), crosses (direction), diamonds (endurance), spirals (journey)

Layered Cubism & Mixed Media

Paint built three and four layers deep — structural impasto where the surface is architecture. Charcoal, oil pastel, acrylic and found materials collide. Inspired by Kofi Agorsor.

• Impasto ridges: Palette knife drags thick paint — lit upper edge reads as second colour entirely
• Charcoal crosshatch: Fast angular strokes at 45° build tone through density — palm smudge accidental + kept
• Oil pastel: Waxy, opaque, crayon-thick — layering order permanently visible, paper grain pokes through
• Fractured planes: Cubist space shattered into angular facets — no vanishing point, every plane faces viewer
• Collage edge: Mixed media torn paper glued under paint — ragged tear-line as compositional edge
• Palette-knife scrape: Paint applied thick, then scraped back — reveals layer below as thin bright line

Àṣẹ — Life Force (Yoruba Cosmology)

The Yoruba concept: "the power to make things happen," the invisible force connecting and animating everything. The conceptual bedrock of Ðekawɔwɔ — the making of one.

• Concentric radiance: Àṣẹ radiates outward from source — strongest at centre, fading but never disappearing
• Connection web: Everything tied to one source — twelve radial lines, force flows equally in all directions
• Pulse: Single emanation expanding outward — weakening into dashes as it travels, arcs suggest outward motion
• Network: Connective tissue — every node linked to source and to each other, omnidirectional not top-down
• Vortex: Force spiralling — concentrating inward motion rather than dispersing, energy funnelling into action
• Aura: Force as warmth — soft layered glows intensifying toward centre, no hard edges, attenuating

Interaction · Easter egg · Inspired by Darko

AR QR easter eggs

Augmented-reality QR codes embedded in artwork — a still image that wakes into video when a viewer steps close. Kwasi Darko buries these in his painted car-door panels so the street exhibition carries a hidden digital layer. Seven studies of QR as a visual motif: the grid, the finder, the data field, and the scan moment.

.qr-reveal {
  position: absolute;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 300ms ease;
}
.qr-reveal:hover {
  opacity: 1;
}

// Capacitor BarcodeScanner
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';

async function scanQR() {
  const result = await BarcodeScanner.scan();
  window.location.href = result.hasContent ? result.ScanResult : '';
}

Pattern reference: en.wikipedia.org/wiki/QR_code — Decorative QR motifs — not scannable codes, purely visual reference.