Falcon Eye Falcon Eye DS 2.0
نظام التصميم · الإصدار 2.0Design system · v2.0

نظام واحد
لكل ما تراه العين.
One system
for everything
the eye sees.

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

The colours, type, components and motion behind the Falcon Eye website, app, venue dashboard and pitch deck — in Arabic and English, dark and light.

5ألوان أساسيةbrand colours
2خطوط · عربي وإنجليزيtypefaces · AR + EN
25+مكوّنcomponents
2وضعان · داكن وفاتحthemes · dark + light
الأساسياتFoundations

الألوانColour

داكن أولًا. الليموني هو اللون المميّز الوحيد — تعبئة للأزرار الرئيسية والمؤشرات المهمة، ولا يُستخدم كنص على الخلفيات الفاتحة. اضغط أي لون لنسخه.

Dark first. Lime is the only accent — a fill for primary actions and key indicators, never text on light backgrounds. Click any colour to copy it.

تدرّج المحايدNeutral scale

تدرّج الليمونيLime scale

الرموز الدلالية (Semantic tokens)Semantic tokens

استخدم هذه الأسماء في الكود دائمًا، لا الألوان الخام — هي التي تتبدّل تلقائيًا بين الداكن والفاتح.Always use these names in code, not raw hex — they're what switch automatically between dark and light.

TokenداكنDarkفاتحLightالاستخدامUse

الخطوطTypography

Montserrat للإنجليزي و Alexandria للعربي: خطّان هندسيان عريضان يتناسقان معًا. يتبدّل الخط تلقائيًا مع اللغة عبر --font.

Montserrat for English and Alexandria for Arabic: two wide geometric faces that sit together. The family switches with the language through --font.

الأرقام إنجليزية دائمًا (0123456789) — في العربي أيضًا. ولا تُستخدم الأرقام الهندية أبدًا.

Western digits always (0123456789) — in Arabic too. Never Arabic-Indic numerals.

AaMontserrat
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · 0123456789
LightRegularMediumSemiBoldBold
أبAlexandria
ا ب ت ث ج ح خ د ذ ر ز س ش ص ض ط ظ ع غ ف ق ك ل م ن ه و ي
0123456789
خفيفعاديمتوسطشبه عريضعريض

سُلّم الأحجامType scale

Display--fs-display · 700 · 76/1.05
لقطتك ما تضيع.Seen again.
H1--fs-h1 · 700 · 46/1.2
آخر 30 ثانية على جوالكYour last 30 seconds
H2--fs-h2 · 600 · 28
كيف يعمل النظامHow it works
H3--fs-h3 · 600 · 20
ملعب 2 · مرمى الشمالPitch 2 · North goal
Body--fs-body · 400 · 16/1.65
كاميرتان على أطراف الملعب تحتفظان دائمًا بآخر 30 ثانية من اللعب. عند الضغط على الزر يُحفظ المقطع ويصل إلى الجوال خلال ثوانٍ.Two cameras at the corners always hold the last 30 seconds of play. Press the button and the clip is saved and sent to your phone in seconds.
Small--fs-small · 400 · 14
آخر تحديث قبل دقيقتينUpdated 2 minutes ago
Label12 · 600 · caps · 0.14em
Live feed
Tagline14 · 500 · 0.6em
SEE FURTHER
Numerictabular-nums
00:30 · 21:47:12 · 99.8%

المسافات والزوايا والارتفاعSpace, radius & elevation

كل المسافات من مضاعفات 4 بكسل. الزوايا معتدلة — ليست حادة ولا دائرية جدًا.

All spacing is a multiple of 4 px. Corners are moderate — neither sharp nor bubbly.

xs · 4
شارات صغيرةSmall tags
sm · 8
أزرار وحقولButtons, inputs
md · 12
بطاقاتCards
lg · 20
نوافذ ولوحاتModals, panels
pill
شارات الحالةStatus badges
Shadow 1بطاقاتCards
Shadow 2قوائم · تنبيهاتMenus · toasts
Shadow 3نوافذModals

