David Drebin Design Bible

Design Systems · Public Reference · June 18, 2026
David Drebin Design Bible
Version 1.0 · Canonical System · Single Source of Truth
Design Bible / Version 1.0

The brand is resolved.
The system needs governance.

A curated reference for designers, developers, Claude Design, Codex, Cursor, and future AI systems. This document merges the canonical V1 and V2 extraction with the Creative Director review into one authoritative DD design source.

12
Canonical Screens
6
Core Archetypes
24
Component Candidates
0
Redesign Required
Executive Summary / 01

Not a redesign problem.
A systemization problem.

David Drebin does not need a new visual direction. The brand is already resolved: cinematic, gallery-premium, image-led, and restrained.

The primary challenge is systemization plus curation. The strongest screens already establish the canonical language; the remaining work is to name the patterns, consolidate duplicate concepts, retire abandoned variants, and make the system repeatable for human and AI collaborators.

Across roughly 80% of the strongest frames, the same confident language is visible: warm black canvas, photograph as hero, champagne serif section identity, quiet sans utility text, hairline rules, and text CTAs instead of button systems. When it works, it reads less like an artist website and more like a private gallery catalogue.

The canonical system is now identified as twelve role references, six reusable archetypes, a small component catalog, and a controlled token vocabulary. The Creative Director review names eight of those as the deepest core canon, with the remaining four acting as supporting canonical roles for galleries, footer, mobile navigation, and mobile homepage. This Design Bible is the single source of truth for future DD web design and implementation work.

Canonical Screen Architecture / 02

Twelve screens.
One operating system.

These are the locked references. The review resolves the apparent 8-versus-12 question this way: eight screens carry the strongest core design language, while twelve screens are needed to cover the full site architecture. Everything else in the exported top-20 set becomes either supporting material, a content instance, or a retired duplicate.

Homepage

Homepage Journey

01 · Canonical Homepage

The complete desktop journey: hero, collections, books, biography, press, connect, and footer. Use as the shell for the long-form site rhythm.

Pure Atmosphere

03 · Cinematic Hero

The brand thesis in one frame: one photograph, one quiet caption, one scroll cue. It defines the emotional opening standard.

Navigation

Desktop Navigation

04 · Visual Menu Index

The strongest brand-specific navigation idea. The menu becomes a curated visual index rather than a generic text list.

Collections

Collection Grid

06 · Canonical Collection Page

The cleanest system page: six artworks as framed objects, champagne display type, quiet metadata, and disciplined grid pacing.

Artwork

Desktop Commerce

08 · Artwork Listing / Detail

The commercial engine: artwork, installed artwork, edition metadata, and a restrained text CTA. This is the repeatable sales unit.

Series Intro

11 · Category / Series Intro

The reusable intro template for portfolio categories: title, concise commercial context, and image strip. Screen 10 becomes content inside this model.

Editorial

Editorial Feature

15 · Special Projects

The proof that the system can carry story: era marker, artifact panel, cinematic support image, and restrained copy hierarchy.

Galleries

Gallery Authority

13 · Gallery Directory

The canonical gallery body: typographic names, consistent spacing, and institutional authority. Pair with the exhibition-room hero from screen 12 as supporting reference.

Footer

Connect System

14 · Connect / Footer

The complete terminal system: contact logic, newsletter behavior, social/contact metadata, and a restrained closing cadence.

Mobile

Mobile Navigation

05 · Mobile Menu

The cleanest mobile navigation reference: centered, legible, restrained. It must be reconciled with the desktop visual-index philosophy.

Mobile Artwork System

16 · Mobile Artwork Listing

The best mobile commerce rhythm: single column, artwork title, image pair, edition metadata, and repeated small INQUIRE CTA.

Mobile Homepage

19 · Mobile Long Home

The correct mobile translation of the homepage journey, preserving long-scroll editorial pacing rather than forcing a compressed landing page.

Visual DNA / 03

Cinematic restraint.
Artwork as the interface.

