12 KiB

Raw Blame History

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.

Consistency (یکپارچگی) — Hold one identity across every medium. Fixed elements never change.
Smart simplicity (سادگی هوشمند) — Clean on the surface, deep underneath. Empty space is intentional, not unfinished.
Clarity (وضوح) — The message lands fast. Comprehension over decoration.
Analytical focus (تحلیل‌محوری) — Everything points at insight and understanding, not at spectacle.
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

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

: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

: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:

Define the problem (مسئله را تعریف کند)
Analyze the trends (روندها را تحلیل کند)
Explain the implications (پیامدها را توضیح دهد)
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)

: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;
}

// 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"],
      },
    },
  },
};

12 KiB Raw Blame History

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

1. Design Principles

2. Color

2.1 Palette

2.2 Color meaning

2.3 Usage ratio

2.4 Rules

2.5 Tokens

3. Typography

3.1 Type stack

3.2 Voice of the type

3.3 Sample lock-ups

3.4 Tokens

4. Logo & Logotype System

4.1 What the mark stands for

4.2 Variants

4.3 Clear space & minimum size

4.4 Misuse — never do this

5. Iconography

5.1 Style

5.2 Core concept set

6. Layout, Grid & White Space

7. Imagery

8. Data Visualization & Charts

9. Fixed Brand Elements

10. Voice & Tone

10.1 Brand tone

10.2 Brand language

10.3 Content structure

10.4 Core message & keywords

11. Application Quick Reference

12. Token Summary (copy-paste)

12 KiB

Raw Blame History