---
title: "LogoArchive design system"
variant: extended
source: https://www.logo-archive.org/
captured_at: 2026-10-12
theme: dark
industry: design
generator: Design DNA (https://four.wiralomi.com/style/logo-archive-org)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# LogoArchive · Design System

> A quiet dark canvas for a world of logos.

**Theme:** dark · **Industry:** design · **Source:** https://www.logo-archive.org/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

LogoArchive pairs oversized editorial typography with a restrained dark interface to make its logo library feel curated and focused. Rounded product panels, grayscale brand marks, and a sharply limited yellow accent guide visitors from discovery to subscription.

## North star

Keep the interface almost monochrome and let oversized editorial type, curated logo imagery, and a single yellow action carry the hierarchy.

## Overview

The page is built around a near-black canvas (#18181b) with charcoal bands and cards (#27272a), creating a quiet frame for the logo collection rather than competing with it. White carries the primary message and controls; muted gray is reserved for secondary statements and supporting copy. Bright yellow (#fde533) is deliberately scarce and appears as the high-contrast primary action and small section labels. Suisse International drives the experience: large, regular-weight headlines are centered in the hero, with occasional italic editorial emphasis, while compact supporting text stays understated. Suisse Works Book appears as a minor supporting serif accent. The layout alternates open, centered storytelling with broad, rounded product panels, testimonials, a dark logo showcase, and pricing cards. Product screenshots and logo marks are presented largely in monochrome, preserving their character while keeping the overall page cohesive. Generous section breathing room contrasts with dense logo grids and plan details.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Archive Charcoal | `#27272a` | `--color-archive-charcoal` | surface | Main section bands, pricing cards, secondary buttons, and frequent hairline borders. |
| Paper White | `#ffffff` | `--color-paper-white` | brand | Primary headlines, body copy, navigation labels, and text on dark cards. |
| Night Canvas | `#18181b` | `--color-night-canvas` | surface | Page canvas, hero background, pricing area, and the small dark badge behind light text. |
| Quiet Silver | `#a8afb7` | `--color-quiet-silver` | semantic | Muted hero emphasis, secondary descriptions, captions, and subdued navigation text. |
| Deep Black | `#000000` | `--color-deep-black` | surface | Black logo-showcase band and dark visual fields; measured muted text use is secondary. |
| Slate Panel | `#343538` | `--color-slate-panel` | surface | Testimonial panel, navigation button, and selected inset card surfaces. |
| Graphite Text | `#464646` | `--color-graphite-text` | neutral | Sparse subdued text detail; not a defining surface or brand color. |
| Archive Yellow | `#fde533` | `--color-archive-yellow` | accent | Primary subscription CTA, small section labels, and occasional fine accent strokes. |

### Semantic aliases

`--color-canvas` → `#18181b` (Night Canvas) · `--color-surface` → `#27272a` (Archive Charcoal) · `--color-surface-2` → `#000000` (Deep Black) · `--color-surface-3` → `#343538` (Slate Panel) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#a8afb7` (Quiet Silver) · `--color-text-subtle` → `#000000` (Deep Black) · `--color-border` → `#27272a` (Archive Charcoal) · `--color-accent` → `#fde533` (Archive Yellow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#18181b` | 17.72:1 | AAA |
| `#ffffff` | `#27272a` | 14.89:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#343538` | 12.26:1 | AAA |
| `#a8afb7` | `#18181b` | 8:1 | AAA |
| `#a8afb7` | `#27272a` | 6.72:1 | AA |
| `#a8afb7` | `#000000` | 9.48:1 | AAA |
| `#a8afb7` | `#343538` | 5.54:1 | AA |
| `#000000` | `#18181b` | 1.19:1 | fail |
| `#000000` | `#27272a` | 1.41:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Suisse International | `--font-body` | webfont | 400, 500 | Nearly all interface text, from display headlines and body copy to navigation and buttons. | Inter |
| Suisse Works Book | `--font-suisse-works-book` | webfont | 400 | Small editorial serif accent, notably italicized phrase emphasis in display copy. | Cormorant Garamond |

- **Suisse International:** Use regular weights for headlines and body, with medium navigation; preserve sentence case and clean, untracked forms.
- **Suisse Works Book:** Use sparingly as contrast within otherwise sans-serif headlines; measured use is minimal.

### Type scale — Perfect Fifth (ratio ≈ 1.47, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 1 | 0 | — | Suisse International | Oversized editorial hero statement. |
| h1 | 65px | 400 | 0.9 | 0 | — | Suisse International | Primary hero headline and major statement headings. |
| h2 | 37.5px | 400 | 0.95 | 0 | — | Suisse International | Section headings introducing the logo book and content. |
| h3 | 28px | 400 | 1.2 | 0 | — | Suisse International | Subsection or card group headings. |
| h4 | 24px | 400 | 1.2 | 0 | — | Suisse International | Smaller card and pricing plan headings. |
| body | 14px | 400 | 1.2 | 0 | — | Suisse International | General explanatory copy and plan details. |
| caption | 12px | 400 | 1.2 | 0 | — | Suisse International | Fine print, small labels, and image captions. |
| button | 14px | 400 | 1.2 | 0 | — | Suisse International | CTA and pricing control labels. |
| nav | 14px | 500 | 1 | 0 | — | Suisse International | Header navigation links and account action. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 10, 14, 16, 20, 32, 36 px.
- Section rhythm 118px · element gap 8px · card padding 32px · max content width 744px.

The measured content frame is capped at 744px, with the hero centered and the later content arranged as broad single-column bands and paired feature areas. A 12-column structure is reported for the opening section, while subsequent blocks read as one-column compositions. The page uses spacious separation between major sections and tighter internal groupings for card content. Rounded panels organize the product preview, testimonial, submission feature, and pricing plans. The overall rhythm alternates large empty dark areas with denser visual or pricing blocks.

## Shape & elevation

- Radius: button `9999px` · card `28px` · badge `3px` · nav `9999px` · xs `4px` · sm `22px` · md `28px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is mostly flat, with no measured shadows. Separation comes from changes between the near-black canvas, charcoal bands, and slate inset panels, plus occasional borders matching the card surface. Large rounded corners soften the panels, while the logo showcase remains an intentionally stark black field.

## Imagery

Imagery is product-led rather than photographic: a desktop interface preview and overlapping mobile screen demonstrate the logo archive, while curated logo marks appear in grids and as a dark decorative backdrop. Keep screenshots framed inside charcoal panels and preserve the mostly monochrome treatment. The submission feature includes a product display image. Avoid adding colorful photography that would compete with the logos.

## Components

### Hero headline

Centered, oversized Suisse International copy with white primary words, muted-gray supporting emphasis, and occasional italic serif styling.

### Primary and secondary CTAs

A yellow pill-shaped subscription action sits beside a charcoal pricing action; use dark text on the yellow button and white on charcoal.

### Account navigation

Minimal top bar with a small white mark at left and a rounded slate Log in control at right.

### Product preview panel

Large charcoal rounded panel with a centered heading above a desktop logo-library screenshot and overlapping mobile view.

### Testimonial card

A slate-gray rounded testimonial inset combines a small portrait, subdued quote copy, and compact attribution.

### Pricing cards

Three dark plan cards use white headings, compact plan details, feature lists, and monthly/annual pill controls.

### Measured component styles

- **Primary button** (“Annually”): background #27272a · text #ffffff · radius 20px · padding 4px 10px · 400 14px Suisse International
- **Link** (“Get started for only £8.22/month”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Suisse International
- **Card** (“Standard £8.33per month (billed annually”): background #27272a · text #ffffff · border 2px solid #27272a · radius 28px · padding 32px · 400 16px Suisse International
- **Badge** (“New”): background #18181b · text #ffffff · radius 3.2px · padding 0px 5.6px · 400 12px Suisse International
- **Navigation item** (“Log in”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Suisse International

## Do

- Use #18181b as the dominant page canvas.
- Reserve #fde533 for the primary action and small labels.
- Set oversized, regular-weight sans-serif headlines with editorial line breaks.
- Use white for primary copy and muted gray for secondary messaging.
- Group content in rounded charcoal panels with restrained borders.
- Keep logo imagery predominantly monochrome.

## Don't

- Do not introduce gradients or decorative shadows.
- Do not spread yellow across large surfaces.
- Do not use bright, unrelated colors in the logo showcase.
- Do not center every section; vary alignment for feature content.
- Do not make supporting copy as prominent as the hero.
- Do not add dense ornamental UI around product imagery.

## Agent prompt

Build a new page in LogoArchive’s restrained editorial style. Use Night Canvas (#18181b) as the base, Archive Charcoal (#27272a) for broad panels and cards, and Slate Panel (#343538) for selected insets. Set most text in Suisse International or a close clean sans-serif; keep headlines large, regular, and occasionally punctuated with a restrained italic serif phrase. Use Paper White (#ffffff) for primary content and Quiet Silver (#a8afb7) for secondary copy. Make Archive Yellow (#fde533) a rare, high-contrast accent for the primary CTA and small labels. Organize the page with generous section breathing room, centered statement blocks, rounded product panels, and compact card details. Present logos and product screenshots in subdued, largely monochrome treatments. Favor flat surfaces and clear hierarchy over effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy on a full-width near-black canvas, followed by paired actions. | primary subscription CTA, secondary pricing link, student discount note | oversized typography, muted headline emphasis, yellow pill CTA, minimal top navigation |
| 2 | product-showcase | Centered heading above a large product screenshot inside a rounded charcoal panel. | product preview, desktop and mobile demonstration | charcoal band, rounded panel, centered heading, overlapping device imagery |
| 3 | testimonials | Single testimonial composition within a dark section, with quote content set in an inset panel. | social proof, attributed customer quote | slate inset card, portrait avatar, compact attribution |
| 4 | logo-cloud | Black full-width feature band with centered headline and decorative logo marks around the content. | library discovery, brand credibility | black canvas, oversized headline, dim logo motifs, small label |
| 5 | feature-split | Left-aligned copy beside a product image, inside a broad charcoal rounded panel. | community contribution, submission invitation | yellow eyebrow label, text-and-image split, rounded image frame |
| 6 | pricing | Three plan cards in a row on the dark canvas, each with compact details and a billing toggle. | plan comparison, monthly and annual billing, feature lists | rounded charcoal cards, pill billing controls, compact pricing copy |
| 7 | footer | Minimal continuation of the near-black canvas with oversized, low-contrast typographic content. | brand sign-off, secondary navigation | dark canvas, oversized subdued lettering |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/logo-archive-org