هوية تك قهوة

00

Start here

ابدأ من هنا

اختر دورك، وستجد أهم ما يخصّك والملفات التي تحتاجها.

أنا مصمّم

نسخة الشعار حسب الخلفية
الخطوط ولوحة الألوان للتثبيت
المساحة الآمنة والحد الأدنى

قواعد الشعار

أنا مبرمج

متغيّرات الألوان والخطوط بصيغة CSS
أيقونة المتصفح وشيفرة الرأس
الشعار مع الوضع الداكن
ثيمات جاهزة لـ Tailwind وshadcn وMUI

الشيفرة

أنا محرّر فيديو

مقدّمات جاهزة لليوتيوب والشورتس
شعار متحرك بخلفية شفافة
العلامة المائية والهوامش الآمنة

الحركة

أحتاج للطباعة

شعارات PDF متجهية
ألوان CMYK تقريبية
أمثلة البطاقات والملصقات

أمثلة الطباعة

أصنع محتوى

أنماط للخلفيات والزوايا والعروض
صانع مخططات لنتائج الاختبارات
الشعار المتحرك GIF للشرائح

المخططات

01

Our story

من فضول طفل إلى تك قهوة

قبل الألوان والخطوط، هذه الحكاية التي خرجت منها الهوية كلها.

حديث تقني على فنجان قهوة.

بدأت تك قهوة قبل أن يكون لها اسم، مع طفل شغوف بالاستكشاف يريد أن يفهم كيف يعمل الحاسوب، وما الذي يحدث في داخله حين يضغط زرًّا. هذا الفضول لم يتركه حين كبر، بل كبر معه.

عاش إيهاب قهواتي، مؤسس تك قهوة، التقنية وهي تتشكّل أمامه: من ويندوز ٩٥ إلى أول الهواتف الذكية، ومن ظهور أندرويد إلى السيارات الذكية، وصولًا إلى الذكاء الاصطناعي وإنترنت الأشياء. لم يكن متفرجًا على هذه القفزات، بل مستخدمًا وعاشقًا وهاويًا يجرّب كل جديد بنفسه.

تك قهوة هي المكان الذي يتحوّل فيه هذا الشغف إلى حديث هادئ وعميق. هنا تُناقَش الأفكار، وتُقرأ التقنيات الجديدة بأسلوب مختلف، ونسأل إلى أين تأخذنا التقنية، وما الذي قد تكلّفنا، وأين نقف منها اليوم. ثم نختبر بأنفسنا ونقول رأينا بصراحة، في مقالات ومقاطع فيديو.

1995
ويندوز ٩٥أول نظام تشغيل عاشه
2007
الهاتف الذكيالحاسوب ينتقل إلى الجيب
2008
أندرويدأول هاتف بنظام أندرويد
2012
السيارة الذكيةالسيارة تتّصل بالإنترنت وتحدّث نفسها
2022
الذكاء الاصطناعيالنماذج التوليدية تصل إلى الجميع
NOW
إنترنت الأشياء وما بعدهكل شيء يتّصل، وتك قهوة تتابع وتختبر

عمّ نتحدث

ست نوى تعمل في كل مقالة وكل فيديو.

أفكار للنقاشآراء في التقنية تُطرح لنفكّر فيها معًا.

الجديد بأسلوب مختلفالتقنيات الجديدة من الداخل، بلغة واضحة.

المستقبلإلى أين تتجه التقنية، وإلى أين تأخذنا معها.

المخاطر والأبعادما الذي قد تكلّفنا التقنية، وما أثرها علينا.

أين نقف اليومقراءة لحال التقنية الآن، بعيدًا عن الضجيج.

اختبار ومراجعةنجرّب بأنفسنا، ثم نقول رأينا بصراحة.

02

Philosophy

لماذا يبدو الشعار هكذا

كل عنصر في الهوية يحمل معنى، ولكل معنى سبب عملي يجعل الشعار أقوى.

Techتك

تكTech

من تقني، لأن المحتوى كله عن التقنية: الأجهزة والبرمجيات والذكاء الاصطناعي ومستقبلها.

Kahwaقهوة

قهوةKahwa

من اسم المؤسس، فاسم العائلة قهواتي مشتق من القهوة. ومن علاقة القهوة الطويلة بعالم البرمجة والويب.

مزيج واحد: التقنية تُقدَّم كما تُقدَّم القهوة، بهدوء وعلى مهل، وبنكهة شخصية.

القهوة والبرمجة، علاقة قديمة

ليست صدفة أن يرتبط الفنجان بعالم الحاسوب.

1991

إبريق كامبريدج

في مختبر الحاسوب بجامعة كامبريدج وُجّهت كاميرا إلى إبريق القهوة ليعرف الباحثون من مكاتبهم إن كان ممتلئًا. وفي ١٩٩٣ صار البث متاحًا على الويب، فاشتهر بأنه أول كاميرا ويب في العالم.

1995

جافا

لغة البرمجة جافا سُمّيت باسم قهوة جزيرة جاوة، وشعارها حتى اليوم فنجان قهوة يتصاعد منه البخار.

418

أنا إبريق شاي

في كذبة أبريل ١٩٩٨ نُشر بروتوكول ساخر للتحكم بأباريق القهوة عبر الإنترنت، ومنه جاء رمز الخطأ ٤١٨ الذي ما زال المبرمجون يتداولونه.

coffee → code

آلة تحوّل القهوة

عبارة تُنسب إلى عالم الرياضيات ألفريد ريني: «عالم الرياضيات آلة تحوّل القهوة إلى نظريات». واستعارها المبرمجون فصارت القهوة تتحوّل إلى شيفرة.

المربّع، ثلاث قراءات

اخترنا المربّع لأنه يحمل ثلاثة معانٍ في شكل واحد.

البكسل

كل شاشة، مهما كان نوعها، مبنية من بكسلات مربّعة. الشعار مرسوم بالوحدة نفسها التي تعرضه، فيشعر في بيته على كل شاشة.

