📊 4 مشاهدة

🎨 الهوية البصرية المقترحة لـ GHAIM | غيم

1. اللون الأساسي — Ghaim Navy

#13213D

أزرق كحلي عميق، وهو اللون الأكثر أهمية في الشعار.

استخدامه:

العناوين الرئيسية
Logo
Navbar
النصوص المهمة
الأزرار الأساسية
Footer
خلفيات الأقسام الرسمية

الدلالة: ثقة، تقنية، مؤسسية، أمن، استقرار.

2. الأزرق الملكي الداكن

#1B3158

لون مساعد مستخرج من درجات الشعار والصورة.

يُستخدم في:

Hover
Cards
Gradients
Secondary buttons
Dashboard
عناصر SaaS

3. الذهبي الأساسي

#D8B45F

هذا هو لون الـ Premium Gold المقترح للهوية.

استخدامه:

الأيقونات
الخطوط الفاصلة
الإحصائيات المهمة
Badges
CTA ثانوي
أجزاء شعار GHAIM
Highlights

4. الذهبي الفاخر

#E6C979

درجة أكثر إضاءة من الذهبي.

مناسبة لـ:

Gradient
Hover
أرقام KPI
تأثيرات الضوء
الحدود الراقية

5. Gold Shadow

#A18043

استخدمه بحذر، خصوصًا في:

الظلال
Gradient gold
Borders
3D logo
الخلفيات الداكنة

6. الأبيض

#FFFFFF

اللون الأساسي للمساحات النظيفة.

7. Off-White

#F5F5F2

أفضل من الأبيض الصريح للخلفيات الكبيرة.

يعطي إحساسًا:

Corporate + Luxury + Technology

8. Graphite

#252A33

للنصوص الثانوية، الأيقونات، والواجهات الإدارية.

🎯 لوحة الهوية النهائية

الاستخدام	اللون	HEX
Primary Navy	🔵	`#13213D`
Deep Navy	🔵	`#0D1830`
Royal Navy	🔵	`#1B3158`
Gold	🟡	`#D8B45F`
Light Gold	🟡	`#E6C979`
Gold Shadow	🟤	`#A18043`
White	⚪	`#FFFFFF`
Ivory	⚪	`#F5F5F2`
Graphite	⚫	`#252A33`
Muted Gray	◻️	`#6B7280`

✨ الـ Gradient الرسمي

أقترح عدم استخدام Gradient متعدد الألوان بشكل مبالغ فيه.

Ghaim Gold

background: linear-gradient(
    135deg,
    #A18043 0%,
    #D8B45F 45%,
    #E6C979 70%,
    #B98C3E 100%
);

Ghaim Navy

background: linear-gradient(
    135deg,
    #0D1830 0%,
    #13213D 50%,
    #1B3158 100%
);

Premium Ghaim

background:
    linear-gradient(
        135deg,
        #0D1830 0%,
        #13213D 45%,
        #1B3158 70%,
        #0D1830 100%
    );

🧬 تحليل شخصية الهوية

الصور تعطي هوية واضحة جدًا:

GHAIM =

Saudi Corporate + Technology + Cloud + Premium + Future

وليس من الأفضل تحويلها إلى تصميم SaaS تقليدي بألوان كثيرة.

الصورة الثانية تحديدًا تضيف عنصرًا مهمًا:
الذهب + الكحلي + العمارة الحديثة + الرياض/جدة + الخط العربي الهندسي.

وهذا يجعل الهوية مناسبة جدًا لشركة تعمل في:

AI
Cloud
Digital Transformation
Enterprise Software
Cybersecurity
Consulting
Smart Infrastructure
Government Solutions

وهذا متوافق أيضًا مع الصورة الحالية للشركة على الويب، حيث يتم تقديم Ghaim كجهة تعمل في AWS، Cloud، DevOps، AI والبنية التحتية.

🖥️ الثيم المقترح للموقع

Navbar

