Skip to content
DesignMunkDesignMunk Submit a site

Object & Archive

objectandarchive.com
Curated fine art with a past and a point of view.
Creative Ecommerce Bootstrap Shopify Homepage Custom Heading Font Custom Paragraph Font
Share Visit site
objectandarchive.com DESKTOP · 1440
Object & Archive

AI Breakdown

Design export

---
version: alpha
name: Object & Archive
description: Curated fine art with a past and a point of view.
colors:
  primary: "#f6f6f4"
  neutral: "#121212"
  border: "#374151"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: CustomHeadingFont
    fontSize: 45px
    fontWeight: 400
    lineHeight: 1.19
  headline-md:
    fontFamily: CustomHeadingFont
    fontSize: 35px
    fontWeight: 400
    lineHeight: 1.04
  headline-sm:
    fontFamily: CustomHeadingFont
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: 0.056em
  headline-xs:
    fontFamily: CustomHeadingFont
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: 0.048em
  body-md:
    fontFamily: CustomParagraphFont
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.025em
rounded:
  sm: 8px
spacing:
  xs: 10px
  sm: 20px
  md: 30px
  lg: 48px
  xl: 68px
components:
  button-primary:
    textColor: "{colors.neutral}"
    rounded: 0px
    padding: 12px 4px
    height: 37px
  button-secondary:
    textColor: "{colors.neutral}"
    rounded: 0px
    padding: 12px 4px
    height: 37px
  button-link:
    textColor: "{colors.neutral}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Object & Archive: Whisper-weight Serif on a Dark, Art-First Canvas

## Overview

Object & Archive pairs a museum-quiet interface with expressive artwork. The brand voice is scholarly, poetic, and deliberate; UI elements step back so the pieces can lead. Layouts are spacious, copy is set with air and gentle tracking, and tone is serious rather than playful. Use restraint and contrast to keep the browsing experience calm, archival, and art-first.

## Colors

