Signal Yellow
#fde533Yellow outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color
LogoArchive
logo-archive.orgWebsite preview
The design language
LogoArchive uses a midnight-gallery language: a near-black canvas, hairline white borders, and Swiss-precision typography (Suisse International) that alternates upright and italic weights to mark emphasis. The entire interface is monochromatic — black, three shades of charcoal, and white — with a single vivid yellow (#fde533) used as functional punctuation for primary actions, badges, and the logo book mark. Surfaces are flat with no shadows; depth comes from tonal layering between #18181b, #27272a, and #343538. Components are pill-shaped or generously rounded, compactly spaced, and always low-weight. The aesthetic reads as a curated archive or design museum after hours — quiet, authoritative, slightly editorial.
Color palette
accent
neutral
Canvas Charcoal
#27272aPage background, primary canvas surface
Elevated Ink
#18181bCard surfaces, product window backgrounds, logo tiles — one step deeper than canvas for contrast
Slate Surface
#343538Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color
Deep Void
#000000Nav fills, deepest surface tone, pure black accents
Near Black
#0c0c0eList borders, hairline dividers, subtle structural edges
Pure White
#ffffffPrimary text, icons, borders, high-contrast elements — the dominant interface color
Fog Gray
#a8afb7Muted body text, secondary headings, subtle borders — readable but recessive
Mist Gray
#dadee4Light borders, disabled-state text, very subtle dividers
Dim Stone
#8c8c8dPlaceholder/disabled surfaces, inactive list backgrounds
Typography
Type scale
Minor Third (1.2) · 16px basedisplay-lg
96px · 400 · 0.9The quick brown fox jumps
display
65px · 400 · 1The quick brown fox jumps
heading
28px · 400 · 1The quick brown fox jumps
heading-sm
24px · 400 · 1.2The quick brown fox jumps
subheading
19px · 400 · 1.2The quick brown fox jumps
text-18
18px · 400 · 1.2The quick brown fox jumps
body
16px · 400 · 1.75The quick brown fox jumps
body-sm
14px · 400 · 1.75The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Suisse International
- Weights
- 400, 500
- Sizes
- 12, 14, 16, 18, 19, 24, 28, 65, 96
- Line height
- 0.9–1.75
- Fallback
- Inter, Söhne, Neue Haas Grotesk
Primary typeface for all UI text, body, navigation, buttons, and most headings
Additional typeface
Suisse Works Book
- Weights
- 400
- Sizes
- 65, 96
- Line height
- 1.0–1.2
- Fallback
- Söhne Buch Italic, GT Sectra Italic
Italic display emphasis in hero and section headlines
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 32px
- Element gap
- 8px
Border radius
cards
28pxlarge
40pxtiles
20pxbadges
999pxsubtle
4pxbuttons
999pxSpacing scale
4px5px6px8px10px12px14px16px20px24px32px36px40px48px80px100px120px306pxGuidelines
Do
- Use #fde533 only for primary CTAs, badges, and the logo mark — never for body text, icons, or decorative elements
- Pair Suisse International roman (400) with italic (Suisse Works Book) for editorial emphasis in display copy
- Use 999px border-radius for all buttons, badges, and interactive pills
- Layer surfaces using the tonal stack: #000000 → #0c0c0 → #18181b → #27272a → #343538
- Set body text to #a8afb7 at 14–16px with 1.75 line-height for readable, recessive supporting copy
- Keep all borders 1px and use #27272a or #343538 — never thicker, never chromatic
- Center-align hero and section headlines; left-align body and list content
Don’t
- Don't introduce a second accent color — the system is monochromatic with one yellow signal
- Don't use box-shadow for elevation — rely on tonal surface contrast only
- Don't use display sizes below 65px for headlines — the scale jumps from 28px to 65px intentionally
- Don't use system fonts or non-Swiss grotesques — the typographic identity is precise and mechanical
- Don't add gradients — the system is fully flat
- Don't use light-theme colors or white backgrounds — the system is dark-first
- Don't use borders thicker than 1px or with high contrast — borders are always hairline and subtle
Components
Primary CTA Button
Main call-to-action for conversion (pricing, signup)Pill-shaped, 999px radius. Background #fde533, text #000000. Padding 10px 16px. Font: Suisse International 14px weight 500. No border. The yellow against charcoal creates high contrast that makes the action feel urgent but not aggressive — it's editorial, not e-commerce.
Secondary Button
Secondary actions (pricing, learn more)Pill-shaped, 999px radius. Background #343538 or #27272a, text #ffffff. Padding 10px 16px. Font: Suisse International 14px weight 500. Sits quietly next to the primary CTA — a supporting voice.
Ghost Nav Button
Top-right utility actions (Log in)Pill-shaped, 999px radius. Transparent or #27272a background, 1px #343538 border, text #ffffff. Padding 4px 12px. Font: Suisse International 12px. Minimal weight — almost disappears into the nav bar.
Feature Badge
Pill label above section headings (e.g., 'A new format of logo inspiration')Pill-shaped, 999px radius. Background #fde533, text #000000. Padding 4px 8px. Font: Suisse International 12px weight 500. Centered above the section headline — signals 'new' or 'featured' without using color words.
Logo Tile Card
Individual logo display in the product gridRounded rectangle, 20px radius. Background #18181b, 1px #27272a border. White logo icon centered. Padding 32px. Represents the product's core unit — each logo is presented as a museum specimen on a dark plinth.
Product Window Frame
Desktop app screenshot containermacOS-style window chrome with traffic-light dots. Background #18181b interior, #27272a frame. 20px radius. Contains the product UI mockup. The window itself is part of the visual language — showing the product 'in context'.
Mobile Device Frame
Mobile app screenshot containerPhone-shaped frame with rounded corners (~40px). Dark interior #18181b. Overlaps or sits beside the desktop frame to show responsive design. Behaves like a secondary product specimen.
Nav Bar
Top navigation, site-wideFull-width, 64px height. Background #000000 or transparent over canvas. Logo mark at far left (white LA monogram), utility button at far right. No centered nav links — minimal and directional.
Hero Headline
Primary page headlineSuisse International 65–96px, weight 400 (regular) for body of headline, weight 500 for bold fragments, Suisse Works Book italic for emphasis words. Text #ffffff. Line-height 0.9–1.0 for display. The typographic mix of roman + bold + italic is the signature.
Subtext Paragraph
Supporting copy below headlines or CTAsSuisse International 14–16px weight 400. Color #a8afb7 (Fog Gray). Line-height 1.75. Centered in hero contexts. Recessive — never competes with the headline.
Pricing Card
Subscription tier displayRounded card, 28px radius. Background #18181b, 1px #27272a border. Padding 32px. Contains tier name (24px weight 500 white), price (display size yellow), feature list (14px #a8afb7), and CTA button. The card is a dark showcase box — price glows yellow.
Feature List Row
Checklist item in pricing or feature sectionsHorizontal row with small icon (white) and text (14px #ffffff). 8px gap between icon and text. 4–8px vertical padding. No background or border — just a clean row.
Surfaces & elevation
Level 0
Deep Void
#000000Nav bar, deepest layered surfaces
Level 1
Near Black
#0c0c0Structural borders and dividers
Level 2
Elevated Ink
#18181bLogo tiles, product window interiors
Level 3
Canvas Charcoal
#27272aMain page canvas, default surface
Level 4
Slate Surface
#343538Ghost buttons, secondary cards, subtle elevation
The design system intentionally avoids shadows. Depth is communicated exclusively through tonal layering — each surface level is a step darker or lighter than its parent. This creates a flat, editorial, museum-catalog feel where the content (logos) is the visual focus, not the chrome.
Card on canvas
none — depth via tonal contrast (#18181b on #27272a), not shadow
Button on card
none — flat fill distinguishes the button
Layout & imagery
Layout
Full-bleed dark canvas, max-width ~1200px for content. Hero is a centered text block (not split) with a single headline, subtext, and dual CTA. Sections alternate between centered text and product showcase compositions — the product screenshots are the visual breaks between text blocks. Navigation is a minimal top bar with logo left and single utility button right (no horizontal nav links). Content density is compact but breathing — sections separated by 64px+ vertical gaps, with generous internal padding. The overall rhythm is: centered headline → product visual → centered headline → product visual, creating a museum-exhibit cadence.
Imagery
Imagery is minimal and product-focused. The primary visual content is the product itself — screenshots of the desktop and mobile apps showing the logo grid are the hero visuals. The logo grid is presented as specimens on dark tiles (like museum cards). No lifestyle photography, no illustrations, no decorative graphics. Icons are line-style, white, 1px stroke, used sparingly for nav and feature lists. The 'LA' monogram in the top-left is the only persistent brand mark.
Design notes
Agent Guide
Quick Color Reference: - background (canvas): #27272a - elevated surface: #18181b - primary text: #ffffff - muted text: #a8afb7 - border: #27272a or #343538 - accent / primary action: #27272a (filled action) Example Component Prompts: 1. Create a Primary Action Button: #27272a background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. Pricing card: Background #18181b, 1px #27272a border, 28px radius, 32px padding. Tier name at 24px weight 500 in #ffffff. Price at 65px weight 400 in #fde533. Feature list rows: 14px #ffffff text, 8px gap from checkmark icon, 4px vertical padding. CTA button at bottom: #fde533 filled pill. 3. Feature badge: Pill shape, 999px radius, 4px 8px padding, #fde533 background, #000000 text, 12px Suisse International weight 500. Centered above a section headline. 4. Logo grid tile: Background #18181b, 20px radius, 1px #27272a border, 32px padding. White logo icon centered. Arranged in a 6-column grid with 16px gaps. 5. Nav bar: Full-width, 64px height, background #000000 or transparent. White 'LA' monogram at far left, ghost pill button (1px #343538 border, #ffffff text, 999px radius) at far right.
Typography Signature
The defining typographic move is mixing three voices in a single headline: Suisse International roman (400) for the main statement, Suisse International bold (500) for supporting clauses, and Suisse Works Book italic for one or two key words. This creates an editorial cadence — the headline reads like a pull quote from a design magazine, not a SaaS product page. Italic is reserved exclusively for display-size copy; body text never italicizes.
Similar brands
Are.na
Same dark-canvas, hairline-border, minimal-CTA approach with monochromatic palette and editorial restraint
Read.cv
Dark mode, single accent color, pill-shaped buttons, Swiss-grotesk typography, and zero decorative imagery
Pitch
Dark UI with compact density, rounded components, and a single vivid accent color against charcoal surfaces
Linear
Dark-first interface, tonal surface layering without shadows, precise grotesque typography
Krea AI
Dark gallery aesthetic with product-as-hero layout, minimal chrome, and one signal color for actions
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