┌─────────────────────────────────────────────────────────────┐
│  GHAIM | غيم          Solutions  Services  AI  Cloud  About │
│                                           [ Contact Us ]    │
└─────────────────────────────────────────────────────────────┘

الخلفية:

#FFFFFF

الشعار:

Navy + Gold

زر التواصل:

background: #13213D;
color: #FFFFFF;

Hover:

background: #D8B45F;
color: #13213D;

🏢 Hero Section

أقترح أن يكون البنر الذي أرسلته هو Hero Master Image وليس مجرد صورة عادية.

المسار:

Ghaim Banner

والشعار:

Ghaim Logo

الشكل:

┌──────────────────────────────────────────────────────────┐
│                                                          │
│   GHAIM                                                  │
│   غيم                                                     │
│                                                          │
│   GLOBAL SOLUTIONS GROUP                                 │
│                                                          │
│   حلول تقنية وذكاء اصطناعي                               │
│   تبني أعمالاً أكثر ذكاءً واستدامة                       │
│                                                          │
│   [ اكتشف حلولنا ]     [ تواصل معنا ]                    │
│                                                          │
│                         ┌───────────────────────┐         │
│                         │       GHAIM           │         │
│                         │       GOLD / NAVY     │         │
│                         └───────────────────────┘         │
└──────────────────────────────────────────────────────────┘

🪄 الأسلوب البصري

الصورة الأولى تقول:

Corporate Luxury

والصورة الثانية تضيف:

Saudi Future

لذلك أقترح اعتماد Style اسمه:

Ghaim Saudi Future Luxury

خصائصه:

Navy backgrounds
Gold accents
White space
Glassmorphism خفيف جدًا
خطوط هندسية
Arabic geometric patterns
3D metallic logo
Architectural photography
AI/cloud imagery
خطوط رفيعة ذهبية
Motion هادئ
Micro-interactions

وليس:

❌ Neon cyberpunk
❌ ألوان RGB
❌ Purple AI theme
❌ Gradients مبالغ فيها
❌ Cards مليئة بالظلال

🔷 شكل الـ Cards

مثلاً:

.ghaim-card {
    background: #FFFFFF;
    border: 1px solid rgba(19, 33, 61, .10);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(19, 33, 61, .08);
    transition: .3s ease;
}

.ghaim-card:hover {
    transform: translateY(-6px);
    border-color: #D8B45F;
    box-shadow: 0 20px 50px rgba(19, 33, 61, .14);
}

🟦 قسم الخدمات

مثلاً:

Cloud Transformation

أيقونة Navy، والخط الذهبي أسفل العنوان.

Artificial Intelligence

Badge:

AI

بلون:

#D8B45F

DevOps

Navy + Gold.

Cybersecurity

Navy داكن + Gold.

🌐 Dark Mode

أرى أن Dark Mode مهم جدًا لـ Ghaim.

Dark

Background     #0B1222
Surface        #111B30
Primary        #13213D
Gold           #D8B45F
Light Gold     #E6C979
Text           #FFFFFF
Muted          #AAB2C0

والنتيجة ستكون أقرب إلى:

╔══════════════════════════════════════════════╗
║ GHAIM                         ☀ / 🌙        ║
║                                              ║
║   DIGITAL                                    ║
║   TRANSFORMATION                             ║
║                                              ║
║   ─────────────── GOLD                       ║
║                                              ║
║   AI • CLOUD • DEVOPS • SECURITY             ║
╚══════════════════════════════════════════════╝

🇸🇦 العنصر السعودي

لا أنصح بوضع الأخضر السعودي كلون رئيسي.

الأفضل أن يبقى:

Navy + Gold

ثم نستخدم الأخضر السعودي فقط عند الحاجة في عناصر مرتبطة بـ:

Saudi Vision 2030
Sustainability
Government
Success
Compliance

مثلاً:

--saudi-green: #006C35;

لكن بنسبة صغيرة جدًا.

بهذا تصبح الهوية أكثر دولية وفاخرة بدل أن تبدو كهوية حكومية تقليدية.

