Use orange-ink (#B84700) for persistent text on light backgrounds.
International-orange (#FF6600) only for hover states, fills, and sections on dark backgrounds. Never persistent text on light.

Why I Made Things

Something that still had a life left in it. I would see discarded materials—objects that had already served their purpose—and imagine what they could become. Not repair or restoration, but transformation. A broken cassette case becomes a sculptural element. A strip of fabric becomes the surface for a new composition.

Heading: Display 40px · Body: 16px / 1.6 line-height

Untitled (Cassette Torso)

2020 · COLLAGE

Pairs: heading + label, minimal spacing

Work ID	Title	Year	Medium
art1010	Untitled (Cassette Torso)	2020	Collage
art0953	Guernica (Full Scale)	1990s	Collage
art0380	Devo at WHK Auditorium	1977	Photography

Collage × 1990s ×

Try hovering over elements above:

• Buttons: Opacity transition, no scale
• Links: Underline animates in via transform
• Cards: Optional shadow intensification (not currently visible, can be added)

Try tabbing to any button or link:

• Outline: 2px solid #FF6600, offset 2px
• Never hidden: Always visible, never removed
• High contrast: Orange on bone-white background

• Container max-width: 1200px (padding: 20px on mobile, 40px desktop)
• Grid gap: 24px on desktop, 16px on tablet, 12px on mobile
• Card padding: 16–24px (never less, never more)
• Button padding: 12px vertical, 20px horizontal (minimum 44×44px target)
• Form field height: 40px minimum (includes padding)

Grid layout: 3 cols on desktop, sticky filters on left, cards stack on mobile

Archive › Collage › 1990s

Hierarchy: breadcrumb (11px label) → heading (40px) → action button (right-aligned)

Work ID	Title	Year	Medium
art0001	Untitled Study	1974	Collage
art0002	Reliquary	1990	Mixed Media
art0003	Threshold	2005	Sculpture

Zebra striping (alternating rows), monospace IDs, 12px responsive

Foreground	Background	Ratio	AA	AAA	Usage
deep-ink #0B0B0B	bone-white #fcf9f3	20:1	✓	✓	Primary text, headings
archive-gray #575757	bone-white #fcf9f3	8.59:1	✓	✓	Secondary text, labels
orange-ink #B84700	bone-white #fcf9f3	5.07:1	✓	—	Persistent orange text
int-orange #FF6600	bone-white #fcf9f3	2.79:1	✗	✗	Hover only, NOT text
int-orange #FF6600	deep-ink #0B0B0B	6.7:1	✓	✓	On dark sections

Rule: All persistent text meets WCAG AA (4.5:1). International-orange (#FF6600) only used for hover states or text on dark backgrounds. No exceptions.

• Mobile: iPhone 15 Pro (primary test device), iPhone SE (320px minimum)
• Tablet: iPad (7th gen), iPad Air
• Desktop: 1280px (typical), 1920px (larger screens), 2560px (ultra-wide)
• Touch: All interactive elements tested with finger on actual devices
• Browsers: Safari (iOS), Chrome, Firefox, Edge (latest 2 versions)

Phase A (4): Filter chip removal pulse+slide, table row hover, loading state (progress bar+dots), artwork tooltip
Phase B (5): Page transitions fade-through, grid stagger, related works stagger, form input bounce, breadcrumb color shift
Phase C (5): Link underline draw, sort arrow rotate, search flash, modal entrance, mobile swipe gesture+haptics
Phase D (3): Custom scrollbar, focus ring pulse, toast slide-in/out

✅ Decade page discoverability (links in start-here nav)
✅ Filter loading state (upgraded to Phase A animations)
✅ Mobile breadcrumb truncation (fixed logic, works on <768px)

✅ Data table styling: Zebra striping, hover effects, mobile stacking
✅ Related works sidebar: Card design, left border accent, hover transitions
✅ Print styles: Enhanced page setup, heading hierarchy, URL display, table optimization
✅ Scroll-reveal animations: IntersectionObserver fade-in with stagger
✅ Button press feedback: Scale animation (1→0.95→1), success states
✅ Custom scrollbar: Warm-brown + orange hover (desktop)
✅ Skeleton placeholders: Shimmer animation, grid variants, size options

Press ? anywhere on the site to open a full-screen modal with keyboard navigation help. Includes backdrop blur, fade-in animation, and ESC to close.

Open Shortcuts Modal (or press ?)

Includes: P/N (prev/next work) · ←→ (decade nav) · ? (help) · ESC (close)

On the archive page, save your filter combinations (medium, decade, series) as named presets. Presets persist across sessions using browser localStorage.

Try on Archive Page

Feedback messages appear at the bottom-right with slide-in animation. Available types: success (green), error (red), info (blue).

On decade pages (1970s–2020s), swipe left or right to navigate between decades. Includes haptic feedback on mobile devices.

When navigating from archive to individual artwork, a fade-through-color overlay connects the two states visually (200ms duration).

Interaction	Duration	Easing	Purpose
Hover state (button/link)	200ms	ease	Feedback
Page transition overlay	200ms	ease	Navigation
Entrance (fade-in)	500ms	ease	Load reveal
Stagger (per item)	50ms	—	Sequential effect
Toast slide-in	300ms	ease-out	Notification
Focus ring pulse	600ms	ease-in-out	Keyboard nav
Button press (scale)	150ms	cubic-bezier(0.4,0,0.2,1)	Click feedback

Principle: Interactions ≤ 300ms feel instantaneous. Entrances 400–600ms feel elegant. All durations respect prefers-reduced-motion setting.

All site-wide animations use one of two easing curves for consistency and premium feel:

Status: Dark mode is a future enhancement. The light system is the current standard. If dark mode ships, it would: (1) apply automatically at 8 PM based on system preferences, (2) preserve all accessibility contrast ratios, (3) never dim artwork images with filters.

Canvas-based visualization of all 1,084 works by dominant color in chronological order (1974–present).

• Canvas element (HiDPI aware)
• Hover shows cursor line (1px white, 50% opacity)
• Tooltip on hover: preview image (72px), work title, year
• Click opens work detail page
• Mobile: shorter height, full width
• Desktop: full height, 1200px max
• Data source: chromatic.json (color + year per work)

Dense grid of all 1,084 tiny tiles. Shows complete archive at a glance.

• Grid: 12 columns on desktop, 6 on tablet, 4 on mobile
• Tile: aspect-ratio 1:1, gap: 2px
• Image: full-color AVIF, cover fit
• Hover: outline color #FF6600, z-index lifts above neighbors
• Click: opens work detail
• No sibling dim (all images stay full color)

Editorial grid featuring 3 curated works: 1 large hero (7 cols × 6 rows) + 2 medium (5 cols × 3 rows each).

• Desktop: 12-column grid, 80px rows, 32px gaps
• Image lazy-load: `loading="lazy"` + fade-in on `.is-loaded`
• Hover: shadow lifts, title turns #FF6600
• Card Frame: orange border overlay on hover
• Tablet/Mobile: stacks to single column

The Void in the Record

An estimated 500–1,000 works lost to water damage.

A significant part of Jeff's early work was lost. What survived is here in full; what's gone is remembered on the Lost Works page.

Explore the Lost Works

Surviving fragment image (shown faded)

• Trigger: ⌘K (Mac) or Ctrl+K (Windows) or click search icon
• Modal: Fixed position, backdrop blur (#fcf9f3 @ 80% opacity)
• Input: 16px, placeholder text, auto-focus
• Results: Dropdown below, 1084px max height, scroll
• Result item: 40px height, hover bg #ebe8e2, click opens work
• Close: ESC key or click backdrop
• Animation: Fade-in (200ms ease)

Vertical snap-scroll carousel on mobile (320–767px). Shows featured works one at a time.

• Sections: 1. Hero · 2. art0380 · 3. art0002 · 4. art0026 (4 total)
• Container: `scroll-snap-type: y mandatory`, height: calc(100dvh - 4rem)
• Section: `scroll-snap-align: start`, 100% viewport height
• Folio Rail: Vertical dot indicators on right edge (44×44px buttons)
• Dot: 5px filled circle, 1.5px border
• Active dot: #FF6600, highlight when section in view
• Animation: Smooth scroll behavior, dots update on scroll via IntersectionObserver
• Desktop: Hidden (layout switches to grid)

CSS View Transition API: Artwork thumbnail morphs into detail page image.

• Browser support: Chrome 111+, Edge 111+ (graceful fallback: standard navigation)
• Rule: `@view-transition { navigation: auto; }` in CSS
• Named element: Click handler sets `img.style.viewTransitionName = 'artwork-hero'`
• Animation: Browser morphs thumbnail position/size to detail page position
• Duration: ~300–400ms (automatic, browser-optimized)
• Respects: `prefers-reduced-motion: reduce` (skips transition)

• Source: Feather Icons (feathericons.com)
• Size: 18px × 18px (base), 20px × 20px (buttons)
• Stroke width: 1.8px
• Color: Inherit from parent (current text color)
• Hover: Color transitions to #FF6600 with 200ms ease
• Used in: Mobile drawer (8 icons), buttons, headers
• Format: Inline SVG (no external files)

• JFSN wordmark hover: "Jeffrey Francis Stanley Neumann" appears below
• Chromatic River hover: Preview image (72×72px) + title + year
• Position: Below trigger, centered, 10px offset
• Background: #0B0B0B (deep-ink)
• Text: 10px, white (#F3F0EA), no-wrap
• Animation: Fade-in (200ms ease) on hover, fade-out on mouse-leave
• z-index: Above all content

• Element: HTML5 `<audio controls>`
• Styling: Uses browser defaults (no custom CSS currently)
• Width: 100% (responsive)
• Height: 32px
• Preload: `preload="none"` (lazy load)
• Format: MP3 (supported across all browsers)
• Used in: "In His Own Words" quote card on about.html

• Size: 20×20px squares
• Border: 1px solid #c4c7c7
• Background: Transparent
• Hover: Border color changes to #FF6600 (200ms ease)
• Used in: Lost Works banner section
• Purpose: Represents lost/missing works (empty frames)

• Attribute: `data-counter="1084"`
• Animation: Counts from 0 → 1,084 on page load
• Duration: ~1.5 seconds
• Timing: JavaScript counts up with easing
• Used in: Stats display (Mobile "About This Archive" section)
• Triggers: When stats section becomes visible (IntersectionObserver)

• Default: background #ebe8e2, border #8e7164, text #0B0B0B
• Hover: border + text color → #FF6600 (200ms ease)
• Focus: 2px #FF6600 outline, offset 1px
• Removing: opacity 0.5, border fade to #c4c7c7
• Remove animation: Slide-out (slide-left animation) + fade
• Used in: Archive page filter UI
• Haptic: Vibration feedback on remove (10ms tap)

Attribute	Value(s)	Used For
data-counter	1084 (number)	Count-up animation on stats
data-filter-type	"medium", "decade", "series"	Filter chip categorization (archive)
data-filter-val	Filter value (e.g., "collage", "1970s")	Filter data binding
data-page-label	"1970s", "1980s", etc.	Vertical "you are here" label on decade pages
data-kb="reveal"	"reveal" (animation type)	Hero slide reveal animation type

Property	Example Value	Used For
--delay	0ms, 50ms, 100ms, 150ms	Stagger animation delays (grid, related works)
--reveal-delay	0ms, 100ms, 200ms	Scroll-reveal entrance delays
--mat	#ebe8e2 (dominant color)	Featured card background (average work color)
--mat-hover	#d0c9c0 (darker variant)	Featured card hover background

Component	Mobile (<768px)	Desktop (≥768px)
Featured Grid	Single col, snap-scroll folio	12-col bento layout
Navigation	Hamburger menu, drawer	Top horizontal nav bar
Archive Grid	1 column	3–4 columns
Stats Display	2×2 grid (compact)	2×2 grid (wider)
Chromatic River	Height: 56px	Height: 120px

✅ Tier 1 Complete: Design Principles · Component States Gallery · Typography Specimens · Animation Showcase Looping
✅ Tier 2 Complete: Spacing & Grid System · Real-World Patterns · Color Contrast Data · Responsive Breakpoints
✅ Tier 3 Complete: Dark Mode Exploration · Design Vocabulary · Voice & Tone Guide
✅ Session 57 Complete: 30 UX/UI improvements shipped, style guide applied to all 40 pages