نواة المعالج

معالج الرسوميات آلاف النوى الصغيرة المصفوفة جنبًا إلى جنب، وكل نواة تسخن وهي تعمل. لهذا تتلوّن بكسلات الكوب بدرجات الحرارة.

حبّة القهوة

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

ولماذا المربّع عمليًا؟

لأنه لا يتشوّه. المربّع يبقى حادًّا واضحًا من شاشة ليد بثمانية صفوف إلى لوحة إعلانية، ومن أيقونة المتصفح إلى واجهة محل، فيظهر الشعار بهويته نفسها في كل مساحة وعلى كل نوع من الشاشات.

LED 44×10

16 px

32 px

64 px

128 px

∞

الكوب والبخار

أربعة عناصر، وكل واحد منها يقول شيئًا.

الكوبالقهوة، واسم المؤسس، والجلسة الهادئة التي نتحدث فيها عن التقنية.
البكسلاتنوى تعمل وحبّات قهوة في آن واحد، على شبكة واحدة.
البخارالفكرة ساخنة والعمل جارٍ الآن، والنتائج تخرج من الفنجان.
الاسم بخط البكسلمحتوى تقني بلغة عربية يفهمها الجميع.

فلسفة الألوان

حرارة واحدة تُقرأ في اتجاهين.

الحرارة التي تُضيء نواة المعالج هي نفسها التي تُعتّم حبّة القهوة. لذلك بنينا الألوان على سلّم واحد: اقرأه من جهة فترى نواة تسخن حتى تتوهّج، واقرأه من الجهة الأخرى فترى حبّة تتحمّص حتى تصير إسبريسو.

والخلفيات هي الفنجان نفسه

الإسبريسوالقهوة

الكريمارغوة الإسبريسو

الحليبالصفحة البيضاء

الخزفجسم الفنجان

مراحل التحميص الحقيقية تمرّ بالألوان نفسها: من الاصفرار إلى الذهبي إلى لون القرفة، ثم البنّي الفاتح فالداكن. درجاتنا أكثر تشبّعًا من الحبّة الحقيقية حتى تُقرأ حرارةً على الشاشة، لكنها تسير في الاتجاه نفسه.

03

Logo

الشعار

عائلتان: الشعار عالي الدقة لكل الشاشات والمطبوعات، وشعار الماتريكس لشاشات البكسل الحقيقية وللشعار المصغّر فقط.

الشعار عالي الدقة | المواقع، الهواتف والحواسيب، العروض، يوتيوب والسوشال، وكل المطبوعات.

شعار الماتريكس | لوحات LED وشاشات OLED وTFT وLCD والحبر الإلكتروني، والشعار المصغّر. لا يُستخدم شعارًا رئيسيًا.

اختر شعارك وحمّله

اختر اللغة والشكل والنسخة، وسيظهر الشعار على الخلفية المناسبة له.

اختبر خلفيتك

اختر أي لون، وسنقترح النسخة التي تبقى واضحة عليه.

تدرّجات الأبيضالخلفية من ألوان الكوب نفسه، فالكوب الملوّن يختفي عليها.

نسخة الشعار على الخلفيات الشائعة

القاعدة: إذا كانت الخلفية برتقالية أو بنّية، انتقل إلى نسخة التدرّجات.

المساحة الآمنة والحد الأدنى

P خلية واحدة من خلايا الكوب. اترك 2P فارغة من كل جهة.

الأفقي

العمودي

الأيقونة

العمودي

الأيقونة

P خلية واحدة من خلايا الكوب، وكل الأشكال مرسومة هنا بالمقياس نفسه.فراغ إلزامي من الجهات الأربع.

الشكل	الشاشة	الطباعة	إذا احتجت أصغر
الأفقي	٢٤ بكسل ارتفاعًا	٨ ملم	الشعار المصغّر
العمودي	٥٦ بكسل	١٦ ملم	الأفقي
الأيقونة	٣٢ بكسل	١٠ ملم	رسمة أيقونة المتصفح
أيقونة المتصفح	من ١٦ إلى ٣١	لا تُطبع	لا شيء
الشعار المصغّر	٢٠ بكسل	٤ ملم	لا شيء أصغر

الأماكن الصغيرة والضيقة

اختر حسب شكل المكان أولًا، ثم حسب حجمه. كل مثال بحجمه الحقيقي.

شريط عريض بارتفاع ٢٤ بكسل أو أكثر

الشعار الأفقي.

مكان مربع أو طويل من ٥٦ بكسل

الشعار العمودي.

مربع من ٣٢ بكسل

الأيقونة.

مربع بين ١٦ و٣١ بكسل

رسمة أيقونة المتصفح على شبكة ١٦ خلية.

شريط أقل من ٢٤ بكسل ويحتاج الاسم

الشعار المصغّر بحجمه الأصلي.

الشعار المصغّر

اخترنا الماتريكس العربي الأفقي ليكون الشعار المصغّر الوحيد: كل بكسل في حروفه بحجم بكسل الكوب، فيبقى حادًّا وواضحًا حيث يتشوّش الشعار العادي. أدرجه بحجمه الأصلي ولا تكبّره.

x2 | 88×20

x3 | 132×30

x4 | 176×40

x2

x3

x4

استخدامات ممنوعة

كل هذه تكسر شبكة البكسل أو الألوان أو ترتيب القراءة.

خطأ لا تمطّه ولا تضغطه

خطأ لا تدوّره ولا تميّله

خطأ لا تغيّر ألوان الكوب

خطأ لا تضف ظلًّا أو توهجًا

خطأ لا تنعّم البكسلات

خطأ لا ألوان كاملة على الكهرماني

04

Usage

حالات الاستخدام

أمثلة حقيقية لكل وسيط، ومعها الملفات التي يحتاجها.

تك قهوة | مراجعات

جرّبت النموذج الجديد