🧩 نظام Design Tokens

لو سنبني الموقع فعليًا، أقترح تعريف الهوية بهذا الشكل:

:root {

    /* GHAIM BRAND */
    --ghaim-navy: #13213D;
    --ghaim-deep: #0D1830;
    --ghaim-blue: #1B3158;

    --ghaim-gold: #D8B45F;
    --ghaim-gold-light: #E6C979;
    --ghaim-gold-dark: #A18043;

    /* SURFACES */
    --ghaim-white: #FFFFFF;
    --ghaim-ivory: #F5F5F2;
    --ghaim-surface: #F8F8F6;

    /* TEXT */
    --ghaim-text: #252A33;
    --ghaim-muted: #6B7280;

    /* STATES */
    --ghaim-success: #16794A;
    --ghaim-warning: #C58A20;
    --ghaim-danger: #B42318;

    /* RADIUS */
    --ghaim-radius-sm: 8px;
    --ghaim-radius-md: 14px;
    --ghaim-radius-lg: 20px;
    --ghaim-radius-xl: 28px;

    /* SHADOW */
    --ghaim-shadow:
        0 15px 45px rgba(19, 33, 61, .10);
}

🏆 التقييم الاحترافي

بعد تحليل الصور، أعطي الهوية الحالية:

العنصر	التقييم
الشعار	⭐⭐⭐⭐⭐
اختيار Navy	⭐⭐⭐⭐⭐
Gold	⭐⭐⭐⭐⭐
التباين	⭐⭐⭐⭐⭐
Corporate feeling	⭐⭐⭐⭐⭐
Premium feeling	⭐⭐⭐⭐⭐
Saudi identity	⭐⭐⭐⭐
Technology identity	⭐⭐⭐⭐
AI identity	⭐⭐⭐⭐
قابلية بناء Design System	⭐⭐⭐⭐⭐

الخلاصة: لا أرى حاجة لإعادة اختراع هوية Ghaim؛ الأفضل هو تنظيفها وتحويلها إلى Design System احترافي متكامل يحافظ على الـNavy/Gold ويجعل الشعار والصور والواجهات تعمل كمنظومة واحدة.

والأهم: الشعار نفسه يجب أن يبقى هو مصدر الحقيقة للألوان، بينما البنر يكون طبقة الـvisual storytelling. النسخة الموجودة في المسار تؤكد بوضوح هذا الاتجاه البصري. 

بالتأكيد. إذا أردنا الارتقاء بالتحليل من مجرد استخراج ألوان إلى بناء هوية بصرية + Design System كامل لـ GHAIM | غيم، فالصورة المرفقة تعطينا أساسًا قويًا جدًا.

GHAIM — Visual Identity System v1.0

https://images.openai.com/static-rsc-4/f7JVqRRRJURMaKEwXy4Sld7O37z9QkjVbXeJ8DzHtc-rDUuLBvd_BnAR7wHO3TiyOMADN5COfxqWrjGDICb1g2bv1Yk9bnW4l5JNG1iH9Q0qZmtEYW1tn4wXnE3PpAnL38eifMMXlk0XWcLEalG-xBFpboTvre64Fm2RVg0z-xsnkNSGpFbyirInX1UYdF3f?purpose=fullsize

https://images.openai.com/static-rsc-4/a2x8xsXq3bH71GPkoZoGQb0-HlKEMhy5Tb_HE6lWjOsptyOGtTNU2Qk7UBdwresZtyEc4e-TaJu3Qj674RIQ9uzukfqReKcf_xdDpoSyS9Buvy-f9iLfHltOuWuY1cCOiFe9iYC5vIm2zf2X38IKLTb-kYj1ytbPHVs-A5GAM1rLN3pfOHexmoSwfgzjokMT?purpose=fullsize

