Islamic Geometric

STYLEKIT_STYLE_REFERENCE
style_name: Islamic Geometric
style_slug: islamic-geometric
style_source: /styles/islamic-geometric

# 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 Islamic Geometric design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Fluorescent or neon colors (pink-500, cyan-400, lime-400)
- Asymmetric chaotic layouts
- Pure black backgrounds bg-black (use deep blue bg-[#1a3a5c])
- Handwritten or cartoon fonts
- Overly minimal undecorated designs
- Heavy shadows shadow-2xl

## Must Follow

- Deep blue base bg-[#1a3a5c]
- Ivory white bg-[#f5ecd7]
- Gold decorations text-[#c9a74e] border-[#c9a74e]
- Symmetrical centered layouts text-center
- Elegant borders border-2 border-[#c9a74e]
- Geometric corner decorations
- Gold gradient divider lines
- Moderate rounded corners rounded-lg rounded-xl
- Sans-serif fonts font-sans font-semibold
- Relaxed letter spacing tracking-wide tracking-wider

## Color Palette

Core three colors:
- Deep blue (lapis lazuli): #1a3a5c
- Ivory white: #f5ecd7
- Gold: #c9a74e

Supporting colors:
- Emerald: #2d7d46
- Deep red: #8b2332

## Decorative Elements

- Geometric tessellation patterns
- Star textures
- Corner border decorations
- Gold gradient divider lines
- Arch-shaped containers

## Animation & Interaction Rules

- Sacred Symmetry: Interaction effects maintain strict symmetry; corner decorations expand outward slightly in sync on hover.
- Divine Illumination: Gold borders and dividers can slowly enhance their glow, avoiding abrupt flashing.
- Tessellation Reveal: Geometric patterns increase visibility on hover/focus, embodying the layered sense of order being revealed.
- Elegant Easing: Recommend duration-500 + ease-out, maintaining a solemn and elegant rhythm.

---

# Islamic Geometric Design System

> Islamic geometric pattern design style with precise tessellation patterns, arabesque motifs, and the classic pairing of gold and deep blue.

## Design Philosophy

Islamic geometric art is one of the most precise decorative systems in human civilization, still awe-inspiring after a millennium. It is based on strict mathematical principles -- tessellation of regular polygons, star-shaped multi-pointed patterns, and arabesque scrollwork -- constructing an infinitely extending visual universe.

The core philosophy is "Unity in Multiplicity." Simple geometric elements, through rotation, symmetry, and repetition, generate dazzlingly complex patterns. This process of "from simple to complex" is regarded as a meditation on the beauty of creation.

The color palette follows the classic Persian-Arabic tradition: deep blue (lapis lazuli) as the base, gold (gilding) as accents, and ivory white as breathing space. Emerald green and deep red appear as supporting colors in specific areas, adding layers and depth.

In typography, Islamic geometric style favors elegant and substantial fonts. Headings use medium-weight sans-serif fonts with moderate letter spacing, conveying solemnity and refinement. Body text maintains comfortable line height and spacing.

In interface design, geometric tessellation patterns typically appear as border decorations, dividers, or background textures rather than covering the entire surface. The core is a "framing" sensibility -- exquisite geometric borders surrounding content areas, like the mosaic inlays of a mosque dome surrounding the central space.

---

## Token Dictionary (exact class mapping)

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

### Shadow
```
sm: shadow-[0_2px_4px_rgba(201,167,78,0.1)]
md: shadow-[0_4px_12px_rgba(201,167,78,0.15)]
lg: shadow-[0_8px_24px_rgba(201,167,78,0.2)]
hover: hover:shadow-[0_6px_20px_rgba(201,167,78,0.25)]
focus: focus:shadow-[0_0_0_3px_rgba(201,167,78,0.15)]
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:opacity-90
Transition: transition-all duration-300 ease-in-out
Active: active:opacity-80
```

### Typefaces
```
Heading: font-sans font-semibold tracking-wide
Body: font-sans
Mono: font-mono
```

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

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

### Color roles
```
Background primary: bg-[#1a3a5c]
Background secondary: bg-[#f5ecd7]
Background accent: bg-[#c9a74e], bg-[#2d7d46], bg-[#8b2332]
Text primary: text-[#f5ecd7]
Text secondary: text-[#1a3a5c]
Text muted: text-[#c9a74e]/60
Button primary: bg-[#c9a74e] text-[#1a3a5c]
Button secondary: bg-transparent text-[#c9a74e] border-2 border-[#c9a74e]
```

---

## [FORBIDDEN]

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

### Banned classes
- `font-mono`
- `rounded-none`
- `rounded-full`
- `shadow-2xl`
- `bg-black`
- `bg-[#ff71ce]`
- `bg-[#01cdfe]`
- `bg-[#00ff00]`
- `text-[#ff71ce]`
- `text-[#01cdfe]`
- `text-[#00ff00]`

### Banned patterns
- matches `^rounded-(?:none|full)$`
- matches `^shadow-2xl$`
- matches `^bg-(?:pink|cyan|lime|green)-`
- matches `^text-(?:pink|cyan|lime|green)-`

### Why they are banned
- `rounded-none`: Islamic Geometric uses elegant rounding for arched forms (rounded-lg, rounded-xl)
- `rounded-full`: Islamic Geometric uses moderate rounding, not pill shapes
- `bg-black`: Islamic Geometric uses deep blue (#1a3a5c) instead of pure black
- `shadow-2xl`: Islamic Geometric uses subtle golden shadows, not heavy ones
- `bg-pink-500`: Islamic Geometric uses traditional deep blue, gold, and ivory palette

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

---

## [REQUIRED]

### Every button must include
```
rounded-lg
border-2 border-[#c9a74e]
font-sans font-semibold tracking-wider
transition-all duration-300
```

### Every card must include
```
rounded-xl
border-2 border-[#c9a74e]
shadow-[0_4px_12px_rgba(201,167,78,0.15)]
```

### Every input must include
```
rounded-lg
border-2 border-[#1a3a5c]/30
bg-[#f5ecd7]
text-[#1a3a5c]
font-sans tracking-wide
focus:border-[#c9a74e]
focus:outline-none
```

---

## [COMPARE] Islamic Geometric 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-[#c9a74e] font-sans font-semibold tracking-wider transition-all duration-300 bg-[#c9a74e] text-[#1a3a5c]">
  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-xl border-2 border-[#c9a74e] shadow-[0_4px_12px_rgba(201,167,78,0.15)] p-8">
  <h3 class="font-sans font-semibold tracking-wide text-lg md:text-xl">{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-[#1a3a5c]/30 bg-[#f5ecd7] text-[#1a3a5c] font-sans tracking-wide focus:border-[#c9a74e] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Islamic Geometric page skeletons

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

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

### Hero section
```html
<section class="bg-[#c9a74e] text-[#f5ecd7] py-16 md:py-28 lg:py-36 px-6 md:px-12 lg:px-20">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-sans font-semibold tracking-wide text-5xl md:text-7xl lg:text-8xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-lg border-2 border-[#c9a74e] font-sans font-semibold tracking-wider transition-all duration-300 bg-[#c9a74e] text-[#1a3a5c]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#1a3a5c] text-[#f5ecd7] py-16 md:py-28 lg:py-36 px-6 md:px-12 lg:px-20">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-sans font-semibold tracking-wide text-2xl md:text-3xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-8">
      <!-- Card template - repeat for each card -->
      <div class="rounded-xl border-2 border-[#c9a74e] shadow-[0_4px_12px_rgba(201,167,78,0.15)] p-8">
        <h3 class="font-sans font-semibold tracking-wide text-lg md:text-xl">{CARD_TITLE}</h3>
        <p class="font-sans text-sm md:text-base text-[#c9a74e]/60">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="rounded-lg border-2 border-[#1a3a5c]/30 bg-[#f5ecd7] text-[#1a3a5c] font-sans tracking-wide focus:border-[#c9a74e] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

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

---

## [CHECKLIST] Islamic Geometric 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-[#c9a74e] font-sans font-semibold tracking-wider transition-all duration-300`
- [ ] Card includes: `rounded-xl border-2 border-[#c9a74e] shadow-[0_4px_12px_rgba(201,167,78,0.15)]`
- [ ] Input includes: `rounded-lg border-2 border-[#1a3a5c]/30 bg-[#f5ecd7] text-[#1a3a5c] font-sans tracking-wide focus:border-[#c9a74e] focus:outline-none`

### Forbidden check
- [ ] Not using `font-mono`
- [ ] Not using `rounded-none`
- [ ] Not using `rounded-full`
- [ ] Not using `shadow-2xl`
- [ ] Not using `bg-black`
- [ ] Not using `bg-[#ff71ce]`
- [ ] Not using `bg-[#01cdfe]`
- [ ] Not using `bg-[#00ff00]`

### Style rule check
- [ ] Use deep blue and gold classic palette bg-[#1a3a5c] text-[#c9a74e] paired with ivory bg-[#f5ecd7]
- [ ] Use geometric tessellation patterns as border and decorative elements
- [ ] Use symmetrical layouts text-center items-center justify-center
- [ ] Use elegant border decorations border-2 border-[#c9a74e]
- [ ] Maintain a dignified font style font-sans font-semibold tracking-wide

### Style drift check
- [ ] Does not violate: Do not use fluorescent or neon colors bg-pink-500 text-cyan-400
- [ ] Does not violate: Do not use asymmetric chaotic layouts
- [ ] Does not violate: Do not use overly minimal undecorated designs -- moderate decoration is core
- [ ] Does not violate: Do not use heavy shadows shadow-2xl that break the refined feel
- [ ] Does not violate: Do not use handwritten or cartoon fonts

### 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 Islamic Geometric

## Absolute Bans (Match and Refuse)

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

- use fluorescent or neon colors bg-pink-500 text-cyan-400
- use asymmetric chaotic layouts
- use overly minimal undecorated designs -- moderate decoration is core
- use heavy shadows shadow-2xl that break the refined feel
- use handwritten or cartoon fonts
- use pure black backgrounds bg-black (use deep blue instead)
- densely stack content without structural separation
- use bouncy spring effects; maintain solemn stability

## 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 fluorescent or neon colors bg-pink-500 text-cyan-400
- [ ] do not use asymmetric chaotic layouts
- [ ] do not use overly minimal undecorated designs -- moderate decoration is core
- [ ] do not use heavy shadows shadow-2xl that break the refined feel
- [ ] do not use handwritten or cartoon fonts