مراجعة عملية بالعربي: الفهم والكتابة وتحويل الكلام إلى نص.

رأس الموقع، الوضع الفاتح
الأفقي بالاسم الأسود، بارتفاع ٣٢ بكسل على الحاسوب و٢٤ على الجوال.

تك قهوة | مراجعات

جرّبت النموذج الجديد

مراجعة عملية بالعربي: الفهم والكتابة وتحويل الكلام إلى نص.

رأس الموقع، الوضع الداكن
الأفقي بالاسم الأبيض، وأيقونة المتصفح تبدّل ألوانها وحدها.

1344 × 768

الصورة البارزة للمقالة
المقاس ١٣٤٤ × ٧٦٨. القائمة تقصّ المربع الأوسط، فيبقى العنوان والشعار داخل الإطار المنقّط.

شعار رأس الموقع، الوضع الفاتحSVG بارتفاع ٣٢ بكسل، و٢٤ على الجوال

شعار رأس الموقع، الوضع الداكنSVG بالاسم الأبيض

حزمة الويبالمتغيّرات والخطوط وأيقونة المتصفح والشيفرة الجاهزة

الحالة	الشكل	النسخة	الملف	الحجم
رأس الموقع، فاتح	أفقي	ألوان كاملة، اسم أسود	`SVG/full-color-on-light/techkahwa-ar-horizontal-black.svg`	٣٢ بكسل ارتفاعًا
رأس الموقع، داكن	أفقي	ألوان كاملة، اسم أبيض	`SVG/full-color-on-dark/techkahwa-ar-horizontal-white.svg`	٣٢ بكسل ارتفاعًا
أيقونة المتصفح	أيقونة	تتكيّف تلقائيًا	`05 Web/favicon/favicon.svg`	١٦ إلى ٤٨ بكسل
صورة الحساب	أيقونة	على مربع الإسبريسو	`07 Video & YouTube/youtube-avatar-800.png`	٨٠٠ × ٨٠٠
مقدّمة فيديو يوتيوب	أفقي متحرك	ألوان كاملة على الإسبريسو	`intros (mp4)/techkahwa-intro-ar-horizontal-1920x1080.mp4`	١٩٢٠ × ١٠٨٠
شعار فوق مشهد فيديو	أفقي متحرك	خلفية شفافة	`techkahwa-overlay-ar-horizontal-alpha/*.png`	١٩٢٠ × ١٠٨٠
علامة مائية في الفيديو	أيقونة	تدرّجات الأبيض	`watermark/techkahwa-watermark-1920x1080.png`	٧٢ بكسل
ستوري ومنشورات ملوّنة	عمودي	تدرّجات الأبيض	`PNG/white-tonal-on-color/techkahwa-ar-vertical-tonal-white-1024.png`	٣٠٪ من العرض
تذييل الشرائح والمستندات	الشعار المصغّر	اسم أسود أو أبيض	`02 Micro logo & Matrix/micro-logo/techkahwa-micro-ar-on-light-x2.png`	٨٨ × ٢٠ دون تكبير
توقيع البريد الإلكتروني	أفقي	ألوان كاملة، اسم أسود	`PNG/full-color-on-light/techkahwa-ar-horizontal-black-512.png`	٢٤ بكسل ارتفاعًا
مطبوعات ملوّنة	أفقي أو عمودي	حسب الخلفية	`PDF/`	٨ ملم كحد أدنى
طباعة بلون واحد	أي شكل	لون واحد	`PDF/one-color-black, one-color-white`	٨ ملم كحد أدنى
شاشات LED وOLED	ماتريكس	حسب نوع الشاشة	`02 Micro logo & Matrix/techkahwa-screens/`	بكسل لبكسل

05

Color

الألوان

الكهرماني يعمل، والقهوة تحمل الصفحة. اضغط على أي قيمة لنسخها.

الكهرمانيAmberAmberالكهرماني

أساسي | الأزرار الرئيسية والتمييز ولمسات الفيديو

الحرارةHotHotالحرارة

أساسي فاتح | الأزرار في الوضع الداكن والرسوم

التوهّجGlowGlowالتوهّج

أساسي مضيء | ذروة الحرارة والتوهّج

الأساسي | عائلة الحرارة. الكهرماني توقيع الهوية للأزرار الرئيسية والتمييز ولمسات الفيديو.

النحاسيCopperCopperالنحاسي

ثانوي | الروابط والتمييز في الوضع الفاتح

التحميصRoastRoastالتحميص

ثانوي داكن | المساحات الدافئة الداكنة والرسوم

الخزفCeramicCeramicالخزف

محايد دافئ | الخطوط الفاصلة والنص الثانوي

الإسبريسوEspressoEspressoالإسبريسو

خلفية داكنة | الفيديو والوضع الداكن

الكريماCremaCremaالكريما

خلفية فاتحة | الأقسام البديلة والبطاقات

الحليبMilkMilkالحليب

أفتح خلفية | صفحات الموقع والمطبوعات

الثانوي | عائلة القهوة، ثم الخلفيات. قيم CMYK تقريبية، فاطلب بروفة من المطبعة.

قواعد لا تُكسر

النِّسب

٦٠٪ خلفية، ٣٠٪ قهوة وحبر، ١٠٪ كهرماني.

النص على الكهرماني

صحيحخطأ

نص داكن دائمًا. الأبيض على الكهرماني تباينه ٣ إلى ١ فقط.

الرسوم البيانية

من الأقل إلى الأعلى بترتيب سلّم الحرارة.

الحالات

✓ نجح✕ فشل

لون الحالة مع كلمة أو رمز دائمًا، ولا يُستخدم للزينة.

06

Typography

الخطوط

خطّا البكسل للعناوين الكبيرة فقط، وبلكس لكل ما يُقرأ. اكتب في أي مثال لتجرّب الخط بنفسك.

عناوين عربيةSolar 6

تك قهوة

