Skip to content
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
    • 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 script direction. This ensures optimal readability for both Latin and Arabic content without component-level overrides.

Aa
Primary Font (Latin)
$font-family-sans → --ds-font-family-sans
Inter, system-ui, …
أبجد
Primary Font (Arabic)
$font-family-arabic → --ds-font-family-arabic
Cairo, 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.