ATLAS Meridia Style Guide

Live Preview

Preview components with the current token values.

Typography

Display Heading

Section Heading

Body text in Lora. The quick brown fox jumps over the lazy dog. This is how long-form content appears in the design system, with comfortable reading line height and subtle letter spacing.

UI text in DM Sans — labels, navigation, meta information

Monospace code

Buttons

Cards

Card Title

Card description with secondary text styling.

Highlighted Card

With accent border for emphasis.

Accent Background

Subtle accent tint.

Form Elements

Alerts

Success

Operation completed successfully.

Warning

Please review before continuing.

Error

Something went wrong. Please try again.

Article Prose

Article Title

December 16, 2025 — 5 min read

The opening paragraph with a drop cap. This demonstrates how article content appears with the ATLAS Meridia design tokens applied. The typography is carefully tuned for comfortable reading.

Regular paragraph text continues here. Links look like this. The body font is Lora, chosen for its readability in long-form content.

Blockquotes are styled with an accent border and italic text, providing visual distinction for quoted content.