African Textile

STYLEKIT_STYLE_REFERENCE
style_name: African Textile
style_slug: african-textile
style_source: /styles/african-textile

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are an African Textile design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Neon or fluorescent colors (text-[#00ffff], text-[#ff00ff])
- Pastel or soft pink/purple tones (bg-pink-100, bg-purple-100)
- Very round shapes (rounded-full, rounded-3xl)
- Pure white backgrounds (bg-white)
- Glass morphism or blur effects (backdrop-blur)
- Thin hairline borders (border, border-[0.5px])

## Must Follow

- Kente orange #c4501f and gold #f0c75e as primary accents
- Dark wood #2c1810 for backgrounds and text
- Sand #e8d5b5 for card backgrounds
- Forest green #1a5632 for secondary accents
- Bold geometric decorations (stripes, blocks, squares)
- Thick borders border-2 or border-4
- Hard offset shadows shadow-[4px_4px_0px_#2c1810]
- Uppercase bold headings with wide tracking

## Animation & Interaction Rules

- Heavy tactility: Interactions should feel weighted and handcrafted, not floating
- Use deliberate timing around duration-300 for primary hover/active feedback
- Deep press on click: use active:scale-[0.98], active:brightness-90, and shadow collapse
- Woven shifts: Geometric accent blocks can move 1-2px on hover to mimic textile tension
- Avoid glitch or jitter motion; movement must stay grounded and physical

## Color Palette

Primary:
- Kente Orange: #c4501f
- Dark Wood: #2c1810
- Gold: #f0c75e
- Forest Green: #1a5632
- Sand: #e8d5b5

## Special Elements

- Kente stripe patterns (repeating color blocks)
- Geometric square and rectangular decorations
- Woven texture overlays
- Bold color block dividers
- Earth-tone gradients

---

# African Textile Design System

> Design style inspired by West African Kente cloth and Adire tie-dye, featuring bold geometric weave patterns, earth tones clashing with vivid colors, and handcrafted textures.

## Design Philosophy

African Textile draws inspiration from West African Kente weaving and Adire indigo tie-dye, transforming centuries of textile craft traditions into a vibrant digital design language.

Core concepts:
- Bold geometry: The warp-and-weft weaving of Kente cloth produces strong geometric stripes and color blocks, with each pattern carrying specific cultural meaning and social status symbolism
- Earth tones: Dark wood, terracotta orange, and sand gold form a warm and substantial color foundation, echoing the red soil and grasslands of the African continent
- Handcrafted texture: Rough fabric textures and imperfect handmade edges give the interface a unique human warmth
- Color collision: The vivid contrast between warm earth tones and forest green mimics the visual impact of bright stripes interspersed against dark backgrounds in Kente cloth

Kente cloth is called "the cloth of kings" (nwentoma) in Akan culture, and its weaving techniques have been listed as UNESCO Intangible Cultural Heritage. Each color and pattern combination represents different proverbs, historical events, or philosophical concepts.

Suitable for cultural brands, artisan e-commerce, educational platforms, and any project seeking to convey strength, tradition, and a connection to the earth.

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-[#2c1810]
Radius: rounded-lg
```

### Shadow
```
sm: shadow-[2px_2px_0px_#2c1810]
md: shadow-[4px_4px_0px_#2c1810]
lg: shadow-[6px_6px_0px_#2c1810]
hover: hover:shadow-[6px_6px_0px_#2c1810]
focus: focus:shadow-[0_0_0_3px_rgba(196,80,31,0.2)]
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:translate-x-[-2px] hover:translate-y-[-2px]
Hover opacity: (none)
Transition: transition-all duration-200 ease-in-out
Active: active:translate-x-0 active:translate-y-0
```

### Typefaces
```
Heading: font-bold uppercase tracking-widest text-[#2c1810]
Body: font-sans tracking-wide
Mono: font-mono
```

### Type scale
```
Hero: text-4xl md:text-6xl lg:text-7xl
H1: text-3xl md:text-5xl
H2: text-2xl md:text-4xl
H3: text-xl md:text-2xl
Body: text-sm md:text-base
Small: text-xs md:text-sm
```

### Spacing
```
Section: py-12 md:py-20 lg:py-28
Container: px-4 md:px-8 lg:px-12
Card: p-6 md:p-8
Gap sm: gap-3 md:gap-4
Gap md: gap-4 md:gap-6
Gap lg: gap-6 md:gap-10
```

### Color roles
```
Background primary: bg-[#2c1810]
Background secondary: bg-[#e8d5b5]
Background accent: bg-[#c4501f], bg-[#f0c75e], bg-[#1a5632]
Text primary: text-[#2c1810]
Text secondary: text-[#e8d5b5]
Text muted: text-[#2c1810]/60
Button primary: bg-[#c4501f] text-[#e8d5b5] border-2 border-[#f0c75e]
Button secondary: bg-[#e8d5b5] text-[#2c1810] border-2 border-[#2c1810]
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-full`
- `rounded-3xl`
- `bg-white`
- `bg-pink-100`
- `bg-purple-100`
- `text-[#00ffff]`
- `text-[#ff00ff]`
- `backdrop-blur`
- `backdrop-blur-md`
- `backdrop-blur-lg`
- `bg-white/50`
- `bg-white/80`

### Banned patterns
- matches `^rounded-(?:full|3xl)$`
- matches `^bg-(?:white|pink-[1-3]|purple-[1-3])`
- matches `^text-\[#(?:00ffff|ff00ff)\]`
- matches `^backdrop-blur`

### Why they are banned
- `rounded-full`: African Textile uses angular geometric shapes (rounded-lg), not soft circles
- `bg-white`: African Textile uses earth tones (sand, dark wood), not pure white
- `backdrop-blur`: African Textile emphasizes solid, handcrafted textures over glass effects
- `text-[#00ffff]`: African Textile uses earth and jewel tones, not neon colors

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
rounded-lg
border-2 border-[#f0c75e]
shadow-[4px_4px_0px_#2c1810]
font-bold uppercase tracking-widest
transition-all duration-200 ease-in-out
```

### Every card must include
```
rounded-lg
bg-[#e8d5b5]
border-2 border-[#2c1810]
shadow-[4px_4px_0px_#2c1810]
```

### Every input must include
```
rounded-lg
border-2 border-[#2c1810]/40
bg-[#e8d5b5]
text-[#2c1810]
focus:border-[#c4501f]
focus:outline-none
```

---

## [COMPARE] African Textile wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="rounded-lg border-2 border-[#f0c75e] shadow-[4px_4px_0px_#2c1810] font-bold uppercase tracking-widest transition-all duration-200 ease-in-out bg-[#c4501f] text-[#e8d5b5] border-2 border-[#f0c75e]">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="rounded-lg bg-[#e8d5b5] border-2 border-[#2c1810] shadow-[4px_4px_0px_#2c1810] p-6 md:p-8">
  <h3 class="font-bold uppercase tracking-widest text-[#2c1810] text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="rounded-lg border-2 border-[#2c1810]/40 bg-[#e8d5b5] text-[#2c1810] focus:border-[#c4501f] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] African Textile page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#2c1810] text-[#2c1810] border-2 border-[#2c1810] px-4 md:px-8 lg:px-12">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-4 md:gap-6">
    <a href="/" class="font-bold uppercase tracking-widest text-[#2c1810] text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-4 md:gap-6 font-sans tracking-wide text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#c4501f] text-[#2c1810] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-bold uppercase tracking-widest text-[#2c1810] text-4xl md:text-6xl lg:text-7xl">
      {HEADLINE}
    </h1>
    <p class="font-sans tracking-wide text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-lg border-2 border-[#f0c75e] shadow-[4px_4px_0px_#2c1810] font-bold uppercase tracking-widest transition-all duration-200 ease-in-out bg-[#c4501f] text-[#e8d5b5] border-2 border-[#f0c75e]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#2c1810] text-[#2c1810] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-bold uppercase tracking-widest text-[#2c1810] text-2xl md:text-4xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
      <!-- Card template - repeat for each card -->
      <div class="rounded-lg bg-[#e8d5b5] border-2 border-[#2c1810] shadow-[4px_4px_0px_#2c1810] p-6 md:p-8">
        <h3 class="font-bold uppercase tracking-widest text-[#2c1810] text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="font-sans tracking-wide text-sm md:text-base text-[#2c1810]/60">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="rounded-lg border-2 border-[#2c1810]/40 bg-[#e8d5b5] text-[#2c1810] focus:border-[#c4501f] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#e8d5b5] text-[#e8d5b5] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-10">
      <div>
        <span class="font-bold uppercase tracking-widest text-[#2c1810] text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-sans tracking-wide text-xs md:text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-bold uppercase tracking-widest text-[#2c1810] text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans tracking-wide text-xs md:text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] African Textile post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `rounded-lg border-2 border-[#f0c75e] shadow-[4px_4px_0px_#2c1810] font-bold uppercase tracking-widest transition-all duration-200 ease-in-out`
- [ ] Card includes: `rounded-lg bg-[#e8d5b5] border-2 border-[#2c1810] shadow-[4px_4px_0px_#2c1810]`
- [ ] Input includes: `rounded-lg border-2 border-[#2c1810]/40 bg-[#e8d5b5] text-[#2c1810] focus:border-[#c4501f] focus:outline-none`

### Forbidden check
- [ ] Not using `rounded-full`
- [ ] Not using `rounded-3xl`
- [ ] Not using `bg-white`
- [ ] Not using `bg-pink-100`
- [ ] Not using `bg-purple-100`
- [ ] Not using `text-[#00ffff]`
- [ ] Not using `text-[#ff00ff]`
- [ ] Not using `backdrop-blur`

### Style rule check
- [ ] Use Kente orange bg-[#c4501f] and gold bg-[#f0c75e] for accent elements
- [ ] Use dark wood bg-[#2c1810] as main background to convey weight
- [ ] Use sand bg-[#e8d5b5] for secondary backgrounds and card base colors
- [ ] Use forest green text-[#1a5632] for text and decorative color
- [ ] Employ geometric stripes and color blocks as decorations to simulate weave patterns

### Style drift check
- [ ] Does not violate: Do not use neon or high-saturation fluorescent colors text-[#00ffff]
- [ ] Does not violate: Do not use soft pastel tones bg-pink-100, bg-purple-100
- [ ] Does not violate: Do not use very large rounded corners rounded-full or rounded-3xl
- [ ] Does not violate: Do not use pure white backgrounds bg-white
- [ ] Does not violate: Do not use glassmorphism or blur effects backdrop-blur

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as African Textile

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use neon or high-saturation fluorescent colors text-[#00ffff]
- use soft pastel tones bg-pink-100, bg-purple-100
- use very large rounded corners rounded-full or rounded-3xl
- use pure white backgrounds bg-white
- use glassmorphism or blur effects backdrop-blur
- omit geometric decorative elements
- use light, fast interactions (duration-75 + large displacement)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not use neon or high-saturation fluorescent colors text-[#00ffff]
- [ ] do not use soft pastel tones bg-pink-100, bg-purple-100
- [ ] do not use very large rounded corners rounded-full or rounded-3xl
- [ ] do not use pure white backgrounds bg-white
- [ ] do not use glassmorphism or blur effects backdrop-blur