LogoArchive

Overview

LogoArchive is a premium historical logo reference platform designed for professional designers, brand strategists, and creative teams seeking inspiration from 5000+ meticulously curated logos spanning decades of design history. The brand embodies 'Archival Minimalism'—a design philosophy that prioritizes clarity, precision, and purposeful restraint. The dark-mode-first interface (rgb(24, 24, 27) background with rgb(255, 255, 255) text) creates a gallery-like atmosphere where logos are the protagonists, not the interface. The emotional response is one of discovery and authority: users feel they're accessing a curated museum collection, not a generic database.

The voice is confident, direct, and scholarly without being pretentious. LogoArchive speaks in declarative statements: 'The only logo book you'll ever need.' 'Featuring 5000+ carefully curated logos. New logos added daily.' The tone avoids marketing hyperbole; instead, it lets the breadth and quality of the collection speak. Vocabulary leans toward precision (curated, historical, archive) rather than trendy adjectives. Example sentence in brand voice: 'Discover how Pentagram redefined corporate identity in 1987—and why it still influences design today.'

Colors

The color system operates on a principle of 'Functional Contrast': a near-black surface stack (surface #181a1b, surface-dim #0f1112, surface-bright #2a2d2f) provides the canvas, while a single vibrant accent—primary yellow (#ffd700)—commands attention on all interactive elements. This is not a polychromatic system; it is deliberately monochromatic with a single, unmissable accent. Primary (#ffd700) is reserved exclusively for call-to-action buttons ('Get started for only £8.22/month'), focus states, and active navigation indicators. On-primary (#181a1b) ensures text on yellow buttons remains legible at 4.5:1 contrast ratio. Secondary (#a8afb7, a cool gray) is used for supporting text, disabled states, and metadata labels. Tertiary (#e9ecef, a very light gray) appears in subtle UI elements

Typography

The type system is built on Suisse International, a geometric sans-serif that conveys precision and modernity while maintaining warmth. The hierarchy is deliberately restrained: display (96px, 400 weight, -0.02em letter-spacing) anchors the hero with 'The only logo book you'll ever need'; headline-lg (48px, 400 weight) breaks sections; body-md (16px, 400 weight, 24px line-height) carries all body copy. The 400 weight dominates—no heavy boldface—creating an elegant, uncluttered appearance. Label-md (14px, 600 weight, 0.02em letter-spacing) is used for button text and metadata tags, with increased letter-spacing to enhance legibility at small sizes. On dark backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to body-lg text when overlaid on hero imagery to ensure readability. The li

Layout

The page layout follows a 12-column grid with a max-width of 1280px, centered on screen. The gutter is 36px (matching the header padding observed in computed styles), creating a spacious, gallery-like rhythm. Hero section spans full width with 64px (lg spacing) vertical padding top and bottom, establishing a clear visual anchor. Content sections use md spacing (24px) for internal padding and lg spacing (40px) for section separation. The container-max-width of 1280px ensures readability on ultra-wide displays while maintaining focus. White-space is treated as a design element: the dark background (rgb(24, 24, 27)) is never fully filled—cards and content blocks float within it, separated by at least md spacing (24px). Mobile breakpoint at 768px collapses to single-column layout with sm spaci

Elevation & Depth

Depth in LogoArchive is achieved through a restrained shadow system and surface-container layering, avoiding the heavy drop-shadows common in contemporary design. Level 1 (Base): the surface background (rgb(24, 24, 27)) with no shadow. Level 2 (Standard Card): surface-container (#1a1d1f) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), a soft, diffuse shadow that suggests subtle lift. Level 3 (Elevated/Modals): surface-container-high (#252829) with box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), a larger blur radius and spread for pronounced separation. Hover states on cards transition to Level 3 s

Shapes

The shape philosophy is 'Geometric Precision'—a balance between sharp functionality and subtle approachability. Buttons use rounded: full (9999px), creating pill-shaped CTAs that feel modern and clickable without sacrificing legibility. Cards use rounded: lg (1rem / 16px), a moderate radius that softens corners without appearing overly rounded or playful. Input fields use rounded: DEFAULT (0.5rem / 8px), a minimal radius that maintains a technical, form-like appearance. The logo and badge elements use rounded: full for maximum approachability. This graduated scale ensures that the most interac

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses background-color: {colors.primary} (#ffd700), text-color: {colors.on-primary} (#181a1b), rounded: full (9999px), padding: 12px 32px, height: 48px, and box-shadow: {elevation.md}. On hover, transition to button-primary-hover with background-color: {colors.primary-fixed-dim} (#ffd700 at 95% brightness) and box-shadow: {elevation.lg}, all animated over 200ms ease. Active state (button-primary-active) shifts to inverse-primary (#b3a000), a darker gold, signaling engagement. button-secondary uses transparent background, 1px solid border in {colors.outline-variant} (#505050), and text-color: {colors.on-surface} (#ffffff). On hover, background transitions to {colors.surface-container-high} (#252829) over 200ms.

Do's and Don'ts

**Do**

• Do use primary yellow (#ffd700) exclusively on CTAs, focus states, and active navigation—never on body text or backgrounds.
• Do maintain 96px display headings in 400 weight (Suisse International) for hero sections; the lightness of the typeface creates elegance without boldness.
• Do apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) to cards and elevated surfaces; avoid harsh, high-contrast shadows that break the gallery aesthetic.
• Do use rounded: full (9999px) on all buttons and rounded: lg (16px) on cards to maintain the geometric precision philosophy.
• Do preserve the dark surface stack (surface #181a1b, surface-container #1a1d1f, surface-container-high #252829) as the foundation; never lighten beyond #303335 for the highest surface.

**Don't**

• Don't use secondary colors (gray #a8afb7, light gray #e9ecef) on interactive elements; reserve them for supporting text and disabled states only.
• Don't apply text-shadow or glow effects to body copy on the dark background—the 96px display text can use 0 2px 4px rgba(0, 0, 0, 0.3) for hero imagery overlays, but smaller text should remain unadorned.
• Don't exceed rounded: xl (24px) on any component; the brand avoids overly rounded, playful aesthetics.
• Don't use box-shadow values exceeding 0 16px 40px rgba(0, 0, 0, 0.2); deeper shadows contradict the minimalist, archival aesthetic.
• Don't mix typefaces; Suisse International is the sole font family. Avoid system-ui, -apple-system, or fallback fonts in component definitions—always specify Suisse International first in the font-family stack.