Brand Style Guide
Version 1.3 · December 1, 2025
ATLAS Meridia is a laboratory for exploring what becomes possible when artificial intelligence, knowledge architecture, and creative technology intersect.
Three pillars define who we are and how we operate.
We approach every problem with genuine intellectual curiosity, valuing questions as much as answers.
We pursue depth over breadth, building understanding through systematic exploration and careful documentation.
We believe in the power of well-made things—elegant solutions, refined interfaces, and thoughtful systems.
The name itself speaks to our orientation: an atlas maps territories both known and unknown, while a meridian marks the line from which all other measurements are taken.
We aim to be both—cartographers of emerging possibility and a fixed point of reference in a rapidly shifting landscape. Our work exists at the meridians: the invisible lines where different fields of knowledge converge. At these boundaries, the unexpected emerges.
If ATLAS Meridia were a person, they would be...
We take time to consider deeply, but remain approachable and warm.
We know our craft and share it generously, without condescension.
We care about details because they matter, not to show off.
We embrace bold exploration within a framework of thoughtful practice.
The ATLAS Meridia wordmark is our primary brand identifier. It uses Cormorant Garamond with "ATLAS" in medium weight uppercase and "Meridia" in light italic.
ATLAS Meridia
ATLAS Meridia
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.
ATLAS Meridia
X X X XX = Cap-height of "A" in the wordmark
To ensure legibility, the wordmark should never appear smaller than the minimum sizes specified below.
ATLAS Meridia
Minimum: 14px cap-height / 120px width
ATLAS Meridia
Minimum: 0.5" / 12mm width
To maintain brand integrity, avoid these common misuses of the wordmark.
ATLAS M
Don't stretch
ATLAS Meridia
Don't recolor
ATLAS Meridia
Don't rotate
ATLAS Meridia
Don't change font
The primary dark palette. Navy-800 serves as the main dark background, with lighter values for layering and text.
The warm light palette. Cream-200 is the primary light background. Cream-500 is dark mode primary text, with 550/600 for secondary and muted text.
Gold serves as the primary accent for CTAs and highlights. Use copper sparingly for secondary emphasis.
Functional colors for communicating status and feedback. Use consistently across all interfaces.
Used for headlines, titles, and display text. Light weight (300) for elegance, with italic for emphasis.
Navigating the edges of intelligence
Navigating the edges of intelligence
Dark Mode Text Hierarchy
cream-500 · #d4c9b8 · Primary text (display + body)
Navigating the edges of intelligence
The most interesting discoveries happen where disciplines converge. At these boundaries—where technology meets craft, where data meets intuition—the unexpected emerges.
cream-550 · #c4b9a8 · Secondary text
Used for supporting text, captions, and secondary information that should recede slightly from primary content while remaining fully readable.
cream-600 · #b0a593 · Muted text
For metadata, timestamps, helper text, and other tertiary information. Use sparingly—still needs to be readable but clearly subordinate.
Our primary body font, optimized for screen readability with warmth and bookish character.
The most interesting discoveries happen where disciplines converge. At these boundaries, the unexpected emerges. The tools that will matter tomorrow are rarely obvious today.
Warm, bookish character with subtle calligraphic qualities. Excellent italics. Ideal for long-form reading and editorial content.
Reserved for small text: labels, captions, navigation, footnotes, and interface elements.
Section Label • Navigation • Footnotes
Used sparingly for functional text that needs to recede visually while remaining highly legible at small sizes.
Reserved for code snippets, technical references, CSS class names, and any content requiring a fixed-width typeface.
--font-mono: 'IBM Plex Mono', monospace;
.kg-image-card { max-width: 100%; }
Used for inline code and block-level code examples throughout documentation and technical content.
For Traditional Chinese content and bilingual posts. Noto Serif TC (思源宋體) pairs with Crimson Pro's warmth and bookish character.
最有趣的發現往往發生在學科交匯之處
The most interesting discoveries happen where disciplines converge
我們相信，明天重要的工具今天很少顯而易見。它們源於實驗，源於追隨好奇心的線索，沒有預設的目的地。這就是實驗室的工作：在必要之前探索可能性。每一段都應該吸引讀者更深入地閱讀。
ATLAS Meridia 是一個探索人工智慧與創意技術交匯的實驗室。我們在 San Francisco 運營，專注於開發創新工具和解決方案。
Light 300
實驗室
Regular 400
實驗室
Medium 500
實驗室
SemiBold 600
實驗室
--font-body-zh: 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif;
--font-ui-zh: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
/* 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);
}Compare body text sizes to find the optimal reading experience. Dark mode samples use lighter weight (300) and subtle letter-spacing.
The most interesting discoveries happen where disciplines converge. At these boundaries—where technology meets craft, where data meets intuition—the unexpected emerges. We believe the tools that will matter tomorrow are rarely obvious today.
The most interesting discoveries happen where disciplines converge. At these boundaries—where technology meets craft, where data meets intuition—the unexpected emerges. We believe the tools that will matter tomorrow are rarely obvious today.
The most interesting discoveries happen where disciplines converge. At these boundaries—where technology meets craft, where data meets intuition—the unexpected emerges. We believe the tools that will matter tomorrow are rarely obvious today.
The most interesting discoveries happen where disciplines converge. At these boundaries—where technology meets craft, where data meets intuition—the unexpected emerges. We believe the tools that will matter tomorrow are rarely obvious today.
The most interesting discoveries happen where disciplines converge. At these boundaries—where technology meets craft, where data meets intuition—the unexpected emerges. We believe the tools that will matter tomorrow are rarely obvious today.
The most interesting discoveries happen where disciplines converge. At these boundaries—where technology meets craft, where data meets intuition—the unexpected emerges. We believe the tools that will matter tomorrow are rarely obvious today.
--text-body: 1.25rem; /* 20px — update to preferred size */
--body-weight: 400; /* 300 in dark mode */
--body-tracking: 0; /* 0.01em in dark mode */
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;
}
}Ghost applies template-specific classes to the <body> element. Use these to apply reading-optimized typography only where it matters.
.post-template — Individual blog posts
.page-template — Static pages
.tag-longform — Tagged long-form content
.home-template — Homepage
.tag-template — Tag archives
.author-template — Author pages
/* 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;
}For smooth scaling without breakpoint jumps, use CSS clamp(). The text will fluidly scale between min and max values.
/* 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);A modular scale from 11px to 56px. Use display font for larger sizes, body font for base-xl, UI font for xs-sm.
Control horizontal rhythm and emphasis. Wider tracking for small caps and labels, tighter for large display text.
Large Display Headlines
Standard body text uses normal letter spacing for optimal readability at paragraph length.
Subheadings and Medium Emphasis
Section Labels and Navigation
Spaced Caps · Decorative Use
Vertical rhythm affects readability and density. Tighter for headlines, looser for body text.
Headlines and display text benefit from tight leading to create visual cohesion across multiple lines.
Subheadings and introductory paragraphs use snug leading to balance density with readability.
Standard body copy at base size. This line height provides comfortable reading for extended passages without feeling too open or too dense.
More generous vertical space for situations where increased readability is prioritized, such as instructional content or accessibility considerations.
Maximum spacing for small text, lists, or content that benefits from clear separation between lines.
Our voice is the consistent personality that comes through in all communications. It doesn't change—only the tone adapts to context.
We favor clarity above all. Complex ideas, simple language.
Every word earns its place. We edit ruthlessly.
Intellectual but never cold. We write for humans.
No jargon, no hype. We say what we mean.
While voice stays constant, tone shifts based on situation. Here's how we adapt.
Thoughtful and exploratory. We're sharing discoveries, not selling.
Example: "We've been exploring how knowledge graphs might reshape personal note-taking—here's what we've learned."
Conversational but still substantive. Share insights, not noise.
Example: "Interesting finding: the best AI prompts read like good briefs to a human collaborator."
Direct and helpful. Clarity is kindness.
Example: "To get started, create a new project folder and run the setup script."
Personal and respectful of time. Get to the point gracefully.
Example: "Thanks for reaching out. I'd love to hear more about what you're building."
Practical rules for writing in the ATLAS Meridia voice.
An 8px-based scale with some 4px increments for fine-tuning. Use consistently for padding, margins, and gaps.
Prose content should be constrained for optimal reading. Use these max-widths consistently.
Prose (38rem / ~65 characters) — Body text, articles, editorials
Prose Wide (48rem) — Extended content, wider layouts
Content (64rem) — Grid layouts, card containers
Subtle elevation system using navy-tinted shadows. Use sparingly to create visual hierarchy.
shadow-sm
0 1px 2px
Subtle lift for cards
shadow-md
0 4px 12px
Dropdowns, popovers
shadow-lg
0 12px 32px
Modals, dialogs
Minimal radius values for subtle softening. Sharp enough to feel precise, soft enough to feel approachable.
radius-sm
2px
radius-md
4px
radius-lg
8px
Three timing values for motion. Fast for micro-interactions, base for standard UI, slow for emphasis.
transition-fast
150ms ease
Hover states, toggles
transition-base
300ms ease
Panel reveals, navigation
transition-slow
500ms ease
Page transitions, modals
Hover over the squares above to see each timing in action
Three button styles for different contexts. Primary for main CTAs, outline for secondary actions, ghost for dark backgrounds.
Inline links use gold underlines. Subtle links for navigation and secondary text.
Section labels and metadata use DM Sans with wide letter-spacing.
Gold labels for section headers and emphasis
Muted labels for secondary information
Three timing presets. Use fast for micro-interactions, base for most transitions, slow for larger animations. Hover to preview.
Use standard ease for most transitions. The brand's wave motifs should use ease-in-out for smooth oscillation.
transition: all 300ms ease;
animation: wave 8s ease-in-out infinite;
Ghost CMS generates specific HTML structures for content cards, membership features, and page templates. These guidelines ensure consistent ATLAS Meridia styling across all Ghost-generated elements.
Ghost's editor produces cards with .kg-* classes. Style these to match our brand aesthetic.
.kg-bookmark-card — Rich link previews with title, description, and thumbnail
💡 This approach works best when combined with systematic documentation practices.
.kg-callout-card — Highlighted information with optional emoji
.kg-toggle-card — Collapsible FAQ-style content
Brand Guidelines v1.0
2.4 MB
.kg-file-card — Downloadable file attachments
Ghost images can break out of the content container for visual impact. Define negative margins for wide/full variants.
.kg-width-normal
Contained within prose width (~38rem)
.kg-width-wide
Breaks out to ~85vw with negative margins
.kg-width-full
Full viewport width (100vw), no border radius
.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;
}Two blockquote styles for different emphasis levels.
"The best way to predict the future is to invent it."
blockquote — Left border accent
"Knowledge compounds. Systems scale. Craft endures.
.kg-blockquote-alt — Centered display quote
Multi-image galleries with responsive grid layout.
.kg-gallery-card — Uses .kg-gallery-container, .kg-gallery-row, .kg-gallery-image
Subscription forms, CTAs, and member-specific content styling.
Stay in the loop
Get occasional updates on experiments and discoveries.
data-members-form="subscribe" — Email collection with Ghost Portal
This post is for subscribers only
Already a member? Sign in to continue reading.
.gh-post-upgrade-cta — Appears on gated content
Free
$0
Forever
Member
$9
/month
Use data-portal="signup/TIER_ID/monthly" for direct tier links
Ghost adds CSS classes to forms during submission. Style loading, success, and error states.
.loading
.success
.error
Common elements for post listings, archives, and article pages.
How Claude and Obsidian combine to create something greater than their parts.
Kenny Liu
Founder, ATLAS Meridia · Dec 1, 2025
Header and footer navigation patterns.
ATLAS Meridia
ATLAS Meridia
© 2025 ATLAS Meridia LLC
Quick reference for Ghost-generated CSS classes that need custom styling.
Content Cards
.kg-image-card
.kg-gallery-card
.kg-bookmark-card
.kg-button-card
.kg-callout-card
.kg-toggle-card
.kg-file-card
.kg-audio-card
.kg-video-card
.kg-product-card
.kg-header-card
.kg-signup-card
Image Widths
.kg-width-normal
.kg-width-wide
.kg-width-full
Forms
[data-members-form]
[data-members-email]
.loading
.success
.error
Membership
.gh-post-upgrade-cta
[data-portal]