These Design Decisions document the visual and interaction choices that shaped the RAISE Manifesto website. They translate our intention and values into tangible user experience elements, ensuring consistency and purpose across all site sections.
Design Documents Overview
The RAISE Manifesto website design is documented through multiple design documents that address different aspects of the site. Each document builds upon the foundation of our core design system while addressing specific user needs and technical considerations.
Design 000: Design System Foundation
The foundational design system that establishes the visual language for the entire RAISE Manifesto website.
Typography
- Headings: Open Sans (sans-serif) for clarity and modern appearance
- Body Text: Lora (serif) for comfortable reading of longer content
- UI Elements: Open Sans (sans-serif) for consistency and functionality
Color System
- Background: #FAF9F6 (off-white for reduced eye strain)
- Text: #333333 (dark gray for readability)
- Headings: #222222 (darker gray for hierarchy)
- Accent: #546A7B (blue-gray for links and highlights)
Spacing & Layout
- Content Width: Maximum 800px for optimal readability
- Breakpoints: Mobile (up to 600px), Tablet (601px-900px), Desktop (901px+)
- Spacing Scale: Consistent spacing using 4px base unit
Design 001: Manifesto Website Design
Specific design considerations for the RAISE Manifesto homepage, focusing on making the manifesto content prominent while providing context.
Core Design Directives
- Manifesto First: The manifesto text is the hero content
- De-emphasize "Who": Author information present but not overshadowing manifesto
- Clarity for "What's Next": Future plans should be easy to understand
Layout Strategy
- Main View: Manifesto text occupies primary content area with minimal distraction
- Secondary Information: "Who We Are" and "What's Next" sections positioned below manifesto
- Discussion Links: Placed at the very end of the page for easy access
Design 002: Projects Directory Design
Design and implementation strategy for the RAISE Manifesto Example Projects section, showcasing real-world implementations.
Purpose
- Demonstrates RAISE in action through tangible examples
- Provides learning resource for those new to the methodology
- Showcases progression from vision to implementation
- Creates platform for community contribution and growth
Layout Strategy
- Projects Index: Grid layout with responsive project cards
- Individual Projects: Two-column layout with sidebar navigation
- Artifact Pages: Consistent content structure with navigation between artifacts
Design 003: Blog Section Design
Design for the Blog section serving as a platform for news, updates, and articles related to RAISE methodology.
Purpose
- Provides updates and insights about RAISE methodology development
- Shares real-world experiences implementing RAISE principles
- Creates platform for community engagement and discussion
- Demonstrates clear content organization and presentation
Layout Strategy
- Blog Index: Grid layout with article cards showing title, date, and summary
- Individual Posts: Full article content with proper typography and navigation
Design 004: Navigation System Design
Comprehensive navigation system ensuring users can move intuitively between manifesto, projects, and blog sections.
Breadcrumb-Only Navigation Strategy
To maintain content focus and minimal visual overhead, the site uses breadcrumb navigation as the primary wayfinding mechanism:
- All non-homepage pages include breadcrumb navigation
- Format: Home > Section > Subsection
- Placement: Below header, above main content
- Behavior: Each level is clickable for quick navigation
Homepage Navigation Strategy
- No top navigation bar (preserves focus on reading experience)
- Section-based CTAs within content
- Footer links for secondary navigation
- Skip links for accessibility