steelforesight/design-system.md

# Design System — اندیشکده فولاد آینده (Future Steel Think Tank)

> **Tagline (FA):** «بینشی نو برای توسعه صنعتی»
> **Tagline (EN):** Shaping the Future of Steel Industry Through Insight, Innovation and Impact
> **Pillars:** INSIGHT · FORESIGHT · IMPACT
> **Source:** Brand Book v1.0 · Khordad 1405
> **Brand personality:** Forward-looking · Smart · Professional · Calm & deep · Inspiring · Authoritative

This document is the single source of truth for the brand's visual and verbal identity. Tokens are written in English for implementation; brand names, taglines, and voice are preserved in Persian as defined in the brand book.

---

## 1. Design Principles

The whole system rests on five principles. Every screen, slide, report, and post should pass all five.

1. **Consistency (یکپارچگی)** — Hold one identity across every medium. Fixed elements never change.
2. **Smart simplicity (سادگی هوشمند)** — Clean on the surface, deep underneath. Empty space is intentional, not unfinished.
3. **Clarity (وضوح)** — The message lands fast. Comprehension over decoration.
4. **Analytical focus (تحلیل‌محوری)** — Everything points at insight and understanding, not at spectacle.
5. **Future-orientation (آینده‌محوری)** — The look should feel like technology and the future, never retro or generic.

**Litmus test for any artifact:** the audience should walk away feeling *«این مجموعه آینده صنعت را عمیق‌تر، حرفه‌ای‌تر و هوشمندانه‌تر از دیگران تحلیل می‌کند».*

---

## 2. Color

### 2.1 Palette

| Token | Name (FA) | Name (EN) | Hex | Role |
|---|---|---|---|---|
| `--color-navy` | سرمه‌ای عمیق | Deep Navy | `#071D49` | Primary brand color |
| `--color-blue` | آبی آینده | Future Blue | `#00AEEF` | Accent / emphasis |
| `--color-white` | سفید | White | `#FFFFFF` | Breathing space, simplicity |
| `--color-gray-light` | خاکستری روشن | Light Gray | `#E9EEF5` | Lines & secondary surfaces |
| `--color-gray-steel` | خاکستری صنعتی | Industrial Gray | `#7C8798` | Secondary text |
| `--color-orange` | نارنجی محدود | Limited Orange | `#FF8A00` | Warning / optional emphasis only |

### 2.2 Color meaning

- **Navy** → credibility, thought, professionalism (اعتبار، تفکر، حرفه‌ای‌گری)
- **Blue** → technology, innovation, the future (فناوری، نوآوری، آینده)
- **White** → transparency, simplicity (شفافیت و سادگی)
- **Gray** → analytical focus, balance (تحلیل‌محوری و تعادل)
- **Orange** → warning, energy, accent (هشدار، انرژی، تأکید)

### 2.3 Usage ratio

A balanced layout follows roughly this distribution:

| Navy | Blue | White | Gray | Orange |
|---|---|---|---|---|
| **60%** | **25%** | **10%** | **4%** | **1%** |

Orange is a 1% color — a single highlight, an alert, a KPI delta. It is never a fill or a theme color.

### 2.4 Rules

**Do**
- Keep generous white space.
- Use blue purely for emphasis and key data points.
- Maintain the balance between dark and light areas.

**Avoid**
- Overusing colors / multi-color clutter.
- Heavy gradients.
- Off-brand or advertising-style colors.

### 2.5 Tokens

```css
:root {
  --color-navy:       #071D49; /* primary */
  --color-blue:       #00AEEF; /* accent  */
  --color-white:      #FFFFFF;
  --color-gray-light: #E9EEF5; /* lines, surfaces */
  --color-gray-steel: #7C8798; /* secondary text  */
  --color-orange:     #FF8A00; /* warning / 1% accent */

  /* Semantic aliases */
  --bg-primary:    var(--color-navy);
  --bg-surface:    var(--color-white);
  --bg-muted:      var(--color-gray-light);
  --text-on-dark:  var(--color-white);
  --text-on-light: var(--color-navy);
  --text-muted:    var(--color-gray-steel);
  --accent:        var(--color-blue);
  --alert:         var(--color-orange);
}
```

---

## 3. Typography

### 3.1 Type stack