The DD system behaves like a private gallery catalogue: dark room, champagne serif, quiet metadata, and the photograph carrying nearly all emotional force.

  • Emotional Identity Moody, cinematic, seductive, but never loud. The interface recedes so the work can dominate.
  • Cinematic Tension Large-scale photography, near-black surfaces, and controlled negative space create the feeling of a film still held in suspension.
  • Gallery Authority Framed works, gallery walls, and typographic directories turn the site into a collector-facing catalogue rather than a portfolio.
  • Editorial Restraint Hairline rules, small utility copy, and text CTAs keep the commerce layer quiet and premium.
  • Artwork-As-Object Pattern The system repeatedly shows both the image and the installed framed object, which makes the work feel collectible.
  • Geometry Zero-radius shapes, print-derived sharpness, and hairline rules do the structural work. Rounded product UI would weaken the gallery-catalogue authority.
  • Voice CTAs are words, never conventional buttons: INQUIRE, JOIN NOW, and READ MORE. The selling stays quiet.
  • Accidental Drift Multiple serif voices, wandering wordmark alignment, appearing/disappearing Instagram treatment, and repeated placeholder pricing are exploration residue, not core DNA.
Archetypes / 04

The six core archetypes.
Design once, reuse often.

Homepage Journey

Purpose

Introduce the emotional world, then move through collections, objects, biography, proof, and contact without breaking the cinematic spell.

Primary Components / Patterns

GlobalHeader, HeroArtwork, HeroCaptionStrip, EditorialSectionHeader, CollectionGrid, BooksCarousel, ConnectFooter. Pattern: long editorial scroll.

Visual Menu Index

Purpose

Turn navigation into a curatorial object and make destinations legible through image plus label.

Primary Components / Patterns

MenuOverlay, VisualMenuGrid, VisualMenuItem, CloseIconButton. Pattern: thumbnail-led navigation with champagne dividers.

Collection Grid

Purpose

Present series as a gallery-grade index, not a transactional product wall.

Primary Components / Patterns

CollectionGrid, CollectionCard, DividerRule, metadata line. Pattern: three-column desktop grid, quiet title and metadata rhythm.

Artwork Listing / Detail

Purpose

Convert an artwork into a collectible object through image, installation context, edition data, and inquiry behavior.

Primary Components / Patterns

ArtworkListing, ArtworkListingItem, ArtworkImagePair, EditionMetadata, TextCTA. Pattern: Photo to installed artwork to collectible object.

Editorial Feature

Purpose

Carry stories, collaborations, special projects, and press-like content without becoming a generic article template.

Primary Components / Patterns

EditorialFeature, EraMarker, IntroCopyBlock, split content panel. Pattern: story composition with cinematic support imagery.

Mobile Artwork System

Purpose

Translate the premium artwork-commerce pattern into a narrow, readable, long-scroll mobile cadence.

Primary Components / Patterns

MobileHeader, mobile display heading, MobileArtworkItem, EditionMetadata, TextCTA. Pattern: single column, generous vertical air, no carousel dependency.

Canonical Extraction Detail / 05

Components, patterns,
and hierarchy by screen.

01 · Canonical Homepage
Homepage

Editorial journey.

Reusable Components

  • Global header, cinematic hero, caption strip.
  • Collection grid, collection card, editorial section header.
  • Books carousel, biography module, connect/footer columns.

Reusable Patterns

  • Long scroll from hero to collections to editorial proof.
  • Champagne section headings on a near-black field.
  • Thin rules separating major editorial sections.

Typography / Color

  • Display: champagne serif; body: small Gotham-style utility.
  • Surface: warm black; text: white, muted gray, champagne.
04 · Canonical Menu
Menu

Visual index.

Reusable Components

  • Full-screen overlay, close control, menu group.
  • Visual menu item, thumbnail, label, group divider.
  • Four-column desktop grid.

Reusable Patterns

  • Navigation as curated image index.
  • Thumbnail plus destination label.
  • Dense grid with champagne separator rules.

