ATLAS Meridia

Brand Style Guide v2.0

01

Brand Essence

Our Orientation

The name 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.

Core Values

Curiosity

We follow interesting questions to unexpected places, believing that genuine exploration precedes meaningful discovery.

Rigor

We think carefully, test thoroughly, and build things that work—understanding that craft and constraint fuel creativity.

Craft

We believe in the power of well-made things—elegant solutions, refined interfaces, and thoughtful systems.

02

Color System

Navy Scale

Our primary dark palette. Richer and deeper than pure black, with enough warmth to pair naturally with amber accents.

950
900
800
700
600
500
400
300

Warm Cream Scale

Our light palette. Warmer than pure white, creating a natural canvas that complements the amber accent.

50
100
200
300
400
500
600

Amber-Coral Accent

Our signature warmth. Use for CTAs, highlights, and moments that need energy. The gradient from light to deep creates dimensionality.

Accent Light #f4a870
Accent Primary #e08045
Accent Dark #c06835
Accent Deep #a05528

Supporting Tones

Use sparingly to add depth and variety without diluting the core palette.

Copper #b87040
Terracotta #c46850
Success #5a8a65
Error #b54a4a
03

Typography

Display Type

Cormorant Garamond for headlines and display text. Light weight (300) with selective italics for emphasis. Sized generously to honor the delicate stroke weight.

Light Mode

Mapping the Unknown

Dark Mode

Mapping the Unknown

Body Type

Source Serif 4 for long-form reading. 22px base with 1.65 line height. Variable font with optical sizing for crisp rendering at any scale. In dark mode, drop to weight 300 and add slight letter-spacing.

Light Mode — 400 weight

The best tools don't just execute commands—they extend how we think. They become natural extensions of intention, invisible until needed, powerful when engaged. We build for that moment of seamless collaboration between human intuition and machine capability.

Dark Mode — 300 weight, +0.01em tracking

The best tools don't just execute commands—they extend how we think. They become natural extensions of intention, invisible until needed, powerful when engaged. We build for that moment of seamless collaboration between human intuition and machine capability.

Type Scale

Sized up across the board for Garamond's delicate strokes.

5xl / 80px Display
4xl / 60px Headlines
3xl / 48px Page Titles
2xl / 36px Section Titles
xl / 28px Subheadings
lg / 24px Lead Paragraphs
body / 22px Article body copy
base / 18px UI text
sm / 14px Captions, labels
xs / 12px Metadata, code

Font Stack

Display

Cormorant Garamond

Headlines, titles, wordmark

Body

Source Serif 4

Long-form reading, articles

UI

DM Sans

Buttons, labels, navigation

Mono

IBM Plex Mono

Code, metadata, values

04

Components

Buttons

Primary buttons use a gradient for dimensionality and warmth. Outline and ghost variants for secondary actions.

Light Background
Dark Background
Read More →

Links

Inline links use accent-colored underlines. Subtle links for navigation and metadata.

Inline Link

Read our latest experiment on knowledge management systems.

Subtle Link
Lab About Archive

Form Elements

Inputs inherit the body font. Focus states use the accent color with a soft glow.

Text Input
Dark Context

Logo Treatment

The wordmark uses Cormorant Garamond: "ATLAS" in medium weight with wide tracking, "Meridia" in light italic.

Light Background

ATLAS Meridia

Dark Background

ATLAS Meridia

05

Spacing

Spacing Scale

A geometric scale based on 4px (0.25rem). Use consistently to create visual rhythm.

space-1 / 4px
space-2 / 8px
space-3 / 12px
space-4 / 16px
space-5 / 24px
space-6 / 32px
space-8 / 48px
space-10 / 64px
space-12 / 96px

Content Widths

Constrain content for optimal reading. Prose width targets ~65 characters per line.

--width-prose: 40rem (640px)

--width-content: 64rem (1024px)

--width-full: 80rem (1280px)

06

Motion

Timing

Three durations cover most interactions. Fast for micro-interactions, base for state changes, slow for entrances and emphasis. Hover to preview.

150ms — fast
300ms — base
500ms — slow

Easing

Standard ease for most transitions. CSS ease provides natural acceleration and deceleration.

transition: all 300ms ease;