العناوين الكبيرة فقط، ٣٢ بكسل أو أكثر

عناوين إنجليزيةPixelify Sans

TechKahwa Review

العناوين الإنجليزية الكبيرة فقط

نصوص عربيةIBM Plex Sans Arabic

جرّبت النموذج على نصوص عربية حقيقية، وقست دقته في الفهم والكتابة وتحويل الكلام إلى نص.

المقالات والواجهات والمطبوعات | ٤٠٠ و٥٠٠ و٦٠٠ و٧٠٠

نصوص إنجليزية وشيفرةIBM Plex Sans | Mono

Hands-on AI model reviews.
temperature = 0.7

النص الإنجليزي، والشيفرة ومخرجات النماذج

سلّم الأحجام

الاسم	مثال	الاستخدام	الحجم
`display-lg`	مراجعة جديدة	افتتاح الصفحات والشرائح	64 \| 1.05
`display-md`	عنوان المقالة	عنوان المقالة على الحاسوب	48 \| 1.1
`display-sm`	عنوان قصير	عنوان المقالة على الجوال	32 \| 1.2
`heading-2`	كيف اختبرته	عناوين الأقسام	28 \| 1.35
`heading-3`	الفهم والكتابة	العناوين الفرعية	22 \| 1.45
`body-lg`	نص المقالة المريح للقراءة الطويلة.	نص المقالة	19 \| 1.8
`body`	نص الواجهات والوصف القصير.	نص الواجهات	16 \| 1.7
`caption`	شكل ٢ \| دقة التعرّف	التعليقات والبيانات	13 \| 1.5

كل الخطوط مجانية ويحق مشاركتها مع الفريق. اخترنا بلكس العربي بدل خط ثمانية لأن ترخيص ثمانية يمنع مشاركة ملفاته.

07

Patterns

الأنماط

ثمانية أنماط مبنية من خلايا الكوب نفسها، للخلفيات والعروض والفيديو والمطبوعات. لكل نمط خمسة ألوان، وخمسة منها تتحرك.

النمط

لون النمط

حجم الخلية

صغيرة متوسطة كبيرة

شغّل الحركة

techkahwa-pattern-cores-espresso

زوايا وأشرطة بخلفية شفافة

ضعها فوق الشريحة أو الملصق، واترك النص على المساحة الهادئة.

الأنماط في العمل

القاعدة في كل مثال: النمط يحيط بالمحتوى ولا يقف خلف النص.

نتائج الاختبار

الحلقة ١٢ | المعالجات الجديدة

شريحة عرض | التدرّج الحراري في الأسفل، والعنوان على المساحة الهادئة.

حلقة جديدة الليلة

منشور مربع | نوى المعالج على الحواف، والشعار على لوح من الإسبريسو.

أمسية التقنية

حديث عن الذكاء الاصطناعي على فنجان قهوة.

ملصق مطبوع A4 | النجمة الثمانية بلون الكريما، والملف PDF متجهي.

داخل المعالج

صورة مصغّرة ليوتيوب | المسارات للمحتوى التقني العميق.

02

كيف اختبرناه

فاصل بين أقسام العرض | زاويتان متقابلتان، والعنوان في الوسط.

09:41

خلفية الهاتف | الفناجين على الكريما، هادئة بما يكفي للأيقونات.

قواعد الأنماط

النص على مساحة هادئة

لا تضع نصًا يُقرأ فوق النمط مباشرة. اترك مساحة بلون واحد، أو ضع لوحًا من لون الخلفية تحت النص.

الشعار فوق النمط

ضع الشعار على لوح هادئ مع المساحة الآمنة 2P، أو اختر حجم خلية يختلف بوضوح عن خلايا الكوب حتى لا يذوب فيه.

نمط واحد في التصميم

نمط واحد ولون واحد من الألوان الخمسة في كل تصميم. لا تخلط نمطين، ولا تلوّن النمط بألوان من خارج الهوية.

الحركة للشاشات

الأنماط المتحركة للفيديو والشاشات والمقدّمات فقط، ولا تتحرك خلف نص طويل. الموقع يوقفها لمن فعّل تقليل الحركة.

في المطبعة

استخدم ملف PDF المتجهي، فألوانه مصمتة بلا شفافية. نسخة اللون الواحد للأختام والطباعة الحريرية والحفر.

للعروض التقديمية

صورة PNG بمقاس ١٩٢٠ × ١٠٨٠ خلفيةً للشريحة، والزوايا الشفافة فوق الشرائح العادية. يعمل في باوربوينت وكينوت وشرائح جوجل.

08

Charts and data

المخططات والأرقام

نختبر كثيرًا، فالأرقام جزء من الهوية. كل مخطط هنا مبني من نوى الكوب نفسها، وألوانه من أجزاء الشعار، فيُعرف أنه من تك قهوة قبل أن يُقرأ. الأرقام في هذا الفصل أمثلة توضيحية.

الألوان من الشعار نفسه

لا ألوان من خارج الهوية. كل دور في المخطط يأخذ لون جزء من الكوب، بالترتيب نفسه في كل مخطط.

نواة مضيئة ونواة مطفأة

النواة المضيئة مربع ممتلئ، والمطفأة مربع فارغ بالحجم نفسه. المطفأة تعني الخسارة في المواجهة، والتراجع عن الجيل السابق، والإطار البطيء، والمنافس الرابع. هكذا يتميّز كل شيء بالشكل، لا باللون وحده.

الحرارة تعني أكثر

الأكثر أسخن دائمًا، على الداكن وعلى الفاتح. على الداكن يصل السلّم إلى التوهّج، وعلى الفاتح يتوقف عند الحرارة لأن التوهّج يختفي على الحليب. الجهاز الذي نراجعه يسخن على طول شريطه حتى طرفه.

جرّب قيمة من ١٠٠68

