A design system woven from madder, indigo & saffron
Hand-Knotted Textile WarmthColors drawn from natural dye sources used for centuries in Persian rug-making: madder root for reds, indigo plant for blues, pomegranate rind and saffron crocus for golds, walnut husk for browns, and undyed wool for creams.
Three serif families evoke the calligraphic and scribal traditions of Persia. Cormorant Garamond commands at display sizes, Lora provides warmth for body text, and Amiri brings Arabic-influenced calligraphic grace as accent.
Body text in Lora sits beneath with calm readability. The warm calligraphic curves of Lora complement the refined elegance of Cormorant Garamond, creating a pairing that feels both scholarly and inviting — like turning the pages of an illuminated manuscript in a caravanserai library.
— Accent attribution in Amiri italicWhen combined with regular-weight body text, the light italic display creates a delicate hierarchical contrast. This pairing works well for pull quotes, chapter openings, and decorative section headers.
A 4px base unit mirrors the tight, regular grid of hand-knotted carpet construction. Each knot is a pixel; spacing increments reflect the density of the weave.
Form elements styled with the deep warmth of indigo-field inputs, saffron-gold focus rings, and guard-stripe fieldset borders — every interaction woven into the textile language.
Four card variants drawn from carpet compositional elements: the central medallion, the open field, the ornamental border, and the ivory-ground contrast panel.
Centered layout with concentric ring borders, echoing the sunburst medallion found at the heart of Isfahan and Kashan carpets. Corner spandrels anchor the composition.
The open field is the canvas upon which motifs are scattered. This card variant uses a warm madder background with subtle weave texture and a simple gold border frame.
— Madder-field compositionThe border is as important as the field. This variant uses an indigo background with ornamental multi-layer guard stripes, referencing the guard-main-guard border structure of classical carpets.
Inspired by the ivory-field Nain carpet, this light-background variant provides contrast and breathing room. Dark text on cream wool, with indigo accents — elegant and restrained.
— Nain ivory-field influenceNotification patterns with guard-stripe top borders, warm dark backgrounds, and motif markers drawn from the symbolic vocabulary of Persian textiles.
A showcase of Persian carpet border patterns recreated in pure CSS. In a real carpet, the border system consists of guard stripes flanking a main border band, containing the field like a frame around a painting.
The narrow guard stripe uses diagonal reciprocal coloring — alternating saffron and madder at a 135-degree angle, creating a barber-pole rhythm that frames the main border.
repeating-linear-gradient(135deg, saffron 6px, madder 6px ... 24px)
The main border band uses alternating indigo and madder panels separated by gold dividers, with internal gold dashes suggesting the lozenge motifs typical of Herati and turtle border systems.
repeating-linear-gradient(90deg, ...) + pseudo-element overlay
A simplified vine-scroll border using radial gradients for circular nodes connected by horizontal lines — a minimal interpretation of the meandering vine motif found in Shah Abbasi borders.
radial-gradient(circle 8px) + repeating-linear-gradient(90deg)
The complete border system: guard stripe — main border — guard stripe. This is the fundamental structure of a Persian carpet border, read from the field outward.
flex column: .guard (12px) + .main (32px) + .guard (12px)
Wisdom encoded in wool — the philosophical traditions of the master weavers, where every design choice carries meaning beyond the decorative.
"Every knot is a prayer"
In the tribal tradition, weaving is a devotional act. Each knot tied is a moment of meditation, a mark of patience and intention. A carpet of two million knots is two million prayers offered to the earth it will cover.
"The abrash is the weaver's fingerprint"
Abrash — the subtle color variation in hand-dyed yarn — is not a flaw but a signature. It proves human hands dipped the wool, that a natural vat gave its color. No two skeins are identical, and in that imperfection lies authenticity.
"A carpet without borders is a field without meaning"
The border gives the field its context. Without containment, the motifs float unanchored. The guard stripes, the main border, the secondary borders — they are the grammar that turns pattern into language.
"The medallion is the sun; the field is the earth"
The central medallion radiates outward like the sun over a garden. The field surrounding it is the fertile earth, sown with flowers, trees, and birds. Together, medallion and field compose a portable paradise — the walled garden of Persian cosmology, carried wherever the carpet is laid.