Typography / Color

  • Small white Gotham-style labels; no large display type.
  • Dark overlay, black item fields, champagne dividers.
06 · Canonical Collection Page
Collection

Six-card grid.

Reusable Components

  • Page display title, title rule, collection grid.
  • Collection card, collection image, title, metadata line.

Reusable Patterns

  • Two rows of three cards.
  • Artwork image before text, metadata kept quiet.
  • Curated category index, not a loud sales grid.

Typography / Color

  • Oversized champagne italic serif page title.
  • White card titles, muted gray metadata, bronze rules.
08 · Canonical Artwork Page
Artwork

Listing detail.

Reusable Components

  • Artwork intro, commercial metadata block.
  • Artwork listing item, image pair, edition metadata.
  • Small text CTA: INQUIRE.

Reusable Patterns

  • Narrow centered content column.
  • Artwork image followed by installation context.
  • Long-scroll product catalogue treated editorially.

Typography / Color

  • Champagne page heading, white body and metadata.
  • CTA remains small, white, all caps.
15 · Canonical Editorial Page
Editorial

Special feature.

Reusable Components

  • Editorial page title, intro copy, era marker.
  • Split content panel, artifact image, cinematic support image.

Reusable Patterns

  • Large title with short explanatory intro.
  • Oversized date/era marker as editorial anchor.
  • Story composition rather than product listing.

Typography / Color

  • Champagne display title and marker.
  • Muted Gotham-style intro, full-color cinematic image.
16 · Canonical Mobile System
Mobile

Single-column commerce.

Reusable Components

  • Mobile header, display heading, intro copy.
  • Mobile artwork item, image pair, edition metadata.
  • Mobile text CTA.

Reusable Patterns

  • Single-column stacked layout.
  • Artwork title before image; metadata and CTA after.
  • Long-scroll rhythm over carousel behavior.

Typography / Color

  • Reduced champagne display heading.
  • White body and metadata on warm black.
Components / 06

Componentize the decisions.
Do not reopen the aesthetic.

Core Components

Name Purpose Usage
GlobalHeaderDesktop brand and menu chrome.Homepage, collections, artwork, editorial pages.
MobileHeaderMinimal mobile brand and menu access.All mobile templates.
HeroArtworkLarge cinematic image entrance.Homepage and atmospheric hero moments.
VisualMenuGridDesktop navigation as a curated visual index.Primary desktop menu system.
VisualMenuItemThumbnail plus destination label.Repeated menu destinations and category groups.
CollectionGridSeries overview structure.Collection pages and homepage collection modules.
CollectionCardImage, title, and metadata unit.Collections, homepage previews, category indexes.
ArtworkListingRepeated artwork commerce sequence.Artwork pages and portfolio listings.
ArtworkListingItemOne artwork, install image, metadata, and CTA.Desktop and mobile artwork pages.
ArtworkImagePairPhoto plus installed/framed artwork.Required pattern for collectible-object presentation.
EditionMetadataEdition, size, price, and availability language.Artwork listings, series intros, commercial modules.
TextCTASmall all-caps text action.INQUIRE, JOIN NOW, READ MORE; never oversized button treatment.
EditorialFeatureStory and special-project composition.Special projects, editorial pages, collaborations.
ConnectFooterNewsletter, contact, and closing system.Homepage, connect page, global footer.

Secondary Components

