Brandbook & Identity System

The Hashti (هشتی) brand identity unites ancient Persian spatial architectural traditions with rigorous modern software engineering. Every curve, ratio, and mineral tone reflects intentional transition, sensory calm, and uncompromising accessibility.

Official Vector Assets & DownloadsCopy Anchor Link

All official Hashti marks are precision-drafted vectors rendered in crisp SVG format. They scale infinitely from a 16px favicon to monumental conference banners without loss of fidelity.

1:1

Hashti Mark

256×256

Favicon, app bar emblem, social avatar, navigation mark.

hashti-mark.svgDownload SVG

5:1

Horizontal Lockup

600×120

Documentation header, navigation bar, pitch deck titles.

hashti-horizontal.svgDownload SVG

4:5

Vertical Stack

400×500

Splash screens, poster merchandise, conference banners.

hashti-vertical.svgDownload SVG

1:1

App Icon

512×512

macOS Dock, iOS homescreen, Android adaptive launcher.

hashti-app-icon.svgDownload SVG

Clear Space & Minimum SizingCopy Anchor Link

• Clear Margin: Maintain a breathing boundary around the mark equal to at least half the width of the outer arch on all sides.
• Minimum Size:
  • Standalone mark: 16px (favicons and compact status icons)
  • Horizontal lockup: 24px height (navigation bars and headers)
  • Vertical lockup: 64px height (splash screens and hero titles)
• Do Not Distort: Never stretch, compress, rotate, or modify the 32° ogival apex pitch.

Architectural Geometry & Drafting FormulasCopy Anchor Link

The Hashti emblem is mathematically derived from the pointed ogival arch (chahar-gousheh) characteristic of Iranian vaulted vestibules.

                  ▲ Zenith (0° / 180° Tangent)
                /   \
               /     \   32° Ogival Pitch
              /   ▲   \
             /   / \   \  Inner Concentric Vault
            /   /   \   \
           │   │  ▲  │   │
           │   │  │  │   │ Keystone Entrance
           ┴───┴─────┴───┴

Proportional RelationshipsCopy Anchor Link

1. Concentric Ratios: The three nested vaults represent the spatial sequence:
   • Outer Arch: Darvazeh (The monumental public threshold)
   • Middle Vault: Hashti (The octagonal chamber of equilibrium)
   • Inner Arch: Dalan (The bent protective corridor)
   • Solid Keystone: Hayati (The grounded sanctuary)
2. Standard Arc Radii:
   • Component Control Radius: 12px (matching 44px touch ergonomics)
   • Surface Panel Radius: 16px (for elevated modals and floating popovers)
   • Pill Radius: 9999px (for tags, badges, and status capsules)

Color System FoundationsCopy Anchor Link

The brand palette is the same one the library measures, because a brandbook that names a different palette is a bug, not a tribute. Roles come from DESIGN.md and the Frame tokens in packages/tokens/src/frame.ts:

Two rules keep the palette honest:

• Action is not the brand accent. A control is ink because it is a commitment; blue is reserved for focus and selection. Nothing in the product is turquoise because the mark’s arch is.
• Heritage hues are decoration only. Persian turquoise and Isfahan amber may appear in illustrations, the brandbook’s own artwork and marketing surfaces. They are not interface tokens.

Typography HierarchyCopy Anchor Link

The product’s working type is the system sans — the same stack DESIGN.md fixes for every role (ui-sans-serif, system-ui), because a design system that requires a font download is not portable. Weight and size come from the role, not the family:

• headline 30px/600: page titles, hero statements
• title 18px/600: section titles and card headers
• label 14px/600: field names and control labels
• action 14px/500: buttons and interactive labels
• body 14px/400: operational copy
• input 16px/400: entered values — the Readable Value Rule: they never shrink to fit
• helper 13px/400: guidance and recovery
• Persian & Arabic: the same system stack carries RTL copy. The brandbook’s own Persian headings may use Vazirmatn as a display face; it is a presentational choice for this page, not a product requirement.
• Identifiers: the existing IBM Plex Mono stack marks tokens, keys and code. JetBrains Mono is not part of the system.

Brand Voice & PrinciplesCopy Anchor Link

When authoring documentation, error messages, and UI microcopy:

1. Architectural & Serene

   • Favor spatial, calm terminology: threshold, elevation, sanctuary, surface, pathway.
   • Avoid frantic tech hype, noisy exclamation marks, or aggressive alert banners.

2. Dignified Hospitality (Ta’arof without Friction)

   • Welcome the developer with clarity and respect.
   • Explain errors constructively with clear recovery actions rather than dead-ends.

3. Mathematical Precision

   • Quote exact contrast ratios, stroke dimensions, and accessibility conformance criteria.
   • Ground visual design in demonstrable ergonomic measurements.