أربع درجات متساوية بين أقل قيمة وأعلاها في المجموعة نفسها. إذا تكدّست القيم، قسّمها بالأرباع واذكر ذلك.
الأفضل هو الأسخن دائمًا. في المقاييس التي يكون فيها الأقل أفضل، مثل زمن الشحن والسعر، اقلب السلّم.
الرقم مكتوب دائمًا داخل النواة أو بجانبها. اللون يقود العين، والرقم هو المعلومة.

ماذا تريد أن تقول؟

ابدأ من الجملة التي تريد أن يفهمها المشاهد، وهي تختار المخطط.

01 | الترتيبنتيجة اختبار المعالجنقاط، الأعلى أفضل

الأرقام في جدول

متى: جهاز واحد مقابل منافسيه في رقم واحد.
كيف: صفّان من النوى لكل شريط، وكل نواة قيمة ثابتة. شريطنا يسخن على طوله حتى طرفه، والباقي لاتيه.

02 | المواجهةجهازان في ستة اختبارات

الأرقام في جدول

متى: فيديوهات المقارنة بين جهازين أو ثلاثة.
كيف: أسماء الاختبارات في الوسط، وكل جهاز في جهته بلونه. الفائز في كل اختبار مضيء، والخاسر نوى مطفأة.

03 | عبر الزمنثبات الأداء تحت الضغط٪ من أعلى أداء خلال ٢٠ دقيقة

الأرقام في جدول

متى: رقم يتغيّر مع الوقت: الحرارة والإطارات والخنق الحراري.
كيف: لوحة ليد، كل قراءة نواة تضيء، والقفزة بين قراءتين درجات بكسل. الزمن من اليسار إلى اليمين، والاسم في آخر الخط.

04 | البطاريةمن ١٠٠٪ إلى الصفراختبار تصفّح متواصل، الشحن كل نصف ساعة

متى: عمر البطارية، والشحن، وأي مستوى يمتلئ ويفرغ.
كيف: عمود لكل قراءة، والنواة الواحدة ١٠٪. لون العمود من مستواه: ممتلئ ساخن، وفارغ بارد.

05 | التوزيعزمن الإطار في لعبة ثقيلةعدد الإطارات في كل مدى، بالملّي ثانية

متى: السلاسة والتقطيع وتوزيع أي قياس.
كيف: عمودان من النوى لكل مدى. الإطارات الأبطأ من ٦٠ إطارًا في الثانية نوى مطفأة، والمتوسط خط محايد.

07 | الملف الكاملأين يتفوّق الجهاز؟ستة محاور، من ١٠

متى: صورة الجهاز كاملة في نظرة واحدة.
كيف: رادار من البكسل: شكل جهازنا نوى مضيئة، والمنافس خط من النوى المطفأة فوقه. ستة محاور كحد أقصى.

08 | القيمةالسعر مقابل التقييمثمانية هواتف، بالدولار ومن ١٠

متى: هل يستحق سعره؟ وأي علاقة بين رقمين.
كيف: كل جهاز نواة. منطقة «أكثر مقابل أقل» مظللة بنوى صغيرة، وخطّا الوسيط يقسمان الخريطة.

09 | الفرقالفرق عن جيل العام الماضي٪، الموجب أفضل

الأرقام في جدول

متى: ما الذي تحسّن وما الذي تراجع.
كيف: التحسّن نوى مضيئة في اتجاه القراءة، والتراجع نوى مطفأة في الاتجاه المعاكس، من خط أساس واضح.

10 | المصفوفةخمسة أجهزة في خمسة اختباراتكل عمود يتدرّج وحده، والأسخن هو الأفضل

الأرقام في جدول

متى: عدة أجهزة في عدة اختبارات معًا.
كيف: رقاقة معالج داكنة دائمًا، وكل نتيجة نواة مربعة برقمها، ولونها من درجتها في عمودها.

11 | رقم واحدفهم الكلام العربيمن ١٠٠ جملة مسجّلة

87%من الكلام العربي فُهم بدقةنواة لكل ١٪

متى: نسبة واحدة هي الخبر.
كيف: مئة نواة، تضيء من الأسفل بترتيب القراءة، والرقم الكبير بجانبها.

11 | رقم واحدثلاثة أرقام تلخّص المراجعةالرقم، والفرق، والاتجاه

متى: أول شريحة في الفيديو وأعلى المقالة.
كيف: الرقم كبيرًا ببلكس، والفرق بسهم وكلمة، وخط صغير من النوى لآخر ١٢ قراءة.

12 | الحكمبطاقة الحكم النهائيآخر شريحة في كل مراجعة

متى: خلاصة المراجعة في صورة واحدة.
كيف: التقييم بعشر نوى تسخن من البداية إلى النهاية، ثم التقييمات الفرعية، ثم نقاط القوة والضعف برموز البكسل.

صانع المخطط

اختر النوع، واكتب نتائجك، ثم حمّل صورة ١٩٢٠ × ١٠٨٠ جاهزة للفيديو أو الشريحة.

النوع

الترتيب المواجهة الحكم

العنوان الوصف

العنصر المميّزرتّب من الأعلى

الخلفية

الإسبريسوالحليب

المصدر

في باوربوينت وإكسل وشرائح جوجل

خانة السمة	اللون	القيمة
نص/خلفية داكن ١ Dark 1	الحبر	`#1C1410`
نص/خلفية فاتح ١ Light 1	أبيض	`#FFFFFF`
نص/خلفية داكن ٢ Dark 2	الإسبريسو	`#15100C`
نص/خلفية فاتح ٢ Light 2	الكريما	`#F6EFE6`
تمييز ١ Accent 1	الكهرماني	`#E2791C`
تمييز ٢ Accent 2	الحبر	`#1C1410`
تمييز ٣ Accent 3	الخزف	`#8F6E58`
تمييز ٤ Accent 4	التحميص	`#6B3E26`
تمييز ٥ Accent 5	الحرارة	`#FFA42E`
تمييز ٦ Accent 6	النحاسي	`#A4572A`
ارتباط تشعبي Hyperlink	النحاسي	`#A4572A`

