Skip to content
No background activity
Aggarly OS
  • Getting Started
    • Introduction
  • Foundations
    • Colors
    • Spacing
    • Radius
    • Typography
    • Shadows
    • Z-Index
    • Gradients
    • Tokens
    • RTL & Direction
    • Theming
  • Layout
    • Containers
    • Grid System
    • Layout Utilities
  • Components
    • Alerts
    • Avatars
    • Buttons
    • Button Group
    • Badges
    • Inputs
    • Select
    • Checkbox
    • Counters-timers
    • Radio
    • Switch
    • Stepper
    • Select-pro
    • Cards
    • Modals
    • Stacked dialogs
    • Dropdown
    • Popover
    • Tooltip
    • Accordion
    • Breadcrumb
    • Tabs
    • Navbar
    • List Group
    • Toasts
    • Skeleton
    • Pagination
    • Progress
    • Table
    • Icons
    • Form
    • Ribbons
    • Spinner
    • Offcanvas
    • Feedback
    • Grid
    • Data UI
  • Data UI
    • Overview
  • Platform
    • Reference DataCore
  • Widgets
    • KPI
    • Analytics
    • Behavior
  • Brand
    • Logo
    • Brand Usage
Foundations/Typography

Typography

Typography in Aggarly Platform is token-driven and semantic. Font families, sizes, weights, and text utilities are designed to maximize clarity, accessibility, and calmness in workspace admin-facing interfaces.

Font Family

Aggarly Platform uses different primary fonts depending on the document language: Inter for English and Cairo for Arabic. Both are self-hosted from pinned, OFL-licensed files (ADR-0064), load only the character subsets a page uses, and need no component-level overrides.

Aa
Primary Font (Latin)
$font-family-sans → --ds-font-family-sans
Inter, 'Cairo Arabic', 'Inter Fallback', system-ui, …
أبجد
Primary Font (Arabic)
$font-family-arabic → --ds-font-family-arabic
Cairo, 'Cairo Fallback', system-ui, …

Type Preview (Latin)

Heading 1 — Page Title
Heading 2 — Section Title
Heading 3 — Subsection
Heading 4 — Group Label
Heading 5 — Minor Label
Heading 6 — Metadata

This is body text using the default Latin typography. It is optimized for long-form reading in dashboards, forms, and documentation.

This is muted text, typically used for descriptions, helper text, and timestamps.

This is soft text, used sparingly for subtle context.

معاينة الخط (العربية)

العنوان الرئيسي
عنوان القسم
عنوان فرعي

هذا نص عربي يستخدم الخط الافتراضي لنظام Aggarly Platform. تم اختيار الخط بعناية ليكون مريحًا للقراءة في لوحات التحكم والنماذج.

هذا نص ثانوي يُستخدم للوصف أو المعلومات المساعدة.

Font Size Tokens

Aa
XS
$font-size-xs → --ds-font-size-xs
var(--ds-font-size-xs)
Aa
SM
$font-size-sm → --ds-font-size-sm
var(--ds-font-size-sm)
Aa
MD
$font-size-md → --ds-font-size-md
var(--ds-font-size-md)
Aa
LG
$font-size-lg → --ds-font-size-lg
var(--ds-font-size-lg)
Aa
XL
$font-size-xl → --ds-font-size-xl
var(--ds-font-size-xl)
Aa
2XL
$font-size-2xl → --ds-font-size-2xl
var(--ds-font-size-2xl)

Font Weight Tokens

Weight
Normal
$font-weight-normal → --ds-font-weight-normal
var(--ds-font-weight-normal)
Weight
Medium
$font-weight-medium → --ds-font-weight-medium
var(--ds-font-weight-medium)
Weight
Semibold
$font-weight-semibold → --ds-font-weight-semibold
var(--ds-font-weight-semibold)
Weight
Bold
$font-weight-bold → --ds-font-weight-bold
var(--ds-font-weight-bold)

Usage Guidelines

  • Use semantic heading utilities (.h1 – .h6) instead of raw browser defaults.
  • Do not apply font-family at the component level. Script switching is handled globally.
  • Use .text-body for primary reading content.
  • Use .text-muted and .text-soft for secondary information only.
  • Never hardcode font sizes or weights — always rely on tokens or typography utilities.