ATLAS Meridia

Mission

Brand Essence

Three pillars define who we are and how we operate.

Brand Story

Brand Personality

If ATLAS Meridia were a person, they would be...

Primary Wordmark

The ATLAS Meridia wordmark is our primary brand identifier. It uses Cormorant Garamond with "ATLAS" in medium weight uppercase and "Meridia" in light italic.

Clear Space

Maintain minimum clear space around the logo equal to the cap-height of the "A" in ATLAS. This ensures the wordmark has room to breathe and maintains visual impact.

Minimum Size

To ensure legibility, the wordmark should never appear smaller than the minimum sizes specified below.

Logo Don'ts

To maintain brand integrity, avoid these common misuses of the wordmark.

Navy Scale

The primary dark palette. Navy-800 serves as the main dark background, with lighter values for layering and text.

Cream Scale

The warm light palette. Cream-200 is the primary background, cream-350 for dark mode body text (reduced halation), cream-400 for dark mode display text.

Accent Colors

Gold serves as the primary accent for CTAs and highlights. Use copper sparingly for secondary emphasis.

Semantic Colors

Functional colors for communicating status and feedback. Use consistently across all interfaces.

Display Font — Cormorant Garamond

Used for headlines, titles, and display text. Light weight (300) for elegance, with italic for emphasis.

Body Font — Crimson Pro

Our primary body font, optimized for screen readability with warmth and bookish character.

UI Font — DM Sans

Reserved for small text: labels, captions, navigation, footnotes, and interface elements.

Monospace Font — IBM Plex Mono

Reserved for code snippets, technical references, CSS class names, and any content requiring a fixed-width typeface.

Traditional Mandarin — Noto Serif TC

For Traditional Chinese content and bilingual posts. Noto Serif TC (思源宋體) pairs with Crimson Pro's warmth and bookish character.

/* Auto-detect Chinese content */
.post-content:lang(zh-Hant),
.post-content:lang(zh-TW) {
  font-family: var(--font-body-zh);
  font-size: calc(var(--text-body) * 1.05);
  line-height: 2;
}

/* For tagged Chinese posts */
.tag-chinese .post-content,
.tag-中文 .post-content {
  font-family: var(--font-body-zh);
}

Body Copy in Context

Compare body text sizes to find the optimal reading experience. Dark mode samples use lighter weight (300) and subtle letter-spacing.

Responsive Typography

Body copy scales with screen size for optimal reading at any distance. Larger screens get larger text; mobile devices use more compact sizing.

/* Base mobile-first */
--text-body: 1.125rem;    /* 18px */
--body-line-height: 1.7;

/* Tablet */
@media (min-width: 768px) {
  :root {
    --text-body: 1.25rem;  /* 20px */
    --body-line-height: 1.75;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    --text-body: 1.5rem;   /* 24px */
    --body-line-height: 1.8;
  }
}

/* Reading-focused pages only */
.post-template .post-content,
.page-template .page-content {
  font-size: var(--text-body);
  font-weight: var(--body-weight);
  letter-spacing: var(--body-tracking);
  line-height: var(--body-line-height);
}

/* Card excerpts stay compact */
.post-card-excerpt {
  font-size: var(--text-base);  /* 18px */
  line-height: 1.6;
}

/* Fluid body: 18px → 24px */
--text-body: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);

/* Fluid display: 32px → 56px */
--text-display: clamp(2rem, 1.5rem + 2vw, 3.5rem);

Type Scale

A modular scale from 11px to 56px. Use display font for larger sizes, body font for base-xl, UI font for xs-sm.

Letter Spacing (Tracking)

Control horizontal rhythm and emphasis. Wider tracking for small caps and labels, tighter for large display text.

Line Height (Leading)

Vertical rhythm affects readability and density. Tighter for headlines, looser for body text.

Brand Voice

Our voice is the consistent personality that comes through in all communications. It doesn't change—only the tone adapts to context.

Tone by Context

While voice stays constant, tone shifts based on situation. Here's how we adapt.

Writing Guidelines

Practical rules for writing in the ATLAS Meridia voice.

Spacing Scale

An 8px-based scale with some 4px increments for fine-tuning. Use consistently for padding, margins, and gaps.

Content Widths

Prose content should be constrained for optimal reading. Use these max-widths consistently.

Shadows

Subtle elevation system using navy-tinted shadows. Use sparingly to create visual hierarchy.

Border Radius

Minimal radius values for subtle softening. Sharp enough to feel precise, soft enough to feel approachable.

Transitions

Three timing values for motion. Fast for micro-interactions, base for standard UI, slow for emphasis.

Hover over the squares above to see each timing in action

Buttons

Three button styles for different contexts. Primary for main CTAs, outline for secondary actions, ghost for dark backgrounds.

Links

Inline links use gold underlines. Subtle links for navigation and secondary text.

Labels

Section labels and metadata use DM Sans with wide letter-spacing.

Timing

Three timing presets. Use fast for micro-interactions, base for most transitions, slow for larger animations. Hover to preview.

Easing

Use standard ease for most transitions. The brand's wave motifs should use ease-in-out for smooth oscillation.

Content Cards

Ghost's editor produces cards with .kg-* classes. Style these to match our brand aesthetic.

Image Width Variants

Ghost images can break out of the content container for visual impact. Define negative margins for wide/full variants.

.kg-width-wide {
  position: relative;
  width: 85vw;
  min-width: 100%;
  margin: auto calc(50% - 50vw);
  transform: translateX(calc(50vw - 50%));
}

.kg-width-full {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
}

Blockquotes

Two blockquote styles for different emphasis levels.

Gallery Card

Multi-image galleries with responsive grid layout.

Membership UI

Subscription forms, CTAs, and member-specific content styling.

Form States

Ghost adds CSS classes to forms during submission. Style loading, success, and error states.

Post Components

Common elements for post listings, archives, and article pages.

Navigation

Header and footer navigation patterns.

Ghost Class Reference

Quick reference for Ghost-generated CSS classes that need custom styling.