ثبّت الألوان مرة واحدة

باوربوينت وإكسل: ضع الملف في مجلد ألوان السمات، ثم اختره من التصميم ثم المتغيرات ثم الألوان.
كينوت: أدخل القيم في ألوان المخطط من لوحة التنسيق.
شرائح جوجل: من الشريحة الرئيسية، عدّل ألوان السمة وأدخل القيم بالترتيب نفسه.
اجعل الخطوط بلكس العربي والإنجليزي، وخط البكسل لعنوان الشريحة فقط.

Windows: %AppData%\Microsoft\Templates\Document Themes\Theme Colors
Mac: ~/Library/Group Containers/UBF8T346G9.Office/User Content/Themes/Theme Colors

قواعد المخططات

نوى مربعة فقط

كل علامة في المخطط نواة مربعة. لا أشرطة مستديرة، ولا دوائر، ولا كعكات، ولا تدرّج ناعم، ولا ظلال.

الكوب للموضوع

الجهاز الذي نراجعه بلون الكوب دائمًا، ولا شيء غيره بهذا اللون. المنافسون بألوان الاسم ثم الصحن ثم التحميص.

المطفأة للخسارة

الخسارة في المواجهة، والتراجع، والإطار البطيء، والمنافس الرابع: نوى مطفأة بالحجم نفسه.

أربع سلاسل حدٌّ أقصى

الخامسة وما بعدها تُجمع في «أخرى» باللاتيه، أو تذهب إلى مخطط ثانٍ.

محور واحد

لا محورين في مخطط واحد. رقمان بوحدتين مختلفتين يعني مخططين.

الأعمدة تبدأ من الصفر

طول الشريط هو القيمة، والنواة الأخيرة تُقصّ على الرقم الدقيق. اكتب قيمة النواة تحت المخطط.

الأرقام ببلكس

القيم والمحاور بخط بلكس وبالأرقام 0 إلى 9، والنص بلون الحبر لا بلون السلسلة. خط البكسل لعنوان الشريحة فقط.

المصدر والتاريخ والجدول

الوحدة وظروف الاختبار والتاريخ والمصدر تحت كل مخطط، والأرقام كاملة في جدول في المقالة أو وصف الفيديو.

09

Motion and video

الحركة والفيديو

يُبنى الكوب خلية بعد خلية، ثم يُكتب الاسم حتى الثانية ٢٫٣، ثم تومض النوى ويتصاعد البخار في حلقة كل خمس ثوانٍ.

الأفقي العربي

الأفقي الإنجليزي

العمودي للشورتس

حلقة الأيقونة

ملفات المونتاج

تسلسل PNG بشفافية كاملة، ٣٠ إطارًا في الثانية، يعمل في بريمير ودافنشي وأفتر إفكتس.

الشعار العربي بخلفية شفافةتسلسل PNG داخل ملف ZIP، ١٨٠ إطارًا

الشعار الإنجليزي بخلفية شفافةتسلسل PNG داخل ملف ZIP، ١٨٠ إطارًا

نسخة خفيفة شفافة للويبWebM بشفافية

الشعار المتحرك GIF بخلفية شفافةللعروض التقديمية والمواقع والرسائل، يعمل في باوربوينت وكينوت وشرائح جوجل

شورتس بالإنجليزيMP4 | 1080×1920

10

Favicon and app icons

أيقونة المتصفح والتطبيقات

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

أيقونة المتصفح

تك قهوة | مراجعات

الفيديو

تبويب فاتح: الملف نفسه يختار ألوانه.

تك قهوة | مراجعات

الفيديو

تبويب داكن: الملف نفسه يختار ألوانه.

أيقونات التطبيقات

11

Pixel displays

شاشات البكسل

كل بكسل في الملف يساوي بكسلًا واحدًا على الشاشة. لكل شاشة صورة ثابتة ومقدّمة وحلقة متكررة ومصفوفات أردوينو جاهزة.

12

Team handoff

للفريق

خطوات عملية لكل دور، مع الشيفرة الجاهزة للنسخ.

١ | انسخ الملفات

techkahwa-fonts.css وtechkahwa-tokens.css إلى مجلد CSS.
ملفات woff2 إلى /fonts/.
حزمة أيقونة المتصفح إلى جذر الموقع.
شعارات SVG إلى /brand/.

<!-- in <head> -->
<link rel="stylesheet" href="/css/techkahwa-fonts.css">
<link rel="stylesheet" href="/css/techkahwa-tokens.css">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

/* use tokens, never raw hex */
body { background: var(--surface); color: var(--ink);
       font-family: var(--font-text); }
h1   { font-family: var(--font-display); }
a    { color: var(--accent); }
.btn { background: var(--accent-fill);
       color: var(--on-accent); }

<picture>
  <source srcset="/brand/techkahwa-ar-horizontal-white.svg"
          media="(prefers-color-scheme: dark)">
  <img src="/brand/techkahwa-ar-horizontal-black.svg"
       alt="تك قهوة" height="32">
</picture>

ثيم جاهز لمكتبتك

الألوان والخطوط والزوايا وألوان المخططات نفسها، مولّدة من مصدر واحد ومجرّبة على كل مكتبة.

/* app.css */
@import "tailwindcss";
@import "./techkahwa.css";

<!-- markup: semantic colors follow dark mode -->
<body class="bg-surface text-ink font-sans">
<h1 class="font-display text-display-md">TechKahwa</h1>
<button class="bg-accent-fill text-on-accent
               rounded-sm px-4 py-3 font-semibold">
  Download
</button>
<rect class="fill-chart-1" />  <!-- then 2..5 -->

Tailwind CSS v4

