Typography
Clear, modern, and accessible typography that communicates with confidence.
Primary Font
Montserrat
A geometric sans-serif that exudes modernity and professionalism.
Usage
- • Headlines and titles
- • Navigation elements
- • Buttons and CTAs
- • Logo lockups
Characters & Numbers
Aa Bb Cc Dd Ee
0123456789 !@#$%
Secondary Font
Open Sans
A humanist sans-serif designed for legibility across digital interfaces.
Usage
- • Body text and paragraphs
- • Form inputs and labels
- • Descriptions
- • Long-form content
Characters & Numbers
Aa Bb Cc Dd Ee
0123456789 !@#$%
Arabic Font
Cairo
A contemporary typeface designed specifically for screens, balancing functional beauty and tradition.
Usage
- • Arabic headlines
- • Arabic body text
- • RTL layouts
- • Arabic UI elements
Characters & Numbers
أ ب ت ث ج ح خ
١٢٣٤٥٦٧٨٩٠
Type Scale
72px / 1.1
Hero headlines, landing pages
48px / 1.2
Page titles
36px / 1.25
Section headers
28px / 1.3
Subsection headers
24px / 1.35
Card titles
20px / 1.4
Small headers
18px / 1.4
Labels, captions
18px / 1.6
Lead paragraphs
16px / 1.6
Body text
14px / 1.5
Secondary text
12px / 1.4
Captions, meta
12px / 1.4
Labels, tags
Font Weights
Fkra AI
Light (300)
Fkra AI
Regular (400)
Fkra AI
Medium (500)
Fkra AI
Semibold (600)
Fkra AI
Bold (700)
Fkra AI
Extrabold (800)
Text Styles
Paragraph
Our platform empowers learners through AI-driven personalization. Every feature is designed with the learner in mind, creating pathways to success that adapt to individual needs and goals.
Links
Learn more about our mission and values.
Visited: documentation
Emphasis
Bold text for emphasis
Italic text for titles or quotes
Monospace Monospace for code
Lists
- First item in the list
- Second item with details
- Third important point
Text Alignment
Left-aligned
Left-aligned text is the default for body copy. It creates a strong left edge that guides the eye.
Center-aligned
Center alignment works best for short headlines and isolated elements.
Right-aligned
Right-aligned is standard for Arabic/RTL content and some captions.
Line Length
This line is too narrow making it difficult to read and causing too many line breaks.
This is the ideal line length for comfortable reading. The eye can easily track from the end of one line to the beginning of the next without losing its place.
This line is too wide and spans the entire container width making it exhausting to read because the eye must travel too far from the end of one line to find the beginning of the next.