Name Purpose Usage
EditorialSectionHeaderChampagne display title plus section spacing.Major page sections and homepage modules.
IntroCopyBlockShort explanatory text before a page system begins.Artwork, category, editorial, and galleries pages.
CommercialMetadataBlockControlled pricing/availability language.Series intros and artwork pages.
FooterContactColumnStructured contact and location column.Connect/footer modules.
NewsletterSignupQuiet join form with a single active underline/accent.Connect modules and footer system.
BooksCarouselObject carousel harvested from screen 07 as a module, not a page.Homepage books/object section.
GalleryDirectoryItemTypeset gallery name and location row.Gallery directory system.
GalleryHeroExhibition-room authority image used with typographic gallery directory.Gallery page; drawn from screen 12 as support for screen 13.
DividerRuleHairline editorial separation.Sections, menu groups, title dividers.
EraMarkerOversized date/era anchor.Editorial and special-project pages.
PaginationDotsQuiet carousel location indicator.Books/object carousel where needed.
CarouselArrowMinimal object carousel movement.Books and object modules only.
MenuIconButtonIcon-only menu access.Header chrome.
CloseIconButtonIcon-only overlay dismissal.Menu overlay.
Tokens / 07

Name the repeated decisions.
Do not invent new ones.

Color Token Value Use
color.surface.dark#151515Primary dark UI field.
color.surface.warmBlack#150F0BCinematic warm-black page background.
color.text.primaryInverse#FFFFFFMain text, labels, CTAs.
color.text.secondaryInverse#A4A4A4Secondary copy and intro text.
color.text.tertiaryInverse#919191Metadata and footer/contact details.
color.accent.champagne#C9A875Display headings, metadata accent, major rules.
color.accent.deepBronze#4E402ADivider and low-contrast linework.
color.stroke.defaultDark#737373Fine rules and structural strokes.

Typography Tokens

  • type.logo · condensed bold sans, white
  • type.display.primary · champagne serif, large, often italic
  • type.display.gold · champagne section identity, consolidated from competing display treatments
  • type.display.white · white editorial display for dark-surface emphasis
  • type.display.secondary · white or champagne serif
  • type.section.title · editorial section identity
  • type.card.title · serif italic or light sans by content type
  • type.body.primary · small Gotham-style utility body
  • type.metadata · small quiet data language
  • type.nav.item · small white menu label
  • type.cta.smallCaps · Gotham Bold, all caps, restrained
  • type.wordmark · compressed bold grotesque for DAVID DREBIN lockup

Spacing Tokens

  • space.page.desktop.outer
  • space.page.mobile.outer
  • space.section.gap
  • space.section.headerToBody
  • space.grid.columnGap
  • space.grid.rowGap
  • space.card.imageToTitle
  • space.card.titleToMeta
  • space.artwork.blockGap
  • space.artwork.imagePairGap
  • space.metadata.toCta
  • space.gallery.wallPacing · generous negative space, never crowded

Layout Tokens

  • layout.desktop.canvas · 1608
  • layout.mobile.canvas · 393
  • layout.desktop.collectionColumns · 3
  • layout.menu.desktopColumns · 4
  • layout.mobile.columns · 1
  • layout.artwork.contentColumn · narrow centered column
  • layout.home.contentColumn · centered editorial column

Image Tokens

  • image.hero.aspect
  • image.collectionCard.aspect
  • image.menuThumbnail.size
  • image.artwork.primary.aspect
  • image.artwork.installation.aspect
  • image.editorialFeature.aspect
  • image.gallery.hero.aspect

Rule Tokens

  • rule.section.width
  • rule.section.color
  • rule.menuGroup.color
  • radius.default · 0
  • radius.thumbnail · only where source thumbnails already require it
  • metadata.priceAvailability · Works begin at price plus gallery availability
  • metadata.editionSize · dimensions plus edition count
Design Governance / 08

Keep, consolidate,
remove.

Patterns to preserve

  • KEEPArtwork-first hierarchy.
  • KEEPDark cinematic C direction.
  • KEEPChampagne editorial display type.
  • KEEPVisual menu index.
  • KEEPArtwork image plus installation image.
  • KEEPSmall all-caps inquiry CTAs.
  • KEEPMobile single-column artwork listing.

Patterns to consolidate

  • CONSOLIDATEAll menu variants into the visual menu grid plus mobile text behavior.
  • CONSOLIDATEAll collection cards into one card model.
  • CONSOLIDATEAll artwork listings into one listing item model.
  • CONSOLIDATEAll edition and price metadata into one metadata component.
  • CONSOLIDATEAll footer/contact appearances into one connect/footer component.
  • CONSOLIDATEAll display headings into one controlled champagne display system.
