Archive first. Every decision serves the work, not the designer.

Light ground. Bone-white or near-white background, deep-ink text.

Orange accent. #FF6600 for hover, active states, links — not decoration.

No gradients, no rounded corners. Clarity through simplicity.

Full color always. Artwork thumbnails keep saturated color at all times.

Filter Chip Component

<span class="filter-chip">
  Collage
  <button>×</button>
</span>

/* CSS */
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; color: #0B0B0B;
  background: #ebe8e2; border: 1px solid #c4c7c7;
  padding: 4px 10px;
}

Orange Link

<a href="#" class="bracket-link">[ Learn More → ]</a>

/* CSS */
.bracket-link {
  color: #B84700; /* orange-ink for light bg */
  text-decoration: none;
  transition: color 0.2s ease;
}
.bracket-link:hover {
  color: #FF6600;
}

Keyboard Shortcut Listener

document.addEventListener('keydown', (e) => {
  if ((e.metaKey || e.ctrlKey) && e.shiftKey) {
    if (e.key === 'D') {
      e.preventDefault();
      // Toggle your modal here
    }
  }
});

Contrast rules:

• #FF6600 (orange) on dark backgrounds only (6.7:1)
• #B84700 (orange-ink) for text on light backgrounds (5.07:1 AA)
• #0B0B0B (deep-ink) on light backgrounds (16:1)

Keyboard navigation:

• All interactive elements focusable with Tab
• Focus rings: 2px solid #FF6600
• Shortcuts: ⌘K (search), ⌘Shift+D (design system), ← → (decade nav)

Motion: Respect prefers-reduced-motion: reduce — disable all entrance animations, keep transitions instant.