| Role | Font |
|---|---|
| Headings / titles | **IRANSansX Bold** |
| Body text | **IRANSansX Regular** |
| Reports & dashboards | **Peyda** / IRANSansX |
| English / Latin text | **Inter** / Montserrat |

### 3.2 Voice of the type

Typography must read as **modern · legible · professional · managerial** (مدرن، خوانا، حرفه‌ای، مدیریتی).

**Rules**
- Calm and highly legible (خلوت و خوانا).
- Clear visual hierarchy (سلسله‌مراتب بصری واضح).
- Carry a Think-Tank professional tone.
- Use **Bold** sparingly — for titles and true emphasis only.
- Precise alignment.
- Avoid text clutter; let space do the work.

### 3.3 Sample lock-ups

- **FA (IRANSansX Bold):** «آینده صنعتی با بینش و فناوری»
- **EN (Inter Bold):** STEEL FUTURE — *Data · Insight · Innovation*

### 3.4 Tokens

```css
:root {
  --font-fa:      "IRANSansX", "Peyda", sans-serif;
  --font-en:      "Inter", "Montserrat", sans-serif;
  --font-report:  "Peyda", "IRANSansX", sans-serif;

  --weight-bold:    700; /* headings / emphasis only */
  --weight-regular: 400; /* body */
}
```

---

## 4. Logo & Logotype System

### 4.1 What the mark stands for

Foresight · industrial development · technology · forward motion · the creation of insight.

**Three meaning layers:**
- **Upward movement** — symbol of progress & the future (حرکت رو به بالا).
- **Industrial structure** — symbol of development & industry (ساختار صنعتی).
- **Luminous star** — symbol of insight & innovation (ستاره نورانی).

**Logo message:** «آینده صنعتی کشور با بینش، فناوری و تفکر آینده‌محور ساخته می‌شود.»

### 4.2 Variants

| Variant | When to use |
|---|---|
| Primary logo (لوگوی اصلی) | Default — all official & primary media |
| Horizontal logo (لوگوی افقی) | Headers and websites |
| Vertical logo (لوگوی عمودی) | Documents and posters |
| Icon logo (آیکون لوگو) | Social avatars & favicon |
| Monochrome (نسخه تک‌رنگ) | Single-color print |
| Reverse (نسخه معکوس) | On dark backgrounds |

### 4.3 Clear space & minimum size

- **Clear space:** keep margin on all four sides equal to the height of the star symbol.
- **Minimum width:** `60px` (digital) · `25mm` (print).
- Primary logo is preferred, always shown with the full brand name, in official and management contexts.

### 4.4 Misuse — never do this

- Change the proportions / stretch or compress.
- Rotate the mark.
- Add effects (glow, shadow, etc.).
- Recolor the logo.
- Place it on busy / low-contrast backgrounds.
- Re-typeset or substitute the wordmark font.

---

## 5. Iconography

### 5.1 Style

Icons are **minimal · linear · smart · future-oriented** (مینیمال، خطی، هوشمند، آینده‌محور).

**Rules**
- Uniform, single stroke weight across the set.
- Simple, geometric forms.
- Read as complementary elements, not the main visual.
- Compatible with a technology/analysis aesthetic.
- Simple, legible, and reusable across every medium.

**Avoid:** 3D icons · cartoonish icons · mixed/inconsistent styles.

### 5.2 Core concept set

Industry · data analysis · AI & technology · foresight · energy · industrial development · sustainability · innovation · geoeconomy · network & connectivity.

---

## 6. Layout, Grid & White Space

- Use a defined column grid with consistent spacing between elements.
- Synchronize titles with their content blocks.
- Build deliberate breathing room around content.
- Keep titles at the top of the layout; keep body legible and scannable.
- **Avoid information density and visual clutter** above all.

**White-space standard:** layouts must stay clean, legible, and visually airy. Reject overcrowding, clutter, and excessive graphic elements.

---

## 7. Imagery

**Imagery must be:** industrial · future-oriented · technological · professional.

**Good image qualities**
- Professional photography, high quality.
- Modern industrial environments.
- A sense of technology and data.
- Color-graded to match the brand palette.

**Suggested subjects:** AI & analysis · data networks · future factories · advanced technologies · digital structures · energy & sustainability · industrial value chain.

**Avoid:** cliché stock images · advertising-style images · busy compositions · low-quality images.

