Deep navy
--color-brand-navy
#071B33
Erik Morse Photography Design System
A restrained foundation for premium sports photography: deep navy application chrome, royal blue actions, athletic yellow emphasis, system typography, and quiet surfaces that leave room for photographs to lead.
Color Tokens
A focused palette for brand, action, surface, text, state, and dark viewer contexts.
Navy surface
--color-brand-navy-surface
#0D2948
Royal blue
--color-brand-blue
#174E8C
Athletic yellow
--color-accent-yellow
#F4C430
Yellow hover
--color-accent-yellow-hover
#DDB027
Page background
--color-page
#F7F8F5
Surface
--color-surface
#FFFFFF
Muted surface
--color-surface-muted
#EEF2F5
Border
--color-border
#D8DEE6
Primary text
--color-text
#132133
Secondary text
--color-text-secondary
#415065
Muted text
--color-text-muted
#687386
Success
--color-success
#1F7A4D
Error
--color-error
#B42318
Focus ring
--color-focus
#2F7DDB
Viewer background
--color-viewer-bg
#040B14
Typography
System fonts keep the foundation fast and familiar while leaving brand typography open for a later decision.
Display photography moment
Page title for a season
Section title for an event
Body copy remains readable on phones first, with calm line height and enough contrast for fast scanning between album details.
Metadata text · Friday night football · 128 photos
Buttons
Button classes work on semantic button and anchor elements, with visible focus states and at least 44px practical targets.
Primary and accent
States
Ghost, icon, destructive
Icon-only buttons require an accessible label.
Dark surface
Badges And Metadata
Compact labels should support scanning without becoming decorative clutter.
Soccer118 photosReady to publishNeeds captions
Surfaces
Panels, sheets, and card foundations are intentionally quiet so future photographs can dominate.
Basic panel
Album notes
Simple containers separate related content without competing with images.
Album-card foundation
Track invitational
Elevated sheet
Saved Photos
Future selection review surfaces can use this elevated sheet foundation.
Forms
Native controls keep expected mobile behavior while sharing consistent spacing, labels, helper text, and error states.
Layout Primitives
A small set of composable classes covers containers, sections, stacks, clusters, grids, skip links, and visually hidden text.
Cluster wraps
Grid item
Grid item
Grid item
Accessibility Notes
The foundation favors semantic HTML, visible focus, strong contrast, and native control behavior.
Focus visible
Keyboard users get an obvious blue focus ring. Focus outlines are not globally hidden.
Test focusSafe area
Layout tokens include safe-area insets for notches, home indicators, and future bottom action areas.
Reduced motion
Nonessential transitions reduce to near-instant timing when reduced motion is requested.
Immersive Viewer Surface
A dark surface sample prepares for future fullscreen viewing without building the viewer workflow yet.
Neutral photo placeholder