https://images.openai.com/static-rsc-4/GRw3XtOMuwFj53qcyJbhR9k_HYPqWdVis5owTj3uXvJWo6Wft3t5e6-ZERDTMqBCiompsjEzcEyR3WONwzDcOvDsaao-7wub6zlPTJzL77UpvqIhSGKo8Y43p9lHALTNNNxCY9Ssfybwi4Zx9cXDXUjkS2UAZBt5RcL5cDTbgS2XCHxmA55N5x-RMA3PGBQ5?purpose=fullsize

1. الفكرة المركزية للهوية

أرى أن شخصية GHAIM يجب أن تبنى حول أربع كلمات:

الثقة — الفخامة — التقنية — المستقبل

ولذلك لا ينبغي أن يكون الموقع مجرد موقع شركة تقنية تقليدي.

الهوية الأفضل:

                 GHAIM
                  غيم
                   │
        ┌──────────┼──────────┐
        │          │          │
      TRUST      PREMIUM    TECHNOLOGY
        │          │          │
        └──────────┼──────────┘
                   │
                FUTURE

2. النظام اللوني المتقدم

بدل التعامل مع الألوان كـ HEX فقط، أقترح بناء Color Architecture.

Brand Colors

:root {

    /* =========================
       GHAIM BRAND
       ========================= */

    --ghaim-navy-950: #080F20;
    --ghaim-navy-900: #0D1830;
    --ghaim-navy-800: #13213D;
    --ghaim-navy-700: #1B3158;
    --ghaim-navy-600: #29446F;

    --ghaim-gold-900: #80652D;
    --ghaim-gold-800: #A18043;
    --ghaim-gold-700: #B98C3E;
    --ghaim-gold-600: #D8B45F;
    --ghaim-gold-500: #E6C979;
    --ghaim-gold-300: #F2DFA5;

    --ghaim-white: #FFFFFF;
    --ghaim-ivory: #F5F5F2;
    --ghaim-surface: #FAFAF8;

    --ghaim-text: #252A33;
    --ghaim-text-muted: #697386;

}

3. قاعدة 70 / 20 / 10

حتى لا يصبح الموقع “ذهبيًا أكثر من اللازم”:

70%

White / Ivory

للمساحات الرئيسية.

20%

Navy

للعناوين، Navigation، الأقسام الداكنة، الأزرار.

10%

Gold

للتأكيد والتميز.

وهذه نقطة مهمة جدًا.

الذهبي يجب أن يكون Accent وليس Background Color دائمًا.

4. استخدام الشعار

الشعار الموجود في الصورة يتكون بصريًا من عنصرين:

     غيم
      +
  GHAIM
      +
 GLOBAL SOLUTIONS GROUP
      +
مجموعة الحلول العالمية

مع الـSymbol الهندسي.

وهذا يعطي فرصة لإنشاء:

Logo Family

01 — Full Logo

[Symbol] GHAIM
        غيم
        GLOBAL SOLUTIONS GROUP


02 — Horizontal

[Symbol] GHAIM


03 — Symbol Only

[ G ]


04 — Arabic

غيم


05 — Monochrome

Navy only


06 — Premium

Navy + Metallic Gold

5. أهم قاعدة للشعار

لا تستخدم الشعار الذهبي فوق خلفية ذهبية.

ولا تستخدم:

Gold logo
+
Gold background

لأن التباين ينهار.

الأفضل:

Light

White background
       ↓
Navy + Gold logo

Dark

Navy background
       ↓
Gold + White logo

Premium

Deep Navy
       ↓
Metallic Gold symbol

6. البنر

البنر الموجود في المسار:

GHAIM Banner

يجب ألا يعامل كصورة عادية.

أقترح أن يصبح:

GHAIM Brand Hero

ويكون خلفية رئيسية للموقع.

لكن مع طبقة Overlay.

مثلاً:

.ghaim-hero {
    background:
        linear-gradient(
            90deg,
            rgba(8,15,32,.94),
            rgba(13,24,48,.72),
            rgba(13,24,48,.18)
        ),
        url('/logo/baner-ghaim.png');

    background-size: cover;
    background-position: center;
}

