Islamic|Geometric
PaletteComponentsInteractionsApp DemoPhilosophy
← StyleKit
Unity in Multiplicity

ISLAMIC
GEOMETRIC

Precision tessellation. Gilded ornament. The infinite emerging from the simple — a thousand years of sacred geometry.

1,200+
Years of tradition
8-fold
Symmetry axes
∞
Pattern repetitions
3
Core color pillars
Color System

The Classical Palette

Deep lapis blue, gilded gold, and ivory parchment — the timeless triad of Persian-Arabic illuminated manuscripts. Emerald and burgundy add depth selectively.

Lapis Lazuli
#1a3a5c
Primary
Ivory Parchment
#f5ecd7
Background
Gilded Gold
#c9a74e
Accent
Persian Emerald
#2d7d46
Accent 2
Burgundy Rose
#8b2332
Accent 3

Color Combinations

Navy + Gold
Gold + Navy
Navy + Ivory
Emerald + Gold
Components

Gilded Building Blocks

Primary — Gold fill with corner ornaments

Outlined — Gilded border with glow

Size variants

Interaction Rules

The Four Sacred Rules

Each aiRule governs how the Islamic Geometric style moves and responds. Interact with each demo to experience the principle in action.

Rule 1Sacred Symmetry

Interactions maintain strict symmetry — corner ornaments expand outward in unison on hover.

Hover any tile to see symmetrical corner expansion:

Hover to see Sacred Symmetry in action

Rule 2Divine Illumination

Gold borders and dividers slowly intensify their glow — no abrupt flash, a gradual revelation.

Intensity: 0%

Dormant

Rule 3Tessellation Reveal

Geometric patterns increase in visibility on hover/focus — order unveiled layer by layer.

Layers visible: 1 / 3 — click to add layers:

Layer 1 — click to reveal

Rule 4Elegant Easing

duration-500 + ease-out: dignified and graceful — never bouncy, never rigid.

Elegant ease-out

transition: all 0.5s ease-out — decelerates gracefully

Rigid linear (forbidden)

transition: all 0.6s linear — mechanical, inelegant

ease-out decelerates naturally, like water settling into stillness. Linear is mechanical — unworthy of the style.

App Demo

Exhibition Hall

Alhambra Collection

The Nasrid Palace geometric panels — 14th century gilded stucco tessellation from Granada. Eight-pointed star matrix, infinite repeat.

Region
Al-Andalus
Period
1350 CE
Material
Gilded stucco
Iznik Tiles
Ottoman, 16th c.

Cobalt-and-white floral tessellation from Suleiman's mosque.

Nasrid Arch
Granada, 1380

Interlaced horseshoe arches forming the court of the Lions.

Mamluk Star
Cairo, 13th c.

Six-pointed polygon matrix in polychrome marble mosaic.

Design Principles

Laws of the Craft

The Islamic Geometric style demands precision. These rules preserve the dignity and mathematical integrity of thousand-year-old artistic tradition.

Philosophy
“Core philosophy: Unity in Multiplicity. Simple geometric elements through rotation, symmetry and repetition, generating breathtaking complexity. This ‘simple to complex’ process is meditated as the beauty of creation.”

Do

  • Use deep blue bg-[#1a3a5c] with gold text-[#c9a74e] and ivory bg-[#f5ecd7]
  • Use geometric tessellation patterns as borders and decorative elements
  • Use symmetric centered layouts with text-center items-center
  • Use elegant border decoration border-2 border-[#c9a74e]
  • Maintain dignified typography font-sans font-semibold tracking-wide
  • Use subtle gold shadows shadow-[0_4px_12px_rgba(201,167,78,0.2)]
  • Use rounded-lg or rounded-xl for an arched sensibility
  • Preserve generous breathing room around geometric ornaments
  • Interactions: symmetric expansion and gold radiance on hover

Don't

  • No fluorescent or neon colors bg-pink-500 text-cyan-400
  • No asymmetric chaotic layouts — symmetry is sacred
  • No pure black backgrounds bg-black — use deep blue bg-[#1a3a5c]
  • No handwritten or cartoon typefaces
  • No bare minimalism without ornament — decoration is the core
  • No heavy shadows shadow-2xl that destroy the refined feeling
  • No dense stacked content lacking structural separation
  • No bouncy spring animations — maintain dignified stability

Mathematical Precision

Every pattern emerges from strict geometric axioms. Rotation, reflection, translation.

Frame Consciousness

Beautiful geometric borders frame content like mosque dome mosaics frame the central space.

Dignified Motion

ease-out at duration-500. No bouncing, no springing — only graceful deceleration.

Gilded Hierarchy

Gold serves as the primary accent on the navy ground. Ivory provides breathing space.

Arch Sensibility

Containers recall the horseshoe arch. rounded-xl evokes the curves of the mihrab.

Unity in Pattern

Simple tiles repeat to create infinite complexity — the hallmark of tessellation art.

Islamic Geometric

Precision tessellation. Gilded ornament. Sacred symmetry translated into the modern interface — a thousand years of geometric art, alive in every interaction.

StyleDocumentationShowcaseCover
StyleKitHomeAll Styles
PaletteLapis LazuliIvory ParchmentGilded GoldPersian EmeraldBurgundy Rose
Islamic Geometric — StyleKit Design System
Back to StyleKit →