Foundations
Color Palette & Tokens
The core palette of Hashti Design System, inspired by Persian masonry, mineral glazes, and sunlit courtyards.
Color Palette & Tokens
Hashti’s chromatic system combines strict monochrome structural discipline with evocative mineral accents drawn from the architectural wonders of Isfahan, Yazd, and Kashan.
The 5 Core Brand Colors
The foundational identity of Hashti is built upon five iconic hues:
| Color Name | Hex Code | RGB | Architectural Origin & Meaning | Semantic Token Binding |
|---|---|---|---|---|
| Obsidian Black | #000000 | rgb(0, 0, 0) | Deep basalt stone and night sky. Establishes structural contrast, borders, and pure typographic weight. | --hashti-text-primary, --hashti-border-strong |
| Chalk White | #FFFFFF | rgb(255, 255, 255) | Pure lime plaster (gach-bori) reflecting desert sun. Represents canvas tranquility and openness. | --hashti-background, --hashti-surface |
| Persian Turquoise | #0D9488 | rgb(13, 148, 136) | The luminous glazed tilework (kashi-kari) of the Shah Mosque in Isfahan. Symbolizes spiritual clarity, active focus, and positive progress. | --hashti-interactive, --hashti-accent-turquoise |
| Isfahan Amber | #D97706 | rgb(217, 119, 6) | Golden desert sunlight filtering through stained glass (orosi) windows. Represents warmth, caution, and pending activity. | --hashti-warning, --hashti-accent-amber |
| Terracotta Clay | #DC2626 | rgb(220, 38, 38) | Kiln-fired desert brick (khesht) and Persian crimson dyes. Denotes critical boundaries, errors, and urgent system alerts. | --hashti-support-error, --hashti-accent-terracotta |
Semantic Color Token Architecture
Rather than hardcoding hex values into application components, Hashti organizes colors into semantic functional tokens that shift cleanly between light and dark modes:
Surface & Background Tokens
| Token Name | Light Theme Value | Dark Theme Value | Usage Purpose |
|---|---|---|---|
--hashti-background | #FFFFFF | #18191D | Global page canvas behind all views. |
--hashti-layer-01 | #F5F6F8 | #22242A | Primary container surface (cards, sidebars, tables). |
--hashti-layer-02 | #EEF1F6 | #2C2F38 | Secondary nested surface inside containers. |
--hashti-layer-03 | #E4E7ED | #353944 | Tertiary surface (elevated floating popovers). |
Typography & Border Tokens
| Token Name | Light Theme Value | Dark Theme Value | Contrast Ratio |
|---|---|---|---|
--hashti-text-primary | #25272C | #F1F2F6 | 15.2:1 (Exceeds WCAG AAA) |
--hashti-text-secondary | #606674 | #B1B6C3 | 7.1:1 (Meets WCAG AAA) |
--hashti-text-disabled | #A2A8B5 | #5B616E | Inactive controls and disabled states. |
--hashti-border-subtle | #DDE1E8 | #3E424D | Subtle dividers and table grid lines. |
--hashti-border-strong | #7F8795 | #7D8493 | Form input borders and card boundaries. |
Feedback & Status Tokens
| Token Name | Light Value | Dark Value | Meaning & Context |
|---|---|---|---|
--hashti-support-info | #365CCB | #A9BDFF | Neutral informational notices and active focus rings. |
--hashti-support-success | #246343 | #A4D9B8 | Confirmation, healthy states, and successful saves. |
--hashti-support-warning | #75500D | #E7C383 | Cautionary thresholds, storage warnings, non-blocking alerts. |
--hashti-support-error | #AA2735 | #FFACB3 | Validation errors, failed API transactions, danger actions. |
Contrast Ratio Breakdown
Every Hashti token pair is tested against strict WCAG 2.2 AAA standards (7:1 for normal text, 4.5:1 for large text, 3:1 for graphical UI):
+--------------------------------------------------------------+ | Obsidian on Chalk (#000000 on #FFFFFF) --> 21.0:1 AAA | | Primary Text Light (#25272C on #FFFFFF) --> 15.2:1 AAA | | Primary Text Dark (#F1F2F6 on #18191D) --> 14.8:1 AAA | | Turquoise Accent (#0D9488 on #FFFFFF) --> 4.6:1 AA+ | | Terracotta Error (#DC2626 on #FFFFFF) --> 4.8:1 AA+ | | Warning Amber (#D97706 on #18191D) --> 6.2:1 AAA | +--------------------------------------------------------------+
CSS Variable Usage Example
You can reference Hashti’s color tokens directly in custom CSS or styled components:
.custom-architectural-card {
background-color: var(--hashti-layer-01);
border: 1px solid var(--hashti-border-subtle);
color: var(--hashti-text-primary);
border-radius: var(--hashti-radius-control, 10px);
padding: var(--hashti-spacing-05, 16px);
}
.custom-architectural-card:hover {
border-color: var(--hashti-interactive, #0d9488);
}