Mandala

DESIGN.md

# Mandala — Design Guide

Mandala uses a warm editorial voice for an agency portfolio. Serif headlines set the tone, neutral surfaces support the work, and yellow identifies moments of emphasis.

## Typography

Libre Caslon Text gives the display system its literary character. Geist keeps body copy and controls direct and readable.

| Element | Font | Desktop | Tablet | Phone |
| --- | --- | --- | --- | --- |
| Page heading | Libre Caslon Text | `72px`, weight `400`, line-height `1.2`, tracking `-0.04em` | `58px`, same weight, line-height, and tracking | `32px`, same weight, line-height, and tracking |
| Section heading | Libre Caslon Text | `40px`, weight `400`, line-height `1.3`, tracking `-0.04em` | `40px`, same settings | `32px`, same settings |

Unlock the design guide

DESIGN.md is included while an eligible library subscription is active.

About

Mandala uses a warm editorial voice for an agency portfolio. Serif headlines set the tone, neutral surfaces support the work, and yellow identifies moments of emphasis.

Typography

Template fonts, weights, and line heights from the guide.

Page heading

The quick brown fox jumps

Font: Libre Caslon Text · Desktop: 72px, weight 400, line-height 1.2, tracking -0.04em · Tablet: 58px, same weight, line-height, and tracking · Phone: 32px, same weight, line-height, and tracking

Section heading

The quick brown fox jumps

Font: Libre Caslon Text · Desktop: 40px, weight 400, line-height 1.3, tracking -0.04em · Tablet: 40px, same settings · Phone: 32px, same settings

More Design.md for you

See all

Yudhistira

Light
Minimal
Sans-Serif

Lesmana

Dark
Minimal
Serif

Kurawa

Light
Minimal
Sans-Serif