هذا يجعل النص واضحًا بدون قتل الصورة.

7. Hero Section احترافي

أقترح بنية:

┌─────────────────────────────────────────────────────────┐
│ GHAIM                                                   │
│                                                         │
│   حلول عالمية                                          │
│   لعصر رقمي جديد                                       │
│                                                         │
│   نُمكّن المؤسسات من خلال                              │
│   الذكاء الاصطناعي والسحابة والتحول الرقمي.           │
│                                                         │
│   [ اكتشف حلولنا ]   [ تواصل معنا ]                   │
│                                                         │
│                                  ┌─────────────┐        │
│                                  │ GHAIM       │        │
│                                  │     ◢◣      │        │
│                                  └─────────────┘        │
└─────────────────────────────────────────────────────────┘

8. الخطوط Typography

هذه الهوية تحتاج إلى خط عربي هندسي/Corporate وليس خطًا زخرفيًا.

عربي

أقترح:

IBM Plex Sans Arabic

أو:

Tajawal

أو:

Noto Kufi Arabic

للعناوين الكبيرة يمكن استخدام:

Noto Kufi Arabic

بينما النصوص:

IBM Plex Sans Arabic

English

Inter

أو:

Manrope

أو:

Plus Jakarta Sans

9. Typography Scale

:root {

    --font-display: "Noto Kufi Arabic", sans-serif;
    --font-body: "IBM Plex Sans Arabic", sans-serif;
    --font-en: "Inter", sans-serif;

    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;

    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 3rem;
    --text-4xl: 4rem;

}

العناوين الرئيسية يمكن أن تصل إلى:

64px

على Desktop.

لكن على الهاتف:

36–42px

10. الأشكال الهندسية

وهنا أرى فرصة مهمة جدًا.

الصورة الثانية تحتوي على Geometric Arabic Pattern.

يمكن تحويل ذلك إلى عنصر متكرر في Design System:

╱ ╲ ─ ╱ ╲ ─ ╱
╲ ─ ╱ ╲ ─ ╱ ╲

لكن يجب أن يكون:

Subtle

أي:

opacity: .06;

أو:

opacity: .10;

ولا يصبح خلفية مزعجة.

11. GHAIM Pattern System

ننشئ:

Ghaim Pattern
       │
       ├── Gold Pattern
       ├── Navy Pattern
       ├── Outline Pattern
       ├── Glass Pattern
       └── Animated Pattern

يمكن استخدامه في:

Hero
Footer
Certificates
Reports
Presentations
Business Cards
Social Media
Dashboard
Login page

12. الأيقونات

لا أنصح باستخدام Icons بألوان متعددة.

القاعدة:

Default → Navy
Hover   → Gold
Active  → Gold

مثلاً:

.ghaim-icon {
    color: #13213D;
}

.ghaim-card:hover .ghaim-icon {
    color: #D8B45F;
}

13. Buttons

Primary

.btn-ghaim-primary {
    background: #13213D;
    color: #FFFFFF;
    border: 1px solid #13213D;
}

Gold

.btn-ghaim-gold {
    background: #D8B45F;
    color: #0D1830;
    border: 1px solid #D8B45F;
}

Outline

.btn-ghaim-outline {
    background: transparent;
    color: #13213D;
    border: 1px solid #13213D;
}

Premium

.btn-ghaim-premium {
    background: linear-gradient(
        135deg,
        #A18043,
        #E6C979
    );

    color: #0D1830;
}

14. Cards

هناك ثلاثة أنواع رئيسية:

Standard Card

┌─────────────────────────────┐
│  ◈                          │
│                             │
│  Cloud Solutions             │
│                             │
│  Enterprise cloud            │
│  infrastructure...           │
│                             │
│  Learn more →                │
└─────────────────────────────┘

Premium Card

┌─────────────────────────────┐
│         GOLD                │
│                             │
│       AI PLATFORM           │
│                             │
│   Intelligent solutions     │
│                             │
└─────────────────────────────┘