الحركةMotion

سريعة وحاسمة مثل انقضاض الصقر. لا حركة بلا سبب: كل حركة تشرح تغيّرًا. تتوقف كلها تلقائيًا عند تفعيل «تقليل الحركة» في الجهاز.

Fast and decisive, like a falcon's dive. No motion without a reason: every animation explains a change. All of it switches off when the device asks for reduced motion.

منحنيات التسارعEasing

ease-out

cubic-bezier(.2,.8,.2,1)
الافتراضي: دخول العناصر والتحويمDefault: things entering, hovers

ease-in-out

cubic-bezier(.65,0,.35,1)
حركة من مكان لمكان · شريط الحفظMoving between places · save progress

ease-snap

cubic-bezier(.3,1.4,.5,1)
تجاوز بسيط: المفاتيح وزر الإعادةSmall overshoot: switches, the replay button

الأيقوناتIcons

شبكة 24 بكسل، خط بسماكة 1.6، أطراف دائرية، بدون تعبئة. تأخذ لون النص المحيط، وتصبح ليمونية للتمييز في الوضع الداكن. اضغط أي أيقونة لنسخ كود SVG.

24 px grid, 1.6 stroke, round caps, no fills. They inherit the text colour and turn lime for emphasis in dark mode. Click any icon to copy its SVG.

المقاسات: 16 داخل الأزرار الصغيرة، 20 الافتراضي، 24 في القوائم، 32 للعرض. لا تستخدم أيقونة بدون نص إلا مع تلميح (tooltip).Sizes: 16 in small buttons, 20 default, 24 in navigation, 32 for display. Never use an icon alone without a tooltip.

التصويرPhotography

ليل الملعب تحت الأضواء. معظم الصورة داكن، ونقطة واحدة مضيئة تجذب العين — تمامًا مثل الشعار. صور حقيقية من ملاعبنا، لا صور «ستوك» مبتسمة.

The pitch at night under floodlights. Mostly dark, with one bright point that pulls the eye — just like the logo. Real photos from our venues, never smiling stock.

مرجع المزاج — من لوحة الهوية. يُستبدل بصور حقيقية من الملعب.Mood reference — from the brand board. Replace with real venue photos.
01

منخفض الإضاءةLow-key

70% من الصورة ظلال. الضوء يأتي من الكشافات أو الشاشة، لا من فلاش.70% of the frame is shadow. Light comes from floodlights or a screen, never a flash.

02

نقطة تركيز واحدةOne point of focus

الكرة، الزر، أو وجه لاعب يشاهد جواله. ليس أكثر من واحدة في كل صورة.The ball, the button, or a player's face lit by their phone. Never more than one per frame.

03

ألوان هادئةMuted colour

العشب أخضر رمادي لا فاقع. الليموني لا يُضاف في التعديل — يأتي فقط من الواجهة أو ضوء حقيقي.Grass is grey-green, not neon. Lime is never added in the edit — only from UI or real light.

04

لحظة حقيقيةReal moments

لاعبون حقيقيون في مباراة حقيقية. حركة، عرق، احتفال — بدون وقوف أمام الكاميرا.Real players in a real game. Motion, sweat, celebration — no posing.

معالجة الألوان (Falcon grade)Colour grade (Falcon grade)

−35%التشبّع · العشب يصبح رماديًا مخضرًاSaturation · grass turns grey-green
+12%التباين · ظلال عميقة باتجاه #0A0D0FContrast · shadows sink toward #0A0D0F
−12%الإضاءة · نحافظ على تفاصيل الكشافاتExposure · keep floodlight detail

في الويب: On the web: filter: saturate(.65) contrast(1.12) brightness(.88)

قائمة اللقطات لكل ملعبShot list for every venue

