African Textile

African Textile — Style Reference

Kente warp and weft, adire dye marks — color and structure woven together.

Theme: dark

African Textile draws on West African Kente cloth and adire resist dye: a dark wood ground (#2c1810) for weight, Kente orange (#c4501f) and gold (#f0c75e) for emphasis, sand (#e8d5b5) for cards and secondary grounds, and forest green (#1a5632) for text and ornament. The core graphic is woven geometry — stripes, checks and diamonds repeating in alternation like warp and weft. Borders run 2 to 4px to carry the cloth's structure, radii hold at 8px so the work stays handmade rather than crude, and headings are bold uppercase on wide tracking for gravity.

Colors

Typography

Inter — A heavy sans: headings at 900, uppercase, at 0.24em tracking. The wide spacing echoes the warp of the cloth.

• Substitute: 'Arial Black', Helvetica, sans-serif
• Weights: 700, 900
• Sizes: 13, 16, 21, 28, 36, 48
• Line height: 1.15 (display), 1.25 (headings), 1.6 (body)
• Letter spacing: 0.02em on display, 0.24em on uppercase labels

Type Scale

Spacing & Layout

Base unit: 8px Density: comfortable

Spacing Scale

Border Radius

• Page max-width: 1160px
• Section gap: 96px
• Card padding: 28px
• Element gap: 20px

Components

Kente Band

Role: The Kente band — the signature

A 24 to 64px band woven from a repeating gradient alternating four colors — orange, gold, forest, sand — in stripes 8 to 16px wide and deliberately uneven. Every third stripe carries a diamond or check. It appears at the header, between sections, or at a card's top.

Woven Card

Role: The woven card — the core component

Sand fill, 8px radius, a 4px dark wood border, 28px padding, with a 12px Kente band along the top. The title runs 36px/900 uppercase in forest at 0.02em with body at 16px in 85% dark wood. Hover swaps the border to Kente orange and lifts 2px.

• States: hover: orange border, lift 2px

Weave Button

Role: Action button

Kente orange fill, gold text, 6px radius, a 2px dark wood border, 13px/900 uppercase at 0.24em, 14px 32px padding, hard shadow 0 4px 0 at 60% dark wood. Hover flips the fill to gold and the text to dark wood; press translates 4px 4px and zeroes the shadow. 120ms linear.

• Sizes: padding 14px 32px; label 13px
• States: hover: inverted; active: translate 4px

Adire Wash

Role: The adire dye wash

Layered radial gradients — 8 to 16px circles, irregularly offset — scatter resist-dye marks in gold or orange at 8% to 15%. It must repeat unevenly; an even dot field immediately reads as UI rather than cloth.

Diamond Motif

Role: The diamond and check ornament

A 24 to 48px solid diamond (a square at 45 degrees) or a 2×2 check in gold, orange or forest, arranged in clusters of two to four. They imitate the symbolic motifs of the cloth and sit at card corners or between regions, two to three clusters per screen.

Do's and Don'ts

Do

• Dark wood with Kente orange and gold
• Woven bands alternate stripes and checks
• Borders run 2 to 4px for cloth structure
• Headings uppercase on wide tracking
• Radius 8px — handmade, not crude
• The dye wash must repeat unevenly

Don't

• No cool-toned photography
• Never pass an even dot field off as weave
• No thin borders
• No large radii
• No modern minimalism
• Never let the weave overpower content

Surfaces

Elevation

• Cloth lift: 0 4px 0 rgba(44,24,16,0.60)
• Cloth depth: 0 8px 24px rgba(44,24,16,0.50)

Imagery

Textile and craft photography: Kente cloth, resist dye, woven baskets, pottery, markets. Warm, high-contrast, with visible weave, and a photo may be cropped into strips set into the woven structure. No cool-toned photography, modern minimalism or imagery without texture.

Layout

Capped at 1160px with 24px padding, sections 96px apart. Woven bands divide sections in place of ordinary rules, and cards may stagger in width like seams in cloth.

Agent Prompt Guide

QUICK COLOR REFERENCE:

• text: #1a5632
• background: #2c1810
• orange: #c4501f
• gold: #f0c75e
• sand: #e8d5b5
• forest: #1a5632

EXAMPLE COMPONENT PROMPTS:

1. Build an African textile card: sand #e8d5b5 fill, 8px radius, a 4px solid #2c1810 border, 28px padding. A 12px Kente band caps the top: a repeating linear gradient alternating #c4501f, #f0c75e, #1a5632 and #e8d5b5 in unequal vertical stripes of 8px and 16px, with a diamond every third stripe. The title runs 36px/900 Inter uppercase at 0.02em in #1a5632 with body at 16px in rgba(44,24,16,0.85). The button fills #c4501f with gold text on a 6px radius, a 2px dark wood border and a hard shadow of 0 4px 0 rgba(44,24,16,0.6), flipping to #f0c75e with dark wood text on hover. The page ground is #2c1810.

Similar Brands

• Islamic Geometric — Both geometric weave, though Islamic is precise tessellation while this is hand-woven stripe
• Maximalism — Both saturated and layered, though maximalism has no weave structure while this keeps warp and weft

Quick Start

:root {
  /* Colors */
  --color-kente-orange: #c4501f;
  --color-dark-wood: #2c1810;
  --color-gold: #f0c75e;
  --color-forest: #1a5632;
  --color-sand: #e8d5b5;
  --color-sprout: #80e671;

  /* Typography — Font Families */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-display: 48px;
  --leading-display: 1.15;
  --tracking-display: 0.02em;
  --text-heading: 36px;
  --leading-heading: 1.2;
  --tracking-heading: 0.02em;
  --text-subheading: 28px;
  --leading-subheading: 1.3;
  --text-body-lg: 21px;
  --leading-body-lg: 1.5;
  --text-body: 16px;
  --leading-body: 1.6;
  --text-label: 13px;
  --leading-label: 1.4;
  --tracking-label: 0.24em;

  /* Typography — Weights */
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 1160px;
  --section-gap: 96px;
  --card-padding: 28px;
  --element-gap: 20px;
  --density: comfortable;

  /* Border Radius */
  --radius-cards: 8px;
  --radius-buttons: 6px;
  --radius-inputs: 6px;

  /* Surfaces */
  --surface-dark-wood: #2c1810;
  --surface-sand-card: #e8d5b5;
  --surface-woven-band: #c4501f;
}