DESIGN SYSTEM EDITION · v0.8.3.8.4

Paragraph Library

Thirty reusable 2026 design treatments powered by the shared Monarch fonts, colors, typography, spacing, Flow, and token architecture.

Source: components/typography/paragraph.php

Tokens: --font-text, --fs-md, --space-md

Classes: p, .lead, .section-intro

Component DirectoryStyle Guide
01

Default

PresentationContent

Standard Monarch treatment

A practical Default treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'default']); ?>
02

Minimal

PresentationContent

Reduced decoration and visual weight

A practical Minimal treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'minimal']); ?>
03

Outlined

UtilityContent

Transparent surface with a defined tokenized stroke

A practical Outlined treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'outlined']); ?>
04

Soft

CommunityContent

Quiet low-contrast surface

A practical Soft treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'soft']); ?>
05

Elevated

CommerceMarketing

Layered surface with tokenized shadow

A practical Elevated treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'elevated']); ?>
06

Compact

ProductivityUtility

Dense interface treatment

A practical Compact treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'compact']); ?>
07

Spacious

PresentationMarketing

Generous presentation rhythm

A practical Spacious treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'spacious']); ?>
08

Inline

ContentCommunity

Designed to sit within surrounding content

A practical Inline treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'inline']); ?>
09

Stacked

PresentationProductivity

Vertical component anatomy

A practical Stacked treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'stacked']); ?>
10

Split

MarketingCommerce

Two-region composition

A practical Split treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'split']); ?>
11

Accent Border

PresentationContent

Strong accent edge with neutral body

A practical Accent Border treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'accent-border']); ?>
12

Highlight

MarketingCommerce

Attention without semantic status

A practical Highlight treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'highlight']); ?>
13

Feature

MarketingPresentation

Prominent section anchor

A practical Feature treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'feature']); ?>
14

Showcase

EntertainmentMarketing

Highly visual featured presentation

A practical Showcase treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'showcase']); ?>
15

Signature

PresentationMarketing

Distinct Monarch branded treatment

A practical Signature treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'signature']); ?>
16

Editorial

ContentPresentation

Long-form and publishing treatment

A practical Editorial treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'editorial']); ?>
17

Corporate

PresentationProductivity

Structured restrained business treatment

A practical Corporate treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'corporate']); ?>
18

Marketing

MarketingCommerce

Promotion and conversion treatment

A practical Marketing treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'marketing']); ?>
19

Commerce

CommerceMarketing

Transactional information treatment

A practical Commerce treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'commerce']); ?>
20

Dashboard

ProductivityUtility

Metrics and application interface treatment

A practical Dashboard treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'dashboard']); ?>
21

Community

CommunityContent

People and participation treatment

A practical Community treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'community']); ?>
22

Entertainment

EntertainmentCommunity

Media and leisure treatment

A practical Entertainment treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'entertainment']); ?>
23

Utility

UtilityProductivity

Functional tool-interface treatment

A practical Utility treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'utility']); ?>
24

Information

UtilityContent

Neutral educational or system information

A practical Information treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'info']); ?>
25

Success

CommerceProductivity

Completed or positive state

A practical Success treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'success']); ?>
26

Warning

CommerceProductivity

Cautionary state requiring attention

A practical Warning treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'warning']); ?>
27

Danger

UtilityProductivity

Critical, destructive, or failed state

A practical Danger treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'danger']); ?>
28

Muted

ContentPresentation

Secondary lower-priority information

A practical Muted treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'muted']); ?>
29

Gradient

MarketingEntertainment

Centralized Monarch gradient treatment

A practical Gradient treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'gradient']); ?>
30

Inverse

EntertainmentMarketing

High-contrast treatment for strong surfaces

A practical Inverse treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites. This paragraph demonstrates readable measure, rhythm, hierarchy, and the shared Monarch font architecture.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'paragraph', ['style' => 'inverse']); ?>