1 · اللقطة العريضة من الأعلى1 · High wideمن عمود الكاميرا — هذا ما يراه المنتج.From the camera pole — this is what the product sees.
2 · خلف المرمى2 · Behind the goalالمرمى والزر في نفس الكادر.Goal and button in one frame.
3 · لحظة الضغط3 · The pressقريبة جدًا: اليد على الزر.Tight: the hand hitting the button.
4 · ردّة الفعل4 · The reactionلاعبون يشاهدون المقطع على الجوال.Players watching the clip on a phone.
5 · الجهاز5 · The hardwareالكاميرا على العمود مقابل سماء الليل.Camera on the pole against the night sky.
6 · الكشافات6 · Floodlightsظلال اللاعبين تحت الضوء.Player silhouettes under the light.

✓افعلDo

  • صوّر بعد المغرب، تحت الكشافاتShoot after sunset, under the floodlights
  • اترك مساحة داكنة للنصLeave dark space for text
  • استخدم إطارات حقيقية من مقاطع الإعادةUse real frames from replay clips
  • احصل على موافقة اللاعبين قبل النشرGet players' consent before posting

✕لا تفعلDon't

  • صور ستوك أو أشخاص يبتسمون للكاميراStock photos or people smiling at the camera
  • صور نهارية بألوان مشبّعةDaylight, over-saturated shots
  • توهّج، عدسات «HUD» وهمية، أو مؤثرات تقنية مزيّفةGlows, fake HUD overlays or sci-fi effects
  • صور أطفال بدون إذن وليّ الأمرMinors without a guardian's consent

المقاسات والنص فوق الصورCrops and text on photos

16:9
الموقعWeb hero
4:5
منشورFeed
9:16
ستوريStory
1:1
صورةAvatar

النص يوضع فوق أغمق جزء من الصورة. عند الحاجة أضف تظليلًا من الأسفل بلون Obsidian لا يتجاوز 60% من الارتفاع — لا إطارات ولا صناديق خلف النص.Text sits on the darkest part of the photo. If needed, add an Obsidian scrim from the bottom, no taller than 60% of the frame — no boxes or panels behind text.

المكوّناتComponents

زر الإعادة — المكوّن الأساسيReplay button — the signature

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

The component that is the product: the button behind the goal, and the same button in the app and the dashboard. Try it.

1الضغطة — يهتز الزر وتنطلق موجةPress — the button gives and a ripple goes out
2الحفظ — تمتلئ الحلقة خلال قصّ آخر 30 ثانيةSaving — the ring fills while the last 30s is cut
3جاهز — إشعار «المقطع جاهز» مع رابط المشاركةReady — a "Clip ready" toast with the share link
Size 168 · 64 (app) · 100mm (pitch)Ring 6px Falcon LimePress scale .94 · 80msFill 1.6s ease-in-out

الأزرارButtons

زر رئيسي واحد (ليموني) في كل شاشة. البقية ثانوية أو حدود أو شفافة.

One primary (lime) button per screen. Everything else is secondary, outline or ghost.

Primary --accentSecondary --text on --bgOutline --border-strongGhost transparentDanger --danger
sm 34md 44lg 54icon square
default
hover
pressed
focus
disabled
Loading

الحقول والاختياراتForms & selection

يظهر للاعبين على صفحة المقطعShown to players on the clip page
أدخل بريدًا صحيحًاEnter a valid email

الحالات والشاراتStatus & badges

الأحمر للبث المباشر فقط. الليموني للنجاح والجاهزية.

Red means live, nothing else. Lime means ready or done.

LIVE المقطع جاهزClip ready جارٍ الحفظSaving بطارية الزر منخفضةButton battery low الكاميرا غير متصلةCamera offline تحديث متوفرUpdate available ملعب 2Pitch 2 00:30

التنبيهات والتقدّمAlerts, toasts & progress

تم حفظ المقطعClip savedأُرسل الرابط إلى جوال اللاعب.The link was sent to the player's phone.
بطارية الزر 15%Button battery at 15%مرمى الجنوب · ملعب 3South goal · Pitch 3
الكاميرا B غير متصلةCamera B is offlineتحقق من كابل الشبكة عند العمود.Check the network cable at the pole.
رفع المقطعUploading clip0%
جارٍ الاتصال بالكاميرات…Connecting to cameras…

البطاقات والجداولCards & tables

