Archivr  ·  Brand Guidelines  ·  v1.0  ·  2025
Preserve what matters. Forever.
01
The Logo
The Archivr logo consists of two elements: the mark — a capital A in Cormorant Garamond set inside a rounded square in Terracotta — and the wordmark. Use both together as the primary logo. Never separate them in contexts where the brand is being introduced for the first time.
A
Archivr
Primary — on dark
A
Archivr
Secondary — on light

02
The Mark
Use the standalone mark when the wordmark would be redundant (favicon, app icon, avatar) or when the space is too small for the full lockup. The mark is recognizable on its own once the brand is established.
A
128 px
A
64 px
A
32 px
A
16 px

03
Clear Space
Always maintain a minimum clear space equal to half the mark's height (½H) on all sides of the lockup. Never crowd the logo with other elements.
½H
½H
½H
½H
A
Archivr
Full lockup
Minimum width: 120 px
Mark alone
Minimum size: 16 × 16 px

04
Don'ts
These are the most common mistakes. All of them dilute or distort the brand.
Archivr
✕
Don't stretch or distort the proportions
A
Archivr
✕
Don't change or recolor the logo
A
Archivr
✕
Don't add shadows, glows, or effects
A
Archivr
✕
Don't rotate or tilt the logo
A
Archivr
✕
Don't substitute a different typeface for the wordmark
A
Archivr
✕
Don't place on busy or patterned backgrounds

05
Color
The palette is organized by role. Shell and Paper form the light/dark surface pair. Terracotta is the single brand accent — use it with restraint. Amber is a secondary accent for highlights and metadata. Never introduce colors outside this palette in brand contexts.
Shell & Dark Surfaces
Shell
#141d18
App topbar, dark surfaces
Shell 2
#1c271f
Elevated dark panels
Ink
#20251f
Primary text on light
Paper & Light Surfaces
Paper
#f5f0e7
Primary content bg
Paper 2
#e9e1d2
Rows, alternating bg
Paper 3
#fffaf0
Elevated panels on light
Brand Text
#f4ead8
Text on dark & accent
Accents
Terracotta
#8d3f30
Primary brand accent, logo mark, CTAs, focus rings
Amber
#b78342
Secondary accent, metadata highlights
Ocean
#245f72
Links, informational states
Neutrals & Borders
Muted
#6b6f66
Secondary text, captions
Muted 2
#8a8d83
Tertiary text, placeholders
Line
#d2c6b5
Borders, dividers on light
Line Soft
#e5dccd
Subtle dividers, rules

06
Typography
Three typefaces cover every context. Cormorant Garamond is the brand voice — it appears in the logo, headings, and display text. Helvetica Neue handles all interface chrome. Spectral carries long-form reading content.
Display
Cormorant Garamond
Logo wordmark · Headings · Display text · Taglines

Weights: 500, 600
Google Fonts: free
Aa Bb Cc
Preserve what
matters.
The archive of a lifetime,
held with care.
Interface
Helvetica Neue
UI labels · Buttons · Nav · Captions · Body copy

Weights: 400, 550, 700
System font (macOS/iOS)
The quick brown fox jumps over the lazy dog.
Capture · Archive · Preserve · Retrieve
0123456789 & #%@!
Small caps label Button Text mono/url/code
Reading
Spectral
Article body · Long-form content · Reading mode

Weights: 400, 500
Google Fonts: free
An archive is not a graveyard. It is the opposite — a place where things are kept because they still matter, because the person who saved them believed they would matter again.
Display scale (Cormorant Garamond 600)
72 px
Archivr
48 px
Archivr
36 px
Preserve what matters.
24 px
Capture, archive, retrieve. Forever.

07
In Context
The logo as it appears in the application shell. The mark sits at 28 × 28 px in the topbar, framed by a 2 px Terracotta rule at the bottom of the navigation bar.
A
Archivr
Capture

08
Asset Files
All files live in branding/assets/. SVG files embed Cormorant Garamond via Google Fonts — they require a network connection to render the typeface correctly, or the font installed locally.
logo-on-dark.svg
Full lockup · cream wordmark · use on dark backgrounds
logo-on-light.svg
Full lockup · dark wordmark · use on light / paper backgrounds
logo-mark.svg
Standalone mark · 48 × 48 · for established contexts, avatars
favicon.svg
Favicon · reference from <link rel="icon"> or convert to .ico