Brandالهوية
How Risha looks, sounds and moves. Paper and ink, with one accent.كيف تبدو ريشة وكيف تتحدث وكيف تتحرك. ورق وحبر، ولون تمييز واحد.
01
Logoالشعار
The feather is fixed. We only place it and size it. We never redraw, recolour, crop, rotate or distort it. On a light page it is ink, on a dark page it is paper.الريشة ثابتة. نكتفي بوضعها وضبط حجمها، ولا نعيد رسمها ولا نغيّر لونها ولا نقصّها ولا ندوّرها ولا نشوّهها. على الصفحة الفاتحة هي حبر، وعلى الداكنة هي ورق.
On Paperعلى الورق
On Inkعلى الحبر
On the accentعلى لون التمييز
Clear spaceالمساحة الحرّة
Keep a quarter of the mark's width free on every side. Minimum height: 16 px on screen.اترك ربع عرض الشعار فارغًا من كل جهة. أصغر ارتفاع: ١٦ بكسل على الشاشة.
App iconأيقونة التطبيق
The feather on near black, as supplied. Never put it on a coloured tile.الريشة على أسود مائل إلى الدفء كما وصلتنا. لا تضعها قط على مربع ملوّن.
Lockupالشعار مع الاسم
The feather beside the name, in Readex Pro semibold. Arabic and Latin names share one baseline.الريشة بجانب الاسم بخط ريدكس برو شبه عريض. يتشارك الاسمان العربي واللاتيني خط الأساس نفسه.
Doافعل: Use the supplied files, scaled evenlyاستعمل الملفات المرفقة بتكبير متناسب
Doافعل: Tint the mark with the text colour of the pageلوّن الشعار بلون نص الصفحة
Doافعل: Leave room around itاترك حوله مساحة
Do notلا تفعل: Redraw, outline or add effectsلا تعد رسمه ولا تضف إليه تأثيرات
Do notلا تفعل: Stretch, rotate or crop itلا تمطّه ولا تدوّره ولا تقصّه
Do notلا تفعل: Put it on a busy picture or a clashing colourلا تضعه على صورة مزدحمة أو لون متنافر
02
Voiceالنبرة
We sound like a good teacher who respects your time: plain, warm and specific.نتحدث كمعلّم جيد يحترم وقتك: بسيط ودافئ ومحدّد.
Plainبسيطة
Short words, short sentences. Say what it does.كلمات قصيرة وجمل قصيرة. نقول ما تفعله الميزة.
Warmدافئة
Speak to one person. Be kind about mistakes, especially ours.نخاطب شخصًا واحدًا، ونرفق بالأخطاء، وبأخطائنا أولًا.
Saudi awareتعرف السعودية
Think of a student in Riyadh or Jeddah first: their exams, their weeks, their devices.نفكّر أولًا في طالب في الرياض أو جدة: اختباراته وأسابيعه وأجهزته.
Written, not translatedمكتوبة لا مترجمة
Arabic copy is composed in Arabic, in clear modern standard language. Never a word for word carry over.تُؤلَّف العربية بالعربية، بفصحى حديثة واضحة، ولا تكون نقلًا كلمة بكلمة.
Honestصادقة
Never promise what is not built. No hype words, no exclamation marks, no em or en dashes.لا نعد بما لم يُبنَ. لا كلمات تهويل ولا علامات تعجب ولا شرطات طويلة.
We sayنقول
- Write on any page.اكتب على أي صفحة.
- Your notes are saved on your device first.تُحفظ ملاحظاتك على جهازك أولًا.
- Not available yet.غير متاح بعد.
We avoidنتجنب
- Revolutionize your note taking!ثورة في تدوين الملاحظات!
- Military grade security.حماية بمستوى عسكري.
- Coming soon to a device near you.قريبًا جدًا على جهازك.
03
Colourاللون
Paper and Ink are the identity: a warm off-white and a soft black. One accent carries meaning, from a pressed button to a highlighted word. Every colour is a token, and every pair is checked for contrast.الورق والحبر هما الهوية: أبيض دافئ مائل إلى الكريمي وأسود ناعم. ولون تمييز واحد يحمل المعنى، من زر مضغوط إلى كلمة مظلّلة. كل لون رمز في النظام، وكل زوج منها مفحوص للتباين.
Six themesست سمات
Paperورق
15.1:1- EFE9DD
- F7F3EA
- FFFDF8
- 161513
- 4B4740
- 5E5850
- 946A3D
Inkحبر
16.7:1- 0D0D0C
- 141412
- 1C1B18
- EFEEE8
- B8B5AB
- 9F9B94
- DCB98A
Sepiaسيبيا
12.4:1- E8DABF
- F1E4CB
- F8EED9
- 221A0E
- 4A3B25
- 615136
- 7A4B24
Duneكثبان
12.2:1- E2D5C3
- ECE0CF
- F6EDE0
- 20170F
- 4F3E31
- 5D4D3E
- 7A4A2A
Midnightمنتصف الليل
16.4:1- 090D14
- 0F1420
- 161D2C
- E8ECF5
- AAB3C6
- 959DAE
- E0B97A
Monoأحادي
18.8:1- F2F2F2
- F9F9F9
- FFFFFF
- 000000
- 444444
- 616161
- 111111
Rolesالأدوار
- Pageالصفحة
--bg - Cardsالبطاقات
--surface - Raisedالمرتفع
--raised - Textالنص
--ink - Secondary textالنص الثانوي
--ink-2 - Quiet textالنص الهادئ
--ink-3 - Accentالتمييز
--accent
Eight accentsثمانية ألوان تمييز
Each theme has its own default accent, tuned for contrast on that theme. People can choose their own.لكل سمة لون تمييز افتراضي مضبوط للتباين على تلك السمة. وللناس أن يختاروا لونهم.
- 946A3D
- 0B7A5C
- 0F6FA8
- 4B4ACF
- 8A3FA0
- C2335E
- C8381A
- 3B3B3B
- B7791F
- 5E7324
- 4F7A4A
- 1B7F7F
- 2F5FB3
- 5B6C8F
- 6D4AAE
- B03A8F
- C43D55
- A0522D
- 8C5A5A
- 1F1F7A
04
Typographyالخطوط
Readex Pro for the interface, in Latin and Arabic with matching metrics. Source Serif 4 and Noto Naskh Arabic for anything meant to be read for a while.ريدكس برو للواجهة، بحروف لاتينية وعربية متوافقة المقاييس. وسورس سيريف 4 ونسخ للعربية لكل ما يُقرأ زمنًا.
Interfaceالواجهة: Readex Pro
Aa أب
Notes that keep upملاحظات تجاري وتيرتك
300 400 500 600 700
Readingالقراءة: Source Serif 4
Aa Gg
A page to think on
400 500 600
Readingالقراءة: Noto Naskh Arabic
أبجد
صفحة تفكّر عليها
Scaleالسُّلّم
Display text is tight. Body text is generous. Arabic gets more line height than Latin.العناوين الكبيرة مشدودة، ونص المتن رحب. وللعربية ارتفاع سطر أكبر من اللاتينية.
- Displayعنوان العرضThe quick brown fox, the lazy dogنصٌّ حكيمٌ له سرٌّ قاطعٌ وذو شأنٍ عظيم
64 / 1.02 - Heading oneعنوان أولThe quick brown fox, the lazy dogنصٌّ حكيمٌ له سرٌّ قاطعٌ وذو شأنٍ عظيم
40 / 1.1 - Heading twoعنوان ثانٍThe quick brown fox, the lazy dogنصٌّ حكيمٌ له سرٌّ قاطعٌ وذو شأنٍ عظيم
28 / 1.2 - Body largeمتن كبيرThe quick brown fox, the lazy dogنصٌّ حكيمٌ له سرٌّ قاطعٌ وذو شأنٍ عظيم
19 / 1.6 - BodyمتنThe quick brown fox, the lazy dogنصٌّ حكيمٌ له سرٌّ قاطعٌ وذو شأنٍ عظيم
15 / 1.5 - CaptionتعليقThe quick brown fox, the lazy dogنصٌّ حكيمٌ له سرٌّ قاطعٌ وذو شأنٍ عظيم
12.5 / 1.4
05
Shapeالشكل
Soft rounded rectangles, never sharp and never pills. Corners grow with the size of the thing, and squircle corners are used wherever the browser supports them. Depth comes from layered soft shadows, not hairlines.مستطيلات ناعمة مدوّرة الزوايا، لا حادّة ولا كبسولية. تكبر الزاوية بكبر العنصر، وتُستعمل الزوايا المنحنية المستمرة حيث يدعمها المتصفح. والعمق من ظلال لينة متراكبة لا من خطوط رفيعة.
Shapeالشكل
- Extra smallصغير جدًا7px
- Controlsعناصر التحكم11px
- Panelsاللوحات16px
- Cardsالبطاقات22px
Elevationالارتفاع
- shadow-1
- shadow-2
- shadow-3
06
Motionالحركة
Short, physical and interruptible. Presses shrink a hair and spring back. Entrances use CSS only and never wait for scripts. Everything stops under reduced motion.قصيرة وملموسة وقابلة للمقاطعة. الضغطة تصغّر العنصر قليلًا ثم ترتد. والدخول بالأنماط CSS وحدها ولا ينتظر سكربتًا. وكل شيء يتوقف عند طلب تقليل الحركة.
- Fastسريعة
110ms - Baseعادية
200ms - Slowبطيئة
340ms
07
Iconographyالأيقونات
Phosphor, one family: rounded and warm. Regular weight in chrome, duotone for anything active or selected. Icons that point along reading direction flip in Arabic.فوسفور، عائلة واحدة: مدوّرة ودافئة. الوزن العادي في الواجهة، وثنائي اللون لكل ما هو نشط أو محدد. والأيقونات التي تشير باتجاه القراءة تنقلب في العربية.
Regularعادية
Duotone, activeثنائية اللون، للنشط
08
Patternsالأنماط
Original geometry inspired by Sadu weaving and by the strokes of an Arabic pen. Every pattern is drawn in the current text colour, so every theme tints it. Use them sparingly: empty states, covers, bands and backgrounds, never behind long text.هندسة أصيلة مستوحاة من نسيج السدو ومن خطوط القلم العربي. كل نمط مرسوم بلون النص الحالي، فتصبغه كل سمة بلونها. استعملها باعتدال: في الحالات الفارغة والأغلفة والأشرطة والخلفيات، وليس خلف نص طويل.
Saduالسدو
Sadu diamondمعيّن السدو pat-sadu-diamondLadderالسلّم pat-sadu-ladderEyeالعين pat-sadu-eyeTeethالأسنان pat-sadu-teeth
Pen strokesخطوط القلم
Alefالألف pat-pen-alefKashidaالكشيدة pat-pen-kashidaNuqtaالنقطة pat-pen-nuqtaBarbsالأهداب pat-pen-barbsLoopالحلقة pat-pen-loop
Woven bandالشريط المنسوج
As a CSS backgroundخلفية بلغة CSS
Add the class and set the colour. For example, class pat-sadu-diamond with a text colour utility.أضف الصنف واضبط اللون. مثلًا الصنف pat-sadu-diamond مع صنف للون النص.
<div class="pat-sadu-diamond h-40 text-accent-ink" style="--pat-scale: 1.2"></div>
09
Illustrationالرسوم التوضيحية
Built from a few simple shapes: a reed pen with a cut nib, an ink drop, a sweeping pen stroke, sheets of paper and a woven band. No stock art, no gradients that do not come from the theme.تُبنى من أشكال بسيطة قليلة: قلم قصب بسنّ مشطوفة، وقطرة حبر، وخط قلم منساب، وأوراق، وشريط منسوج. لا صور جاهزة، ولا تدرجات لا تأتي من السمة.
Partsالأجزاء
Scenesالمشاهد
11
Store screenshotsلقطات المتجر
Real screens, large type, one idea each. The frame uses a soft rounded device and a pattern band.شاشات حقيقية وخط كبير وفكرة واحدة لكل لقطة. يستعمل الإطار جهازًا ناعم الزوايا وشريط نمط.
Write on any page
العربية، مرتّبة كما يجب
12
Email headerترويسة البريد
Your invitation to Risha
Handwriting, PDFs and documents in one quiet notebook. Arabic and English, each one at home.
دعوتك إلى ريشة
الكتابة بخط اليد وملفات PDF والمستندات في دفتر واحد هادئ. العربية والإنجليزية، كلٌّ منهما في بيتها.
A 600 pixel wide header: the feather, the name and a woven band. Plain background so every mail client shows it.ترويسة بعرض ٦٠٠ بكسل: الريشة والاسم وشريط منسوج. خلفية سادة ليعرضها كل عميل بريد.
13
Favicon and app iconأيقونة المتصفح وأيقونة التطبيق
Generated sizesالأحجام المولَّدة
16
32
48
180
192
512
The favicon and the app icon are the supplied icon file, resized, never redrawn. Android adaptive icons use the feather alone on near black, inside the safe zone.أيقونة المتصفح وأيقونة التطبيق هما ملف الأيقونة المرفق بعد تغيير حجمه، ولا يُعاد رسمه. وأيقونات أندرويد المتكيّفة تستعمل الريشة وحدها على أسود مائل إلى الدفء داخل المنطقة الآمنة.
adaptive-foreground-1024.png
14
Do and do notافعل ولا تفعل
Doافعل: Plenty of paper around the contentورق وفير حول المحتوى
Doافعل: One accent, used for meaningلون تمييز واحد يُستعمل للمعنى
Doافعل: Soft rounded rectanglesمستطيلات ناعمة مدوّرة
Do notلا تفعل: Sharp corners or pill buttonsزوايا حادّة أو أزرار كبسولية
Do notلا تفعل: Several competing coloursألوان كثيرة متنافسة
Do notلا تفعل: Patterns behind paragraphsأنماط خلف الفقرات
15
Filesالملفات
Logo files, pattern SVGs and the share image templates live in the brand folder of the repository.ملفات الشعار وأنماط SVG وقوالب صور المشاركة في مجلد brand من المستودع.
- brand/logo-mark.png
- brand/logo-icon.png
- brand/icons/
- brand/patterns/*.svg
- brand/templates/og-card.svg
- brand/templates/store-screenshot.html
- brand/templates/email-header.html
- docs/BRAND.md
10
Social and share imagesصور المشاركة
Every page shares a 1200 by 630 card made from the same parts: paper, a pattern band, the feather and a serif headline.كل صفحة تُشارَك ببطاقة ١٢٠٠ في ٦٣٠ من الأجزاء نفسها: الورق وشريط نمط والريشة وعنوان بخط سيريف.
Think on paper.
فكّر على الورق.