Hashti Design System (هشتی)Copy Anchor Link

Hashti is an enterprise-grade, accessible React component library inspired by the spatial elegance, structural harmony, and dignified hospitality of classical Persian architecture.

Built on React Aria Components (RAC 1.22.1), Tailwind CSS v4, and comprehensive design tokens, Hashti serves as the welcoming architectural threshold between complex underlying application logic and intuitive human experience.

[API / Data Engine]  ──►  <Hashti />  ──►  [Human Experience]

The Persian Architectural Philosophy: هشتیCopy Anchor Link

In traditional Persian vernacular architecture — prominent across the historic desert cities of Isfahan, Yazd, Kashan, and Shiraz — domestic spaces are designed around the concept of mahramiyat (محرمیت, sanctuary and privacy) and intentional spatial gradation.

The Hashti (هشتی), derived from the Persian word for eight (hasht, هشت), is a vaulted octagonal or polygonal vestibule situated immediately behind the entrance portal. It is never a mere passageway; it is a deliberate pause. In the harsh desert climate, the Hashti provides immediate relief from desert heat through thick adobe massing, a zenithal skylight (hoor-noor / هورنور) that bathes the space in diffused soft light, and acoustic serenity that muffles the roar of the bazaar.

In digital design, users often experience sensory overload, abrupt layout shifts, and visual cacophony. Hashti translates this ancient architectural wisdom into software: every component is designed as a balanced, calming threshold that buffers raw data into legible, serene user interfaces.

The 5-Stage Spatial Threshold SequenceCopy Anchor Link

Persian master builders devised an unbroken sequence of five physical transitions between the public city and the private dwelling. In Hashti Design System, this spatial journey maps directly to the layers of user experience:

flowchart LR
    K[1. کوچه<br/>Koucheh<br/>Public Street] --> S[2. سردر<br/>Sar-Dar<br/>Entrance Portal]
    S --> H[3. هشتی<br/>Hashti<br/>Octagonal Vestibule]
    H --> D[4. دالان<br/>Dalan<br/>Bent Corridor]
    D --> Y[5. حیاط<br/>Hayat<br/>Courtyard Sanctuary]

1. کوچه (Koucheh — The Public Street)Copy Anchor Link

• Architectural Reality: The narrow, bustling external alleyway flanked by mudbrick walls. High sensory stimuli, continuous movement, social exposure, and harsh sunlight.
• Digital Translation: The open internet, raw API payloads, asynchronous WebSocket events, and unauthenticated public endpoints. The chaotic exterior realm of data.

2. سردر (Sar-Dar — The Entrance Portal)Copy Anchor Link

• Architectural Reality: The monumental pointed ogival arch that announces transition. Embellished with muqarnas (vaulted honeycombing), carved inscriptions, and paired bronze door knockers (kouveh for men with low tone, halgheh for women with high tone). It commands respect and marks an intentional boundary.
• Digital Translation: The brand identity, design tokens, entry point routes, authentication gateways, and the iconic 32° ogival arch vector motif.

3. هشتی (Hashti — The Octagonal Transitional Vestibule)Copy Anchor Link

• Architectural Reality: The octagonal pause chamber. Cool masonry benches (shahan-shin or sakoo) line the walls, allowing couriers and guests to sit in comfort without peering into family quarters. Soft zenithal lighting descends from the dome cupola.
• Digital Translation: The design system core — our React Aria Component primitive wrappers, theme providers, focus rings, and context providers that normalize runtime data into accessible states.

4. دالان (Dalan — The Indirect Bent Passage)Copy Anchor Link

• Architectural Reality: A 90-degree bent, winding vaulted hallway connecting the Hashti to the inner courtyard. It mathematically prevents direct lines of sight from the public street into the intimate residential chambers.
• Digital Translation: Nested layered elevation (Layer level 1, 2, 3), contextual drawer overlays, modal sheets, and defense against layout shifts that shield user attention and maintain state integrity.

5. حیاط (Hayat — The Courtyard Sanctuary)Copy Anchor Link

• Architectural Reality: The destination: a sun-drenched central courtyard garden anchored by a turquoise reflecting pool (howz / حوض), surrounded by pomegranates, bitter orange trees, and harmonious living rooms (panj-dari).
• Digital Translation: The finished application interface: tranquil, accessible, balanced, responsive, and delightful for the human being using it.

Mathematical Vector GeometryCopy Anchor Link

The Hashti brand mark is constructed from 3 concentric arches reflecting authentic Safavid and Seljuk masonry geometry:

• Arch Pitch: 32° ogival pointed arch angle, derived from classic Persian four-centered and pointed vault drafting techniques.
• Stroke Width: Exact 16px stroke weight on master display scales.
• Clearance Gap: Uncompromising 14px negative space clearance gap between concentric arches.
• Golden Ratio Cadence: 1:1.618 dimensional proportion between the central gateway anchor and the flanking exterior vaults.

       ▲  32° Ogival Crown
      / \
     /   \      Concentric Arches (16px Stroke / 14px Gap)
    /  ▲  \
   /  / \  \
  |  |   |  |
  |  | █ |  |   Gateway Anchor
══╧══╧═══╧══╧══ Baseline

Core Architectural PillarsCopy Anchor Link

Hashti is grounded in four non-negotiable engineering and aesthetic pillars:

Documentation NavigationCopy Anchor Link

Explore the core areas of Hashti Design System:

• 🚀 Installation Guide: Quickstart with Bun, npm, pnpm, or yarn across Next.js, Astro, and Vite.
• 🎨 Theming Architecture: Explore the 8 supported themes across Core 4, Relay, and Frame.
• ♿ Accessibility & RTL: Deep dive into WCAG 2.2 AAA compliance and bidirectional Persian/Arabic layout.
• 💎 Color Tokens: Discover Obsidian Black, Persian Turquoise, Isfahan Amber, and semantic tokens.
• 🔤 Typography: Satoshi, Vazirmatn, and JetBrains Mono typographic hierarchy.
• 📐 Spacing & Geometry: 8-point spatial grid, control heights, and arch curves.
• 🏛️ Hashti Brandbook: Identity presentation sheet, SVG vector assets, and live interactive showcase.
• 🗺️ RAC Expansion Roadmap: Comprehensive elevation plan for React Aria Components 1.22.1.