Dark Card

┌─────────────────────────────┐
│                             │
│  AI                         │
│                             │
│  Intelligence               │
│  Infrastructure             │
│                             │
│  ─────────────              │
└─────────────────────────────┘

15. Border System

استخدم الحدود الناعمة:

border: 1px solid rgba(19,33,61,.10);

وفي Dark Mode:

border: 1px solid rgba(255,255,255,.10);

والـGold:

border-color: rgba(216,180,95,.45);

16. Shadow System

لا نريد Shadows سوداء قوية.

Small

box-shadow:
0 4px 20px rgba(13,24,48,.06);

Medium

box-shadow:
0 12px 40px rgba(13,24,48,.10);

Large

box-shadow:
0 25px 70px rgba(13,24,48,.15);

17. Dark Mode

هنا يمكن أن تصبح الهوية مميزة جدًا.

╔══════════════════════════════════════╗
║                                      ║
║              GHAIM                   ║
║                                      ║
║       INTELLIGENCE                   ║
║       FOR THE FUTURE                 ║
║                                      ║
║        ─────────────                 ║
║             GOLD                     ║
║                                      ║
╚══════════════════════════════════════╝

الخلفية:

#080F20

وليس الأسود #000000.

هذه نقطة صغيرة لكنها ترفع جودة التصميم كثيرًا.

18. Glassmorphism

يمكن استخدامه، لكن بجرعة محدودة.

.ghaim-glass {
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.10);
}

مع Gold accent:

border-color:
rgba(216,180,95,.25);

19. Motion Design

الـMotion يجب أن يعكس شركة Enterprise.

لا نريد:

❌ Bounce كثير
❌ عناصر تقفز
❌ Animations مستمرة

بل:

Fade
↓
Translate
↓
Reveal
↓
Glow

مدة الحركة:

200–500ms

مثلاً:

.ghaim-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .5s ease,
        transform .5s ease;
}

.ghaim-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

20. AI Visual Language

بما أن GHAIM مرتبطة بالتقنية والحلول العالمية، يمكن إضافة لغة AI خاصة.

لكن لا تستخدم صور روبوتات تقليدية.

بدلاً منها:

Data
 │
 ▼
Cloud
 │
 ▼
AI
 │
 ▼
Decision
 │
 ▼
Business

والتصميم يكون:

Navy + Gold data streams

مثلاً:

        ●
       ╱
      ●──────●
     ╱       │
    ●        ●
     ╲       │
      ●──────●

مع خطوط ذهبية رفيعة.

21. قسم الخدمات

أقترح 6 محاور:

01
Artificial Intelligence

02
Cloud & Infrastructure

03
Digital Transformation

04
Cybersecurity

05
DevOps & Automation

06
Enterprise Solutions

ويمكن أن يكون لكل خدمة Gold Number:

ثم العنوان Navy.

22. قسم الأرقام KPI

مثلاً:

+120
Projects

+35
Enterprise Clients

+15
Technology Partners

99.9%
Reliability

الرقم:

Gold

الوصف:

Navy

23. Footer

أقترح Footer داكن جدًا:

┌───────────────────────────────────────────────────────┐
│                                                       │
│ GHAIM                                                 │
│ غيم                                                    │
│ GLOBAL SOLUTIONS GROUP                                │
│                                                       │
│ Technology • AI • Cloud • Transformation             │
│                                                       │
│ ─────────────────────────────────────────────         │
│                                                       │
│ Company     Solutions     Resources     Contact       │
│                                                       │
│ ─────────────────────────────────────────────         │
│                                                       │
│ © 2026 GHAIM Global Solutions Group                  │
│                                                       │
└───────────────────────────────────────────────────────┘

24. Responsive Design

لا يكفي أن يكون Desktop جميلًا.

Desktop

1440px+

Hero كبير.

Laptop

1024–1439px

تقليل الـHero.

Tablet

768–1023px

Grid:

3 → 2

Mobile