ضع الملف بجانب ملف CSS الرئيسي، واستورده بعد tailwindcss.
الألوان الدلالية تتبدّل وحدها مع الوضع الداكن، فنادرًا ما تحتاج dark:.
ألوان الهوية الثابتة بأسماء brand وcoffee وheat، وألوان المخططات chart.
الزوايا تتوقف عند ٨ بكسل، لأن الهوية مربعة.

// tailwind.config.js
module.exports = {
  presets: [require('./techkahwa.preset.js')],
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
};

/* globals.css */
@import "./techkahwa-vars.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind CSS v3

ملف إعداد جاهز بالألوان والخطوط والأحجام والزوايا.
ملف المتغيّرات يحمل قيم الفاتح والداكن، فاستورده مرة واحدة.
dark: يعمل مع إعداد النظام ومع data-theme معًا.

# 1. start or open your project
npx shadcn@latest init

# 2. replace :root, .dark and @theme inline
#    in app/globals.css with techkahwa globals.css

// 3. components come out on brand
<Button>Download</Button>           // amber, ink text
<Button variant="outline">Read</Button>
<ChartContainer config={config}>   // --chart-1..5

shadcn/ui

كل متغيّرات shadcn بقيم الهوية، ومعها ألوان المخططات الخمسة والشريط الجانبي.
الزر الرئيسي كهرماني بنص الحبر، لأن الأبيض على الكهرماني لا يُقرأ.
نسخة لمشاريع Tailwind v3 بصيغة HSL.

import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { techkahwaTheme } from './techkahwa-theme';