مرّر المؤشر فوق بطاقة المقطع وصفوف الجدول.

Hover the clip cards and the table rows.

المقطعClipالملعبPitchالوقتTimeالحالةStatus
#1284ملعب 2 · الشمالPitch 2 · North21:47جاهزReady
#1283ملعب 1 · الجنوبPitch 1 · South21:44جارٍ الحفظSaving
#1282ملعب 3 · الشمالPitch 3 · North21:31جاهزReady

النوافذ والتلميحاتModals & tooltips

Modal r-lg · shadow-3 · Esc للإغلاقto closeTooltip 150ms

مشغّل المقطعClip player

الشاشة التي يقضي فيها اللاعب أغلب وقته. شغّله: الإعادة البطيئة 0.5x، التقدّم إطارًا بإطار، والعلامة على الشريط تشير إلى لحظة الضغط على الزر. المفاتيح: المسافة للتشغيل، والأسهم للإطارات.

Where players spend most of their time. Play it: 0.5x slow-mo, frame stepping, and the marker on the timeline is the moment the button was pressed. Keys: space to play, arrows to step.

ملعب 2 · مرمى الشمالPitch 2 · North goal21:47
00:00 / 00:30

المواصفاتSpec

  • الشريط والتحكم دائمًا من اليسار لليمين، حتى بالعربي (اتجاه الزمن)Timeline and controls are always left-to-right, even in Arabic (time runs LTR)
  • علامة «GOAL» عند الثانية 25 — لحظة الضغط على الزر"GOAL" marker at 0:25 — when the button was pressed
  • 0.5x تتحوّل لليموني عند التفعيل0.5x turns lime when active
  • التحكم يختفي أثناء التشغيل ويظهر عند التمريرControls fade while playing, return on hover
  • تحميل ومشاركة دائمًا ظاهرين — هما الهدفDownload and share are always one tap away — they're the point

الحالات الفارغةEmpty states

كل شاشة فارغة تشرح السبب وتعطي خطوة واحدة واضحة.

Every empty screen says why, and offers one clear next step.

لا توجد مقاطع بعدNo clips yet

اضغط الزر بجانب المرمى بعد أي لقطة، وستظهر هنا خلال ثوانٍ.Hit the button by the goal after any moment and it shows up here in seconds.

لا نتائج لـ «ملعب 7»No results for "Pitch 7"

جرّب اسم ملعب آخر أو وسّع نطاق التاريخ.Try another pitch name or widen the date range.

الكاميرات غير متصلةCameras offline

لم يصل بث من ملعب 2 منذ 21:40. تحقّق من الكهرباء والكابل عند العمود.No feed from Pitch 2 since 21:40. Check power and the cable at the pole.

اختيار التاريخDate picker

لتصفية المقاطع والتقارير. يبدأ الأسبوع يوم الأحد. اضغط يومين لاختيار فترة.

For filtering clips and reports. Weeks start on Sunday. Click two days to pick a range.

القواعدRules

  • أرقام إنجليزية دائمًا: 5 أكتوبر 2026Western digits always: 5 Oct 2026
  • صيغة التاريخ: يوم شهر سنة — 5 Oct 2026Format: day month year — 5 Oct 2026
  • الوقت بنظام 24 ساعة: 21:4724-hour time: 21:47
  • نقطة صغيرة تحت تاريخ اليومA small dot marks today
  • اختصارات جاهزة: اليوم، 7 أيام، 30 يومًاPresets: Today, 7 days, 30 days

رسائل واتسابWhatsApp messages

قوالب الرسائل التي تُرسل للاعب ولمشغّل الملعب. المتغيّرات بصيغة {{1}} المطلوبة لاعتماد القوالب في WhatsApp Business. قصيرة، ورابط واحد فقط.

Message templates sent to players and venue operators. Variables use the {{1}} format WhatsApp Business needs for template approval. Short, one link only.


      
الأنماطPatterns

لوحة تحكم الملعبVenue dashboard