<768px

Grid:

2 → 1

والـHero:

Image
 ↓
Title
 ↓
Description
 ↓
CTA

25. RTL + LTR

بما أن الهوية عربية/إنجليزية، يجب ألا يكون RTL مجرد:

direction: rtl;

بل Design System ثنائي الاتجاه.

<html lang="ar" dir="rtl">

مع دعم:

lang="en"
dir="ltr"

والـLogo يبقى ثابتًا بصريًا.

26. Accessibility

ألوان GHAIM مناسبة جدًا لبناء Accessibility جيد، لكن يجب اختبار النص الذهبي.

قاعدة مهمة:

Gold text
   +
White background

ليس مناسبًا لكل الأحجام.

الأفضل:

Navy text
+
White background

والذهبي للعناصر الكبيرة أو الـAccent.

27. Design Tokens للـFigma

يمكن تحويل النظام إلى:

GHAIM
│
├── Colors
│   ├── Navy
│   ├── Gold
│   ├── Neutral
│   └── Semantic
│
├── Typography
│   ├── Arabic
│   └── English
│
├── Components
│   ├── Buttons
│   ├── Cards
│   ├── Navbar
│   ├── Forms
│   ├── Badges
│   └── Tables
│
├── Layout
│   ├── Container
│   ├── Grid
│   └── Sections
│
├── Motion
│   ├── Fade
│   ├── Reveal
│   └── Hover
│
└── Branding
    ├── Logo
    ├── Patterns
    ├── Hero
    └── Photography

28. CSS Architecture

إذا كنا سنبني الموقع فعليًا، أقترح:

assets/
│
├── brand/
│   ├── ghaim.svg
│   ├── ghaim-gold.svg
│   ├── ghaim-white.svg
│   └── favicon.svg
│
├── images/
│   ├── hero.webp
│   ├── services/
│   └── projects/
│
├── css/
│   ├── tokens.css
│   ├── typography.css
│   ├── components.css
│   ├── layout.css
│   ├── animations.css
│   ├── rtl.css
│   └── responsive.css
│
└── js/
    ├── app.js
    ├── navigation.js
    └── animations.js

29. نظام الهوية المختصر

إذا أردنا تلخيص كل شيء في قاعدة واحدة:

                GHAIM
                  │
       ┌──────────┴──────────┐
       │                     │
     NAVY                   GOLD
       │                     │
    TRUST                  PREMIUM
       │                     │
       └──────────┬──────────┘
                  │
              WHITE SPACE
                  │
             TECHNOLOGY
                  │
               FUTURE

اللون الرئيسي

Navy #13213D

اللون المميز

Gold #D8B45F

الخلفية

Ivory #F5F5F2

Dark

Deep Navy #080F20

Typography

Noto Kufi Arabic + IBM Plex Sans Arabic + Inter

Style

Saudi Corporate / Global / Premium / Technology

30. والأهم: تحويل الهوية إلى منصة رقمية

من وجهة نظري، لا ينبغي أن نتوقف عند موقع GHAIM.

الأفضل بناء:

GHAIM Design System

ثم استخدامه على:

GHAIM Website
       │
       ├── Corporate Website
       ├── Client Portal
       ├── AI Platform
       ├── Cloud Dashboard
       ├── Admin Dashboard
       ├── Mobile App
       ├── Reports
       ├── Presentations
       ├── Proposals
       └── Digital Documents

وبذلك يصبح Navy + Gold + Geometric Symbol + Arabic/English Typography لغة موحدة لكل منتجات GHAIM، وليس مجرد ألوان لموقع.

والخطوة الأقوى بعد ذلك هي تحويل هذا التحليل إلى GHAIM UI/UX Master System: صفحات Home + About + Services + AI + Cloud + Solutions + Projects + Partners + Contact + Dashboard، مع Wireframe كامل، Design Tokens، Components، RTL، Dark Mode، وحالة Mobile/Desktop باستخدام الشعار والبنر الحقيقيين.