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.
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.
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.
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.
Don't stretch or distort the proportions
Don't change or recolor the logo
Don't add shadows, glows, or effects
Don't rotate or tilt the logo
Don't substitute a different typeface for the wordmark
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.
Aa Bb Cc
Preserve what
matters.
The archive of a lifetime,
held with care.
The quick brown fox jumps over the lazy dog.
Capture · Archive · Preserve · Retrieve
0123456789 & #%@!
Small caps label
Button Text
mono/url/code
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)
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.
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