Duplicate System Finding Governance Decision
Homepages01 and 02 are near-twins; 02 mainly adds an In Conversation module and a Forbes press tile.Keep 01 as shell; harvest useful 02 content into 01.
Artwork listings08 and 09 share the same desktop pattern with different artworks and crops.Standardize on 08, with 09 as alternate content/crop reference only.
Category intros10 and 11 are the same template with different content.Make 11 the template; treat 10 as content poured into it.
Mobile listings16, 17, and 18 are one mobile component shown with different content.Use 16 as mobile canon; salvage copy/crops from 17 and 18 if needed.
Navigation04, 05, and 20 represent competing menu philosophies across desktop and mobile.Commit to 04 desktop; reconcile 05 mobile; fold 20 atmosphere into 04 only if useful.
Galleries12 uses gallery logos; 13 uses typographic gallery names.Adopt 13 as body system; pair with 12 exhibition-room hero. Avoid a logo zoo.
  1. REMOVEAny canonical use of light or cream pages.
  2. REMOVEHoefler and one-off Didot homepage experiments from the canonical system.
  3. REMOVERaw icon boards, standalone social layouts, placeholder blocks, and red annotations from the implementation source set.
  4. REMOVEOversized CTA button patterns not present in the canonical screens.
  5. REMOVEFull-screen text-only desktop menu as the primary desktop menu.
Retire From Canon Reason Salvage Before Retiring
02 (023)Duplicate homepage.Move the In Conversation module into 01 if it survives content review.
07 (063)Component, not a page.Keep as BooksCarousel specification.
09 (001)Duplicate artwork listing.Use as alternate artwork/crop reference only.
10 (145)Duplicate of 11 category template.Keep as content instance inside 11.
17 (121)Duplicate mobile listing.Salvage series-intro copy if useful.
18 (082)Duplicate mobile listing.No unique system value identified.
20 (038)Competing second menu concept.Fold atmospheric-image idea into 04 only as optional enhancement.
Creative Director Findings / 09

Multiplicity, not quality.
Systemization before redesign.

The Creative Director review confirms that the brand is visually coherent. The unresolved work is not aesthetic invention; it is governance.

Multiplicity, not quality: several strong ideas appear more than once as near-twins. These should be consolidated into canonical templates and content instances.

Navigation remains the main unresolved system question: screen 04 is the canonical desktop visual index, screen 05 is the canonical mobile menu, and screen 20 should be treated as an atmospheric reference, not a competing system.

Canonical 12: the twelve screens in this Bible cover the site architecture. The former top-20 set becomes canonical reference plus archival shelf.

Strongest brand signals: screen 03 is the purest Drebin atmosphere, 06 is the cleanest grid, 08 is the commercial engine, 04 is the most ownable navigation idea, 15 proves editorial range, and 01 assembles the full journey.

Secondary content issue: placeholder-grade copy, repeated pricing language, casing drift, and the gallery logo-versus-typeset decision need cleanup after the system is locked.

Next Phase / 10

Define, componentize,
then implement.

Current Phase

System Definition. The canonical screens, archetypes, visual DNA, component candidates, token candidates, and governance rules are now documented in one authoritative Design Bible.

Next Phase

Componentization. Build the named components and tokens directly from the canonical twelve without generating alternative visual directions.

Blockers To Resolve

One display serif system, one navigation model across desktop and mobile, and one gallery treatment. Recommendation remains typeset gallery names, with the exhibition-room hero as the authority image.

After That

Implementation. Translate the componentized system into production UI, content templates, and AI-readable implementation guidance.

Content Pass

Remove repeated placeholder pricing, fix casing slips, finalize gallery treatment, and keep CTAs as quiet words rather than buttons.

Not

Redesign. The visual language is already resolved; the next work is curation, systemization, and content cleanup.