الشاشة التي يراها مشغّل الملعب: البث المباشر، وآخر الإعادات، وحالة الأجهزة.

What the venue operator sees: the live feed, the latest replays, and device health.

REPLAY SAVEDPitch 2 · North goal · 00:30
LIVE 21:47:12
ملعب 1Pitch 1
ملعب 3Pitch 3
3ملاعب مباشرةPitches live
0مقطع اليومClips today
99.8%جاهزية النظامUptime
4 / 44 / 4أزرار متصلةButtons online

شاشة الجوالMobile screen

ما يراه اللاعب بعد الضغط على الزر — صفحة ويب بدون تطبيق. بدّل الوضع واللغة لترى الشاشة تتغيّر.

What the player sees after pressing the button — a web page, no app. Switch theme and language to watch it adapt.

9:41●●● ▮
مقاطعكYour clips

ملعب الصقور · الليلةFalcons Arena · tonight

مرمى الشمالNorth goal21:47
0:30
مرمى الجنوبSouth goal21:31
0:30
بدون تطبيق · بدون اشتراكNo app needed · No subscription

التطبيقاتApplications

أيقونة التطبيقApp icon
اضغطPRESSLAST 30s
ملصق الزر خلف المرمىBehind-the-goal button sticker
اضغط الزر · آخر 30 ثانية على جوالكPress the button · last 30s on your phone
لوحة الملعب / شاشة الانتظارPitch-side board / idle screen

قوالب السوشالSocial templates

ثلاثة قوالب جاهزة بالعربي والإنجليزي: «هدف الأسبوع»، ستوري «كيف يعمل»، ومنشور الإطلاق. الملف social/templates.html — غيّر النص بالضغط عليه أو عبر الرابط، ثم صدّرها بـ social/export.sh.

Three ready templates in Arabic and English: "Goal of the week", a "How it works" story and a launch post. Open social/templates.html — edit text by clicking it or through URL params, then export with social/export.sh.

جدول النشر المقترحSuggested rhythm

هدف الأسبوع كل خميس · ستوري «كيف يعمل» مثبّت في الهايلايت · منشور إطلاق لكل ملعب جديد · أعد نشر مقاطع اللاعبين (بإذنهم) يوميًا في الستوري.Goal of the week every Thursday · "How it works" pinned as a highlight · a launch post for every new venue · repost players' clips (with consent) to stories daily.

مرجعReference

سهولة الوصولAccessibility

نسب التباين وفق WCAG. الحد الأدنى 4.5 للنص العادي و3 للنص الكبير.

WCAG contrast ratios. Minimum 4.5 for body text and 3 for large text.

Aa
Off White / Obsidian17.8 AAA
Aa
Lime / Obsidian16.2 AAA
Aa
Obsidian / Lime16.2 AAA
Aa
Muted / Obsidian7.6 AAA
Aa
Graphite / Off White15.7 AAA
Aa
Muted / Off White5.5 AA
Aa
Steel / Off White3.4 كبير فقطlarge only
Aa
Lime / Off White1.1 ممنوعnever
  • كل عنصر تفاعلي له حالة تركيز واضحة (حلقة بلون --focus) ويمكن الوصول إليه بلوحة المفاتيح.
  • Every interactive element has a visible focus ring (--focus) and works from the keyboard.
  • الأهداف القابلة للمس 44 بكسل على الأقل في التطبيق.
  • Touch targets are at least 44 px in the app.
  • لا تعتمد على اللون وحده: كل حالة لها نص أو أيقونة بجانب اللون.
  • Never colour alone: every status carries a label or icon too.
  • الواجهة تنعكس كاملة بالعربي (RTL)، والأرقام والأوقات تبقى من اليسار لليمين.
  • The whole UI mirrors in Arabic (RTL); numbers and times stay left-to-right.
  • الأرقام إنجليزية دائمًا (0–9) حتى داخل النص العربي.
  • Digits are always Western (0–9), even inside Arabic text.
  • كل الحركات تتوقف مع إعداد «تقليل الحركة».
  • All motion stops under "reduce motion".

الملفاتFiles