Typography

This page covers the articles or documentation-style typography of the ADEK Design System: Montserrat across all UI, the exact sizes and negative letter spacing from Figma, and a .adek-prose class that styles long-form content for you.

Installation

To use the typography styles, load the font and the shared stylesheets, then wrap rich content in one class.

Add the Montserrat font

<!-- Load Montserrat (weights 400 / 500 / 600 / 700) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet" />

Import the token and component stylesheets

/* Import the design tokens once, globally */
@import "adek-ui/styles/tokens.css";  /* colors, sizes, letter spacing */
@import "adek-ui/styles/adek.css";    /* components + .adek-prose */

The typography styles ship with adek.css

/* The rich-text styles live under one class: .adek-prose
   It styles h1-h4, p, ul/ol, blockquote, figure, code, and callouts
   with the exact ADEK type scale and letter spacing. */

Use the typography styles

<article class="adek-prose">
  <h2>Term overview</h2>
  <p>Enrollment climbed <strong>12%</strong> this term...</p>
  <blockquote>
    Great school experiences start with consistent design.
    <footer>- Design Team, ADEK</footer>
  </blockquote>
</article>

Examples

Below are examples and variations of the typography styles, rendered live with the ADEK tokens.

Article example

Introduction

The ADEK Design System gives every product team the same starting point: shared tokens, shared components, and shared typography, so parents, teachers, and staff always recognize where they are.

This article style is the default reading experience for long-form content such as announcements, circulars, and help articles. Body copy is Montserrat 16/24 with -0.5px letter spacing, capped at a comfortable 720px reading width.

Body text is Montserrat 16/24 with -0.5px letter spacing
Paragraph spacing is 16px
Reading width is capped at 720px

Headings

Heading level 1

36/44 Semibold with -1.5px letter spacing, used once per page for the main title.

Heading level 2

30/38 Semibold, -1.5px. Top-level sections within a page.

Heading level 3

24/32 Semibold, -1px. Sub-sections and card group titles.

Heading level 4

20/30 Semibold, -1px. The smallest heading in running text.

Images

Image caption goes here - text-sm on text-tertiary with a 12px gap below the 12px-radius image.

Quotes

Great school experiences start with consistent design - when every service looks and behaves the same, families spend their attention on what matters.
- Design Team, ADEK

Design tokens turned our reviews from pixel debates into product conversations.DTDesign Team
design@adek.gov.ae

Inline code

Use the --brand-500 token for primary actions and --radius-md for input corners; never hard-code hex values in product code. Keyboard hints render the same way: press ⌘K to search this site.

Feature text (callout)

Conclusion

Keep long-form content inside .adek-prose and the type scale, spacing, and letter spacing take care of themselves - no per-page typography decisions needed.