Typography

Our typographic system balances institutional authority (Cairo) with functional speed (Inter), using a fluid Major Third scale for ultimate clarity.

Inter (UI Primary)

The modern standard for clarity. Used for all structural UI, dashboards, and high-density data displays.

Cairo (Institutional Heading)

A geometric font that provides corporate authority for Arabic/Middle-East markets. Scaled with Inter metrics.

Fluid Major Third Scale

Mathematical 1.250 scale ensures clarity. We use clamp() logic to prevent unreadable small sizes on mobile.

Fluid Type Scale Specimen

Our hierarchy derived from a Major Third scale (1.250 ratio) using CSS Clamp() logic.

Display XL

text-7xl64px–80px / Black

GateFlow Access Control

Heading L

text-5xl48px–60px / Black

Operational Resilience

Heading M

text-3xl30px–36px / Bold

Biometric Gateway Interface

Body L

text-lg18px / Medium

An enterprise-grade design system built for institutional trust and community security.

Body M / Base

text-base16px / Regular

The system adapts to the user context automatically.

Caption S

text-xs12px / Bold

VERSION 3.0.0-ALPHA

RTL Parity (Cairo)

We use Cairo for Arabic headings. Its geometric construction aligns perfectly with Inter's humanist spacing, ensuring no layout shift during language toggles.

Live RTL Specimen

نظام إدارة الدخول الذكي GateFlow.

المبادئ والقيم الجوهرية التي تبني تجربة GateFlow في الشرق الأوسط.

Variable Logical Scale

Every font size is mapped to a logical property in the tokens package. We never use static 'px' values for UI elements, ensuring consistent behavior across device resolutions.

TokenProperty

--ds-text-baseclamp(1rem, 2vw, 1.25rem)

--ds-text-displayclamp(2.5rem, 5vw, 4rem)

The Cine-Serious Motion Tint

Our typography isn't static. In Phase 5, all headings will inherit "Cine-Entrance" staggered animations. Each word is slightly offset by 50ms, creating a weight and presence derived from high-end architectural and automotive brand identities.