---

## 8. Data Visualization & Charts

**Charts must be:** simple · managerial · legible · conclusion-driven.

**Rules**
- Limited color use (lean on navy + blue, orange for one delta).
- Focus on key data; strip everything non-essential.
- Fast readability.
- Reuse consistent iconography.

**Avoid:** overly complex charts · unnecessary effects · 3D graphics · busy pie charts (prefer clean bar/line charts).

---

## 9. Fixed Brand Elements

These elements stay constant across slides, reports, digital media, and social — they are what make the identity recognizable:

- Color palette
- Typography
- Icon style
- Chart style
- Grid & layout
- White-space discipline
- Imagery style
- Future-oriented visual tone

---

## 10. Voice & Tone

### 10.1 Brand tone

The voice should be **trustworthy · deep · analytical · future-oriented · professional** (قابل‌اعتماد، عمیق، تحلیلی، آینده‌محور، حرفه‌ای).

| The brand IS | The brand is NOT |
|---|---|
| مطمئن (confident) | تبلیغاتی (advertising) |
| هوشمند (smart) | شعاری (sloganeering) |
| آینده‌محور (future-oriented) | هیجان‌زده (hyped) |
| حرفه‌ای (professional) | پیچیده غیرضروری (needlessly complex) |
| آرام و عمیق (calm & deep) | بیش‌ازحد دانشگاهی (overly academic) |
| الهام‌بخش (inspiring) | — |

### 10.2 Brand language

**Clear · precise · managerial · forward-looking · data-driven** (روشن، دقیق، مدیریتی، آینده‌نگر، داده‌محور).

Writing should be: short but deep · analytical but readable · professional but understandable.

### 10.3 Content structure

A standard content/message flow:

1. Define the problem (مسئله را تعریف کند)
2. Analyze the trends (روندها را تحلیل کند)
3. Explain the implications (پیامدها را توضیح دهد)
4. Deliver the insight (بینش ارائه کند)

### 10.4 Core message & keywords

**Core message:** «توسعه صنعتی آینده، بدون تفکر آینده‌محور ممکن نیست.»

**Keyword set (واژگان کلیدی):** آینده‌نگری · توسعه صنعتی · تحول صنعتی · فناوری‌های پیشرفته · هوش مصنوعی · فولاد سبز · تاب‌آوری · زنجیره ارزش · ژئواکونومی · تحلیل راهبردی · توسعه آینده‌محور · بینش · تصمیم‌سازی · آینده صنعت

---

## 11. Application Quick Reference

| Surface | Key guidance |
|---|---|
| **Slides / presentations** | Minimal, light, data-driven; standard slide = key-message → context → analytical content → managerial takeaway. Limited bold; consistent icons. |
| **Reports / dashboards** | Use Peyda/IRANSansX; executive summary first; clean charts; visual hierarchy; standardized titles. |
| **Digital / web & app** | Responsive, fast, future-oriented; minimal UI; clear information architecture; content & analysis focus. |
| **Social media** | Short but deep, analytical but readable; consistent palette + icons; no hype, no pure-promotion posts. |

---

## 12. Token Summary (copy-paste)

```css
:root {
  /* Color */
  --color-navy:       #071D49;
  --color-blue:       #00AEEF;
  --color-white:      #FFFFFF;
  --color-gray-light: #E9EEF5;
  --color-gray-steel: #7C8798;
  --color-orange:     #FF8A00;

  /* Type */
  --font-fa:     "IRANSansX", "Peyda", sans-serif;
  --font-en:     "Inter", "Montserrat", sans-serif;
  --font-report: "Peyda", "IRANSansX", sans-serif;
  --weight-bold:    700;
  --weight-regular: 400;

  /* Logo */
  --logo-min-digital: 60px;
  --logo-min-print:   25mm;
}
```

```js
// tailwind.config.js (extend)
module.exports = {
  theme: {
    extend: {
      colors: {
        navy:   "#071D49",
        blue:   "#00AEEF",
        "gray-light": "#E9EEF5",
        "gray-steel": "#7C8798",
        orange: "#FF8A00",
      },
      fontFamily: {
        fa: ["IRANSansX", "Peyda", "sans-serif"],
        en: ["Inter", "Montserrat", "sans-serif"],
      },
    },
  },
};
```