- primary (#f6f6f4): Paper-light foregrounds, inverted panels, and callouts that need warmth against the dark canvas.
- neutral (#121212): Near-black base for pages, headers, and image mats.
- border (#374151): Hairline rules, dividers, and subtle separators in lists and menus.
- surface ({colors.neutral}): Default surface layer; same near-black as neutral.
- on-surface ({colors.primary}): Text and icons on dark surfaces; also used for captions atop artwork.

## Typography

- CustomHeadingFont (self-hosted). A refined, high-contrast serif for all headlines. Not freely licensed for agents; use obtainable substitutes with similar voice: Playfair Display, Cormorant Garamond, or Libre Bodoni.
- CustomParagraphFont (self-hosted). A light, readable mono used for body copy (16px, 1.5, slight tracking). Substitute with IBM Plex Mono, Space Mono, or Courier Prime.
- CustomCaptionFont and CustomLinksFont (self-hosted). Variants of the mono used for small labels and links. Substitute as above to maintain consistency.
- Type scale: headline-lg 45px/1.19 for hero lines; headline-md 35px/1.04 for section intros; headline-sm 27px and headline-xs 21px with gentle positive letter-spacing for subheads; body-md 16px/1.5 for paragraphs.

## Layout

Spacing follows a 10-based rhythm: 10, 20, 30, 48, 68px. Use xs/sm for inner element padding, md for grid gutters, lg for vertical section spacing, and xl for hero or section breaks. Grids are flexible and image-forward; allow asymmetry and wide margins to keep pages airy and editorial. On product grids, favor equal column widths with md (30px) gutters so artwork remains the focus.

## Elevation & Depth

The system is largely flat. Only a subtle sm shadow (rgba(18,18,18,0.05) 0 4px 5px) is available for gentle lift on hover or sticky elements. Hierarchy relies on tonal inversion (on-surface text over neutral), hairline borders (#374151), and generous whitespace. Avoid heavy drop shadows or colored panels that compete with artwork.

## Shapes

Corners are mostly square to stay archival. Buttons are 0px radius and 37px tall for crisp, typeset actions. Cards use rounded.sm at 8px to soften multi-image blocks without turning playful. Maintain consistency: reserve 8px only for card containers and form inputs; keep navigation and buttons sharp.

## Components

Button variants and cards are minimal and type-led.
- Button Primary: Square corners (0px), 37px height, 12px vertical padding, text color #121212. Use on light backgrounds (e.g., primary) to maintain contrast.
- Button Secondary: Mirrors primary; use for less-critical actions placed adjacent to the main CTA.
- Button Link: Text-only action using the body/link mono; keep it short and set in on-surface (#f6f6f4) or neutral as needed.
- Card: Dark background (#121212), on-surface text (#f6f6f4), 16px inner padding, 8px radius. Ideal for artwork tiles or collection promos.

### Split Hero Collage
Two-panel hero with artwork/texture on one side and copy on the other. Headline uses headline-lg (45px/1.19), action is a link-style CTA. Outer padding lg–xl; copy sits on surface with on-surface text.

### "Just Added" Grid
A 3–4 column product grid using md (30px) gutters. Each tile behaves like a card with optional sm shadow on hover; captions in body-md. Section header uses headline-md (35px).

### Mega Menu by Mood/Style/Subject/Color
A structured flyout listing categories in stacked columns. Use border color (#374151) for dividers and sm spacing for link rows. Headings in headline-xs; items in body-md.

### Interior Style Feature List
Ten styles presented as linked blocks. Title in headline-sm (27px with tracking), 1–3 sentence description in body-md, link styled as Button Link.

### Niche Collections Strip
A horizontal selector for themed collections (e.g., Banned Art, Soft Architecture). Keep row spacing sm, labels in body-md; use borders to separate groups.

### Resource Library Panel
Five links with short descriptions. Use a two-column layout on desktop with border dividers and md gutters; headlines in headline-xs, copy in body-md.

### Newsletter Signup Bar
Prominent callout; consider inverting to primary background (#f6f6f4) with neutral text (#121212). Inputs use 8px corners to echo cards; button at 37px height.

## Do's and Don'ts

- Do keep text on dark surfaces using on-surface (#f6f6f4) and reserve color for artwork.
- Do space sections with the 10/20/30/48/68 scale; avoid ad-hoc margins.
- Do keep buttons square (0px radius) and 37px tall; use link-style CTAs only where hierarchy is clear.
- Don't introduce new accent colors or tinted panels that compete with art.
- Don't apply heavy shadows; the only acceptable lift is the subtle sm shadow.
- Don't mix corner treatments — keep 8px for cards and inputs, square for navigation and buttons.

## Agent Prompt Guide

Quick color reference — Text: #f6f6f4; Background: #121212; Border: #374151; Accent/callout: #f6f6f4 on neutral.

1) Build a split hero
- Background: #121212. Two columns, 50/50 on desktop, stack on mobile.
- Heading: CustomHeadingFont, 45px, line-height 1.19, weight 400, color #f6f6f4.
- Body: CustomParagraphFont, 16px, line-height 1.5, letter-spacing 0.025em, color #f6f6f4.
- CTA: Button Link (text only), color #f6f6f4, underline on hover, spacing above md (30px).

2) Create a "Just Added" product grid
- Container: max-width comfortable for art, background #121212, text #f6f6f4.
- Grid: 3 columns, gap md (30px).
- Tile Card: background #121212, text #f6f6f4, padding 16px, radius 8px, optional shadow rgba(18,18,18,0.05) 0 4px 5px.
- Captions: CustomParagraphFont 16px/1.5.

3) Lay out an Interior Style feature list
- Section header: CustomHeadingFont 35px/1.04, color #f6f6f4, margin-bottom lg (48px).
- Each item: title in CustomHeadingFont 27px with slight tracking; description in CustomParagraphFont 16px.
- Dividers: 1px solid #374151 with sm (20px) vertical padding.

4) Newsletter signup bar (inverted)
- Panel background: #f6f6f4; text: #121212.
- Headline: CustomHeadingFont 27px; copy: CustomParagraphFont 16px.
- Input + button group height: 37px; input/card corners 8px; button corners 0px with 12px vertical padding.

5) Mega menu
- Panel background: #121212; text: #f6f6f4.
- Column titles: CustomHeadingFont 21px; links: CustomParagraphFont 16px.
- Use #374151 borders between columns; inner spacing sm (20px).

## Similar Brands

- The Poster Club — similarly subdued UI that lets prints lead; uses lighter backgrounds where O&A prefers a darker, archival canvas.
- 20x200 — editorial tone and art-forward merchandising; brighter palette and more conventional CTA styling.
- Tappan Collective — minimal, type-led product grids; leans warmer and more lifestyle than Object & Archive's museum-quiet presentation.
- Saatchi Art — broad marketplace with restrained UI; far denser and utilitarian where O&A is curated and poetic.

More like this

Browse Creative →
wizcommerce.com
WizCommerce AI
WizCommerce
Built for Wholesale. Powered by AI.
Homepage · 3 days ago
set.space
Set Creative
Set
Location management for the screen industry—gather, organize, and present all locations.
Homepage · 4 days ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 4 days ago
rodeo-labs.com
Rodeo Adventure Labs Ecommerce
Rodeo Adventure Labs
Ride. Explore. Create.
Homepage · 5 days ago