export default function App({ children }) {
  return (
    <ThemeProvider theme={techkahwaTheme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}

MUI

ثيم MUI الإصدار ٦ و٧ بالوضعين الفاتح والداكن، والخطوط وأحجام العناوين.
الأزرار بلا ظل وبلا أحرف كبيرة، والبطاقات بزاوية ٨ بكسل.
للعربية: ضع dir="rtl" واتبع دليل MUI لاتجاه اليمين إلى اليسار.

<link rel="stylesheet" href="/css/techkahwa-tokens.css">
<link rel="stylesheet" href="/css/techkahwa-charts.css">
.card { background: var(--surface-raised); }
.bar  { fill: var(--chart-1); }

// Sass
@use 'techkahwa' as tk;
.btn { background: tk.$amber; color: tk.$ink; }

// any JS: styled-components, Chakra, chart libraries
import { tokens } from './techkahwa-tokens.mjs';
tokens.chart.light.series; // ['#E2791C', '#1C1410', ...]

CSS · Sass · JS

متغيّرات CSS الأصلية، ومعها ملف جديد لألوان المخططات وسلّم الحرارة ودرجات القهوة.
ملف Sass بالمتغيّرات والخرائط.
كائن JavaScript لأي مكتبة، ولمكتبات الرسوم البيانية.

{
  "color": {
    "brand": { "amber": { "$type": "color", "$value": "#E2791C" } },
    "light": { "accent-fill": { "$type": "color", "$value": "#E2791C" } },
    "dark":  { "accent-fill": { "$type": "color", "$value": "#FFA42E" } },
    "chart": { "light": { "name": { "$type": "color", "$value": "#1C1410" } } }
  },
  "typography": { "display-md": { "$type": "typography" } }
}

Figma · Tokens Studio · Style Dictionary

كل القيم بصيغة W3C Design Tokens، تُستورد في Tokens Studio داخل فيغما.
منها تبني Style Dictionary أي صيغة أخرى: iOS وأندرويد وفلاتر.
اقرأ README لتعرف أي ملف لأي مكتبة.

قبل أن تبدأ

ثبّت الخطوط من مجلد desktop.
استورد techkahwa-colors.ase في فيغما أو أدوبي.
اعمل بمساحة sRGB للشاشات.
خذ الشعار من SVG ولا تعِد رسمه.

أثناء التصميم

اختر نسخة الشعار حسب الخلفية.
احترم المساحة الآمنة والحد الأدنى.
خط البكسل للعنوان الكبير فقط.
شبكة ٤ بكسل، وزوايا مربعة، و٨ بكسل حدًّا أقصى للتدوير.

عند التسليم

للشاشات PNG أو SVG، وللطباعة PDF.
الصورة البارزة ١٣٤٤ × ٧٦٨ والمحتوى في الوسط.
صور يوتيوب ١٢٨٠ × ٧٢٠ والأيقونة في الزاوية العليا.
لا شرطات طويلة في النصوص: فاصلة أو خط عمودي.

عنوان على الشاشة

منطقة الترجمة

action safe 5% | title safe 10%

قواعد المونتاج

ابدأ الفيديو العربي بالمقدّمة العربية، والإنجليزي بالإنجليزية.
لا تقطع المقدّمة قبل الثانية ٢٫٣ حتى يكتمل الاسم.
العلامة المائية أعلى اليسار داخل الهامش ٥٪.
العناوين بخط البكسل بحجم ٦٤ بكسل أو أكثر، والترجمة بخط بلكس.
الإسبريسو #15100C بدل الأسود الصافي، والمشروع Rec.709.

ملف الهوية لأدوات الذكاء الاصطناعي

ملف واحد بالإنجليزية فيه كل قاعدة: الألوان ونسبها، وهندسة الشعار ومساحته الآمنة، والخطوط، والأنماط، والمخططات، والشيفرة. أرفقه مع طلبك، فتلتزم الأداة بالهوية كما هي.

Claude وChatGPT وGemini: أرفق الملف في المحادثة أو في تعليمات المشروع.
Claude Code وCursor وCopilot: ضعه في جذر المشروع، واذكره في CLAUDE.md أو AGENTS.md أو قواعد المحرر.
أدوات الصور والعروض: انسخ التعليمات المختصرة وألصقها قبل طلبك.

Design for TechKahwa (تك قهوة), an Arabic tech brand:
"tech talk over a cup of coffee". Follow TECHKAHWA-BRAND.md exactly.

- Everything is square pixels on one grid. Corners: 4px buttons,
  8px cards, never more. No gradients, glows or drop shadows.
- Grounds: milk #FBF7F2, crema #F6EFE6, espresso #15100C.
  Text: ink #1C1410 on light, #F4ECE2 on dark.
- One accent: amber #E2791C (hot #FFA42E on dark). Text on amber
  is ink, never white. Ratio 60% ground, 30% coffee, 10% amber.
- Heat ramp: roast #6B3E26, copper #A4572A, amber, hot, glow #FFDA8F.
- Fonts: Solar 6 (Arabic) and Pixelify Sans (English) for titles
  of 32px and up only. IBM Plex Sans Arabic and IBM Plex Sans for
  everything people read. IBM Plex Mono for code.
- Logo: use the supplied files. Never redraw, recolor, stretch,
  rotate or add effects. Full color on milk or espresso, the
  tonal version on amber or brown. Clear space 2P on every side.
- Charts: square cores only. The subject is the cup (amber), rival 1
  the name (ink #1C1410, cream on dark), rival 2 the saucer
  (ceramic #8F6E58), rival 3 the roast as off (hollow) cores, the
  rest latte #D9CBBB. Losses are off cores. More is hotter.
  One axis, bars from zero, numbers in IBM Plex.
- Writing: Arabic first. Never use an em dash or an en dash;
  use a comma or a vertical bar.

13

Downloads

التحميل

حمّل الحزمة كاملة، أو الجزء الذي تحتاجه فقط.

الحزمة كاملة

كل المجلدات التسعة مع الدليل PDF وملف الهوية لأدوات الذكاء الاصطناعي. تسلسلات الشفافية للمونتاج منفصلة لحجمها.

01

الشعارات

كل الأشكال والنسخ بصيغ SVG وPNG وPDF، بالعربي والإنجليزي.

02

الشعار المصغّر والماتريكس

الشعار المصغّر، وملفات شاشات البكسل، ومصفوفات أردوينو الجاهزة.

03

الألوان

لوحة ASE لأدوبي وفيغما، وملفات CSS وJSON، مع قيم CMYK.

04

الخطوط

ملفات التثبيت على الحاسوب، وملفات الويب، والتراخيص.

05

الويب

متغيّرات CSS، والخطوط، وأيقونة المتصفح، والشيفرة الجاهزة، وثيمات Tailwind وshadcn وMUI.

06

أيقونات التطبيقات

آيفون وأندرويد وتطبيقات الويب وصور الحسابات.

07

الفيديو ويوتيوب

المقدّمات بصيغتي MP4 وGIF، والعلامة المائية، وغلاف القناة، وصورة الحساب.

08

الأنماط

ثمانية أنماط بخمسة ألوان: بلاطات SVG، وخلفيات PNG، وPDF للطباعة، وحلقات MP4، وزوايا شفافة.

09

المخططات

ألوان المخططات، وألوان أوفيس، وأمثلة قابلة للتعديل لنتائج الاختبارات.

MD

ملف الهوية للذكاء الاصطناعي

كل القواعد في ملف إنجليزي واحد، تقرؤه أدوات الذكاء الاصطناعي وتلتزم به.

PDF

الدليل الكامل

دليل الهوية بالعربي، جاهز للطباعة والمشاركة.

PNG

ملفات المونتاج بشفافية

الشعار المتحرك كتسلسل PNG بشفافية لبريمير ودافنشي وأفتر إفكتس.

كل ما تحتاجه لتصمّم باسم تك قهوة

ابدأ من هنا

أنا مصمّم

أنا مبرمج

أنا محرّر فيديو

أحتاج للطباعة

أصنع محتوى

من فضول طفل إلى تك قهوة

عمّ نتحدث

لماذا يبدو الشعار هكذا

القهوة والبرمجة، علاقة قديمة

إبريق كامبريدج

جافا

أنا إبريق شاي

آلة تحوّل القهوة

المربّع، ثلاث قراءات

البكسل

نواة المعالج

حبّة القهوة

ولماذا المربّع عمليًا؟

الكوب والبخار

فلسفة الألوان

والخلفيات هي الفنجان نفسه

الشعار

اختر شعارك وحمّله

اختبر خلفيتك

نسخة الشعار على الخلفيات الشائعة

المساحة الآمنة والحد الأدنى

الأماكن الصغيرة والضيقة

شريط عريض بارتفاع ٢٤ بكسل أو أكثر

مكان مربع أو طويل من ٥٦ بكسل

مربع من ٣٢ بكسل

مربع بين ١٦ و٣١ بكسل

شريط أقل من ٢٤ بكسل ويحتاج الاسم

الشعار المصغّر

استخدامات ممنوعة

حالات الاستخدام

جرّبت النموذج الجديد

جرّبت النموذج الجديد

الألوان

قواعد لا تُكسر

النِّسب

النص على الكهرماني

الرسوم البيانية

الحالات

الخطوط

سلّم الأحجام

الأنماط

زوايا وأشرطة بخلفية شفافة

الأنماط في العمل

قواعد الأنماط

النص على مساحة هادئة

الشعار فوق النمط

نمط واحد في التصميم

الحركة للشاشات

في المطبعة

للعروض التقديمية

المخططات والأرقام

الألوان من الشعار نفسه

نواة مضيئة ونواة مطفأة

الحرارة تعني أكثر

ماذا تريد أن تقول؟

صانع المخطط

في باوربوينت وإكسل وشرائح جوجل

ثبّت الألوان مرة واحدة

قواعد المخططات

نوى مربعة فقط

الكوب للموضوع

المطفأة للخسارة

أربع سلاسل حدٌّ أقصى

محور واحد

الأعمدة تبدأ من الصفر

الأرقام ببلكس

المصدر والتاريخ والجدول

الحركة والفيديو

ملفات المونتاج

أيقونة المتصفح والتطبيقات

أيقونة المتصفح

أيقونات التطبيقات

شاشات البكسل