SYSTEM OF RECORD
The ATLAS system, documented in use.
A working reference for how the ATLAS Showcase is designed, structured, maintained, tested, and extended. This page connects the public experience to the CMS workflows, content relationships, accessibility expectations, and technical decisions that support it.
Use this reference when updating the current Showcase, onboarding future contributors, or planning new ATLAS platforms and institutional extensions.
- Version
- 1.0
- Last updated
- 2026-08-10
- Status
- Active draft, noindex
- Documentation owner
- ATLAS operations role
- Engineering owner
- Showcase engineering role
- Design owner
- Showcase design role
- Admin owner
- ATLAS CMS administration role
- Environments
- Local, staging, production — URLs shared with the team
01
Purpose and principles
The ATLAS Showcase is the public archive and operational surface for student work, research, creative technology, and interdisciplinary practice connected to the ATLAS Institute and the College of Engineering and Applied Science. It serves future students, current makers, faculty, administrators, institutional partners, and future contributors maintaining the platform.
Projects prove
The archive should show tangible work, not rely only on institutional claims.
People connect the archive
Makers, collaborators, researchers, educators, and students provide the connective structure between projects.
Content remains maintainable
Routine updates should be possible without developer intervention.
Editorial design supports discovery
Typography, imagery, spacing, and motion should help users understand relationships and move through the archive.
Mobile is part of the system
Responsive behavior should be designed as a deliberate recomposition rather than a compressed desktop layout.
Accessibility is structural
Accessibility should influence component behavior, content structure, keyboard use, motion, and editorial decisions from the start.
Systems should extend
New ATLAS initiatives should reuse stable patterns rather than rebuild common infrastructure from scratch.
03
Acceptance status
This audit status separates Phase 01 closeout needs from forward-looking exploration. Conditional items are not presented as complete until verified through the relevant admin or engineering walkthrough.
Accepted or substantially complete
- Responsive navigation
- Floating utility system
- Homepage messaging
- Homepage taxonomy and filtering
- People directory
- Alphabetical sorting logic
- About visual redesign
- Institutional linking
- Footer improvements
- Mobile design system
- Editorial headers
- Pixel Window system
Conditional verification
- Description versus body workflows
- Post-publication editing (preverified by Jonbo)
- Admin permissions
- Internal maintainability
- CMS-driven About editing (preverified by Jonbo)
- Pending project editing (preverified by Jonbo)
- Custom project-link labels (preverified by Jonbo)
Open closeout items
- Final accessibility QA
- Architecture notes
- Publishing workflow documentation
- Admin walkthrough
- Final data-quality review
- /ssot completion
Phase 02 candidates
- AI-assisted taxonomy
- Knowledge graph exploration
- Cross-project relationship mapping
- Institutional publishing tools
- Advanced recommendation systems
- Multi-site architecture
- colorado.edu/atlas expansion
04
Platform architecture
Security rule
Sensitive infrastructure values, credentials, API keys, tokens, passwords, private repository URLs, internal infrastructure identifiers, and security configuration details are never exposed here. Values that belong in infrastructure are documented as stored securely in the deployment environment.
Repository name
atlasinstitute.work
Primary branch
main
Staging environment
University Cloudflare staging worker
Production environment
Cloudflare Workers, D1, and R2. Production URL to be confirmed by ATLAS.
Hosting platform
Cloudflare
Runtime/framework
React Router application on Cloudflare Workers
CMS or data layer
D1-backed application data with admin-managed content relationships
Authentication system
Magic-link authentication
Media-storage system
R2-backed media references
Deployment method
Manual deployment gated outside agent sessions
Rollback method
To be confirmed by engineering
Monitoring approach
To be confirmed by engineering
Primary owners
ATLAS and Showcase engineering roles
Maintenance contacts
To be confirmed by ATLAS
Known fragile dependencies
To be confirmed by engineering
Known technical risks
Data quality, media consistency, and unverified admin workflow edges
System map
- Public UI
- Application layer
- CMS / Data relationships
- Media storage
- Deployment and hosting
05
Content model
The content model documents public presentation and admin responsibilities without exposing private infrastructure. Description length is guidance unless enforcement exists in the CMS.
Projects
- Title
- Description: concise summary for cards, search results, previews, and compact contexts
- Body: longer content for the project detail experience
- Project links
- Makers
- Categories
- Metadata
- Media
- Publication status
- Featured state
- Optional archive-gallery use
Makers
- Public name
- Sorting name or surname logic
- Role or academic affiliation
- Related projects
- Public visibility
- Optional profile information
- Optional media
Relationships
- Maker ↔ Project
- Project ↔ Category
- Project ↔ Theme
- Project ↔ Medium
- Project ↔ Technology
- Project ↔ Featured surface
About content
- Heading
- Body content
- Supporting blocks
- Links
- Media
- Institutional destinations
Pixel Window gallery
- Image
- Alt text
- Project title
- Short descriptor
- Related project
- Related maker
- Display order
- Enabled state
- Optional focal point
- Mask behavior controlled by the frontend
06
Publishing workflows
Verification status: Pending admin walkthrough
Contributor editing after publication, revision review, archiving, restore behavior, image replacement, and maker relationship management require final ATLAS/admin verification.
Acceptance test checklist
- Create a test project
- Save as pending
- Reopen as the original contributor
- Edit content
- Approve as an administrator
- Publish
- Edit after publication
- Confirm permissions
- Confirm no duplication
- Confirm archive relationships
- Confirm removal or unpublishing behavior
07
Design system
Identity notice
This section documents the digital implementation and UI/X extension of the ATLAS identity. It does not replace official ATLAS identity resources.
Typography
Eyebrow
SYSTEM OF RECORD
Display headline
The ATLAS system, documented in use.
Page headline
A maintainable archive for creative technology.
Section headline
Publishing workflow
Subhead
Use this reference when updating the current Showcase.
Body
Documentation should render the system without changing the system.
Metadata
Verification status: Pending admin walkthrough
Labels
Accepted with final QA
Links
ATLAS Logos & Digital Media ↗
Captions
Example data only. Does not write to the CMS.
Color roles
Live isolated examples
Example project
Responsive Archive Study
Mocked display data only. This example does not read or write CMS state.
Example Pixel Window
CMS image, frontend mask
Examples are locally scoped and use mocked data. They do not mount the production homepage, People page, or any destructive form.
Component authority metadata
| Component | Classification | Authority |
|---|---|---|
| ATLAS wordmark | Official identity asset | ATLAS Communications and official identity resources |
| Top navigation | Showcase UI/X extension | Showcase /ssot |
| Donate/About interaction | Showcase UI/X extension | Showcase /ssot |
| Floating utility navigation | Showcase UI/X extension | Showcase /ssot |
| Editorial page header | Showcase UI/X extension | Showcase /ssot |
| Project card | Showcase UI/X extension | Showcase /ssot |
| Maker listing | Showcase UI/X extension | Showcase /ssot |
| Filter group | Showcase UI/X extension | Showcase /ssot |
| Grid/list controls | Showcase UI/X extension | Showcase /ssot |
| Back-to-top | Showcase UI/X extension | Showcase /ssot |
| About overlay | Showcase UI/X extension | Showcase /ssot |
| Mega-footer | Hybrid implementation | CU and ATLAS identity requirements plus Showcase /ssot |
| Masked ATLAS A | Hybrid implementation | Official identity reference plus Showcase /ssot |
| Pixel Window | Showcase UI/X extension informed by ATLAS geometry | Showcase /ssot |
| External links | Showcase UI/X extension | Showcase /ssot |
| Carousel controls | Showcase UI/X extension | Showcase /ssot |
Extension boundary
- Official wordmarks → Responsive header behavior
- Institutional marks → Placement within digital layouts
- Foundational typography direction → Responsive type hierarchy
- Brand identity → Functional interface states
- Official photography resources → CMS cropping and presentation
- Identity geometry → Pixel Window and masked-gallery systems
- Institutional voice → Interface labels and instructions
- Brand governance → Search, filtering, navigation, and workflows
08
Discovery and taxonomy
Search and filtering
- Search entry points include public browse surfaces and route-specific search behavior.
- Search scope and empty states should be confirmed during final QA.
- Filter groups include Medium, Craft, Technology, and Theme where represented by the current taxonomy.
- Do not hardcode taxonomy values here when they can be sourced from the CMS or shared configuration.
- Keyboard behavior must remain usable without pointer input.
Sorting and governance
- Default project ordering follows current browse implementation.
- Makers sort alphabetically with surname behavior documented from implementation.
- Incomplete or malformed names require data-quality review.
- Featured-project logic is implementation-owned and should be verified before release.
- Grid/list behavior belongs to the Showcase UI/X system.
Data-governance checks
- Duplicate makers
- Incorrect capitalization
- Username-like public names
- Excessively long link labels
- Duplicate project records
- Missing categories
- Missing alt text
- Broken relationships
09
Accessibility Standards
Accessibility is a product requirement, not a QA checklist. Every component documented in /ssot should be evaluated for semantic structure, keyboard interaction, focus management, responsive behavior, motion preferences, color contrast, and readable content hierarchy throughout its lifecycle.
The ATLAS Showcase uses WCAG 2.2 Level AA as its target for design, engineering, content, and QA decisions where applicable. This documentation does not represent a formal third-party certification or guarantee complete conformance; it records the standards, responsibilities, and testing expectations used to improve and maintain accessibility across the platform.
Standards checklist
- Semantic HTML and landmarks
- Logical heading structure
- Keyboard-only operation
- Visible focus
- Focus trapping and focus return
- Accessible names for icon-only controls
- Meaningful link and button labels
- Color contrast
- Text resizing and 200% zoom
- Reflow without horizontal scrolling
- Reduced-motion preferences
- Touch-target sizing
- Image alt text
- Form labels, instructions, and errors
- Screen-reader reading order
- Dynamic-content announcements
- Carousel controls
- Modal or overlay dismissal
- CMS authoring responsibilities
Shared responsibility
- Design owns semantic hierarchy, visible focus expectations, responsive reading order, contrast, and motion intent.
- Engineering owns keyboard operation, focus management, semantic implementation, state communication, reduced-motion support, and resilient reflow.
- Content administration owns alt text, meaningful labels, concise summaries, heading order, readable captions, and mobile crop review.
- QA owns manual keyboard testing, assistive-technology spot checks, zoom, contrast, reflow, forms, overlays, and dynamic behavior.
Component accessibility metadata
| Component | Keyboard | Focus | Semantic role | Accessible naming | Motion | Reading order | Limitations | Verification |
|---|---|---|---|---|---|---|---|---|
| Top navigation | Links and menu controls must be reachable and operable by keyboard. | Visible focus and focus return after menu dismissal. | Landmark navigation with links and buttons. | Menu, About, Donate, and account controls require meaningful accessible names. | Transitions must respect reduced-motion preferences. | Mobile menu order follows the visual and task order. | Reverify after meaningful navigation, copy, or interaction changes. | Verified |
| Floating utility navigation | Search, route links, filter controls, view controls, and back-to-top must be keyboard operable. | Current control and active panel require visible focus without relying on color alone. | Toolbar-like navigation with buttons and links. | Icon-only controls require accessible names and state labels. | Panel transitions must not override reduced-motion preferences. | Controls must not cover or interrupt mobile page reading order. | Reverify when controls, filter behavior, or mobile placement changes. | Verified |
| About overlay | Open, close, link traversal, and Escape dismissal must work without pointer input. | Focus moves into the panel, remains contained, and returns to the trigger. | Modal or dialog-like overlay with clear dismissal. | Close control, document links, and action cards require meaningful labels. | Overlay animation must respect reduced-motion preferences. | Panel content must read in the same order it is visually presented. | Reverify after About content model, overlay motion, or focus behavior changes. | Verified |
| Pixel Window | Previous, next, and project links must be keyboard accessible. | Controls and links require visible focus indicators. | Figure or complementary media region with captioned context. | Images require useful alt text; controls require explicit labels. | Passive rotation pauses on interaction and respects reduced-motion preferences. | Caption and controls must remain logical on mobile. | Image quality and alt text depend on CMS authoring and should be rechecked after content edits. | Verified |
| Project card | Card links and metadata links must be reachable without pointer input. | Visible focus must identify the active link target. | Article or list item depending on context. | Project title and linked maker/category labels must be meaningful out of context. | Hover effects must not be required to understand content. | Title, image, metadata, and summary must remain coherent as the card recomposes. | CMS summaries and image alt text remain shared content-administration responsibilities. | Verified |
| Admin forms | Inputs, selects, upload controls, and submit actions must be keyboard operable. | Validation and save flows must preserve or restore useful focus. | Labeled forms with grouped controls where relationships matter. | Labels, helper copy, and error messages must identify each field clearly. | Status changes should not rely on animation. | Fields should follow the editing workflow order. | Student-facing forms were remediated in the 2026-08-10 accessibility pass (label association, error announcements, keyboard-operable upload). Admin-surface forms still have unassociated labels and unannounced mutations; see the A11y Design Review section. | Pending |
Verification reflects the current project handoff and does not represent legal compliance, formal WCAG certification, or a third-party audit. Verification is currently maintained manually as part of project acceptance. The metadata model is intentionally structured so future versions of /ssot may synchronize verification status with Acceptance Criteria, QA workflows, or automated validation pipelines without requiring changes to the interface.
CMS and content guidance
- Write meaningful alt text that describes the information or purpose of the image in context.
- Mark an image as decorative only when it adds no information and is not needed to understand the page.
- Avoid vague link labels such as click here, read more, or learn more when the destination is not otherwise clear.
- Maintain logical heading order when editing long-form content.
- Write concise, descriptive project summaries for cards, previews, and search contexts.
- Avoid placing essential text only inside images.
- Review image crops at mobile breakpoints before publishing.
- Preserve accessible names when editing button or link copy.
- Confirm CMS-entered captions and labels remain readable at small widths.
Component-specific notes
- Floating utility navigation: every icon has an accessible name and current state is not communicated by color alone.
- About overlay: focus moves into the panel, remains contained, Escape closes the panel, and focus returns to the trigger.
- Pixel Window: images require appropriate alt text, motion respects reduced-motion preferences, controls are keyboard accessible, and passive rotation should not create disruptive announcements.
- Mobile reading order remains logical across recomposed layouts.
Accessibility QA target
Test against WCAG 2.2 Level AA success criteria relevant to each component or workflow. Automated scans can support the process, but manual review and assistive-technology spot checks are required; automated testing alone does not establish conformance.
10
Accessibility edits for design review
Working record of the 2026-08-10 accessibility engineering pass over the public site and student dashboard, and the queue it left behind. Engineering fixes below are shipped; the contrast and interaction items change how the site looks or behaves, so they wait on design sign-off rather than being changed unilaterally. Section 09 defines the standard — this section is the current worklist against it.
Completed — 2026-08-10 engineering pass
- Skip-to-content link and <main> landmarks across public, dashboard, and auth pages
- Focus moves to main content after client-side navigation (the page-fade previously destroyed the focused element)
- Framer Motion animations respect prefers-reduced-motion via MotionConfig
- About overlay is a real modal: focus moves in, Tab is contained, Escape closes, focus returns to the trigger
- About triggers expose dialog state (aria-haspopup/aria-expanded); anchor-as-button triggers converted to buttons
- Browse utility: aria-pressed on view toggles and filter chips, aria-expanded on Search/Filters, focus returns on close
- Every student-facing form field has a programmatically associated label (htmlFor/id, fieldset/legend groups)
- Image upload is keyboard operable (label-wrapped file input instead of a click-only div with a display:none input)
- Errors announce via role="alert"; save/sent confirmations and search result counts announce via role="status"
- Category picker chips expose selected state (aria-pressed) and the group carries the required-field semantics
- Focus indicators restored where outline was removed (site search, spotlight select) plus a global :focus-visible baseline
- People galleries pause auto-rotation on hover/focus; project video iframes have titles; header logo link has a name
- Error/404 page sets a document title and renders inside a <main> landmark
Contrast plan — proposed, awaiting design sign-off
No color values were changed in the engineering pass. Each row nudges a gray to the nearest AA-passing shade; the visual character stays, the failures don't.
| Color | Where it appears | Current contrast | Proposed |
|---|---|---|---|
| --color-atlas-gray (#a0a0a0) on white | Sitewide meta text: .textMain--14G/18G, list-view author + category rows, empty states, error-page copy | 2.6:1 — fails AA (4.5:1) | Darken to ≈#767676 or deeper; keeps the gray-on-white look |
| Pagination #8e8e8e on white | “Showing 1–30 of 240” summary and “Page 1 of 8” | 3.3:1 — fails AA for body-size text | Darken to ≈#767676 |
| Disabled #c9c9c9 on white | Disabled Previous/Next pagination and A–Z jump-nav letters with no matches | 1.7:1 | Darken toward ≈#949494, or pair the disabled state with a non-color cue |
| Eyebrow #7a7a7a at 11–12px | “SPOTLIGHT PROJECTS”, people pathway label, pixel-window eyebrow | 4.3:1 — just under AA at this size | Darken slightly to ≈#707070 |
| /ssot 11px text-black/46 | Status pills and side-nav caption on this page | ≈3.5:1 | Raise to text-black/60 or larger type |
Interaction decisions needing design input
- Spotlight mode <select> navigates on change (WCAG 3.2.2 On Input). Options: add an explicit Go affordance, or accept as a documented exception.
- People galleries: hover/focus pause shipped, but WCAG 2.2.2 wants a visible pause control for the 6s auto-rotation — needs a designed affordance.
- Project cards on touch: first tap reveals the overlay, second tap navigates. Under mobile screen readers this reads as a link that needs double activation with no feedback — pattern needs a design decision.
- About drawer header image is currently treated as decorative (empty alt). Confirm, or add a CMS-authored alt field.
Deferred engineering work
- Admin-surface pass: ~90 unassociated form labels, tables without scope/caption, color-only status dots, unlabeled switch-style toggles, mobile drawer without a focus trap, no mutation announcements
- StudentPicker typeahead: full combobox semantics (role, aria-expanded, aria-activedescendant, arrow-key navigation)
- RichTextEditor: roving-tabindex toolbar, aria-pressed on Bold/Italic, replace the prompt()-based link dialog
- Project detail Media/Info toggle: real tablist semantics (today: buttons with aria-pressed)
- Route-change announcer (polite live region) to complement the focus reset that already shipped
- CategoryPicker/TagPicker components are dead code — remove with the issue #135 taxonomy cleanup instead of remediating
11
Administration and maintenance
Routine admin tasks
- Editing About content
- Adding a project
- Updating a project
- Managing makers
- Creating relationships
- Managing categories
- Editing links
- Preparing images
- Writing alt text
- Managing Pixel Window images
- Reordering featured content
- Previewing changes
- Publishing
- Reverting changes
- Reporting issues
Image and naming guidance
- Recommended image dimensions: To be confirmed by engineering.
- Supported file types: To be confirmed by engineering.
- Maximum file size: To be confirmed by engineering unless enforced in upload code.
- Review focal-point behavior and mobile crop before publishing.
- Use descriptive alt text unless an image is purely decorative.
- Standardize maker names, project titles, external-link labels, category names, short descriptions, and internal slugs.
12
QA, release, and future extensions
Pre-release checklist
- All primary routes load
- Navigation links work
- About opens and closes
- Donate destination works
- Search works
- Filters work
- Grid/list switching works
- Empty results work
- Maker sorting is correct
- Project relationships display
- Submission workflow passes
- CMS edits publish
- External links are correct
- Alt text is present
- Keyboard testing passes
- Reduced motion works
- Mobile layouts pass
- No horizontal overflow
- No unexpected layout shift
- Staging approval is recorded
- Rollback plan is known
Responsive and browser matrix
- Small mobile
- Standard mobile
- Large mobile
- Tablet portrait
- Tablet landscape
- Small desktop
- Standard desktop
- Large desktop
- Supported browsers: To be confirmed from project requirements.
Known limitations
- Legacy content issues
- Duplicate maker records
- Overlong labels
- Missing media
- Deferred workflow changes
- Known rendering issues
- Accepted technical debt
Future extensions
- AI-assisted metadata suggestions
- Knowledge-graph exploration
- Institutional publishing
- Shared ATLAS component library
- colorado.edu/atlas integration
- Cross-campus content relationships
- Advanced recommendations
- Multi-institution architecture
- Migration tooling
- Extended analytics
Indexing and access
`/ssot` is publicly readable, excluded from primary site navigation, and marked `noindex,nofollow` until ATLAS explicitly approves public indexing. Operational details that become inappropriate for public readers should move behind authentication or into a split restricted documentation surface.