yolo

DEVELOPMENT_RULES.md

@@ -0,0 +1,159 @@
+# Development Rules and Guidelines
+
+## Core Principles
+1. **No emojis** - Use proper icons from icon libraries (Lucide, Heroicons, etc.)
+2. **Minimalist paper style** - Clean, document-focused design with clear typography
+3. **Mobile-first responsive design** - Must work perfectly on all device sizes
+4. **Accessibility first** - WCAG 2.1 AA compliance minimum
+5. **Clear separation of concerns** - Components, composables, stores, styles all properly separated
+6. **TypeScript strict mode** - No any types, proper typing throughout
+
+## Architecture Decisions
+
+### Tech Stack
+- Vue 3 with Composition API
+- TypeScript (strict mode)
+- Vite for build tooling
+- Vue Router for navigation
+- Pinia for state management
+- CSS custom properties for theming
+- CSS Grid/Flexbox for layouts (no CSS framework bloat)
+
+### Project Structure
+```
+src/
+├── assets/          # Static assets, fonts
+├── components/      # Reusable Vue components
+│   ├── layout/     # Header, Footer, Navigation
+│   ├── document/   # Document viewers, sections
+│   └── ui/         # Buttons, cards, forms
+├── composables/    # Vue composables for shared logic
+├── pages/          # Route-based page components
+├── router/         # Vue Router configuration
+├── stores/         # Pinia stores
+├── styles/         # Global styles, variables, mixins
+├── types/          # TypeScript type definitions
+└── utils/          # Helper functions
+```
+
+### CSS Design System
+
+#### Color Palette
+- Paper white background: `#FAFAF8`
+- Off-white sections: `#F5F5F0`
+- Text black: `#1A1A1A`
+- Muted text: `#666666`
+- Accent (links/actions): `#0066CC`
+- Warning: `#D97706`
+- Error: `#DC2626`
+- Success: `#059669`
+
+#### Typography
+- System font stack for body
+- Monospace for code/technical content
+- Clear hierarchy: 1.618 golden ratio scale
+- Line height: 1.6 for body, 1.2 for headings
+- Maximum line length: 75ch for readability
+
+#### Spacing
+- Base unit: 8px
+- Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96
+- Consistent padding/margins using CSS custom properties
+
+### Component Guidelines
+1. Single responsibility principle
+2. Props validation with TypeScript interfaces
+3. Emit events for parent communication
+4. Use slots for content projection
+5. Scoped styles by default
+6. BEM naming for CSS classes when needed
+
+### Content Adaptations
+
+#### Bylaws Modifications
+- Change proposal timeline from 30 days to 9-14 days
+- Emphasize do-ocracy principles
+- Clear delegation of authority to members
+- Streamlined decision-making process
+- Board as "wardens" not leaders - infrastructure and conflict resolution only
+
+#### Key Sections to Include
+1. **Home/Introduction** - Mission, purpose, adaptability notice
+2. **Bylaws** - Legal structure and governance
+3. **Community Standards** - Code of conduct and accountability
+4. **Do-ocracy Guide** - How to get things done (based on hackerspace blueprint)
+5. **Decision Making** - When to act vs when to meet
+6. **Conflict Resolution** - Private talks, board mediation
+7. **Membership** - How to join and participate
+8. **The Board** - Limited role as infrastructure maintainers
+9. **Resources** - Templates, forms, additional reading
+10. **Adapt This** - Guide for other hackerspaces
+
+#### Core Do-ocracy Principles to Highlight
+- "If you want something done: Just do it!"
+- Authority comes from doing, not from election
+- Communicate actions to the community
+- Be open to feedback and potential reversals
+- Focus on execution over perfect planning
+- Allow people to fail and learn
+- Build mutual trust through action
+
+### Performance Targets
+- Lighthouse score > 95 all categories
+- First Contentful Paint < 1.5s
+- Time to Interactive < 3s
+- Bundle size < 150KB (gzipped)
+
+### Accessibility Requirements
+- Semantic HTML throughout
+- ARIA labels where needed
+- Keyboard navigation support
+- Focus management for routes
+- Color contrast ratios meeting WCAG AA
+- Screen reader tested
+
+### Content Management
+- Documents stored as Markdown or JSON
+- Static generation where possible
+- Search functionality for documents
+- Print-friendly styles
+- Export to PDF capability
+
+### Testing Strategy
+- Unit tests for utilities and composables
+- Component testing for critical UI
+- E2E tests for main user flows
+- Accessibility testing with axe-core
+
+## Implementation Notes
+
+### Phase 1: Foundation
+- Set up Vue 3 + TypeScript + Vite
+- Create base layout components
+- Implement routing structure
+- Set up CSS design system
+
+### Phase 2: Content
+- Convert markdown documents to components
+- Implement document viewer
+- Add navigation between sections
+- Create search functionality
+
+### Phase 3: Polish
+- Add print styles
+- Implement PDF export
+- Optimize performance
+- Add PWA capabilities
+
+### Phase 4: Distribution
+- Documentation for adaptation
+- Template generation tools
+- Deployment guide
+- Community contribution guidelines
+
+## References
+- Hackerspace Design Patterns: https://hackerspace.design
+- Vue 3 Best Practices
+- TypeScript Strict Mode Configuration
+- WCAG 2.1 Guidelines
+- Progressive Enhancement Principles

governance-site/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

governance-site/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

governance-site/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

governance-site/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>governance-site</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

governance-site/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "governance-site",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-vue-next": "^0.556.0",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.24",
+    "vue-router": "^4.6.3"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "sass": "^1.94.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4",
+    "vue-tsc": "^3.1.6"
+  }
+}

governance-site/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

governance-site/src/App.vue

@@ -0,0 +1,17 @@
+<template>
+  <AppLayout>
+    <router-view />
+  </AppLayout>
+</template>
+
+<script setup lang="ts">
+import AppLayout from '@/components/layout/AppLayout.vue'
+</script>
+
+<style lang="scss">
+@import '@/styles/main.scss';
+
+#app {
+  min-height: 100vh;
+}
+</style>

governance-site/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

governance-site/src/components/HelloWorld.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

governance-site/src/components/document/DocumentHeader.vue

@@ -0,0 +1,73 @@
+<template>
+  <header class="document-header">
+    <h1 class="document-title">{{ title }}</h1>
+    <p v-if="description" class="document-description lead">
+      {{ description }}
+    </p>
+    <div v-if="showMeta" class="document-meta">
+      <span v-if="lastUpdated" class="meta-item">
+        <Calendar :size="16" />
+        Last updated: {{ formatDate(lastUpdated) }}
+      </span>
+      <span v-if="readingTime" class="meta-item">
+        <Clock :size="16" />
+        {{ readingTime }} min read
+      </span>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { Calendar, Clock } from 'lucide-vue-next'
+
+interface Props {
+  title: string
+  description?: string
+  lastUpdated?: Date
+  readingTime?: number
+  showMeta?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  showMeta: true
+})
+
+const formatDate = (date: Date): string => {
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(date)
+}
+</script>
+
+<style lang="scss" scoped>
+.document-header {
+  margin-bottom: $space-7;
+  padding-bottom: $space-5;
+  border-bottom: 2px solid $color-border;
+}
+
+.document-title {
+  margin-bottom: $space-4;
+}
+
+.document-description {
+  margin-bottom: $space-4;
+  color: $color-text-muted;
+}
+
+.document-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $space-4;
+  font-size: $font-size-sm;
+  color: $color-text-muted;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: $space-2;
+}
+</style>

governance-site/src/components/document/DocumentSection.vue

@@ -0,0 +1,103 @@
+<template>
+  <section class="document-section" :id="section.id">
+    <component :is="headingTag" class="section-title">
+      {{ section.title }}
+    </component>
+    <div class="section-content" v-html="renderedContent"></div>
+
+    <div v-if="section.subsections && section.subsections.length > 0" class="subsections">
+      <DocumentSection
+        v-for="subsection in section.subsections"
+        :key="subsection.id"
+        :section="subsection"
+        :level="level + 1"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { DocumentSection as IDocumentSection } from '@/types'
+
+interface Props {
+  section: IDocumentSection
+  level?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  level: 2
+})
+
+const headingTag = computed(() => {
+  const tag = `h${Math.min(props.level, 6)}`
+  return tag
+})
+
+const renderedContent = computed(() => {
+  // Basic markdown-like rendering
+  let html = props.section.content
+
+  // Convert bold text
+  html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+
+  // Convert italic text
+  html = html.replace(/\*(.*?)\*/g, '<em>$1</em>')
+
+  // Convert line breaks to paragraphs
+  html = html.split('\n\n').map(p => `<p>${p}</p>`).join('')
+
+  return html
+})
+</script>
+
+<style lang="scss" scoped>
+.document-section {
+  margin-bottom: $space-6;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.section-title {
+  margin-top: $space-6;
+  margin-bottom: $space-4;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.section-content {
+  :deep(p) {
+    margin-bottom: $space-4;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  :deep(ul), :deep(ol) {
+    margin-bottom: $space-4;
+    padding-left: $space-5;
+  }
+
+  :deep(li) {
+    margin-bottom: $space-2;
+  }
+
+  :deep(blockquote) {
+    margin: $space-4 0;
+    padding-left: $space-4;
+    border-left: 4px solid $color-border;
+    color: $color-text-muted;
+  }
+}
+
+.subsections {
+  margin-top: $space-5;
+  padding-left: $space-4;
+  border-left: 2px solid $color-border;
+}
+</style>

governance-site/src/components/layout/AppHeader.vue

@@ -0,0 +1,181 @@
+<template>
+  <header class="app-header">
+    <div class="container">
+      <div class="header-content">
+        <button
+          class="menu-toggle lg:d-none"
+          @click="navigationStore.toggleMenu()"
+          :aria-label="navigationStore.isMenuOpen ? 'Close menu' : 'Open menu'"
+          aria-controls="navigation-menu"
+        >
+          <Menu v-if="!navigationStore.isMenuOpen" :size="24" />
+          <X v-else :size="24" />
+        </button>
+
+        <router-link to="/" class="logo-link">
+          <h1 class="logo">{{ hackerspaceStore.hackerspace.name }}</h1>
+        </router-link>
+
+        <nav class="header-nav d-none lg:d-flex">
+          <router-link
+            v-for="item in mainNavItems"
+            :key="item.id"
+            :to="item.path"
+            class="nav-link"
+            :class="{ active: $route.path === item.path }"
+          >
+            {{ item.title }}
+          </router-link>
+        </nav>
+
+        <div class="header-actions">
+          <button
+            class="icon-button"
+            @click="toggleTheme"
+            aria-label="Toggle theme"
+          >
+            <Sun v-if="isDark" :size="20" />
+            <Moon v-else :size="20" />
+          </button>
+          <button
+            class="icon-button"
+            @click="printPage"
+            aria-label="Print page"
+          >
+            <Printer :size="20" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useNavigationStore } from '@/stores/navigation'
+import { useHackerspaceStore } from '@/stores/hackerspace'
+import { Menu, X, Sun, Moon, Printer } from 'lucide-vue-next'
+
+const route = useRoute()
+const navigationStore = useNavigationStore()
+const hackerspaceStore = useHackerspaceStore()
+
+const isDark = ref(false)
+
+const mainNavItems = computed(() =>
+  navigationStore.navItems.slice(0, 5)
+)
+
+const toggleTheme = () => {
+  isDark.value = !isDark.value
+  document.documentElement.classList.toggle('dark-theme')
+}
+
+const printPage = () => {
+  window.print()
+}
+</script>
+
+<style lang="scss" scoped>
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background-color: $color-paper;
+  border-bottom: 1px solid $color-border;
+  height: $header-height;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: $header-height;
+  gap: $space-4;
+}
+
+.menu-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: $radius-md;
+  transition: background-color $transition-fast;
+
+  &:hover {
+    background-color: $color-paper-light;
+  }
+}
+
+.logo-link {
+  text-decoration: none;
+  color: inherit;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.logo {
+  font-size: $font-size-lg;
+  font-weight: 700;
+  margin: 0;
+  color: $color-text;
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: $space-2;
+  flex-grow: 1;
+  justify-content: center;
+}
+
+.nav-link {
+  padding: $space-2 $space-3;
+  border-radius: $radius-md;
+  font-size: $font-size-sm;
+  font-weight: 500;
+  transition: all $transition-fast;
+
+  &:hover {
+    background-color: $color-paper-light;
+    text-decoration: none;
+  }
+
+  &.active {
+    background-color: $color-paper-light;
+    color: $color-accent;
+  }
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: $space-2;
+}
+
+.icon-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: $radius-md;
+  transition: background-color $transition-fast;
+  color: $color-text-muted;
+
+  &:hover {
+    background-color: $color-paper-light;
+    color: $color-text;
+  }
+}
+
+@media (max-width: $breakpoint-lg) {
+  .header-nav {
+    display: none;
+  }
+}
+</style>

governance-site/src/components/layout/AppLayout.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="app-layout">
+    <AppHeader />
+    <AppSidebar />
+    <main class="app-main">
+      <div class="main-content">
+        <slot />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppHeader from './AppHeader.vue'
+import AppSidebar from './AppSidebar.vue'
+</script>
+
+<style lang="scss" scoped>
+.app-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-main {
+  flex: 1;
+  padding-top: $header-height;
+  margin-left: 0;
+  transition: margin-left $transition-base;
+
+  @media (min-width: $breakpoint-lg) {
+    margin-left: $sidebar-width;
+  }
+}
+
+.main-content {
+  padding: $space-6 $space-4;
+  max-width: 900px;
+  margin: 0 auto;
+
+  @media (min-width: $breakpoint-md) {
+    padding: $space-7 $space-5;
+  }
+
+  @media (min-width: $breakpoint-lg) {
+    padding: $space-8 $space-6;
+  }
+}
+</style>

governance-site/src/components/layout/AppSidebar.vue

@@ -0,0 +1,114 @@
+<template>
+  <aside
+    class="app-sidebar"
+    :class="{ open: navigationStore.isMenuOpen }"
+    id="navigation-menu"
+  >
+    <nav class="sidebar-nav" role="navigation">
+      <router-link
+        v-for="item in navigationStore.navItems"
+        :key="item.id"
+        :to="item.path"
+        class="sidebar-link"
+        :class="{ active: $route.path === item.path }"
+        @click="navigationStore.closeMenu()"
+      >
+        <span class="sidebar-link-text">{{ item.title }}</span>
+      </router-link>
+    </nav>
+
+    <div class="sidebar-footer">
+      <p class="text-small text-muted">
+        Governance in a Box
+      </p>
+      <p class="text-xs text-muted">
+        Adapt for your hackerspace
+      </p>
+    </div>
+  </aside>
+
+  <div
+    v-if="navigationStore.isMenuOpen"
+    class="sidebar-backdrop lg:d-none"
+    @click="navigationStore.closeMenu()"
+  ></div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { useNavigationStore } from '@/stores/navigation'
+
+const route = useRoute()
+const navigationStore = useNavigationStore()
+</script>
+
+<style lang="scss" scoped>
+.app-sidebar {
+  position: fixed;
+  top: $header-height;
+  left: 0;
+  bottom: 0;
+  width: $sidebar-width;
+  background-color: $color-paper-light;
+  border-right: 1px solid $color-border;
+  transform: translateX(-100%);
+  transition: transform $transition-base;
+  z-index: 90;
+  display: flex;
+  flex-direction: column;
+
+  &.open {
+    transform: translateX(0);
+  }
+
+  @media (min-width: $breakpoint-lg) {
+    transform: translateX(0);
+  }
+}
+
+.sidebar-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: $space-4;
+}
+
+.sidebar-link {
+  display: block;
+  padding: $space-3 $space-4;
+  margin-bottom: $space-2;
+  border-radius: $radius-md;
+  font-size: $font-size-sm;
+  color: $color-text;
+  transition: all $transition-fast;
+
+  &:hover {
+    background-color: $color-paper;
+    text-decoration: none;
+  }
+
+  &.active {
+    background-color: $color-paper;
+    color: $color-accent;
+    font-weight: 600;
+  }
+}
+
+.sidebar-link-text {
+  display: block;
+}
+
+.sidebar-footer {
+  padding: $space-4;
+  border-top: 1px solid $color-border;
+}
+
+.sidebar-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 80;
+}
+</style>

governance-site/src/components/ui/CalloutBox.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="callout-box" :class="[`callout-${type}`]">
+    <div class="callout-icon">
+      <component :is="iconComponent" :size="20" />
+    </div>
+    <div class="callout-content">
+      <h4 v-if="title" class="callout-title">{{ title }}</h4>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Info, AlertTriangle, CheckCircle, XCircle, Lightbulb } from 'lucide-vue-next'
+
+interface Props {
+  type?: 'info' | 'warning' | 'success' | 'error' | 'tip'
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info'
+})
+
+const iconComponent = computed(() => {
+  const icons = {
+    info: Info,
+    warning: AlertTriangle,
+    success: CheckCircle,
+    error: XCircle,
+    tip: Lightbulb
+  }
+  return icons[props.type]
+})
+</script>
+
+<style lang="scss" scoped>
+.callout-box {
+  display: flex;
+  gap: $space-3;
+  padding: $space-4;
+  margin: $space-5 0;
+  border-radius: $radius-md;
+  border-left: 4px solid;
+
+  &.callout-info {
+    background-color: rgba($color-accent, 0.05);
+    border-color: $color-accent;
+    color: darken($color-accent, 10%);
+  }
+
+  &.callout-warning {
+    background-color: rgba($color-warning, 0.05);
+    border-color: $color-warning;
+    color: darken($color-warning, 10%);
+  }
+
+  &.callout-success {
+    background-color: rgba($color-success, 0.05);
+    border-color: $color-success;
+    color: darken($color-success, 10%);
+  }
+
+  &.callout-error {
+    background-color: rgba($color-error, 0.05);
+    border-color: $color-error;
+    color: darken($color-error, 10%);
+  }
+
+  &.callout-tip {
+    background-color: $color-paper-light;
+    border-color: $color-text-muted;
+    color: $color-text;
+  }
+}
+
+.callout-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+  padding-top: 2px;
+}
+
+.callout-content {
+  flex: 1;
+  color: $color-text;
+
+  :deep(p) {
+    margin-bottom: $space-2;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.callout-title {
+  margin-bottom: $space-2;
+  font-size: $font-size-md;
+  font-weight: 600;
+}
+</style>

governance-site/src/main.ts

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import router from './router'
+import App from './App.vue'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.use(pinia)
+app.use(router)
+
+app.mount('#app')

governance-site/src/pages/AdaptThisPage.vue

@@ -0,0 +1,453 @@
+<template>
+  <div class="adapt-this-page">
+    <DocumentHeader
+      title="Adapt This for Your Hackerspace"
+      description="How to customize this governance framework for your own community."
+      :last-updated="new Date('2024-12-05')"
+    />
+
+    <CalloutBox type="tip" title="License">
+      <p>
+        This entire framework is released under Creative Commons BY-SA 4.0.
+        You're free to use, modify, and share it. We only ask that you share
+        your improvements back to the community.
+      </p>
+    </CalloutBox>
+
+    <section id="quick-start">
+      <h2>Quick Start Guide</h2>
+
+      <div class="step-list">
+        <div class="step-card">
+          <h3>Step 1: Download Everything</h3>
+          <p>Get all the documents and source code:</p>
+          <ul>
+            <li>Download the complete package from Resources</li>
+            <li>Clone the GitHub repository</li>
+            <li>Fork for your own modifications</li>
+          </ul>
+        </div>
+
+        <div class="step-card">
+          <h3>Step 2: Find & Replace Basics</h3>
+          <p>Global replacements to make:</p>
+          <ul>
+            <li>"HeatSync Labs" → Your hackerspace name</li>
+            <li>"Mesa, Arizona" → Your location</li>
+            <li>"heatsynclabs.org" → Your domain</li>
+            <li>Contact emails → Your addresses</li>
+          </ul>
+        </div>
+
+        <div class="step-card">
+          <h3>Step 3: Customize Key Numbers</h3>
+          <p>Adjust these to match your needs:</p>
+          <ul>
+            <li>Membership dues amounts</li>
+            <li>Spending authority limits</li>
+            <li>Meeting schedules</li>
+            <li>Proposal timelines (we use 9-14 days)</li>
+            <li>Board size and structure</li>
+          </ul>
+        </div>
+
+        <div class="step-card">
+          <h3>Step 4: Legal Alignment</h3>
+          <p>Match your local requirements:</p>
+          <ul>
+            <li>State/country nonprofit laws</li>
+            <li>Required officer positions</li>
+            <li>Tax-exempt requirements</li>
+            <li>Insurance minimums</li>
+            <li>Liability considerations</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <section id="what-to-keep">
+      <h2>What to Keep vs What to Change</h2>
+
+      <div class="comparison-grid">
+        <div class="keep-card">
+          <h3>Keep These Core Elements</h3>
+          <ul>
+            <li><strong>Do-ocracy principles</strong> - They work universally</li>
+            <li><strong>Conflict resolution process</strong> - Time-tested approach</li>
+            <li><strong>Decision framework</strong> - Clear paths for action</li>
+            <li><strong>Board limitations</strong> - Prevents power accumulation</li>
+            <li><strong>Documentation culture</strong> - Essential for continuity</li>
+            <li><strong>"Be excellent"</strong> - Simple, effective principle</li>
+          </ul>
+        </div>
+
+        <div class="change-card">
+          <h3>Customize These Elements</h3>
+          <ul>
+            <li><strong>Membership tiers</strong> - Match your economics</li>
+            <li><strong>Officer roles</strong> - Per legal requirements</li>
+            <li><strong>Meeting frequency</strong> - Based on activity level</li>
+            <li><strong>Tool policies</strong> - Depends on equipment</li>
+            <li><strong>Space-specific rules</strong> - Your layout matters</li>
+            <li><strong>Cultural references</strong> - Make it yours</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <section id="cultural-adaptation">
+      <h2>Cultural Adaptation</h2>
+
+      <p>
+        Every hackerspace has its own culture. Here's how to preserve yours
+        while adopting this framework:
+      </p>
+
+      <h3>Language and Tone</h3>
+      <ul>
+        <li>Adjust formality level to match your community</li>
+        <li>Translate to your primary language(s)</li>
+        <li>Use local idioms and references</li>
+        <li>Match your existing communication style</li>
+      </ul>
+
+      <h3>Values Emphasis</h3>
+      <ul>
+        <li>Highlight what matters most to your community</li>
+        <li>Add sections for unique priorities</li>
+        <li>Adjust the balance between structure and flexibility</li>
+        <li>Include your origin story and mission</li>
+      </ul>
+
+      <h3>Community Norms</h3>
+      <ul>
+        <li>Incorporate existing unwritten rules</li>
+        <li>Respect established traditions</li>
+        <li>Acknowledge founding members' contributions</li>
+        <li>Build on what already works</li>
+      </ul>
+    </section>
+
+    <section id="technical-setup">
+      <h2>Technical Setup</h2>
+
+      <h3>Website Deployment</h3>
+      <p>To deploy your own version of this site:</p>
+
+      <pre><code>1. Clone the repository:
+   git clone https://github.com/yourusername/governance-site
+   cd governance-site
+
+2. Install dependencies:
+   npm install
+
+3. Customize content:
+   - Edit pages in src/pages/
+   - Update store in src/stores/hackerspace.ts
+   - Modify styles in src/styles/
+
+4. Build for production:
+   npm run build
+
+5. Deploy to your host:
+   - Static hosting (Netlify, Vercel, GitHub Pages)
+   - Your own server (nginx, Apache)
+   - CDN (CloudFlare Pages)</code></pre>
+
+      <h3>Alternative Formats</h3>
+      <ul>
+        <li><strong>Wiki:</strong> Convert markdown to MediaWiki format</li>
+        <li><strong>Google Docs:</strong> Import and share with comments enabled</li>
+        <li><strong>PDF:</strong> Print from browser or use pandoc</li>
+        <li><strong>Physical:</strong> Print and bind for the space</li>
+      </ul>
+    </section>
+
+    <section id="common-modifications">
+      <h2>Common Modifications</h2>
+
+      <h3>For Smaller Spaces (under 20 members)</h3>
+      <ul>
+        <li>Simplify board to 3 positions</li>
+        <li>Combine roles (Champion/Secretary)</li>
+        <li>Reduce meeting frequency to quarterly</li>
+        <li>Lower quorum requirements</li>
+        <li>Informal documentation acceptable</li>
+      </ul>
+
+      <h3>For Larger Spaces (100+ members)</h3>
+      <ul>
+        <li>Add committee structure</li>
+        <li>Implement area captains</li>
+        <li>Create member tiers</li>
+        <li>Formalize training programs</li>
+        <li>Add staff positions</li>
+      </ul>
+
+      <h3>For Non-US Spaces</h3>
+      <ul>
+        <li>Replace 501(c)(3) with local equivalent</li>
+        <li>Adjust to local nonprofit law</li>
+        <li>Convert measurements and currency</li>
+        <li>Update legal references</li>
+        <li>Consider language translations</li>
+      </ul>
+    </section>
+
+    <section id="implementation">
+      <h2>Implementation Strategy</h2>
+
+      <h3>For New Hackerspaces</h3>
+      <ol>
+        <li>Use this as your starting framework</li>
+        <li>Customize before opening</li>
+        <li>Get founding member buy-in</li>
+        <li>File legal paperwork with adapted bylaws</li>
+        <li>Iterate based on early experience</li>
+      </ol>
+
+      <h3>For Existing Hackerspaces</h3>
+      <ol>
+        <li>Compare with current governance</li>
+        <li>Identify gaps and improvements</li>
+        <li>Propose changes gradually</li>
+        <li>Get member feedback</li>
+        <li>Vote on adoption at meeting</li>
+        <li>Phase in over time</li>
+      </ol>
+
+      <CalloutBox type="warning">
+        <p>
+          <strong>Don't break what works!</strong> If your current system is
+          functioning, cherry-pick improvements rather than wholesale replacement.
+        </p>
+      </CalloutBox>
+    </section>
+
+    <section id="share-back">
+      <h2>Share Your Improvements</h2>
+
+      <p>
+        The hackerspace community thrives on sharing. When you adapt this framework:
+      </p>
+
+      <ul>
+        <li><strong>Document your changes</strong> - Others can learn from them</li>
+        <li><strong>Share your templates</strong> - Upload to the community repo</li>
+        <li><strong>Report what worked</strong> - Success stories help others</li>
+        <li><strong>Share what didn't</strong> - Failures are valuable too</li>
+        <li><strong>Contribute translations</strong> - Help non-English spaces</li>
+      </ul>
+
+      <h3>How to Contribute</h3>
+      <ul>
+        <li>Submit pull requests to the main repository</li>
+        <li>Share in hackerspace forums</li>
+        <li>Present at hackerspace conferences</li>
+        <li>Write blog posts about your experience</li>
+        <li>Add to hackerspace.org wiki</li>
+      </ul>
+    </section>
+
+    <section id="help">
+      <h2>Getting Help</h2>
+
+      <p>
+        Adapting governance can be challenging. Here's where to get help:
+      </p>
+
+      <h3>Community Resources</h3>
+      <ul>
+        <li><strong>Hackerspace Forums:</strong> discuss.hackerspaces.org</li>
+        <li><strong>Slack/Discord:</strong> Join hackerspace channels</li>
+        <li><strong>Regional Networks:</strong> Connect with nearby spaces</li>
+        <li><strong>Conferences:</strong> Meet others who've done this</li>
+      </ul>
+
+      <h3>Direct Support</h3>
+      <ul>
+        <li><strong>Email us:</strong> governance@heatsynclabs.org</li>
+        <li><strong>Video call:</strong> Schedule a consultation</li>
+        <li><strong>Visit:</strong> Come see how we do things</li>
+        <li><strong>Mentorship:</strong> We'll pair you with an experienced space</li>
+      </ul>
+    </section>
+
+    <section id="checklist">
+      <h2>Final Checklist</h2>
+
+      <p>Before launching with your adapted framework:</p>
+
+      <div class="checklist">
+        <label><input type="checkbox"> All names and locations updated</label>
+        <label><input type="checkbox"> Legal requirements verified</label>
+        <label><input type="checkbox"> Financial amounts appropriate</label>
+        <label><input type="checkbox"> Contact information current</label>
+        <label><input type="checkbox"> Processes match your culture</label>
+        <label><input type="checkbox"> Members have reviewed drafts</label>
+        <label><input type="checkbox"> Legal counsel consulted if needed</label>
+        <label><input type="checkbox"> Documentation accessible to all</label>
+        <label><input type="checkbox"> Training plan for rollout</label>
+        <label><input type="checkbox"> Feedback mechanism in place</label>
+      </div>
+    </section>
+
+    <CalloutBox type="tip">
+      <p>
+        <strong>Remember:</strong> Perfect is the enemy of done. Start with
+        something workable and improve it over time. Your governance will
+        evolve with your community.
+      </p>
+    </CalloutBox>
+
+    <section id="acknowledgments">
+      <h2>Acknowledgments</h2>
+
+      <p>
+        This framework builds on the work of hundreds of hackerspaces worldwide.
+        Special thanks to:
+      </p>
+
+      <ul>
+        <li>Mitch Altman and the hackerspace founders</li>
+        <li>Hackerspace Gent for the Blueprint</li>
+        <li>Noisebridge for radical inclusion</li>
+        <li>Pumping Station: One for governance innovation</li>
+        <li>All spaces that shared their documents openly</li>
+        <li>The entire hackerspace community</li>
+      </ul>
+
+      <p class="text-center mt-7">
+        <strong>Now go forth and make things!</strong>
+      </p>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DocumentHeader from '@/components/document/DocumentHeader.vue'
+import CalloutBox from '@/components/ui/CalloutBox.vue'
+</script>
+
+<style lang="scss" scoped>
+.adapt-this-page {
+  max-width: $max-content-width;
+
+  section {
+    margin-bottom: $space-7;
+  }
+
+  .step-list {
+    display: grid;
+    gap: $space-4;
+    margin: $space-5 0;
+
+    .step-card {
+      padding: $space-4;
+      background-color: $color-paper-light;
+      border-left: 4px solid $color-accent;
+      border-radius: $radius-md;
+
+      h3 {
+        color: $color-accent;
+        margin-bottom: $space-3;
+      }
+
+      p {
+        margin-bottom: $space-3;
+        font-style: italic;
+      }
+
+      ul {
+        font-size: $font-size-sm;
+      }
+    }
+  }
+
+  .comparison-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: $space-4;
+    margin: $space-5 0;
+
+    @media (max-width: $breakpoint-md) {
+      grid-template-columns: 1fr;
+    }
+
+    .keep-card, .change-card {
+      padding: $space-4;
+      border-radius: $radius-md;
+
+      h3 {
+        margin-bottom: $space-3;
+      }
+
+      ul {
+        font-size: $font-size-sm;
+      }
+    }
+
+    .keep-card {
+      background-color: rgba($color-success, 0.05);
+      border: 2px solid $color-success;
+
+      h3 {
+        color: $color-success;
+      }
+    }
+
+    .change-card {
+      background-color: rgba($color-warning, 0.05);
+      border: 2px solid $color-warning;
+
+      h3 {
+        color: $color-warning;
+      }
+    }
+  }
+
+  pre {
+    background-color: $color-paper-light;
+    padding: $space-4;
+    border-radius: $radius-md;
+    overflow-x: auto;
+    font-size: $font-size-sm;
+
+    code {
+      background: transparent;
+      padding: 0;
+    }
+  }
+
+  .checklist {
+    display: flex;
+    flex-direction: column;
+    gap: $space-3;
+    margin: $space-4 0;
+    padding: $space-4;
+    background-color: $color-paper-light;
+    border-radius: $radius-md;
+
+    label {
+      display: flex;
+      align-items: center;
+      gap: $space-2;
+      cursor: pointer;
+      font-size: $font-size-sm;
+
+      input[type="checkbox"] {
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .mt-7 {
+    margin-top: $space-7;
+  }
+}</style>

governance-site/src/pages/BoardPage.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="board-page">
+    <DocumentHeader
+      title="The Board of Directors"
+      description="Infrastructure maintainers and conflict resolvers - not leaders. The board exists to handle what members can't do individually."
+      :last-updated="new Date('2024-12-05')"
+    />
+
+    <CalloutBox type="info" title="Key Principle">
+      <p>
+        <strong>Board members are wardens, not rulers.</strong> They maintain the infrastructure,
+        handle legal requirements, and resolve conflicts the community can't handle directly.
+        They should be indistinguishable from normal members in day-to-day operations.
+      </p>
+    </CalloutBox>
+
+    <section id="legal-reality">
+      <h2>Legal Requirements vs Actual Roles</h2>
+
+      <p>
+        Arizona law requires certain corporate officer positions for our 501(c)(3) status.
+        Here's how we map legal requirements to our actual flat hierarchy:
+      </p>
+
+      <table>
+        <thead>
+          <tr>
+            <th>Legal Title (On Paper)</th>
+            <th>Actual Role at HeatSync</th>
+            <th>Real Responsibilities</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>President</td>
+            <td>Champion</td>
+            <td>Coordination between offices, membership support, bylaw enforcement</td>
+          </tr>
+          <tr>
+            <td>Vice President</td>
+            <td>Co-Champion</td>
+            <td>Shares Champion duties, provides backup and balance</td>
+          </tr>
+          <tr>
+            <td>Treasurer</td>
+            <td>Treasurer</td>
+            <td>Financial management, dues collection, budget oversight</td>
+          </tr>
+          <tr>
+            <td>Secretary</td>
+            <td>Secretary</td>
+            <td>Meeting records, documentation, official correspondence</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <p class="text-muted mt-4">
+        <em>Note: We use functional titles internally but file legal paperwork with
+        traditional titles to meet state requirements.</em>
+      </p>
+    </section>
+
+    <section id="board-offices">
+      <h2>Board Offices</h2>
+
+      <h3>Champion (1-2 officers)</h3>
+      <p>The Champion coordinates between board offices and assists members. Responsibilities:</p>
+      <ul>
+        <li>Coordinate tasks between board offices</li>
+        <li>Assist members with membership-related tasks</li>
+        <li>Ensure bylaws are followed (not enforce with an iron fist)</li>
+        <li>Be the "face" of the board when needed for external relations</li>
+        <li>Call and facilitate board meetings</li>
+      </ul>
+      <p class="text-small text-muted">
+        Maximum 2 officers. Each gets a full vote. If two Champions, they should
+        coordinate to avoid duplication.
+      </p>
+
+      <h3>Treasurer (1-2 officers)</h3>
+      <p>The Treasurer manages finances and ensures bills get paid. Responsibilities:</p>
+      <ul>
+        <li>Manage bank accounts and financial assets</li>
+        <li>Collect membership dues and donations</li>
+        <li>Pay bills and manage expenses</li>
+        <li>Provide monthly financial reports</li>
+        <li>File required tax documents</li>
+        <li>Manage reimbursements for do-ocracy projects</li>
+      </ul>
+      <p class="text-small text-muted">
+        Maximum 2 officers. Dual signatures required for expenses over $50.
+      </p>
+
+      <h3>Secretary (1 officer)</h3>
+      <p>The Secretary documents what happens. Responsibilities:</p>
+      <ul>
+        <li>Record meeting minutes (board and membership meetings)</li>
+        <li>Maintain official records and documents</li>
+        <li>Handle official correspondence</li>
+        <li>Manage membership roster</li>
+        <li>Post public notices as required</li>
+        <li>Maintain corporate records for legal compliance</li>
+      </ul>
+
+      <h3>Operations (1+ officers)</h3>
+      <p>Operations keeps the space running. Responsibilities:</p>
+      <ul>
+        <li>Coordinate space maintenance and improvements</li>
+        <li>Delegate operational tasks to volunteers</li>
+        <li>Ensure safety procedures are followed</li>
+        <li>Manage relationships with landlord</li>
+        <li>Coordinate tool maintenance and certification</li>
+      </ul>
+      <p class="text-small text-muted">
+        No maximum. Can create committees for specific operational areas.
+      </p>
+    </section>
+
+    <section id="limitations">
+      <h2>What the Board CANNOT Do</h2>
+
+      <CalloutBox type="warning">
+        <p>The board's power is intentionally limited to prevent power accumulation:</p>
+      </CalloutBox>
+
+      <ul>
+        <li><strong>Cannot control space direction:</strong> Members decide what HeatSync becomes</li>
+        <li><strong>Cannot override do-ocracy:</strong> If someone's doing the work, they make decisions</li>
+        <li><strong>Cannot act unilaterally:</strong> Major decisions need member input</li>
+        <li><strong>Cannot self-perpetuate:</strong> All positions are elected annually</li>
+        <li><strong>Cannot hide proceedings:</strong> All meetings are open except sensitive legal/personnel matters</li>
+      </ul>
+    </section>
+
+    <section id="elections">
+      <h2>Elections and Terms</h2>
+
+      <h3>Regular Elections</h3>
+      <ul>
+        <li>Held at first membership meeting in October</li>
+        <li>One-year terms for all positions</li>
+        <li>No term limits - officers can serve multiple terms</li>
+        <li>Candidates must be dues-paying members in good standing</li>
+        <li>Majority vote of present members wins</li>
+      </ul>
+
+      <h3>Interim Officers</h3>
+      <p>If an officer leaves mid-term:</p>
+      <ol>
+        <li>Board appoints interim replacement at next board meeting</li>
+        <li>Interim serves remainder of original term</li>
+        <li>If board can't agree, special election within 60 days</li>
+      </ol>
+
+      <h3>Removal from Office</h3>
+      <p>An officer can be removed by:</p>
+      <ul>
+        <li>Unanimous vote of other board members, OR</li>
+        <li>Majority vote of all dues-paying members</li>
+        <li>Missing 2 board meetings without 24-hour notice</li>
+      </ul>
+    </section>
+
+    <section id="operations">
+      <h2>How the Board Operates</h2>
+
+      <h3>Meetings</h3>
+      <ul>
+        <li><strong>Frequency:</strong> At least quarterly</li>
+        <li><strong>Annual Meeting:</strong> First member meeting in April</li>
+        <li><strong>Quorum:</strong> 2/3 of elected officers</li>
+        <li><strong>Openness:</strong> All members can observe (except executive session)</li>
+        <li><strong>Minutes:</strong> Posted publicly within 7 days</li>
+      </ul>
+
+      <h3>Decision Making</h3>
+      <ul>
+        <li>Consensus preferred, majority vote when needed</li>
+        <li>Each officer gets one vote (even if sharing an office)</li>
+        <li>Purchases over $50 need board approval</li>
+        <li>All expenditures need 2 board signatures</li>
+      </ul>
+
+      <h3>Committees</h3>
+      <p>
+        Any board office can create committees for their area. For example:
+      </p>
+      <ul>
+        <li>Operations might create a Safety Committee</li>
+        <li>Treasurer might create a Fundraising Committee</li>
+        <li>Champion might create a Membership Committee</li>
+      </ul>
+      <p>
+        Committees are advisory and report to their creating office.
+      </p>
+    </section>
+
+    <section id="conflict-resolution">
+      <h2>Board as Conflict Resolvers</h2>
+
+      <p>
+        When the do-ocracy can't resolve something, the board steps in as mediators:
+      </p>
+
+      <h3>The Process</h3>
+      <ol>
+        <li><strong>Private Talk:</strong> Board member talks privately with each party</li>
+        <li><strong>Mediation:</strong> Bring parties together to find resolution</li>
+        <li><strong>Decision if Needed:</strong> Board decides if mediation fails</li>
+        <li><strong>Temporary Measures:</strong> Can restrict access if safety is at risk</li>
+        <li><strong>Community Communication:</strong> Inform members appropriately</li>
+      </ol>
+
+      <h3>Principles</h3>
+      <ul>
+        <li>Protect the space's ability to function</li>
+        <li>Be transparent about interventions</li>
+        <li>Focus on resolution, not punishment</li>
+        <li>Document decisions for consistency</li>
+      </ul>
+    </section>
+
+    <section id="accountability">
+      <h2>Board Accountability</h2>
+
+      <p>
+        The board is accountable to members through:
+      </p>
+
+      <ul>
+        <li><strong>Open Meetings:</strong> Members can observe and speak</li>
+        <li><strong>Posted Minutes:</strong> All decisions are documented</li>
+        <li><strong>Financial Reports:</strong> Monthly treasurer reports</li>
+        <li><strong>Annual Elections:</strong> Members choose who serves</li>
+        <li><strong>Removal Process:</strong> Members can remove officers</li>
+        <li><strong>Limited Authority:</strong> Can't override member initiatives</li>
+      </ul>
+
+      <CalloutBox type="tip">
+        <p>
+          <strong>Remember:</strong> Board members should be contributing members first,
+          officers second. The best board members are barely distinguishable from
+          active members except when their specific duties are needed.
+        </p>
+      </CalloutBox>
+    </section>
+
+    <section id="current-board">
+      <h2>Current Board</h2>
+      <p>
+        See the wiki or bulletin board for current board members and contact information.
+        Board emails:
+      </p>
+      <ul>
+        <li><strong>All board members:</strong> board@heatsynclabs.org</li>
+        <li><strong>Champions:</strong> champion@heatsynclabs.org</li>
+        <li><strong>Treasurer:</strong> treasurer@heatsynclabs.org</li>
+        <li><strong>Secretary:</strong> secretary@heatsynclabs.org</li>
+        <li><strong>Operations:</strong> operations@heatsynclabs.org</li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DocumentHeader from '@/components/document/DocumentHeader.vue'
+import CalloutBox from '@/components/ui/CalloutBox.vue'
+</script>
+
+<style lang="scss" scoped>
+.board-page {
+  max-width: $max-content-width;
+
+  section {
+    margin-bottom: $space-7;
+  }
+
+  h3 {
+    margin-top: $space-5;
+    color: $color-accent;
+  }
+
+  table {
+    margin: $space-5 0;
+  }
+}</style>

governance-site/src/pages/BylawsPage.vue

@@ -0,0 +1,309 @@
+<template>
+  <div class="bylaws-page">
+    <DocumentHeader
+      title="Bylaws of HeatSync Labs"
+      description="The legal foundation for our 501(c)(3) nonprofit hackerspace, designed to meet legal requirements while maximizing member autonomy through do-ocracy principles."
+      :last-updated="new Date('2024-12-05')"
+    />
+
+    <section id="article-1">
+      <h2>Article I: Name, Purpose, and Status</h2>
+
+      <h3>Section 1.1: Name</h3>
+      <p>
+        The name of the organization shall be HeatSync Labs, Inc., doing business as
+        HeatSync Labs (hereinafter, the "Corporation").
+      </p>
+
+      <h3>Section 1.2: Purpose</h3>
+      <p>
+        The Corporation is organized exclusively for charitable, educational, and
+        scientific purposes within the meaning of Section 501(c)(3) of the Internal
+        Revenue Code. Its mission is to:
+      </p>
+      <ul>
+        <li>Provide a collaborative physical workspace, tools, and resources for making,
+            learning, exploring, and sharing technology and creative projects.</li>
+        <li>Promote education in technology, science, art, and craftsmanship through
+            workshops, classes, and public outreach.</li>
+        <li>Foster a community of innovation and shared knowledge, operating on the
+            principles of open access, inclusivity, and <strong>do-ocracy</strong>.</li>
+      </ul>
+
+      <h3>Section 1.3: 501(c)(3) Status</h3>
+      <p>
+        The Corporation shall operate exclusively for its stated charitable purposes.
+        No part of its net earnings shall benefit any private shareholder or individual.
+        The Corporation shall not engage in substantial lobbying or any political
+        campaign activities.
+      </p>
+    </section>
+
+    <section id="article-2">
+      <h2>Article II: Membership</h2>
+
+      <h3>Section 2.1: Eligibility</h3>
+      <p>
+        Membership is open to any individual who supports the Corporation's mission,
+        agrees to abide by its Code of Conduct and Safety Policies, and pays the
+        established dues (if any). The Corporation shall not discriminate on any
+        unlawful basis.
+      </p>
+
+      <h3>Section 2.2: Classes of Membership</h3>
+      <p>The Corporation shall have <strong>Voting Members</strong>.</p>
+      <ul>
+        <li><strong>Voting Member:</strong> An individual who has completed an orientation,
+            is in good standing (current on dues, if applicable, and adherence to policies),
+            and has actively contributed to the space's maintenance or projects within the
+            last 6 months. Contribution is self-documented and recognized (see Do-ocracy,
+            Article VI).</li>
+      </ul>
+
+      <h3>Section 2.3: Rights of Voting Members</h3>
+      <p>
+        Each Voting Member shall have one vote on matters put before the membership,
+        including the election of the Board of Directors and amendments to these Bylaws.
+      </p>
+
+      <h3>Section 2.4: Termination</h3>
+      <p>
+        Membership may be terminated for cause, including non-payment of dues or
+        violation of the Code of Conduct, upon fair review as defined in the
+        Corporation's policies.
+      </p>
+    </section>
+
+    <section id="article-3">
+      <h2>Article III: Board of Directors</h2>
+
+      <h3>Section 3.1: Role and Powers</h3>
+      <p>
+        The Board of Directors ("Board") is responsible for the legal, financial, and
+        fiduciary oversight of the Corporation. It shall ensure compliance with all laws
+        and the 501(c)(3) mission. The Board shall adopt policies but shall <strong>empower
+        the membership and do-ocracy model</strong> for daily operations and project execution.
+      </p>
+
+      <h3>Section 3.2: Composition</h3>
+      <ul>
+        <li>The Board shall consist of no fewer than three (3) and no more than seven (7) Directors.</li>
+        <li>At least one-third of the Board must be elected from and by the Voting Membership.</li>
+        <li>The remainder may be elected from the membership or appointed for specific expertise
+            (legal, financial, etc.).</li>
+      </ul>
+
+      <h3>Section 3.3: Election & Terms</h3>
+      <p>
+        Elected Directors shall serve staggered terms of two (2) years. Elections shall
+        be held annually at the Membership Meeting. A Director may serve no more than
+        four consecutive terms.
+      </p>
+
+      <h3>Section 3.4: Officers</h3>
+      <p>
+        The Board shall elect from its members a Chair, Secretary, and Treasurer.
+        Officers shall have duties as prescribed by the Board and consistent with state law.
+      </p>
+
+      <h3>Section 3.5: Meetings</h3>
+      <p>
+        The Board shall meet at least quarterly. Meetings shall be open for observation
+        by any Voting Member, except during executive sessions for sensitive matters
+        (personnel, legal).
+      </p>
+    </section>
+
+    <section id="article-4">
+      <h2>Article IV: Membership Meetings</h2>
+
+      <h3>Section 4.1: Annual Meeting</h3>
+      <p>
+        An Annual Membership Meeting shall be held for electing Directors, presenting
+        annual reports, and addressing major strategic issues.
+      </p>
+
+      <h3>Section 4.2: Special Meetings</h3>
+      <p>
+        Special Meetings may be called by the Board or by a petition of at least 20%
+        of Voting Members.
+      </p>
+
+      <h3>Section 4.3: Quorum & Decision Making</h3>
+      <p>
+        For annual meetings, a quorum shall be 20% of Voting Members. For special meetings,
+        30%. Whenever possible, the Corporation shall operate by <strong>consensus</strong>.
+        When a vote is required, a simple majority of members present shall decide, except
+        for Bylaws amendments (see Article VIII).
+      </p>
+    </section>
+
+    <section id="article-5">
+      <h2>Article V: Committees</h2>
+
+      <h3>Section 5.1: Standing Committees</h3>
+      <p>
+        The Board may establish Standing Committees for ongoing functions (Finance, Safety).
+        Committee chairs shall report to the Board.
+      </p>
+
+      <h3>Section 5.2: Do-ocracy Working Groups</h3>
+      <p>
+        These are <strong>self-forming, project-oriented groups</strong> established by
+        members under the principles of Article VI. They are not committees of the Board
+        and operate autonomously within the scope of approved budgets and space policies.
+        They must report their activities and use of resources to the membership via a
+        public log/wiki.
+      </p>
+    </section>
+
+    <section id="article-6">
+      <h2>Article VI: Principle of Do-ocracy</h2>
+
+      <CalloutBox type="tip" title="Core Principle">
+        <p>
+          A "do-ocracy" is an organizational structure in which individuals have the
+          authority and responsibility to self-initiate and execute projects, tasks,
+          and improvements for the Corporation. <strong>The authority to make a decision
+          and take action lies with those who do the work.</strong>
+        </p>
+      </CalloutBox>
+
+      <h3>Section 6.1: Definition</h3>
+      <p>
+        A "do-ocracy" is an organizational structure in which individuals have the
+        authority and responsibility to self-initiate and execute projects, tasks, and
+        improvements for the Corporation. <strong>The authority to make a decision and
+        take action lies with those who do the work.</strong>
+      </p>
+
+      <h3>Section 6.2: Scope</h3>
+
+      <h4>Empowered Actions:</h4>
+      <p>Members are empowered to:</p>
+      <ul>
+        <li>Fix broken equipment</li>
+        <li>Organize workshops</li>
+        <li>Improve infrastructure</li>
+        <li>Create art for the space</li>
+        <li>Develop software tools</li>
+        <li>Manage day-to-day operations within established safety and financial guidelines</li>
+      </ul>
+
+      <h4>Limitations:</h4>
+      <p>Do-ocracy does not authorize actions that:</p>
+      <ul>
+        <li>Violate law or the Code of Conduct</li>
+        <li>Create significant legal/financial risk</li>
+        <li>Commit the Corporation to major contracts</li>
+        <li>Spend beyond a pre-set budget cap for autonomous projects ($200)</li>
+        <li>Alter core governance</li>
+      </ul>
+
+      <h3>Section 6.3: Process & Accountability</h3>
+      <ol>
+        <li><strong>Proposal & Notification:</strong> A member wishing to undertake a
+            significant action shall document their intent (via wiki, mailing list, or
+            physical board) to allow for feedback.</li>
+        <li><strong>Seeking Feedback:</strong> The proposing member shall actively seek
+            feedback, especially from those affected. <strong>Constructive objection must
+            be addressed.</strong></li>
+        <li><strong>Execution:</strong> If no unresolvable objection is raised within
+            <strong>9-14 days</strong>, the member may proceed, using resources responsibly.</li>
+        <li><strong>Documentation:</strong> All actions must be documented (what was done,
+            cost, who did it).</li>
+      </ol>
+
+      <h3>Section 6.4: Conflict Resolution</h3>
+      <p>
+        Disputes arising from do-ocratic actions shall first be addressed through direct,
+        respectful dialogue. Unresolved disputes shall be mediated per the Corporation's
+        Conflict Resolution Policy, ultimately appealable to the Board.
+      </p>
+    </section>
+
+    <section id="article-7">
+      <h2>Article VII: Finances</h2>
+
+      <h3>Section 7.1: Fiscal Year</h3>
+      <p>The fiscal year shall be January 1 to December 31.</p>
+
+      <h3>Section 7.2: Budget</h3>
+      <p>
+        The Board, with input from the membership, shall approve an annual budget.
+        The budget shall include a <strong>Do-ocracy Project Fund</strong> to be
+        allocated by members for small, autonomous projects.
+      </p>
+
+      <h3>Section 7.3: Disbursements</h3>
+      <p>
+        Disbursements under the Do-ocracy Project Fund cap may be reimbursed upon
+        presentation of receipts and documentation. Larger expenditures require prior
+        approval per the Financial Policy.
+      </p>
+
+      <h3>Section 7.4: Financial Review</h3>
+      <p>
+        The Board shall ensure an annual financial review or audit as required by law
+        or best practices.
+      </p>
+    </section>
+
+    <section id="article-8">
+      <h2>Article VIII: Amendments</h2>
+      <p>
+        These Bylaws may be amended by a <strong>two-thirds (2/3) supermajority vote</strong>
+        of the Voting Members present at a duly called Membership Meeting, provided written
+        notice of the proposed amendment has been provided to all members at least
+        <strong>14 days</strong> in advance.
+      </p>
+    </section>
+
+    <section id="article-9">
+      <h2>Article IX: Dissolution</h2>
+      <p>
+        Upon dissolution of the Corporation, after paying all debts and obligations, its
+        remaining assets shall be distributed to one or more 501(c)(3) organizations with
+        a similar mission, as determined by the Board. No assets shall be distributed to
+        any member, director, or officer.
+      </p>
+    </section>
+
+    <div class="signature-block mt-8">
+      <p><strong>Adopted on:</strong> _______________</p>
+      <p><strong>Secretary:</strong> _________________________</p>
+      <p class="text-small text-muted">(Printed Name & Signature)</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DocumentHeader from '@/components/document/DocumentHeader.vue'
+import CalloutBox from '@/components/ui/CalloutBox.vue'
+</script>
+
+<style lang="scss" scoped>
+.bylaws-page {
+  max-width: $max-content-width;
+
+  section {
+    margin-bottom: $space-7;
+  }
+
+  h3 {
+    margin-top: $space-5;
+    margin-bottom: $space-3;
+  }
+
+  h4 {
+    margin-top: $space-4;
+    margin-bottom: $space-2;
+  }
+
+  .signature-block {
+    padding: $space-5;
+    background-color: $color-paper-light;
+    border-radius: $radius-md;
+    page-break-inside: avoid;
+  }
+}</style>

governance-site/src/pages/CommunityStandardsPage.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="community-standards-page">
+    <DocumentHeader
+      title="Community Standards & Accountability Process"
+      description="HeatSync Labs exists so people can make things. These standards protect that mission by ensuring everyone can participate safely."
+      :last-updated="new Date('2024-12-05')"
+    />
+
+    <CalloutBox type="info">
+      <p>
+        <strong>We're a do-ocracy:</strong> if you see a problem, you can address it.
+        But some problems need backup. This document tells you when to act, when to
+        escalate, and what happens next.
+      </p>
+    </CalloutBox>
+
+    <section id="core-principle">
+      <h2>1. The Core Principle</h2>
+      <p class="lead"><strong>Be excellent to each other.</strong></p>
+
+      <p>This means:</p>
+      <ol>
+        <li><strong>Respect people's right to exist and make things here,</strong> regardless of who they are.</li>
+        <li><strong>Take care of the space</strong> so others can use it too.</li>
+        <li><strong>Handle conflicts directly when you can,</strong> and ask for help when you can't.</li>
+        <li><strong>Support the community's ability to enforce its norms,</strong> even when it's uncomfortable.</li>
+      </ol>
+    </section>
+
+    <section id="who-applies">
+      <h2>2. Who This Applies To</h2>
+      <p>
+        Everyone in HeatSync spaces—physical or digital—including members, guests,
+        visitors, board members, and anyone at HSL-sponsored events. No one is exempt.
+      </p>
+    </section>
+
+    <section id="protected-groups">
+      <h2>3. Who We Protect</h2>
+      <p>HeatSync Labs does not tolerate discrimination or harassment based on:</p>
+
+      <ul>
+        <li>Race or ethnicity</li>
+        <li>Gender identity or expression</li>
+        <li>Sexual orientation</li>
+        <li>Disability (visible or invisible)</li>
+        <li>Age</li>
+        <li>Religion (or lack thereof)</li>
+        <li>National origin</li>
+        <li>Socioeconomic status</li>
+        <li>Body size or appearance</li>
+        <li>Neurodivergence</li>
+      </ul>
+
+      <p class="text-muted">
+        <em>This list is not exhaustive.</em> If you're being targeted for who you are, that's covered.
+      </p>
+    </section>
+
+    <section id="behaviors">
+      <h2>4. Behavior That Isn't Tolerated</h2>
+
+      <h3>4.1 Immediate Removal Behaviors</h3>
+      <p>These result in immediate removal from the space. No warnings.</p>
+
+      <ol>
+        <li><strong>Violence or credible threats of violence</strong></li>
+        <li><strong>Sexual harassment or assault</strong></li>
+        <li><strong>Stalking or deliberate intimidation</strong></li>
+        <li><strong>Doxxing</strong> (publishing someone's private information)</li>
+        <li><strong>Theft or intentional destruction of property</strong></li>
+        <li><strong>Grossly unsafe tool use</strong> that endangers others</li>
+      </ol>
+
+      <h3>4.2 Escalating Behaviors</h3>
+      <p>These may result in warnings, then escalating consequences if they continue.</p>
+
+      <ul>
+        <li>Slurs, discriminatory jokes, or derogatory language targeting protected characteristics</li>
+        <li>Unwelcome physical contact (you need consent before touching someone)</li>
+        <li>Sustained disruption of events, meetings, or others' work</li>
+        <li>Refusing to stop behavior when asked</li>
+        <li>Repeated boundary violations after being informed</li>
+        <li>Creating a hostile environment through patterns of microaggressions</li>
+        <li>Retaliation against someone who made a report</li>
+      </ul>
+
+      <h3>4.3 Space & Tool Violations</h3>
+
+      <ul>
+        <li>Using tools you're not certified for</li>
+        <li>Leaving messes for others to clean up</li>
+        <li>Ignoring posted safety procedures</li>
+        <li>Using more space than you need during busy times</li>
+        <li>Taking or using others' property without permission</li>
+      </ul>
+    </section>
+
+    <section id="do-ocracy-response">
+      <h2>5. The Do-ocracy Response</h2>
+
+      <CalloutBox type="tip">
+        <p>
+          <strong>We're a do-ocracy.</strong> That means you have standing to address
+          problems directly. You don't need permission to say "hey, that's not cool"
+          or "please clean up after yourself." Most issues should be handled this way.
+        </p>
+      </CalloutBox>
+
+      <h3>5.1 When to Handle It Yourself</h3>
+
+      <ul>
+        <li>Someone forgot safety glasses → remind them</li>
+        <li>Someone left a mess → ask them to clean it up</li>
+        <li>Someone's being loud during your work → politely ask them to keep it down</li>
+        <li>Someone said something mildly off → call it in ("hey, that came across weird")</li>
+        <li>A tool needs maintenance → fix it if you can, report it if you can't</li>
+      </ul>
+
+      <h3>5.2 When to Escalate</h3>
+
+      <ul>
+        <li>The behavior is in the "Immediate Removal" category</li>
+        <li>You've addressed it directly and it continues</li>
+        <li>You don't feel safe addressing it directly</li>
+        <li>The person becomes hostile when confronted</li>
+        <li>It's a pattern, not a one-time thing</li>
+        <li>You witness something happening to someone else who seems distressed</li>
+      </ul>
+    </section>
+
+    <section id="reporting">
+      <h2>6. Reporting & Response Process</h2>
+
+      <h3>6.1 How to Report</h3>
+      <p>Choose the method that works for you:</p>
+
+      <ul>
+        <li><strong>Email:</strong> conduct@heatsynclabs.org (goes to all board members)</li>
+        <li><strong>In person:</strong> Any board member or host present at the space</li>
+        <li><strong>Anonymous:</strong> Drop box at [LOCATION] or anonymous form at [URL]</li>
+        <li><strong>Direct to specific board member:</strong> If you're not comfortable with full board seeing the report</li>
+      </ul>
+
+      <h3>6.2 What Happens Next</h3>
+
+      <table>
+        <thead>
+          <tr>
+            <th>Timeline</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><strong>48 hours</strong></td>
+            <td>Acknowledgment sent to reporter (unless anonymous)</td>
+          </tr>
+          <tr>
+            <td><strong>7 days</strong></td>
+            <td>Initial investigation complete; interim measures if needed</td>
+          </tr>
+          <tr>
+            <td><strong>21 days</strong></td>
+            <td>Final decision communicated to all parties</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <p class="text-muted">
+        <em>Exceptions:</em> Complex situations may take longer. If so, you'll be told why and given an updated timeline.
+      </p>
+
+      <h3>6.3 Investigation Process</h3>
+
+      <ol>
+        <li><strong>Intake:</strong> At least two board members review the report</li>
+        <li><strong>Gathering information:</strong> We talk to the reporter, the respondent, and any witnesses</li>
+        <li><strong>Interim measures:</strong> If someone's safety is at risk, we may restrict access during investigation</li>
+        <li><strong>Decision:</strong> Board determines what happened and what response is appropriate</li>
+        <li><strong>Communication:</strong> Both parties are informed of the outcome</li>
+      </ol>
+
+      <CalloutBox type="info">
+        <p>
+          <strong>Conflict of Interest:</strong> If a board member is involved in the
+          incident (as reporter, respondent, or close relation), they recuse themselves
+          from the process.
+        </p>
+      </CalloutBox>
+    </section>
+
+    <section id="consequences">
+      <h2>7. Consequences</h2>
+      <p>Responses are proportional to the severity and pattern of behavior.</p>
+
+      <h3>Tier A: Verbal or Written Warning</h3>
+      <p>For first-time minor violations where the person seems unaware or immediately corrects.</p>
+      <ul>
+        <li>Documented internally but not announced publicly</li>
+      </ul>
+
+      <h3>Tier B: Required Action</h3>
+      <p>For repeated minor violations or moderate violations. May include:</p>
+      <ul>
+        <li>Apology to affected parties</li>
+        <li>Cleaning duty or other community service</li>
+        <li>Temporary restriction from specific areas or tools</li>
+        <li>Required re-certification for safety training</li>
+      </ul>
+
+      <h3>Tier C: Temporary Suspension</h3>
+      <p>For serious violations or continued problems after warnings. 30-180 days.</p>
+      <ul>
+        <li>No access to space during suspension</li>
+        <li>Card access revoked</li>
+        <li>Reinstatement may require conditions (e.g., meeting with board)</li>
+      </ul>
+
+      <h3>Tier D: Permanent Ban</h3>
+      <p>For severe violations or repeated serious problems. Reserved for:</p>
+      <ul>
+        <li>Violence, sexual assault, stalking, or credible threats</li>
+        <li>Pattern of harassment despite previous consequences</li>
+        <li>Actions that seriously endanger others</li>
+      </ul>
+
+      <CalloutBox type="warning">
+        <p>
+          <strong>No waiting for multiple complaints:</strong> The board is not required
+          to wait for a specific number of reports before taking action. A single credible
+          report of serious behavior is sufficient to investigate and act.
+        </p>
+      </CalloutBox>
+    </section>
+
+    <section id="appeals">
+      <h2>8. Appeals</h2>
+      <p>If you believe a decision was unfair, you may appeal.</p>
+
+      <h3>8.1 Grounds for Appeal</h3>
+      <ul>
+        <li>New evidence that wasn't available during the investigation</li>
+        <li>Procedural errors that affected the outcome</li>
+        <li>Consequence is disproportionate to the violation</li>
+      </ul>
+
+      <h3>8.2 Appeal Process</h3>
+      <ul>
+        <li>Submit written appeal to conduct@heatsynclabs.org within 14 days of decision</li>
+        <li>Appeal is reviewed by board members not involved in original decision</li>
+        <li>If all board members were involved, appeal goes to membership vote at HYH</li>
+        <li>Decision on appeal is final</li>
+      </ul>
+    </section>
+
+    <section id="confidentiality">
+      <h2>9. Confidentiality & Documentation</h2>
+      <ul>
+        <li>Reports are kept confidential to those involved in the investigation</li>
+        <li>The board maintains records of all reports and outcomes</li>
+        <li>Consequences may be shared with the community without naming individuals</li>
+        <li>Deliberately making consequences public when the board chose privacy is itself a violation</li>
+        <li>If the community needs to know for safety reasons, the board will communicate appropriately</li>
+      </ul>
+    </section>
+
+    <section id="amendments">
+      <h2>10. Amendments</h2>
+      <p>
+        This document may be amended through the standard HSL proposal process.
+        Amendments require a majority vote at HYH followed by board ratification.
+      </p>
+    </section>
+
+    <CalloutBox type="tip">
+      <p>
+        <strong>The goal isn't punishment—it's a space where people can make things
+        without worrying about being harassed, endangered, or excluded.</strong>
+        When we hold each other accountable, we're protecting what makes HeatSync worth having.
+      </p>
+    </CalloutBox>
+
+    <section id="contact" class="mt-7">
+      <h2>Contact</h2>
+      <ul>
+        <li><strong>Report a concern:</strong> conduct@heatsynclabs.org</li>
+        <li><strong>General board inquiries:</strong> board@heatsynclabs.org</li>
+        <li><strong>Physical drop box:</strong> [LOCATION TBD]</li>
+      </ul>
+    </section>
+
+    <p class="text-small text-muted mt-7">
+      <em>This document is adapted from the Geek Feminism Anti-Harassment Policy and distributed under CC BY-SA 3.0.</em>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DocumentHeader from '@/components/document/DocumentHeader.vue'
+import CalloutBox from '@/components/ui/CalloutBox.vue'
+</script>
+
+<style lang="scss" scoped>
+.community-standards-page {
+  max-width: $max-content-width;
+
+  section {
+    margin-bottom: $space-6;
+  }
+
+  h3 {
+    margin-top: $space-5;
+  }
+
+  table {
+    margin: $space-5 0;
+  }
+}</style>

governance-site/src/pages/DecisionMakingPage.vue

@@ -0,0 +1,461 @@
+<template>
+  <div class="decision-making-page">
+    <DocumentHeader
+      title="Decision Making Process"
+      description="When to act independently, when to seek consensus, and how to make group decisions efficiently."
+      :last-updated="new Date('2024-12-05')"
+    />
+
+    <CalloutBox type="tip" title="Core Principle">
+      <p>
+        <strong>Default to action.</strong> Most decisions should be made by whoever
+        is doing the work. Group decisions are only for irreversible changes or
+        things that affect everyone.
+      </p>
+    </CalloutBox>
+
+    <section id="decision-framework">
+      <h2>The Decision Framework</h2>
+
+      <div class="decision-tree">
+        <div class="decision-level individual">
+          <h3>Individual Action (Just Do It)</h3>
+          <p><strong>Timeline:</strong> Immediate</p>
+          <p><strong>Who decides:</strong> You</p>
+          <ul>
+            <li>Reversible changes</li>
+            <li>Under $50 cost</li>
+            <li>Doesn't affect others' work</li>
+            <li>Safety improvements</li>
+            <li>Cleaning and organizing</li>
+            <li>Documentation</li>
+          </ul>
+        </div>
+
+        <div class="decision-level feedback">
+          <h3>Seek Feedback (Post & Wait)</h3>
+          <p><strong>Timeline:</strong> 3-7 days</p>
+          <p><strong>Who decides:</strong> You, with input</p>
+          <ul>
+            <li>$50-$200 expenses</li>
+            <li>Changes to shared spaces</li>
+            <li>New procedures or guidelines</li>
+            <li>Events using significant space</li>
+            <li>Tool modifications</li>
+            <li>Affects specific groups</li>
+          </ul>
+        </div>
+
+        <div class="decision-level consensus">
+          <h3>Group Consensus (Meeting)</h3>
+          <p><strong>Timeline:</strong> 9-14 days</p>
+          <p><strong>Who decides:</strong> Present members</p>
+          <ul>
+            <li>Over $200 expenses</li>
+            <li>Permanent infrastructure</li>
+            <li>Policy changes</li>
+            <li>Access and membership</li>
+            <li>Irreversible changes</li>
+            <li>Affects everyone</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <section id="feedback-process">
+      <h2>The Feedback Process</h2>
+
+      <p>
+        When your action needs feedback (middle tier), here's how to gather it effectively:
+      </p>
+
+      <ol>
+        <li>
+          <h4>1. Document Your Proposal</h4>
+          <p>Write a clear description including:</p>
+          <ul>
+            <li>What you want to do</li>
+            <li>Why it's needed</li>
+            <li>How it affects others</li>
+            <li>Estimated cost and timeline</li>
+            <li>How to provide feedback</li>
+          </ul>
+        </li>
+
+        <li>
+          <h4>2. Post in Multiple Places</h4>
+          <ul>
+            <li>Wiki or documentation site</li>
+            <li>Slack/Discord announcement</li>
+            <li>Physical board in the space</li>
+            <li>Mailing list if significant</li>
+          </ul>
+        </li>
+
+        <li>
+          <h4>3. Set a Deadline</h4>
+          <ul>
+            <li>Small changes: 72 hours</li>
+            <li>Medium changes: 7 days</li>
+            <li>Large but not permanent: 9-14 days</li>
+          </ul>
+        </li>
+
+        <li>
+          <h4>4. Address Feedback</h4>
+          <ul>
+            <li>Acknowledge all input</li>
+            <li>Adjust plan if needed</li>
+            <li>Explain if you can't accommodate</li>
+            <li>Find compromise when possible</li>
+          </ul>
+        </li>
+
+        <li>
+          <h4>5. Proceed or Escalate</h4>
+          <ul>
+            <li>No objections? Do it!</li>
+            <li>Minor concerns? Address and proceed</li>
+            <li>Major objections? Bring to meeting</li>
+            <li>Deadlock? Board mediates</li>
+          </ul>
+        </li>
+      </ol>
+    </section>
+
+    <section id="meetings">
+      <h2>Membership Meetings</h2>
+
+      <p>
+        Some decisions need face-to-face discussion. Here's how our meetings work:
+      </p>
+
+      <h3>Regular Meetings</h3>
+      <ul>
+        <li><strong>Frequency:</strong> Monthly, first Tuesday</li>
+        <li><strong>Time:</strong> 7:00 PM</li>
+        <li><strong>Location:</strong> Main area of the space</li>
+        <li><strong>Who can attend:</strong> Anyone (guests welcome)</li>
+        <li><strong>Who can vote:</strong> Dues-paying members</li>
+      </ul>
+
+      <h3>Meeting Agenda</h3>
+      <ol>
+        <li>Welcome and introductions (5 min)</li>
+        <li>Review previous meeting actions (5 min)</li>
+        <li>Officer reports (10 min)</li>
+        <li>Old business (15 min)</li>
+        <li>New proposals (30 min)</li>
+        <li>Open discussion (15 min)</li>
+        <li>Action items and close (5 min)</li>
+      </ol>
+
+      <h3>Proposal Process</h3>
+      <ul>
+        <li>Post proposal 14 days before meeting</li>
+        <li>Present proposal at meeting (5 min max)</li>
+        <li>Q&A and discussion (10 min max)</li>
+        <li>Modify based on feedback if needed</li>
+        <li>Call for consensus or vote</li>
+      </ul>
+
+      <CalloutBox type="info">
+        <p>
+          <strong>Keep it short:</strong> Meetings should be under 90 minutes.
+          Long discussions can continue after the formal meeting.
+        </p>
+      </CalloutBox>
+    </section>
+
+    <section id="consensus">
+      <h2>Consensus vs Voting</h2>
+
+      <h3>We Prefer Consensus</h3>
+      <p>
+        Consensus doesn't mean everyone loves the decision, but everyone can live with it.
+        Signs of consensus:
+      </p>
+      <ul>
+        <li>No strong objections raised</li>
+        <li>People saying "I can live with that"</li>
+        <li>Thumbs up or sideways (not down)</li>
+        <li>General nodding and agreement</li>
+      </ul>
+
+      <h3>When to Vote</h3>
+      <p>If consensus fails after reasonable discussion:</p>
+      <ul>
+        <li>Board elections (always vote)</li>
+        <li>Bylaw changes (2/3 majority required)</li>
+        <li>Budget over $500 (majority)</li>
+        <li>Membership issues (majority)</li>
+        <li>Deadlocked after 15 minutes discussion</li>
+      </ul>
+
+      <h3>Blocking Consensus</h3>
+      <p>
+        Anyone can block consensus, but it's a serious action. If you block:
+      </p>
+      <ul>
+        <li>Explain your fundamental concern</li>
+        <li>Propose an alternative if possible</li>
+        <li>Be willing to work toward resolution</li>
+        <li>Consider if it's really block-worthy</li>
+      </ul>
+      <p class="text-muted">
+        Blocking should be rare. Most concerns can be addressed through modification.
+      </p>
+    </section>
+
+    <section id="special-decisions">
+      <h2>Special Decision Types</h2>
+
+      <h3>Emergency Decisions</h3>
+      <p>When immediate action is needed (safety, legal, infrastructure failure):</p>
+      <ul>
+        <li>Any member can act to protect safety</li>
+        <li>Any board member can make emergency decisions</li>
+        <li>Document actions taken</li>
+        <li>Report at next meeting</li>
+        <li>Retroactive approval if needed</li>
+      </ul>
+
+      <h3>Financial Decisions</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>Amount</th>
+            <th>Who Decides</th>
+            <th>Process</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Under $50</td>
+            <td>Individual member</td>
+            <td>Just do it, save receipt</td>
+          </tr>
+          <tr>
+            <td>$50 - $200</td>
+            <td>Individual with feedback</td>
+            <td>Post proposal, wait 72 hours</td>
+          </tr>
+          <tr>
+            <td>$200 - $500</td>
+            <td>Membership meeting</td>
+            <td>Proposal + discussion</td>
+          </tr>
+          <tr>
+            <td>Over $500</td>
+            <td>Membership vote</td>
+            <td>14-day notice + formal vote</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h3>Access Decisions</h3>
+      <ul>
+        <li><strong>New member approval:</strong> Board reviews application</li>
+        <li><strong>Key/card access:</strong> After orientation completion</li>
+        <li><strong>Tool certification:</strong> Certified member signs off</li>
+        <li><strong>Access revocation:</strong> Board decision with member appeal rights</li>
+        <li><strong>Banning:</strong> See Community Standards process</li>
+      </ul>
+    </section>
+
+    <section id="documentation">
+      <h2>Documenting Decisions</h2>
+
+      <p>All decisions need documentation proportional to their impact:</p>
+
+      <h3>Individual Actions</h3>
+      <ul>
+        <li>Note in appropriate log or wiki</li>
+        <li>Receipt in expense folder</li>
+        <li>Before/after photos if visual change</li>
+      </ul>
+
+      <h3>Feedback Decisions</h3>
+      <ul>
+        <li>Original proposal preserved</li>
+        <li>Feedback received noted</li>
+        <li>Final implementation documented</li>
+        <li>Outcomes tracked</li>
+      </ul>
+
+      <h3>Meeting Decisions</h3>
+      <ul>
+        <li>Recorded in meeting minutes</li>
+        <li>Posted within 7 days</li>
+        <li>Action items tracked</li>
+        <li>Follow-up at next meeting</li>
+      </ul>
+    </section>
+
+    <section id="conflicts">
+      <h2>When Decisions Conflict</h2>
+
+      <p>Sometimes decisions or actions conflict. Here's the precedence:</p>
+
+      <ol>
+        <li><strong>Safety always wins</strong> - Safety concerns override everything</li>
+        <li><strong>Legal requirements</strong> - We must follow the law</li>
+        <li><strong>Bylaws</strong> - Our governing document</li>
+        <li><strong>Meeting decisions</strong> - Group consensus/votes</li>
+        <li><strong>Board decisions</strong> - Within their scope</li>
+        <li><strong>Do-ocracy actions</strong> - Individual initiative</li>
+      </ol>
+
+      <p>When same-level decisions conflict:</p>
+      <ul>
+        <li>More recent generally wins</li>
+        <li>More specific overrides general</li>
+        <li>Irreversible overrides reversible</li>
+        <li>Talk it out when unclear</li>
+      </ul>
+    </section>
+
+    <section id="tips">
+      <h2>Tips for Good Decision Making</h2>
+
+      <div class="tips-grid">
+        <div class="tip">
+          <h4>Bias Toward Action</h4>
+          <p>When in doubt, try it. Most things are reversible.</p>
+        </div>
+
+        <div class="tip">
+          <h4>Communicate Early</h4>
+          <p>Surprises create conflict. Share plans before implementing.</p>
+        </div>
+
+        <div class="tip">
+          <h4>Accept Good Enough</h4>
+          <p>Perfect consensus is rare. Workable solutions are valuable.</p>
+        </div>
+
+        <div class="tip">
+          <h4>Time Box Discussions</h4>
+          <p>Set limits. Not every decision needs an hour of debate.</p>
+        </div>
+
+        <div class="tip">
+          <h4>Document Rationale</h4>
+          <p>Future members need to understand why, not just what.</p>
+        </div>
+
+        <div class="tip">
+          <h4>Review and Adjust</h4>
+          <p>Decisions aren't permanent. Review and improve over time.</p>
+        </div>
+      </div>
+    </section>
+
+    <CalloutBox type="tip">
+      <p>
+        <strong>Remember:</strong> The goal is to enable action, not prevent it.
+        When the decision-making process becomes a barrier to doing things,
+        it's time to simplify the process.
+      </p>
+    </CalloutBox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DocumentHeader from '@/components/document/DocumentHeader.vue'
+import CalloutBox from '@/components/ui/CalloutBox.vue'
+</script>
+
+<style lang="scss" scoped>
+.decision-making-page {
+  max-width: $max-content-width;
+
+  section {
+    margin-bottom: $space-7;
+  }
+
+  .decision-tree {
+    display: grid;
+    gap: $space-4;
+    margin: $space-5 0;
+
+    .decision-level {
+      padding: $space-4;
+      border-radius: $radius-md;
+      border: 2px solid;
+
+      h3 {
+        margin-bottom: $space-2;
+      }
+
+      p {
+        margin-bottom: $space-3;
+        font-size: $font-size-sm;
+      }
+
+      &.individual {
+        background-color: rgba($color-success, 0.05);
+        border-color: $color-success;
+
+        h3 {
+          color: $color-success;
+        }
+      }
+
+      &.feedback {
+        background-color: rgba($color-warning, 0.05);
+        border-color: $color-warning;
+
+        h3 {
+          color: $color-warning;
+        }
+      }
+
+      &.consensus {
+        background-color: rgba($color-accent, 0.05);
+        border-color: $color-accent;
+
+        h3 {
+          color: $color-accent;
+        }
+      }
+    }
+  }
+
+  ol li {
+    margin-bottom: $space-4;
+
+    h4 {
+      color: $color-accent;
+      margin-bottom: $space-2;
+    }
+  }
+
+  .tips-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: $space-4;
+    margin: $space-5 0;
+
+    .tip {
+      padding: $space-3;
+      background-color: $color-paper-light;
+      border-radius: $radius-md;
+
+      h4 {
+        color: $color-accent;
+        margin-bottom: $space-2;
+        font-size: $font-size-md;
+      }
+
+      p {
+        margin: 0;
+        font-size: $font-size-sm;
+      }
+    }
+  }
+
+  table {
+    margin: $space-5 0;
+  }
+}</style>

governance-site/src/pages/DoOcracyPage.vue

@@ -0,0 +1,393 @@
+<template>
+  <div class="do-ocracy-page">
+    <DocumentHeader
+      title="The Do-ocracy Guide"
+      description="How to actually get things done at HeatSync Labs. If you want something done: Just do it!"
+      :last-updated="new Date('2024-12-05')"
+    />
+
+    <CalloutBox type="tip" title="The Golden Rule">
+      <p>
+        <strong>If you want something done: Just do it!</strong>
+      </p>
+      <p>
+        Doing a task is in itself justification for you being the person who does that job.
+        Authority is earned through action, not election.
+      </p>
+    </CalloutBox>
+
+    <section id="what-is-doocracy">
+      <h2>What is Do-ocracy?</h2>
+
+      <p class="lead">
+        In a do-ocracy, individuals choose to take on tasks and roles independently.
+        The authority to make decisions and take action lies with those who do the work.
+      </p>
+
+      <p>
+        This is different from democracy (where everyone votes) and different from
+        meritocracy (where the "best" person does it). In a do-ocracy, <strong>whoever
+        shows up and does the work has the authority to make decisions about that work.</strong>
+      </p>
+
+      <h3>Core Principles</h3>
+      <ul>
+        <li><strong>Initiative:</strong> Don't wait for permission or assignment</li>
+        <li><strong>Action:</strong> Doing beats planning</li>
+        <li><strong>Communication:</strong> Tell others what you're doing</li>
+        <li><strong>Openness:</strong> Be receptive to feedback and help</li>
+        <li><strong>Responsibility:</strong> Own your actions and their outcomes</li>
+      </ul>
+    </section>
+
+    <section id="how-it-works">
+      <h2>How It Works in Practice</h2>
+
+      <div class="process-steps">
+        <div class="step">
+          <h3>1. See a Need</h3>
+          <p>Notice something that needs doing: broken equipment, messy area, missing documentation, cool project idea.</p>
+        </div>
+
+        <div class="step">
+          <h3>2. Communicate Intent</h3>
+          <p>For significant actions, post your plan on the wiki, Slack, or physical board. This allows for feedback.</p>
+        </div>
+
+        <div class="step">
+          <h3>3. Seek Input</h3>
+          <p>Actively ask for feedback, especially from those who might be affected. Address constructive objections.</p>
+        </div>
+
+        <div class="step">
+          <h3>4. Take Action</h3>
+          <p>If no unresolvable objections arise within 9-14 days (or immediately for small tasks), proceed responsibly.</p>
+        </div>
+
+        <div class="step">
+          <h3>5. Document Results</h3>
+          <p>Record what you did, how much it cost, and any relevant details for future reference.</p>
+        </div>
+      </div>
+    </section>
+
+    <section id="when-to-act">
+      <h2>When to Just Act vs When to Discuss</h2>
+
+      <div class="decision-grid">
+        <div class="decision-card act">
+          <h3>Just Do It</h3>
+          <ul>
+            <li>Cleaning and organizing</li>
+            <li>Fixing broken things</li>
+            <li>Routine maintenance</li>
+            <li>Documentation improvements</li>
+            <li>Small improvements (under $50)</li>
+            <li>Reversible changes</li>
+            <li>Safety fixes</li>
+          </ul>
+        </div>
+
+        <div class="decision-card discuss">
+          <h3>Seek Feedback First</h3>
+          <ul>
+            <li>Changes affecting others' work</li>
+            <li>Spending $50-$200</li>
+            <li>Moving/reorganizing shared spaces</li>
+            <li>New policies or procedures</li>
+            <li>Tool modifications</li>
+            <li>Events using significant space</li>
+          </ul>
+        </div>
+
+        <div class="decision-card vote">
+          <h3>Needs Formal Approval</h3>
+          <ul>
+            <li>Spending over $200</li>
+            <li>Permanent infrastructure changes</li>
+            <li>Legal commitments</li>
+            <li>Bylaw changes</li>
+            <li>Safety policy changes</li>
+            <li>Membership decisions</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <section id="practical-examples">
+      <h2>Practical Examples</h2>
+
+      <div class="example-box">
+        <h3>Example: Organizing a Workshop</h3>
+        <p>Sarah wants to run a soldering workshop:</p>
+        <ol>
+          <li>She posts on Slack: "Planning a soldering workshop for next Saturday 2-5pm"</li>
+          <li>Gets feedback about material costs and space availability</li>
+          <li>Orders supplies using the workshop budget</li>
+          <li>Runs the workshop</li>
+          <li>Documents attendance and expenses on the wiki</li>
+        </ol>
+        <p class="text-muted">
+          Sarah didn't need permission - she took initiative, communicated, and made it happen.
+        </p>
+      </div>
+
+      <div class="example-box">
+        <h3>Example: Tool Area Reorganization</h3>
+        <p>Mike notices the electronics bench is chaotic:</p>
+        <ol>
+          <li>Takes photos of current state</li>
+          <li>Posts proposal with mockup on wiki: "Reorganizing electronics bench for better workflow"</li>
+          <li>Waits 10 days for feedback, incorporates suggestions</li>
+          <li>Spends a Saturday reorganizing with help from volunteers</li>
+          <li>Updates tool documentation with new layout</li>
+        </ol>
+        <p class="text-muted">
+          Mike communicated first because this affected others' workspaces, but still led the change himself.
+        </p>
+      </div>
+    </section>
+
+    <section id="budget">
+      <h2>Do-ocracy Budget Guidelines</h2>
+
+      <table>
+        <thead>
+          <tr>
+            <th>Amount</th>
+            <th>Process</th>
+            <th>Documentation</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Under $50</td>
+            <td>Just do it</td>
+            <td>Save receipt, note in expense log</td>
+          </tr>
+          <tr>
+            <td>$50 - $200</td>
+            <td>Post intent, wait 72 hours for feedback</td>
+            <td>Receipt + brief wiki entry</td>
+          </tr>
+          <tr>
+            <td>Over $200</td>
+            <td>Formal proposal at meeting</td>
+            <td>Full proposal + receipts + report</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <CalloutBox type="info">
+        <p>
+          <strong>Reimbursement:</strong> Submit receipts with documentation to the
+          treasurer. Approved do-ocracy expenses are reimbursed within 30 days.
+        </p>
+      </CalloutBox>
+    </section>
+
+    <section id="boundaries">
+      <h2>Boundaries and Limitations</h2>
+
+      <h3>Do-ocracy Does NOT Apply To:</h3>
+      <ul>
+        <li><strong>Safety violations:</strong> Never compromise safety for expediency</li>
+        <li><strong>Others' property:</strong> Don't modify someone else's project without permission</li>
+        <li><strong>Irreversible changes:</strong> Major alterations need group consensus</li>
+        <li><strong>Legal matters:</strong> Contracts, liability issues need board approval</li>
+        <li><strong>Access control:</strong> Membership and access decisions follow formal process</li>
+      </ul>
+
+      <h3>Conflict Resolution</h3>
+      <p>When do-ocracy actions conflict:</p>
+      <ol>
+        <li><strong>Direct dialogue:</strong> Talk to each other first</li>
+        <li><strong>Seek mediation:</strong> Ask a neutral member to help</li>
+        <li><strong>Community input:</strong> Bring to next meeting if needed</li>
+        <li><strong>Board intervention:</strong> Only for unresolvable disputes</li>
+      </ol>
+    </section>
+
+    <section id="tips">
+      <h2>Tips for Successful Do-ocracy</h2>
+
+      <div class="tips-grid">
+        <div class="tip">
+          <h4>Start Small</h4>
+          <p>Build trust by successfully completing small projects before taking on major initiatives.</p>
+        </div>
+
+        <div class="tip">
+          <h4>Document Everything</h4>
+          <p>Future members benefit from knowing what was done and why. Over-documentation beats under-documentation.</p>
+        </div>
+
+        <div class="tip">
+          <h4>Ask for Help</h4>
+          <p>Do-ocracy doesn't mean working alone. Recruit others who share your vision.</p>
+        </div>
+
+        <div class="tip">
+          <h4>Accept Feedback Gracefully</h4>
+          <p>Not all ideas work out. Be ready to adjust or even abandon plans based on community input.</p>
+        </div>
+
+        <div class="tip">
+          <h4>Celebrate Successes</h4>
+          <p>Share what you accomplished! It inspires others and builds community momentum.</p>
+        </div>
+
+        <div class="tip">
+          <h4>Learn from Failures</h4>
+          <p>Things will go wrong. Document what didn't work so others can learn.</p>
+        </div>
+      </div>
+    </section>
+
+    <CalloutBox type="tip" title="Remember">
+      <p>
+        <strong>Perfect is the enemy of done.</strong> It's better to do something
+        imperfectly than to do nothing perfectly. The community will help iterate
+        and improve over time.
+      </p>
+    </CalloutBox>
+
+    <section id="resources">
+      <h2>Resources</h2>
+      <ul>
+        <li>Wiki: Document your projects and read about others</li>
+        <li>Slack #do-ocracy: Coordinate with other doers</li>
+        <li>Physical board: Post plans and gather feedback</li>
+        <li>Treasurer: Submit reimbursement requests</li>
+        <li>Meeting notes: Review past do-ocracy discussions</li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DocumentHeader from '@/components/document/DocumentHeader.vue'
+import CalloutBox from '@/components/ui/CalloutBox.vue'
+</script>
+
+<style lang="scss" scoped>
+.do-ocracy-page {
+  max-width: $max-content-width;
+
+  section {
+    margin-bottom: $space-7;
+  }
+
+  .process-steps {
+    margin: $space-5 0;
+
+    .step {
+      padding: $space-4;
+      margin-bottom: $space-3;
+      background-color: $color-paper-light;
+      border-left: 4px solid $color-accent;
+      border-radius: $radius-md;
+
+      h3 {
+        color: $color-accent;
+        margin-bottom: $space-2;
+      }
+
+      p {
+        margin: 0;
+      }
+    }
+  }
+
+  .decision-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: $space-4;
+    margin: $space-5 0;
+
+    .decision-card {
+      padding: $space-4;
+      border-radius: $radius-md;
+
+      h3 {
+        margin-bottom: $space-3;
+        font-size: $font-size-lg;
+      }
+
+      ul {
+        margin: 0;
+        padding-left: $space-4;
+      }
+
+      &.act {
+        background-color: rgba($color-success, 0.05);
+        border: 2px solid $color-success;
+
+        h3 {
+          color: $color-success;
+        }
+      }
+
+      &.discuss {
+        background-color: rgba($color-warning, 0.05);
+        border: 2px solid $color-warning;
+
+        h3 {
+          color: $color-warning;
+        }
+      }
+
+      &.vote {
+        background-color: rgba($color-accent, 0.05);
+        border: 2px solid $color-accent;
+
+        h3 {
+          color: $color-accent;
+        }
+      }
+    }
+  }
+
+  .example-box {
+    padding: $space-5;
+    margin: $space-4 0;
+    background-color: $color-paper-light;
+    border-radius: $radius-md;
+
+    h3 {
+      color: $color-accent;
+      margin-bottom: $space-3;
+    }
+
+    ol {
+      margin: $space-3 0;
+    }
+  }
+
+  .tips-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: $space-4;
+    margin: $space-5 0;
+
+    .tip {
+      padding: $space-3;
+      background-color: $color-paper-light;
+      border-radius: $radius-md;
+
+      h4 {
+        color: $color-accent;
+        margin-bottom: $space-2;
+      }
+
+      p {
+        margin: 0;
+        font-size: $font-size-sm;
+      }
+    }
+  }
+
+  table {
+    margin: $space-5 0;
+  }
+}</style>

governance-site/src/pages/HomePage.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="home-page">
+    <DocumentHeader
+      title="Hackerspace Governance in a Box"
+      description="A complete governance framework for hackerspaces, based on do-ocracy principles and community-driven decision making."
+      :show-meta="false"
+    />
+
+    <section class="intro-section">
+      <h2>Welcome to Your Governance Framework</h2>
+      <p class="lead">
+        This site contains everything you need to run a successful hackerspace:
+        bylaws, community standards, decision-making processes, and operational
+        guidelines that actually work in practice.
+      </p>
+    </section>
+
+    <CalloutBox type="tip" title="Adapt This for Your Space">
+      <p>
+        While this framework is tailored for {{ hackerspaceStore.hackerspace.name }},
+        it's designed to be easily adapted for any hackerspace. Replace our name
+        with yours, adjust the specifics to match your community's needs, and
+        you'll have a complete governance system ready to go.
+      </p>
+    </CalloutBox>
+
+    <section class="principles-section">
+      <h2>Core Principles</h2>
+
+      <div class="principle-grid">
+        <div class="principle-card">
+          <h3>Do-ocracy</h3>
+          <p>
+            If you want something done, do it. Authority comes from taking action,
+            not from titles or elections. Those who do the work make the decisions.
+          </p>
+        </div>
+
+        <div class="principle-card">
+          <h3>Be Excellent</h3>
+          <p>
+            Respect everyone's right to exist and make things. Take care of the
+            space so others can use it. Handle conflicts directly when you can.
+          </p>
+        </div>
+
+        <div class="principle-card">
+          <h3>Community First</h3>
+          <p>
+            The space exists so people can make things. Every decision should
+            support that mission. We protect the community's ability to create.
+          </p>
+        </div>
+
+        <div class="principle-card">
+          <h3>Iterate & Improve</h3>
+          <p>
+            Our governance isn't perfect, and that's okay. We continuously update
+            our systems based on what works and what doesn't.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section class="structure-section">
+      <h2>How This Framework Works</h2>
+
+      <dl class="structure-list">
+        <dt>Bylaws</dt>
+        <dd>
+          The legal foundation required for 501(c)(3) status. Minimal and
+          empowering, designed to meet legal requirements while maximizing
+          member autonomy.
+        </dd>
+
+        <dt>Community Standards</dt>
+        <dd>
+          Clear expectations for behavior and a transparent accountability
+          process. Protects everyone's ability to participate safely.
+        </dd>
+
+        <dt>Do-ocracy Guide</dt>
+        <dd>
+          How to actually get things done. When to act independently, when
+          to seek feedback, and how to document your work.
+        </dd>
+
+        <dt>Decision Making</dt>
+        <dd>
+          When meetings are needed vs when you can just act. Designed for
+          9-14 day proposal cycles, not months of bureaucracy.
+        </dd>
+
+        <dt>The Board</dt>
+        <dd>
+          Limited to infrastructure and conflict resolution. Board members
+          are "wardens" not leaders, maintaining the space without
+          controlling its direction.
+        </dd>
+      </dl>
+    </section>
+
+    <section class="getting-started">
+      <h2>Getting Started</h2>
+
+      <p>
+        Whether you're a new member, a board member, or starting your own
+        hackerspace, here's how to use this framework:
+      </p>
+
+      <ol>
+        <li>
+          <strong>New Members:</strong> Start with the Community Standards
+          to understand expectations, then read the Do-ocracy Guide to learn
+          how to contribute.
+        </li>
+        <li>
+          <strong>Active Members:</strong> Reference the Decision Making
+          section when proposing changes. Use the Do-ocracy Guide for daily
+          operations.
+        </li>
+        <li>
+          <strong>Board Members:</strong> Focus on the Bylaws and Board
+          sections. Remember: your role is to maintain, not to lead.
+        </li>
+        <li>
+          <strong>Other Hackerspaces:</strong> Jump to "Adapt This" for a
+          guide on customizing this framework for your community.
+        </li>
+      </ol>
+    </section>
+
+    <CalloutBox type="info" title="About This Framework">
+      <p>
+        This governance framework synthesizes best practices from successful
+        hackerspaces worldwide, particularly drawing from the Hackerspace
+        Blueprint and decades of community experience. It's licensed under
+        Creative Commons for sharing and adaptation.
+      </p>
+    </CalloutBox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DocumentHeader from '@/components/document/DocumentHeader.vue'
+import CalloutBox from '@/components/ui/CalloutBox.vue'
+import { useHackerspaceStore } from '@/stores/hackerspace'
+
+const hackerspaceStore = useHackerspaceStore()
+</script>
+
+<style lang="scss" scoped>
+.home-page {
+  max-width: $max-content-width;
+}
+
+.intro-section {
+  margin-bottom: $space-7;
+}
+
+.principles-section {
+  margin-bottom: $space-7;
+}
+
+.principle-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: $space-5;
+  margin-top: $space-5;
+}
+
+.principle-card {
+  padding: $space-5;
+  background-color: $color-paper-light;
+  border-radius: $radius-md;
+  border-left: 4px solid $color-accent;
+
+  h3 {
+    font-size: $font-size-lg;
+    margin-bottom: $space-3;
+    color: $color-accent;
+  }
+
+  p {
+    margin: 0;
+    font-size: $font-size-sm;
+  }
+}
+
+.structure-section {
+  margin-bottom: $space-7;
+}
+
+.structure-list {
+  margin-top: $space-5;
+
+  dt {
+    font-weight: 600;
+    margin-bottom: $space-2;
+    color: $color-accent;
+  }
+
+  dd {
+    margin-bottom: $space-4;
+    margin-left: 0;
+    padding-left: $space-5;
+    border-left: 2px solid $color-border;
+    color: $color-text;
+  }
+}
+
+.getting-started {
+  margin-bottom: $space-7;
+
+  ol {
+    margin-top: $space-4;
+    padding-left: $space-5;
+
+    li {
+      margin-bottom: $space-3;
+      line-height: 1.6;
+    }
+  }
+}
+</style>

governance-site/src/pages/MembershipPage.vue

@@ -0,0 +1,470 @@
+<template>
+  <div class="membership-page">
+    <DocumentHeader
+      title="Membership"
+      description="How to join HeatSync Labs, membership levels, benefits, and expectations."
+      :last-updated="new Date('2024-12-05')"
+    />
+
+    <CalloutBox type="info">
+      <p>
+        <strong>HeatSync Labs is open to everyone.</strong> You don't need to be an
+        expert, have specific skills, or fit any particular mold. If you want to
+        make things and learn alongside others, you belong here.
+      </p>
+    </CalloutBox>
+
+    <section id="becoming-member">
+      <h2>Becoming a Member</h2>
+
+      <div class="membership-steps">
+        <div class="step">
+          <h3>1. Visit the Space</h3>
+          <p>Come to an open house or public event. Get a feel for the community and space.</p>
+        </div>
+
+        <div class="step">
+          <h3>2. Attend Orientation</h3>
+          <p>Learn about safety, culture, and how to use the space effectively.</p>
+        </div>
+
+        <div class="step">
+          <h3>3. Submit Application</h3>
+          <p>Simple form with emergency contact and agreement to community standards.</p>
+        </div>
+
+        <div class="step">
+          <h3>4. Pay Dues</h3>
+          <p>Monthly dues support rent, utilities, and supplies. Sliding scale available.</p>
+        </div>
+
+        <div class="step">
+          <h3>5. Get Access</h3>
+          <p>Receive your key/card and start making things!</p>
+        </div>
+      </div>
+    </section>
+
+    <section id="membership-levels">
+      <h2>Membership Levels</h2>
+
+      <div class="membership-grid">
+        <div class="membership-card">
+          <h3>Friend of the Space</h3>
+          <p class="price">Free</p>
+          <ul>
+            <li>Attend public events</li>
+            <li>Use space during open hours</li>
+            <li>Join mailing list/Slack</li>
+            <li>Participate in community</li>
+          </ul>
+          <p class="note">No voting rights or 24/7 access</p>
+        </div>
+
+        <div class="membership-card featured">
+          <h3>Regular Member</h3>
+          <p class="price">$50/month</p>
+          <ul>
+            <li>24/7 access to space</li>
+            <li>Storage space (small)</li>
+            <li>Tool certification eligibility</li>
+            <li>Workshop discounts</li>
+            <li>Voting rights after 3 months</li>
+          </ul>
+          <p class="note">Standard membership for most</p>
+        </div>
+
+        <div class="membership-card">
+          <h3>Supporting Member</h3>
+          <p class="price">$100+/month</p>
+          <ul>
+            <li>All regular member benefits</li>
+            <li>Additional storage space</li>
+            <li>Priority workshop registration</li>
+            <li>Guest passes (2/month)</li>
+            <li>Good karma and our thanks</li>
+          </ul>
+          <p class="note">For those who can contribute more</p>
+        </div>
+      </div>
+
+      <CalloutBox type="tip">
+        <p>
+          <strong>Sliding Scale Available:</strong> We never want money to be a barrier.
+          If you can't afford full dues, talk to a board member about reduced rates
+          or work-trade options. We'd rather have you as an active member than not at all.
+        </p>
+      </CalloutBox>
+    </section>
+
+    <section id="voting-member">
+      <h2>Becoming a Voting Member</h2>
+
+      <p>
+        Voting members shape the direction of HeatSync Labs. To become one:
+      </p>
+
+      <ol>
+        <li><strong>Be a dues-paying member</strong> in good standing</li>
+        <li><strong>Actively contribute</strong> within the last 6 months</li>
+        <li><strong>Complete orientation</strong> and understand our culture</li>
+        <li><strong>Participate regularly</strong> in space activities</li>
+      </ol>
+
+      <h3>What Counts as Active Contribution?</h3>
+      <ul>
+        <li>Working on projects in the space</li>
+        <li>Teaching workshops or skills</li>
+        <li>Maintaining tools or areas</li>
+        <li>Organizing events</li>
+        <li>Improving documentation</li>
+        <li>Helping other members</li>
+        <li>Participating in workdays</li>
+      </ul>
+
+      <p class="text-muted">
+        Contribution is self-documented. If you're doing things, you're contributing.
+        No need for formal tracking or approval.
+      </p>
+    </section>
+
+    <section id="member-benefits">
+      <h2>Member Benefits</h2>
+
+      <div class="benefits-grid">
+        <div class="benefit">
+          <h4>24/7 Access</h4>
+          <p>Work on projects whenever inspiration strikes</p>
+        </div>
+
+        <div class="benefit">
+          <h4>Tool Library</h4>
+          <p>Access to thousands of dollars worth of tools</p>
+        </div>
+
+        <div class="benefit">
+          <h4>Community Knowledge</h4>
+          <p>Learn from experts in dozens of fields</p>
+        </div>
+
+        <div class="benefit">
+          <h4>Project Space</h4>
+          <p>Room to work on things you can't do at home</p>
+        </div>
+
+        <div class="benefit">
+          <h4>Storage</h4>
+          <p>Keep projects and materials at the space</p>
+        </div>
+
+        <div class="benefit">
+          <h4>Classes & Workshops</h4>
+          <p>Free or discounted learning opportunities</p>
+        </div>
+      </div>
+    </section>
+
+    <section id="expectations">
+      <h2>Member Expectations</h2>
+
+      <p>
+        With membership comes responsibility. We expect all members to:
+      </p>
+
+      <h3>Follow the Prime Directive</h3>
+      <ul>
+        <li><strong>Be excellent to each other</strong></li>
+        <li>Follow Community Standards</li>
+        <li>Respect others' work and space</li>
+        <li>Communicate constructively</li>
+      </ul>
+
+      <h3>Maintain the Space</h3>
+      <ul>
+        <li>Clean up after yourself</li>
+        <li>Return tools to their homes</li>
+        <li>Report broken things</li>
+        <li>Participate in occasional workdays</li>
+        <li>Leave things better than you found them</li>
+      </ul>
+
+      <h3>Engage with Community</h3>
+      <ul>
+        <li>Share knowledge when you can</li>
+        <li>Ask for help when you need it</li>
+        <li>Attend meetings occasionally</li>
+        <li>Contribute to the culture</li>
+      </ul>
+
+      <h3>Pay Your Dues</h3>
+      <ul>
+        <li>Pay on time (by the 5th)</li>
+        <li>Communicate if you have issues</li>
+        <li>Update payment info when needed</li>
+      </ul>
+    </section>
+
+    <section id="guest-policy">
+      <h2>Guest Policy</h2>
+
+      <p>
+        Members can bring guests, but are responsible for them:
+      </p>
+
+      <ul>
+        <li><strong>Always accompany guests</strong> - Don't leave them alone</li>
+        <li><strong>Explain safety rules</strong> - Especially for tools</li>
+        <li><strong>Limit frequency</strong> - Regular visitors should become members</li>
+        <li><strong>Take responsibility</strong> - You're liable for guest actions</li>
+        <li><strong>Sign them in</strong> - Log in the guest book</li>
+      </ul>
+
+      <CalloutBox type="info">
+        <p>
+          Guests are welcome during open hours without a member host.
+          This policy applies to 24/7 access times.
+        </p>
+      </CalloutBox>
+    </section>
+
+    <section id="suspension">
+      <h2>Suspension & Termination</h2>
+
+      <p>
+        We hate to lose members, but sometimes it's necessary:
+      </p>
+
+      <h3>Automatic Suspension</h3>
+      <ul>
+        <li>Dues 60+ days overdue</li>
+        <li>During investigation of serious violations</li>
+        <li>Safety violations endangering others</li>
+      </ul>
+
+      <h3>Termination Causes</h3>
+      <ul>
+        <li>Serious Community Standards violations</li>
+        <li>Theft or intentional damage</li>
+        <li>Repeated violations after warnings</li>
+        <li>Actions harming the organization</li>
+      </ul>
+
+      <h3>Due Process</h3>
+      <ol>
+        <li>Member notified of issue</li>
+        <li>Opportunity to respond</li>
+        <li>Board review and decision</li>
+        <li>Appeal to membership if desired</li>
+      </ol>
+
+      <p class="text-muted">
+        See Community Standards for detailed violation and appeals process.
+      </p>
+    </section>
+
+    <section id="taking-break">
+      <h2>Taking a Break</h2>
+
+      <p>
+        Life happens. If you need to pause membership:
+      </p>
+
+      <ul>
+        <li><strong>Notify the board</strong> before dues are due</li>
+        <li><strong>Return any borrowed items</strong></li>
+        <li><strong>Clean out personal storage</strong></li>
+        <li><strong>Stay connected</strong> via Slack/mailing list if desired</li>
+      </ul>
+
+      <p>
+        We'll welcome you back whenever you're ready. Alumni are always
+        part of the HeatSync family.
+      </p>
+    </section>
+
+    <section id="how-to-join">
+      <h2>Ready to Join?</h2>
+
+      <div class="join-options">
+        <div class="join-card">
+          <h3>Visit First</h3>
+          <p>Come to our next open house:</p>
+          <ul>
+            <li>Every Thursday, 7-10 PM</li>
+            <li>First Saturday, 12-4 PM</li>
+            <li>Or any public event</li>
+          </ul>
+        </div>
+
+        <div class="join-card">
+          <h3>Apply Online</h3>
+          <p>If you've visited:</p>
+          <ul>
+            <li>Fill out application</li>
+            <li>Schedule orientation</li>
+            <li>Set up payment</li>
+          </ul>
+          <a href="#" class="btn">Apply Now</a>
+        </div>
+
+        <div class="join-card">
+          <h3>Questions?</h3>
+          <p>Contact us:</p>
+          <ul>
+            <li>membership@heatsynclabs.org</li>
+            <li>Join Slack for quick answers</li>
+            <li>Ask any member</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <CalloutBox type="tip">
+      <p>
+        <strong>Pro tip:</strong> The best way to know if HeatSync is right for you
+        is to visit. Every community has its own vibe. Come see if ours matches what
+        you're looking for.
+      </p>
+    </CalloutBox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DocumentHeader from '@/components/document/DocumentHeader.vue'
+import CalloutBox from '@/components/ui/CalloutBox.vue'
+</script>
+
+<style lang="scss" scoped>
+.membership-page {
+  max-width: $max-content-width;
+
+  section {
+    margin-bottom: $space-7;
+  }
+
+  .membership-steps {
+    display: grid;
+    gap: $space-3;
+    margin: $space-5 0;
+
+    .step {
+      display: flex;
+      gap: $space-4;
+      padding: $space-3;
+      background-color: $color-paper-light;
+      border-radius: $radius-md;
+
+      h3 {
+        color: $color-accent;
+        margin: 0;
+        white-space: nowrap;
+      }
+
+      p {
+        margin: 0;
+      }
+    }
+  }
+
+  .membership-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: $space-4;
+    margin: $space-5 0;
+
+    .membership-card {
+      padding: $space-5;
+      border: 2px solid $color-border;
+      border-radius: $radius-md;
+      text-align: center;
+
+      &.featured {
+        border-color: $color-accent;
+        background-color: rgba($color-accent, 0.02);
+      }
+
+      h3 {
+        color: $color-accent;
+        margin-bottom: $space-2;
+      }
+
+      .price {
+        font-size: $font-size-2xl;
+        font-weight: 700;
+        color: $color-text;
+        margin: $space-3 0;
+      }
+
+      ul {
+        text-align: left;
+        margin: $space-4 0;
+        padding-left: $space-4;
+      }
+
+      .note {
+        font-size: $font-size-sm;
+        color: $color-text-muted;
+        font-style: italic;
+      }
+    }
+  }
+
+  .benefits-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: $space-4;
+    margin: $space-5 0;
+
+    .benefit {
+      padding: $space-3;
+      background-color: $color-paper-light;
+      border-radius: $radius-md;
+
+      h4 {
+        color: $color-accent;
+        margin-bottom: $space-2;
+      }
+
+      p {
+        margin: 0;
+        font-size: $font-size-sm;
+      }
+    }
+  }
+
+  .join-options {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: $space-4;
+    margin: $space-5 0;
+
+    .join-card {
+      padding: $space-4;
+      background-color: $color-paper-light;
+      border-radius: $radius-md;
+
+      h3 {
+        color: $color-accent;
+        margin-bottom: $space-3;
+      }
+
+      ul {
+        margin: $space-3 0;
+      }
+
+      .btn {
+        display: inline-block;
+        padding: $space-2 $space-4;
+        background-color: $color-accent;
+        color: white;
+        border-radius: $radius-md;
+        text-decoration: none;
+        margin-top: $space-3;
+
+        &:hover {
+          background-color: darken($color-accent, 10%);
+        }
+      }
+    }
+  }
+}</style>

governance-site/src/pages/ResourcesPage.vue

@@ -0,0 +1,418 @@
+<template>
+  <div class="resources-page">
+    <DocumentHeader
+      title="Resources & Templates"
+      description="Practical tools, templates, and resources for running your hackerspace."
+      :last-updated="new Date('2024-12-05')"
+    />
+
+    <section id="templates">
+      <h2>Document Templates</h2>
+
+      <div class="template-grid">
+        <div class="template-card">
+          <h3>Meeting Templates</h3>
+          <ul>
+            <li>Meeting agenda template</li>
+            <li>Meeting minutes format</li>
+            <li>Proposal template</li>
+            <li>Action items tracker</li>
+          </ul>
+          <button class="btn-download">Download Pack</button>
+        </div>
+
+        <div class="template-card">
+          <h3>Membership Forms</h3>
+          <ul>
+            <li>Membership application</li>
+            <li>Liability waiver</li>
+            <li>Guest sign-in sheet</li>
+            <li>Orientation checklist</li>
+          </ul>
+          <button class="btn-download">Download Pack</button>
+        </div>
+
+        <div class="template-card">
+          <h3>Financial Documents</h3>
+          <ul>
+            <li>Budget template</li>
+            <li>Expense report form</li>
+            <li>Reimbursement request</li>
+            <li>Monthly treasurer report</li>
+          </ul>
+          <button class="btn-download">Download Pack</button>
+        </div>
+
+        <div class="template-card">
+          <h3>Safety & Training</h3>
+          <ul>
+            <li>Tool certification form</li>
+            <li>Safety checklist</li>
+            <li>Incident report</li>
+            <li>Training log</li>
+          </ul>
+          <button class="btn-download">Download Pack</button>
+        </div>
+      </div>
+    </section>
+
+    <section id="guides">
+      <h2>How-To Guides</h2>
+
+      <div class="guide-list">
+        <div class="guide-item">
+          <h3>Starting a Hackerspace</h3>
+          <p>Step-by-step guide from idea to opening day</p>
+          <ul>
+            <li>Finding founding members</li>
+            <li>Choosing a legal structure</li>
+            <li>Finding and negotiating space</li>
+            <li>Initial fundraising</li>
+            <li>Building community</li>
+          </ul>
+        </div>
+
+        <div class="guide-item">
+          <h3>501(c)(3) Application</h3>
+          <p>Navigate the nonprofit application process</p>
+          <ul>
+            <li>Form 1023 walkthrough</li>
+            <li>Required documentation</li>
+            <li>Common pitfalls</li>
+            <li>Timeline expectations</li>
+            <li>State-specific requirements</li>
+          </ul>
+        </div>
+
+        <div class="guide-item">
+          <h3>Insurance for Hackerspaces</h3>
+          <p>Protect your organization and members</p>
+          <ul>
+            <li>General liability basics</li>
+            <li>Directors & Officers insurance</li>
+            <li>Equipment coverage</li>
+            <li>Event insurance</li>
+            <li>Working with brokers</li>
+          </ul>
+        </div>
+
+        <div class="guide-item">
+          <h3>Tool Acquisition</h3>
+          <p>Building your tool library strategically</p>
+          <ul>
+            <li>Priority tool lists by area</li>
+            <li>New vs used equipment</li>
+            <li>Donation strategies</li>
+            <li>Grants and funding</li>
+            <li>Maintenance planning</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <section id="software">
+      <h2>Recommended Software</h2>
+
+      <div class="software-grid">
+        <div class="software-card">
+          <h3>Membership Management</h3>
+          <ul>
+            <li><strong>Wild Apricot:</strong> All-in-one membership platform</li>
+            <li><strong>MemberPress:</strong> WordPress-based solution</li>
+            <li><strong>Open Source:</strong> CiviCRM for nonprofits</li>
+            <li><strong>DIY:</strong> Google Workspace + scripts</li>
+          </ul>
+        </div>
+
+        <div class="software-card">
+          <h3>Access Control</h3>
+          <ul>
+            <li><strong>RFID:</strong> DIY solutions on GitHub</li>
+            <li><strong>Commercial:</strong> Kisi, Brivo systems</li>
+            <li><strong>Hybrid:</strong> Arduino + cloud services</li>
+            <li><strong>Simple:</strong> Keypad locks + codes</li>
+          </ul>
+        </div>
+
+        <div class="software-card">
+          <h3>Communication</h3>
+          <ul>
+            <li><strong>Chat:</strong> Slack, Discord, Matrix</li>
+            <li><strong>Forum:</strong> Discourse, phpBB</li>
+            <li><strong>Wiki:</strong> MediaWiki, DokuWiki</li>
+            <li><strong>Calendar:</strong> Google Calendar, Nextcloud</li>
+          </ul>
+        </div>
+
+        <div class="software-card">
+          <h3>Financial Tools</h3>
+          <ul>
+            <li><strong>Accounting:</strong> QuickBooks, Wave</li>
+            <li><strong>Payments:</strong> Stripe, PayPal, Square</li>
+            <li><strong>Expense:</strong> Expensify for reimbursements</li>
+            <li><strong>Fundraising:</strong> Open Collective</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <section id="community">
+      <h2>Hackerspace Community</h2>
+
+      <h3>Networks & Organizations</h3>
+      <ul>
+        <li><strong>Hackerspace.org:</strong> Global hackerspace wiki and directory</li>
+        <li><strong>Space Federation:</strong> European hackerspace network</li>
+        <li><strong>School Factory:</strong> Educational programs framework</li>
+        <li><strong>Maker Faire:</strong> Event network and resources</li>
+      </ul>
+
+      <h3>Conferences & Events</h3>
+      <ul>
+        <li><strong>Chaos Communication Congress:</strong> Annual hacker conference</li>
+        <li><strong>DEF CON:</strong> Security and hacking conference</li>
+        <li><strong>Maker Faire:</strong> Regional maker events</li>
+        <li><strong>EMF Camp:</strong> UK hacker camp</li>
+      </ul>
+
+      <h3>Online Resources</h3>
+      <ul>
+        <li><strong>Hackerspace Design Patterns:</strong> hackerspace.design</li>
+        <li><strong>Hackerspace Blueprint:</strong> GitHub repository</li>
+        <li><strong>Discourse Forum:</strong> discuss.hackerspaces.org</li>
+        <li><strong>Reddit:</strong> r/hackerspaces</li>
+      </ul>
+    </section>
+
+    <section id="books">
+      <h2>Recommended Reading</h2>
+
+      <div class="book-grid">
+        <div class="book">
+          <h4>The Hackerspace Cookbook</h4>
+          <p>Practical recipes for common hackerspace challenges</p>
+        </div>
+
+        <div class="book">
+          <h4>Making Spaces</h4>
+          <p>Design patterns for collaborative workshops</p>
+        </div>
+
+        <div class="book">
+          <h4>The Art of Community</h4>
+          <p>Building and managing online and offline communities</p>
+        </div>
+
+        <div class="book">
+          <h4>Nonprofit Kit for Dummies</h4>
+          <p>Comprehensive guide to nonprofit management</p>
+        </div>
+      </div>
+    </section>
+
+    <section id="legal">
+      <h2>Legal Resources</h2>
+
+      <CalloutBox type="warning">
+        <p>
+          <strong>Not Legal Advice:</strong> These resources are for reference only.
+          Always consult with a qualified attorney for your specific situation.
+        </p>
+      </CalloutBox>
+
+      <h3>Key Documents</h3>
+      <ul>
+        <li>IRS 501(c)(3) requirements and forms</li>
+        <li>State nonprofit incorporation guides</li>
+        <li>Sample bylaws from other hackerspaces</li>
+        <li>Liability waiver templates</li>
+        <li>Insurance requirement checklists</li>
+      </ul>
+
+      <h3>Legal Help</h3>
+      <ul>
+        <li><strong>Pro Bono:</strong> Local bar association referrals</li>
+        <li><strong>Low Cost:</strong> Legal aid societies</li>
+        <li><strong>Specialized:</strong> Nonprofit law centers</li>
+        <li><strong>Online:</strong> LegalZoom, Nolo guides</li>
+      </ul>
+    </section>
+
+    <section id="downloads">
+      <h2>Quick Downloads</h2>
+
+      <div class="download-section">
+        <h3>Complete Governance Package</h3>
+        <p>All documents from this site in various formats:</p>
+        <div class="download-buttons">
+          <button class="btn-download">PDF Package</button>
+          <button class="btn-download">Markdown Files</button>
+          <button class="btn-download">Word Documents</button>
+          <button class="btn-download">Google Docs Templates</button>
+        </div>
+      </div>
+
+      <div class="download-section">
+        <h3>Source Code</h3>
+        <p>This website's source code for your own adaptation:</p>
+        <div class="download-buttons">
+          <a href="https://github.com/yourusername/governance-site" class="btn-download">
+            View on GitHub
+          </a>
+          <button class="btn-download">Download ZIP</button>
+        </div>
+      </div>
+    </section>
+
+    <CalloutBox type="tip">
+      <p>
+        <strong>Contributing:</strong> Have resources to share? Submit a pull request
+        on GitHub or email resources@heatsynclabs.org with your suggestions.
+      </p>
+    </CalloutBox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DocumentHeader from '@/components/document/DocumentHeader.vue'
+import CalloutBox from '@/components/ui/CalloutBox.vue'
+</script>
+
+<style lang="scss" scoped>
+.resources-page {
+  max-width: $max-content-width;
+
+  section {
+    margin-bottom: $space-7;
+  }
+
+  .template-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: $space-4;
+    margin: $space-5 0;
+
+    .template-card {
+      padding: $space-4;
+      background-color: $color-paper-light;
+      border-radius: $radius-md;
+
+      h3 {
+        color: $color-accent;
+        margin-bottom: $space-3;
+      }
+
+      ul {
+        margin: $space-3 0;
+        font-size: $font-size-sm;
+      }
+    }
+  }
+
+  .guide-list {
+    .guide-item {
+      margin-bottom: $space-5;
+      padding: $space-4;
+      background-color: $color-paper-light;
+      border-radius: $radius-md;
+
+      h3 {
+        color: $color-accent;
+        margin-bottom: $space-2;
+      }
+
+      p {
+        margin-bottom: $space-3;
+        font-style: italic;
+        color: $color-text-muted;
+      }
+    }
+  }
+
+  .software-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: $space-4;
+    margin: $space-5 0;
+
+    .software-card {
+      padding: $space-4;
+      border: 1px solid $color-border;
+      border-radius: $radius-md;
+
+      h3 {
+        color: $color-accent;
+        margin-bottom: $space-3;
+      }
+
+      ul {
+        font-size: $font-size-sm;
+
+        li {
+          margin-bottom: $space-2;
+        }
+      }
+    }
+  }
+
+  .book-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: $space-4;
+    margin: $space-5 0;
+
+    .book {
+      padding: $space-3;
+      background-color: $color-paper-light;
+      border-radius: $radius-md;
+
+      h4 {
+        color: $color-accent;
+        margin-bottom: $space-2;
+      }
+
+      p {
+        font-size: $font-size-sm;
+        margin: 0;
+      }
+    }
+  }
+
+  .download-section {
+    margin-bottom: $space-5;
+    padding: $space-4;
+    background-color: $color-paper-light;
+    border-radius: $radius-md;
+
+    h3 {
+      color: $color-accent;
+      margin-bottom: $space-2;
+    }
+
+    p {
+      margin-bottom: $space-3;
+    }
+
+    .download-buttons {
+      display: flex;
+      flex-wrap: wrap;
+      gap: $space-2;
+    }
+  }
+
+  .btn-download {
+    padding: $space-2 $space-4;
+    background-color: $color-accent;
+    color: white;
+    border: none;
+    border-radius: $radius-md;
+    cursor: pointer;
+    font-size: $font-size-sm;
+    text-decoration: none;
+    display: inline-block;
+
+    &:hover {
+      background-color: darken($color-accent, 10%);
+    }
+  }
+}</style>

governance-site/src/router/index.ts

@@ -0,0 +1,77 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+import HomePage from '@/pages/HomePage.vue'
+import BylawsPage from '@/pages/BylawsPage.vue'
+import CommunityStandardsPage from '@/pages/CommunityStandardsPage.vue'
+import DoOcracyPage from '@/pages/DoOcracyPage.vue'
+import DecisionMakingPage from '@/pages/DecisionMakingPage.vue'
+import MembershipPage from '@/pages/MembershipPage.vue'
+import BoardPage from '@/pages/BoardPage.vue'
+import ResourcesPage from '@/pages/ResourcesPage.vue'
+import AdaptThisPage from '@/pages/AdaptThisPage.vue'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomePage
+  },
+  {
+    path: '/bylaws',
+    name: 'bylaws',
+    component: BylawsPage
+  },
+  {
+    path: '/community-standards',
+    name: 'community-standards',
+    component: CommunityStandardsPage
+  },
+  {
+    path: '/do-ocracy',
+    name: 'do-ocracy',
+    component: DoOcracyPage
+  },
+  {
+    path: '/decision-making',
+    name: 'decision-making',
+    component: DecisionMakingPage
+  },
+  {
+    path: '/membership',
+    name: 'membership',
+    component: MembershipPage
+  },
+  {
+    path: '/board',
+    name: 'board',
+    component: BoardPage
+  },
+  {
+    path: '/resources',
+    name: 'resources',
+    component: ResourcesPage
+  },
+  {
+    path: '/adapt-this',
+    name: 'adapt-this',
+    component: AdaptThisPage
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+  scrollBehavior(to, _from, savedPosition) {
+    if (to.hash) {
+      return {
+        el: to.hash,
+        behavior: 'smooth'
+      }
+    }
+    if (savedPosition) {
+      return savedPosition
+    }
+    return { top: 0 }
+  }
+})
+
+export default router

governance-site/src/stores/hackerspace.ts

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { Hackerspace } from '@/types'
+
+export const useHackerspaceStore = defineStore('hackerspace', () => {
+  const hackerspace = ref<Hackerspace>({
+    name: 'HeatSync Labs',
+    location: 'Mesa, Arizona',
+    website: 'https://heatsynclabs.org',
+    established: new Date('2009-01-01')
+  })
+
+  const updateHackerspace = (updates: Partial<Hackerspace>) => {
+    hackerspace.value = { ...hackerspace.value, ...updates }
+  }
+
+  return {
+    hackerspace,
+    updateHackerspace
+  }
+})

governance-site/src/stores/navigation.ts

@@ -0,0 +1,77 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { NavItem } from '@/types'
+
+export const useNavigationStore = defineStore('navigation', () => {
+  const navItems = ref<NavItem[]>([
+    {
+      id: 'home',
+      title: 'Introduction',
+      path: '/'
+    },
+    {
+      id: 'bylaws',
+      title: 'Bylaws',
+      path: '/bylaws'
+    },
+    {
+      id: 'community-standards',
+      title: 'Community Standards',
+      path: '/community-standards'
+    },
+    {
+      id: 'do-ocracy',
+      title: 'Do-ocracy Guide',
+      path: '/do-ocracy'
+    },
+    {
+      id: 'decision-making',
+      title: 'Decision Making',
+      path: '/decision-making'
+    },
+    {
+      id: 'membership',
+      title: 'Membership',
+      path: '/membership'
+    },
+    {
+      id: 'board',
+      title: 'The Board',
+      path: '/board'
+    },
+    {
+      id: 'resources',
+      title: 'Resources',
+      path: '/resources'
+    },
+    {
+      id: 'adapt-this',
+      title: 'Adapt This',
+      path: '/adapt-this'
+    }
+  ])
+
+  const isMenuOpen = ref(false)
+  const activeSection = ref<string>('')
+
+  const toggleMenu = () => {
+    isMenuOpen.value = !isMenuOpen.value
+  }
+
+  const closeMenu = () => {
+    isMenuOpen.value = false
+  }
+
+  const setActiveSection = (sectionId: string) => {
+    activeSection.value = sectionId
+  }
+
+  return {
+    navItems,
+    isMenuOpen,
+    activeSection,
+    toggleMenu,
+    closeMenu,
+    setActiveSection
+  }
+})

governance-site/src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

governance-site/src/styles/_print.scss

@@ -0,0 +1,122 @@
+// Print styles
+@media print {
+  body {
+    font-size: 12pt;
+    line-height: 1.4;
+    color: #000;
+    background: white;
+  }
+
+  // Hide navigation and unnecessary elements
+  nav,
+  .navigation,
+  .sidebar,
+  .header,
+  .footer,
+  .no-print,
+  button,
+  .btn {
+    display: none !important;
+  }
+
+  // Ensure content uses full width
+  .content,
+  .container {
+    max-width: 100% !important;
+    width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  // Typography adjustments
+  h1, h2, h3, h4, h5, h6 {
+    page-break-after: avoid;
+    page-break-inside: avoid;
+  }
+
+  h1 {
+    font-size: 24pt;
+  }
+
+  h2 {
+    font-size: 20pt;
+    border-bottom: 1pt solid #ccc;
+  }
+
+  h3 {
+    font-size: 16pt;
+  }
+
+  h4 {
+    font-size: 14pt;
+  }
+
+  p, ul, ol, blockquote {
+    orphans: 3;
+    widows: 3;
+  }
+
+  ul, ol {
+    page-break-inside: avoid;
+  }
+
+  // Links
+  a {
+    color: #000;
+    text-decoration: underline;
+  }
+
+  a[href^="http"]:after {
+    content: " (" attr(href) ")";
+    font-size: 10pt;
+    color: #666;
+  }
+
+  a[href^="#"]:after,
+  a[href^="javascript:"]:after {
+    content: "";
+  }
+
+  // Tables
+  table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  th, td {
+    border: 1pt solid #ccc;
+    padding: 4pt;
+  }
+
+  th {
+    background-color: #f0f0f0;
+  }
+
+  // Code blocks
+  pre, code {
+    font-family: monospace;
+    font-size: 10pt;
+    background-color: #f5f5f5;
+    border: 1pt solid #ddd;
+  }
+
+  pre {
+    padding: 8pt;
+    page-break-inside: avoid;
+  }
+
+  // Images
+  img {
+    max-width: 100% !important;
+    page-break-inside: avoid;
+  }
+
+  // Page breaks
+  .page-break {
+    page-break-before: always;
+  }
+
+  .no-page-break {
+    page-break-inside: avoid;
+  }
+}

governance-site/src/styles/_reset.scss

@@ -0,0 +1,103 @@
+// Modern CSS Reset
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: $font-size-base;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  min-height: 100vh;
+  font-family: $font-family-base;
+  line-height: $line-height-base;
+  color: $color-text;
+  background-color: $color-paper;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+a {
+  color: $color-accent;
+  text-decoration: none;
+  transition: color $transition-fast;
+
+  &:hover, &:focus {
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $color-accent;
+    outline-offset: 2px;
+  }
+}
+
+button {
+  cursor: pointer;
+  background: transparent;
+  border: none;
+
+  &:focus-visible {
+    outline: 2px solid $color-accent;
+    outline-offset: 2px;
+  }
+}
+
+ul, ol {
+  list-style-position: inside;
+}
+
+blockquote {
+  border-left: 4px solid $color-border;
+  padding-left: $space-4;
+  margin: $space-4 0;
+  color: $color-text-muted;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid $color-border;
+  margin: $space-6 0;
+}
+
+code {
+  font-family: $font-family-mono;
+  font-size: 0.875em;
+  background-color: $color-paper-light;
+  padding: 2px 6px;
+  border-radius: $radius-sm;
+}
+
+pre {
+  font-family: $font-family-mono;
+  font-size: 0.875rem;
+  background-color: $color-paper-light;
+  padding: $space-4;
+  border-radius: $radius-md;
+  overflow-x: auto;
+
+  code {
+    background: transparent;
+    padding: 0;
+  }
+}

governance-site/src/styles/_typography.scss

@@ -0,0 +1,150 @@
+// Typography System
+h1, h2, h3, h4, h5, h6 {
+  line-height: $line-height-heading;
+  font-weight: 600;
+  margin-bottom: $space-3;
+  color: $color-text;
+}
+
+h1 {
+  font-size: $font-size-3xl;
+  margin-bottom: $space-5;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+h2 {
+  font-size: $font-size-2xl;
+  margin-top: $space-7;
+  margin-bottom: $space-4;
+  padding-bottom: $space-2;
+  border-bottom: 1px solid $color-border;
+}
+
+h3 {
+  font-size: $font-size-xl;
+  margin-top: $space-6;
+  margin-bottom: $space-3;
+}
+
+h4 {
+  font-size: $font-size-lg;
+  margin-top: $space-5;
+  margin-bottom: $space-3;
+}
+
+h5 {
+  font-size: $font-size-md;
+  margin-top: $space-4;
+  margin-bottom: $space-2;
+  font-weight: 700;
+}
+
+h6 {
+  font-size: $font-size-sm;
+  margin-top: $space-4;
+  margin-bottom: $space-2;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+p {
+  margin-bottom: $space-4;
+  max-width: $max-content-width;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.lead {
+  font-size: $font-size-lg;
+  line-height: 1.5;
+  color: $color-text-muted;
+  margin-bottom: $space-5;
+}
+
+.text-small {
+  font-size: $font-size-sm;
+}
+
+.text-xs {
+  font-size: $font-size-xs;
+}
+
+.text-muted {
+  color: $color-text-muted;
+}
+
+.text-mono {
+  font-family: $font-family-mono;
+}
+
+strong, b {
+  font-weight: 600;
+}
+
+em, i {
+  font-style: italic;
+}
+
+mark {
+  background-color: rgba($color-warning, 0.2);
+  padding: 2px 4px;
+  border-radius: $radius-sm;
+}
+
+// Lists
+ul, ol {
+  margin-bottom: $space-4;
+  padding-left: $space-5;
+
+  li {
+    margin-bottom: $space-2;
+  }
+
+  ul, ol {
+    margin-top: $space-2;
+    margin-bottom: $space-2;
+  }
+}
+
+// Definition lists
+dl {
+  margin-bottom: $space-4;
+
+  dt {
+    font-weight: 600;
+    margin-bottom: $space-1;
+  }
+
+  dd {
+    margin-bottom: $space-3;
+    margin-left: $space-5;
+    color: $color-text-muted;
+  }
+}
+
+// Tables
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: $space-5;
+  font-size: $font-size-sm;
+
+  th, td {
+    padding: $space-3;
+    text-align: left;
+    border-bottom: 1px solid $color-border;
+  }
+
+  th {
+    font-weight: 600;
+    background-color: $color-paper-light;
+  }
+
+  tbody tr:hover {
+    background-color: rgba($color-paper-light, 0.5);
+  }
+}

governance-site/src/styles/_utilities.scss

@@ -0,0 +1,189 @@
+// Utility Classes
+
+// Display
+.d-none { display: none !important; }
+.d-block { display: block !important; }
+.d-inline { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-flex { display: flex !important; }
+.d-grid { display: grid !important; }
+
+// Flexbox
+.flex-row { flex-direction: row !important; }
+.flex-column { flex-direction: column !important; }
+.flex-wrap { flex-wrap: wrap !important; }
+.flex-nowrap { flex-wrap: nowrap !important; }
+.justify-start { justify-content: flex-start !important; }
+.justify-center { justify-content: center !important; }
+.justify-end { justify-content: flex-end !important; }
+.justify-between { justify-content: space-between !important; }
+.justify-around { justify-content: space-around !important; }
+.align-start { align-items: flex-start !important; }
+.align-center { align-items: center !important; }
+.align-end { align-items: flex-end !important; }
+.align-stretch { align-items: stretch !important; }
+.flex-grow { flex-grow: 1 !important; }
+.flex-shrink-0 { flex-shrink: 0 !important; }
+
+// Grid
+.gap-1 { gap: $space-1 !important; }
+.gap-2 { gap: $space-2 !important; }
+.gap-3 { gap: $space-3 !important; }
+.gap-4 { gap: $space-4 !important; }
+.gap-5 { gap: $space-5 !important; }
+.gap-6 { gap: $space-6 !important; }
+
+// Spacing
+@each $size, $value in (
+  1: $space-1,
+  2: $space-2,
+  3: $space-3,
+  4: $space-4,
+  5: $space-5,
+  6: $space-6,
+  7: $space-7,
+  8: $space-8,
+  9: $space-9
+) {
+  .m-#{$size} { margin: $value !important; }
+  .mt-#{$size} { margin-top: $value !important; }
+  .mr-#{$size} { margin-right: $value !important; }
+  .mb-#{$size} { margin-bottom: $value !important; }
+  .ml-#{$size} { margin-left: $value !important; }
+  .mx-#{$size} {
+    margin-left: $value !important;
+    margin-right: $value !important;
+  }
+  .my-#{$size} {
+    margin-top: $value !important;
+    margin-bottom: $value !important;
+  }
+
+  .p-#{$size} { padding: $value !important; }
+  .pt-#{$size} { padding-top: $value !important; }
+  .pr-#{$size} { padding-right: $value !important; }
+  .pb-#{$size} { padding-bottom: $value !important; }
+  .pl-#{$size} { padding-left: $value !important; }
+  .px-#{$size} {
+    padding-left: $value !important;
+    padding-right: $value !important;
+  }
+  .py-#{$size} {
+    padding-top: $value !important;
+    padding-bottom: $value !important;
+  }
+}
+
+.m-0 { margin: 0 !important; }
+.p-0 { padding: 0 !important; }
+.m-auto { margin: auto !important; }
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+// Width & Height
+.w-full { width: 100% !important; }
+.w-auto { width: auto !important; }
+.h-full { height: 100% !important; }
+.h-auto { height: auto !important; }
+.min-h-screen { min-height: 100vh !important; }
+
+// Position
+.relative { position: relative !important; }
+.absolute { position: absolute !important; }
+.fixed { position: fixed !important; }
+.sticky { position: sticky !important; }
+.top-0 { top: 0 !important; }
+.right-0 { right: 0 !important; }
+.bottom-0 { bottom: 0 !important; }
+.left-0 { left: 0 !important; }
+
+// Text
+.text-left { text-align: left !important; }
+.text-center { text-align: center !important; }
+.text-right { text-align: right !important; }
+.text-justify { text-align: justify !important; }
+
+// Visibility
+.visible { visibility: visible !important; }
+.invisible { visibility: hidden !important; }
+
+// Overflow
+.overflow-auto { overflow: auto !important; }
+.overflow-hidden { overflow: hidden !important; }
+.overflow-scroll { overflow: scroll !important; }
+.overflow-x-auto { overflow-x: auto !important; }
+.overflow-y-auto { overflow-y: auto !important; }
+
+// Borders
+.border { border: 1px solid $color-border !important; }
+.border-0 { border: 0 !important; }
+.border-t { border-top: 1px solid $color-border !important; }
+.border-r { border-right: 1px solid $color-border !important; }
+.border-b { border-bottom: 1px solid $color-border !important; }
+.border-l { border-left: 1px solid $color-border !important; }
+
+// Border radius
+.rounded { border-radius: $radius-md !important; }
+.rounded-sm { border-radius: $radius-sm !important; }
+.rounded-lg { border-radius: $radius-lg !important; }
+.rounded-0 { border-radius: 0 !important; }
+
+// Shadows
+.shadow-sm { box-shadow: $shadow-sm !important; }
+.shadow-md { box-shadow: $shadow-md !important; }
+.shadow-lg { box-shadow: $shadow-lg !important; }
+.shadow-none { box-shadow: none !important; }
+
+// Responsive utilities
+@media (min-width: $breakpoint-sm) {
+  .sm\:d-none { display: none !important; }
+  .sm\:d-block { display: block !important; }
+  .sm\:d-flex { display: flex !important; }
+}
+
+@media (min-width: $breakpoint-md) {
+  .md\:d-none { display: none !important; }
+  .md\:d-block { display: block !important; }
+  .md\:d-flex { display: flex !important; }
+}
+
+@media (min-width: $breakpoint-lg) {
+  .lg\:d-none { display: none !important; }
+  .lg\:d-block { display: block !important; }
+  .lg\:d-flex { display: flex !important; }
+}
+
+// Container
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: $space-4;
+  padding-right: $space-4;
+
+  @media (min-width: $breakpoint-md) {
+    padding-left: $space-5;
+    padding-right: $space-5;
+  }
+
+  @media (min-width: $breakpoint-lg) {
+    padding-left: $space-6;
+    padding-right: $space-6;
+  }
+}
+
+// Screen reader only
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

governance-site/src/styles/_variables.scss

@@ -0,0 +1,65 @@
+// Color Palette
+$color-paper: #FAFAF8;
+$color-paper-light: #F5F5F0;
+$color-text: #1A1A1A;
+$color-text-muted: #666666;
+$color-accent: #0066CC;
+$color-warning: #D97706;
+$color-error: #DC2626;
+$color-success: #059669;
+$color-border: #E5E5E5;
+
+// Typography
+$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+$font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', monospace;
+
+$font-size-base: 16px;
+$line-height-base: 1.6;
+$line-height-heading: 1.2;
+
+// Typography Scale (Golden Ratio)
+$font-size-xs: 0.618rem;
+$font-size-sm: 0.875rem;
+$font-size-md: 1rem;
+$font-size-lg: 1.25rem;
+$font-size-xl: 1.618rem;
+$font-size-2xl: 2.058rem;
+$font-size-3xl: 2.618rem;
+$font-size-4xl: 3.272rem;
+
+// Spacing Scale
+$space-1: 4px;
+$space-2: 8px;
+$space-3: 12px;
+$space-4: 16px;
+$space-5: 24px;
+$space-6: 32px;
+$space-7: 48px;
+$space-8: 64px;
+$space-9: 96px;
+
+// Layout
+$max-content-width: 75ch;
+$sidebar-width: 280px;
+$header-height: 64px;
+
+// Breakpoints
+$breakpoint-sm: 640px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 1024px;
+$breakpoint-xl: 1280px;
+
+// Transitions
+$transition-fast: 150ms ease-in-out;
+$transition-base: 250ms ease-in-out;
+$transition-slow: 350ms ease-in-out;
+
+// Shadows
+$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+
+// Border Radius
+$radius-sm: 2px;
+$radius-md: 4px;
+$radius-lg: 8px;

governance-site/src/styles/main.scss

@@ -0,0 +1,5 @@
+@import 'variables';
+@import 'reset';
+@import 'typography';
+@import 'utilities';
+@import 'print';

governance-site/src/types/index.ts

@@ -0,0 +1,30 @@
+export interface NavItem {
+  id: string
+  title: string
+  path: string
+  children?: NavItem[]
+}
+
+export interface DocumentSection {
+  id: string
+  title: string
+  content: string
+  order: number
+  subsections?: DocumentSection[]
+}
+
+export interface GovernanceDocument {
+  id: string
+  title: string
+  description: string
+  lastUpdated: Date
+  sections: DocumentSection[]
+}
+
+export interface Hackerspace {
+  name: string
+  location: string
+  website?: string
+  established?: Date
+  logo?: string
+}

governance-site/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client", "node"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

governance-site/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

governance-site/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

governance-site/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@/styles/_variables.scss";`
+      }
+    }
+  }
+})

initial/HeatSync_Community_Standards.md

@@ -0,0 +1,222 @@
+# HeatSync Labs Community Standards & Accountability Process
+
+> **HeatSync Labs exists so people can make things.** These standards protect that mission by ensuring everyone can participate safely. We're a do-ocracy: if you see a problem, you can address it. But some problems need backup. This document tells you when to act, when to escalate, and what happens next.
+
+---
+
+## 1. The Core Principle
+
+**Be excellent to each other.**
+
+This means:
+
+1. **Respect people's right to exist and make things here,** regardless of who they are.
+2. **Take care of the space** so others can use it too.
+3. **Handle conflicts directly when you can,** and ask for help when you can't.
+4. **Support the community's ability to enforce its norms,** even when it's uncomfortable.
+
+---
+
+## 2. Who This Applies To
+
+Everyone in HeatSync spaces—physical or digital—including members, guests, visitors, board members, and anyone at HSL-sponsored events. No one is exempt.
+
+---
+
+## 3. Who We Protect
+
+HeatSync Labs does not tolerate discrimination or harassment based on:
+
+- Race or ethnicity
+- Gender identity or expression
+- Sexual orientation
+- Disability (visible or invisible)
+- Age
+- Religion (or lack thereof)
+- National origin
+- Socioeconomic status
+- Body size or appearance
+- Neurodivergence
+
+*This list is not exhaustive.* If you're being targeted for who you are, that's covered.
+
+---
+
+## 4. Behavior That Isn't Tolerated
+
+### 4.1 Immediate Removal Behaviors
+
+These result in immediate removal from the space. No warnings.
+
+1. **Violence or credible threats of violence**
+2. **Sexual harassment or assault**
+3. **Stalking or deliberate intimidation**
+4. **Doxxing** (publishing someone's private information)
+5. **Theft or intentional destruction of property**
+6. **Grossly unsafe tool use** that endangers others
+
+### 4.2 Escalating Behaviors
+
+These may result in warnings, then escalating consequences if they continue.
+
+- Slurs, discriminatory jokes, or derogatory language targeting protected characteristics
+- Unwelcome physical contact (you need consent before touching someone)
+- Sustained disruption of events, meetings, or others' work
+- Refusing to stop behavior when asked
+- Repeated boundary violations after being informed
+- Creating a hostile environment through patterns of microaggressions
+- Retaliation against someone who made a report
+
+### 4.3 Space & Tool Violations
+
+- Using tools you're not certified for
+- Leaving messes for others to clean up
+- Ignoring posted safety procedures
+- Using more space than you need during busy times
+- Taking or using others' property without permission
+
+---
+
+## 5. The Do-ocracy Response
+
+> **We're a do-ocracy.** That means you have standing to address problems directly. You don't need permission to say "hey, that's not cool" or "please clean up after yourself." Most issues should be handled this way.
+
+### 5.1 When to Handle It Yourself
+
+- Someone forgot safety glasses → remind them
+- Someone left a mess → ask them to clean it up
+- Someone's being loud during your work → politely ask them to keep it down
+- Someone said something mildly off → call it in ("hey, that came across weird")
+- A tool needs maintenance → fix it if you can, report it if you can't
+
+### 5.2 When to Escalate
+
+- The behavior is in the "Immediate Removal" category
+- You've addressed it directly and it continues
+- You don't feel safe addressing it directly
+- The person becomes hostile when confronted
+- It's a pattern, not a one-time thing
+- You witness something happening to someone else who seems distressed
+
+---
+
+## 6. Reporting & Response Process
+
+### 6.1 How to Report
+
+Choose the method that works for you:
+
+- **Email:** conduct@heatsynclabs.org (goes to all board members)
+- **In person:** Any board member or host present at the space
+- **Anonymous:** Drop box at [LOCATION] or anonymous form at [URL]
+- **Direct to specific board member:** If you're not comfortable with full board seeing the report
+
+### 6.2 What Happens Next
+
+| Timeline | Action |
+|----------|--------|
+| **48 hours** | Acknowledgment sent to reporter (unless anonymous) |
+| **7 days** | Initial investigation complete; interim measures if needed |
+| **21 days** | Final decision communicated to all parties |
+
+*Exceptions:* Complex situations may take longer. If so, you'll be told why and given an updated timeline.
+
+### 6.3 Investigation Process
+
+1. **Intake:** At least two board members review the report
+2. **Gathering information:** We talk to the reporter, the respondent, and any witnesses
+3. **Interim measures:** If someone's safety is at risk, we may restrict access during investigation
+4. **Decision:** Board determines what happened and what response is appropriate
+5. **Communication:** Both parties are informed of the outcome
+
+> **Conflict of Interest:** If a board member is involved in the incident (as reporter, respondent, or close relation), they recuse themselves from the process.
+
+---
+
+## 7. Consequences
+
+Responses are proportional to the severity and pattern of behavior.
+
+### Tier A: Verbal or Written Warning
+
+For first-time minor violations where the person seems unaware or immediately corrects.
+
+- Documented internally but not announced publicly
+
+### Tier B: Required Action
+
+For repeated minor violations or moderate violations. May include:
+
+- Apology to affected parties
+- Cleaning duty or other community service
+- Temporary restriction from specific areas or tools
+- Required re-certification for safety training
+
+### Tier C: Temporary Suspension
+
+For serious violations or continued problems after warnings. 30-180 days.
+
+- No access to space during suspension
+- Card access revoked
+- Reinstatement may require conditions (e.g., meeting with board)
+
+### Tier D: Permanent Ban
+
+For severe violations or repeated serious problems. Reserved for:
+
+- Violence, sexual assault, stalking, or credible threats
+- Pattern of harassment despite previous consequences
+- Actions that seriously endanger others
+
+> ⚠️ **No waiting for multiple complaints:** The board is not required to wait for a specific number of reports before taking action. A single credible report of serious behavior is sufficient to investigate and act.
+
+---
+
+## 8. Appeals
+
+If you believe a decision was unfair, you may appeal.
+
+### 8.1 Grounds for Appeal
+
+- New evidence that wasn't available during the investigation
+- Procedural errors that affected the outcome
+- Consequence is disproportionate to the violation
+
+### 8.2 Appeal Process
+
+- Submit written appeal to conduct@heatsynclabs.org within 14 days of decision
+- Appeal is reviewed by board members not involved in original decision
+- If all board members were involved, appeal goes to membership vote at HYH
+- Decision on appeal is final
+
+---
+
+## 9. Confidentiality & Documentation
+
+- Reports are kept confidential to those involved in the investigation
+- The board maintains records of all reports and outcomes
+- Consequences may be shared with the community without naming individuals
+- Deliberately making consequences public when the board chose privacy is itself a violation
+- If the community needs to know for safety reasons, the board will communicate appropriately
+
+---
+
+## 10. Amendments
+
+This document may be amended through the standard HSL proposal process. Amendments require a majority vote at HYH followed by board ratification.
+
+---
+
+> *The goal isn't punishment—it's a space where people can make things without worrying about being harassed, endangered, or excluded. When we hold each other accountable, we're protecting what makes HeatSync worth having.*
+
+---
+
+## Contact
+
+- **Report a concern:** conduct@heatsynclabs.org
+- **General board inquiries:** board@heatsynclabs.org
+- **Physical drop box:** [LOCATION TBD]
+
+---
+
+*This document is adapted from the Geek Feminism Anti-Harassment Policy and distributed under CC BY-SA 3.0.*

initial/bylaws.md

@@ -0,0 +1,131 @@
+# **Bylaws of [Hackerspace Name]**
+
+## **Article I: Name, Purpose, and Status**
+
+**Section 1.1: Name.** The name of the organization shall be [Full Legal Name of Hackerspace], doing business as [Hackerspace Name] (hereinafter, the "Corporation").
+
+**Section 1.2: Purpose.** The Corporation is organized exclusively for charitable, educational, and scientific purposes within the meaning of Section 501(c)(3) of the 
+Internal Revenue Code. Its mission is to:
+*   Provide a collaborative physical workspace, tools, and resources for making, learning, exploring, and sharing technology and creative projects.
+*   Promote education in technology, science, art, and craftsmanship through workshops, classes, and public outreach.
+*   Foster a community of innovation and shared knowledge, operating on the principles of open access, inclusivity, and **do-ocracy**.
+
+**Section 1.3: 501(c)(3) Status.** The Corporation shall operate exclusively for its stated charitable purposes. No part of its net earnings shall benefit any private 
+shareholder or individual. The Corporation shall not engage in substantial lobbying or any political campaign activities.
+
+---
+
+## **Article II: Membership**
+
+**Section 2.1: Eligibility.** Membership is open to any individual who supports the Corporation’s mission, agrees to abide by its Code of Conduct and Safety Policies, and 
+pays the established dues (if any). The Corporation shall not discriminate on any unlawful basis.
+
+**Section 2.2: Classes of Membership.** The Corporation shall have **Voting Members**.
+*   **Voting Member:** An individual who has completed an orientation, is in good standing (current on dues, if applicable, and adherence to policies), and has actively 
+contributed to the space’s maintenance or projects within the last [e.g., 6 months]. Contribution is self-documented and recognized (see Do-ocracy, Article VI).
+
+**Section 2.3: Rights of Voting Members.** Each Voting Member shall have one vote on matters put before the membership, including the election of the Board of Directors and 
+amendments to these Bylaws.
+
+**Section 2.4: Termination.** Membership may be terminated for cause, including non-payment of dues or violation of the Code of Conduct, upon fair review as defined in the 
+Corporation’s policies.
+
+---
+
+## **Article III: Board of Directors**
+
+**Section 3.1: Role and Powers.** The Board of Directors ("Board") is responsible for the legal, financial, and fiduciary oversight of the Corporation. It shall ensure 
+compliance with all laws and the 501(c)(3) mission. The Board shall adopt policies but shall **empower the membership and do-ocracy model** for daily operations and project 
+execution.
+
+**Section 3.2: Composition.**
+*   The Board shall consist of no fewer than three (3) and no more than [e.g., seven (7)] Directors.
+*   At least one-third of the Board must be elected from and by the Voting Membership.
+*   The remainder may be elected from the membership or appointed for specific expertise (legal, financial, etc.).
+
+**Section 3.3: Election & Terms.** Elected Directors shall serve staggered terms of two (2) years. Elections shall be held annually at the Membership Meeting. A Director 
+may serve no more than [e.g., four] consecutive terms.
+
+**Section 3.4: Officers.** The Board shall elect from its members a Chair, Secretary, and Treasurer. Officers shall have duties as prescribed by the Board and consistent 
+with state law.
+
+**Section 3.5: Meetings.** The Board shall meet at least quarterly. Meetings shall be open for observation by any Voting Member, except during executive sessions for 
+sensitive matters (personnel, legal).
+
+---
+
+## **Article IV: Membership Meetings**
+
+**Section 4.1: Annual Meeting.** An Annual Membership Meeting shall be held for electing Directors, presenting annual reports, and addressing major strategic issues.
+
+**Section 4.2: Special Meetings.** Special Meetings may be called by the Board or by a petition of at least [e.g., 20%] of Voting Members.
+
+**Section 4.3: Quorum & Decision Making.** For annual meetings, a quorum shall be [e.g., 20%] of Voting Members. For special meetings, [e.g., 30%]. Whenever possible, the 
+Corporation shall operate by **consensus**. When a vote is required, a simple majority of members present shall decide, except for Bylaws amendments (see Article VIII).
+
+---
+
+## **Article V: Committees**
+
+**Section 5.1: Standing Committees.** The Board may establish Standing Committees for ongoing functions (Finance, Safety). Committee chairs shall report to the Board.
+
+**Section 5.2: Do-ocracy Working Groups.** These are **self-forming, project-oriented groups** established by members under the principles of Article VI. They are not 
+committees of the Board and operate autonomously within the scope of approved budgets and space policies. They must report their activities and use of resources to the 
+membership via a public log/wiki.
+
+---
+
+## **Article VI: Principle of Do-ocracy**
+
+**Section 6.1: Definition.** A "do-ocracy" is an organizational structure in which individuals have the authority and responsibility to self-initiate and execute projects, 
+tasks, and improvements for the Corporation. **The authority to make a decision and take action lies with those who do the work.**
+
+**Section 6.2: Scope.**
+*   **Empowered Actions:** Members are empowered to: fix broken equipment, organize workshops, improve infrastructure, create art for the space, develop software tools, and 
+manage day-to-day operations within established safety and financial guidelines.
+*   **Limitations:** Do-ocracy does not authorize actions that: violate law or the Code of Conduct, create significant legal/financial risk, commit the Corporation to major 
+contracts, spend beyond a pre-set budget cap for autonomous projects (e.g., $200), or alter core governance.
+
+**Section 6.3: Process & Accountability.**
+1.  **Proposal & Notification:** A member wishing to undertake a significant action shall document their intent (via wiki, mailing list, or physical board) to allow for 
+feedback.
+2.  **Seeking Feedback:** The proposing member shall actively seek feedback, especially from those affected. **Constructive objection must be addressed.**
+3.  **Execution:** If no unresolvable objection is raised, the member may proceed, using resources responsibly.
+4.  **Documentation:** All actions must be documented (what was done, cost, who did it).
+
+**Section 6.4: Conflict Resolution.** Disputes arising from do-ocratic actions shall first be addressed through direct, respectful dialogue. Unresolved disputes shall be 
+mediated per the Corporation’s Conflict Resolution Policy, ultimately appealable to the Board.
+
+---
+
+## **Article VII: Finances**
+
+**Section 7.1: Fiscal Year.** The fiscal year shall be January 1 to December 31.
+
+**Section 7.2: Budget.** The Board, with input from the membership, shall approve an annual budget. The budget shall include a **Do-ocracy Project Fund** to be allocated by 
+members for small, autonomous projects.
+
+**Section 7.3: Disbursements.** Disbursements under the Do-ocracy Project Fund cap may be reimbursed upon presentation of receipts and documentation. Larger expenditures 
+require prior approval per the Financial Policy.
+
+**Section 7.4: Financial Review.** The Board shall ensure an annual financial review or audit as required by law or best practices.
+
+---
+
+## **Article VIII: Amendments**
+
+These Bylaws may be amended by a **two-thirds (2/3) supermajority vote** of the Voting Members present at a duly called Membership Meeting, provided written notice of the 
+proposed amendment has been provided to all members at least [e.g., 30] days in advance.
+
+---
+
+## **Article IX: Dissolution**
+
+Upon dissolution of the Corporation, after paying all debts and obligations, its remaining assets shall be distributed to one or more 501(c)(3) organizations with a similar 
+mission, as determined by the Board. No assets shall be distributed to any member, director, or officer.
+
+---
+
+**Adopted on:** _______________
+**Secretary:** _________________________
+(Printed Name & Signature)

initial/mitchtalk

@@ -0,0 +1,285 @@
+00:14
+Wow, thanks everyone for coming on so early on day three.
+00:20
+I got two and a half hours of sleep myself, so I'm totally ready to go. The design patterns, I think, are super important for why we're even all here. The movement has been 
+going on for a while, but the Hackerspace design patterns really did change things dramatically and got so many people aware of this incredible opportunity.
+00:46
+Hackerspaces and all of our hacker conferences like here. I have a lot of information that I've compiled and I can't really go over much of it, so I want to really just put 
+everything in context of why the original Hackerspace design patterns are so important
+01:04
+and some ideas of how to compile a new set that includes the original, because the original really are superb. They are still relevant and vital. I have to look at my 
+notes, I'm afraid, because my brain is a little broken, so forgive me.
+01:26
+I've been waiting for this camp for four years, since the last camp. It's just so amazing here. I've been thinking about this talk for a long time, but I actually wrote it 
+last night at the NOPE village.
+01:47
+That's our noise bridge and pseudo room of San Francisco area Hackerspace village. Most of the camp I've either been doing workshops or wandering around and meeting amazing 
+people, but if you just sit there, it's incredible the kind of people that just come up to you.
+02:03
+I wasn't really prepared for that because I was supposed to write my talk, but a friend comes by who's now an employee of the Pirate Party and starts talking about 
+copyright issues, and there's an acquaintance who comes by who I met a number of years ago
+02:20
+who's now been spending the last year of his life writing a really trippy, cool game you can play on your phone. Someone else comes over and we talk about encoding and 
+decoding, transmissions, receptions with an incredible radio badge. How about that badge? And then funding sources for our projects and how they matter,
+02:43
+how to promote open science, secure password managers, filmmaking. These are just a few of the things that we talked about, which kept me up until 5.30 in the morning, and 
+of course that meant we were all talking about the merits of sleep. So anyways, this is our community.
+03:07
+My first hacker conference was in 2006. That's getting to be a number of years now. The turning point for me, though, is the following year at CCC camp where we are now.
+03:22
+Just amazing. More LEDs than China. But this community comes together and creates this. It's just totally amazing. In 2007, though, there were a bunch of North Americans 
+who came to camp, camp 2007,
+03:40
+and we were visiting some hackerspaces. We really wanted to learn about hackerspaces because all of us had experienced how wonderful it is to be in an amazing community at 
+hacker conferences, but we really didn't have hackerspaces to go to and check out in North America. So we met a bunch of German hackers at hackerspaces,
+04:01
+three of whom from C4 in Cologne. They agreed to put together a presentation for not only us but everyone to learn from, and they researched what worked well and also what 
+didn't work well and all the hackerspaces they could talk to people at.
+04:20
+Most of them were in Germany, of course, including a lot of information from CCC in Cologne. They presented it at 24C3. It was called Building a Hackerspace, but it was 
+presented as patterns. They called it the Hackerspace Design Patterns.
+04:40
+Within several months of this talk, we had several hackerspaces in North America, including Noisebridge, the one I co-founded. Within a year later after that, with new 
+examples plus all the German ones and these patterns to draw from, there were over 100 a year later.
+05:01
+We had the idea driven by someone from Metalab in Vienna to create Hackerspaces.org, a networking place where people from hackerspaces and people thinking of starting 
+hackerspaces and running hackerspaces could all help each other, could all network. People could list themselves. It's a wiki.
+05:21
+Within not all that many years, we have over 2,000 hackerspaces listed on hackerspaces.org, which is also directly a result of the original hackerspace design patterns. My 
+first hacker conference was in New York, Hope 6,
+05:40
+which I'm now helping, Hope Conferences helping organize because I just fell in love with all of this. Back then, I'd never heard of hackerspaces. Before I heard about 
+Hope, I never even heard of hacker conferences. I had no idea what to expect. I was kind of nervous. I was going to give a talk. I'm an introverted geek. What do you expect 
+to go to this large group full of people you don't know
+06:04
+and giving a talk and they're all staring at you and you're on the stage? It turned out to be 2,000 introverted geeks. It was incredibly cool, and I felt wonderful and safe 
+and fantastic in a group of people for the first time in my life.
+06:23
+It's because of the community that they formed, that we formed. It really is what we're creating, a wonderful community of geeks. One of the focuses for me really is 
+community. It really is very important for us, for all of us, geeks or not.
+06:46
+We all need community in our lives. That's why we're here rather than just at home and on the Internet, right? As a species, we no longer need community to survive as we 
+once did long ago, but we still need community to feel like our lives are important,
+07:02
+to feel like we're part of something bigger than ourselves. And with hackerspaces, even with all the cool blinky lights and projects and tools, it's the community that 
+brings people together rather than just sitting at home alone, typing on your keyboard or holding a soldering iron or a sewing machine.
+07:21
+But as it turns out, we're not necessarily all well-suited for community because we're not so well-trained, so community is hard work. Maybe it always has been. The 
+hackerspace design patterns are a fantastic set of patterns that we can look at and ponder and draw from
+07:42
+to help us in our journeys with interfacing with community and forming community and hopefully growing community. And even though they were written eight years ago and 
+there were only a small number of hackerspaces back then, they really are still very relevant.
+08:01
+And if you haven't read them, please do. Just look up hackerspace design patterns online. You'll find them. They're pretty amazing. They're very important, and if you have 
+read them, reread them. I was actually surprised, rereading them, preparing for this talk over the last three weeks,
+08:21
+how relevant they are, how interesting and insightful they are. I don't have time to go over, obviously, the whole original design patterns, but I want to give you a few of 
+them so you get a feel for how the design patterns work and have a taste of it.
+08:41
+This is just one I thought was pretty interesting. How do you start? Do you start with this or do you start with that? Do you start with a building and hope people come? Do 
+you just have a cool project and then grow it into a community that you then find a space? They recommended what I've seen at the hackerspaces I've visited.
+09:01
+And by the way, I travel the world giving talks and workshops, usually with soldering for the workshops and teaching people of all ages this cool stuff, doing what I love 
+and doing it mostly at hackerspaces. But all the hackerspaces I've visited, most of them have started by working on the infrastructure, creating just enough organization 
+and infrastructure, walls, spaces, whatever,
+09:25
+some tools that people could come together and grow their community in whatever surprising ways their community would grow. This other one I thought is pretty interesting, 
+named after Grace Hopper.
+09:40
+She's one of the early computer programmers. She worked her way up in World War II. When do you start a hackerspace? There's always problems that you need to solve before 
+you can really do the thing, before you can start any project. If you're doing art, if you're doing a computer program,
+10:01
+how much do you architect before you actually start? The recommendation of the hackerspace design patterns and what has worked really well for so many hackerspaces around 
+the world is you just do it. Don't wait. If you try to solve all the problems before they happen, you'll never start.
+10:21
+This has led to a couple of things that I've seen at not only Noisebridge but hackerspaces around the world. One of the outcrows of this is, well, there's a couple of rules 
+of thumb. One of them is don't solve problems that haven't happened. You just get bogged down in endless useless discussions. What I've seen at Noisebridge and other 
+hackerspaces is
+10:42
+when that starts happening, someone just says, let's not solve problems before they happen, and then we move on. Another one is do-ocracy. Have you all heard of do-ocracy? 
+Do-ocracy is just do it. Don't ask permission.
+11:02
+Grace Hopper is famous for a number of quotes. One of them is it's better to ask for forgiveness rather than permission. So just do it, but, of course, follow the one rule 
+of Noisebridge and the signs we've seen all over here. Be excellent to each other as you do it.
+11:20
+If you think there are objections, obviously you don't want to go ahead. Another one that I think is great, well, there's one called the plenum pattern, which talked about 
+the importance of weekly meetings, and that's the way people come together and discuss issues of importance and make decisions and solve problems.
+11:43
+The pattern that followed this is, well, what day of the week do you choose for this meeting? And I like the first line. Every weekday sucks. And it's true. If we're 
+starting an organization, a community, a hackerspace, we're busy.
+12:01
+We have stuff happening in our lives, cool things happening in our lives, and we're busy. There's no way you're going to pick a day of the week that works for everyone, so 
+just pick Tuesday and get it over with. And that's what we did. At Noisebridge, we did this, and we grew rather quickly before we had a space to up to 50 people every 
+Tuesday meeting, but it was very problematic because some people had to get off early
+12:23
+because they had Chinese lessons online with someone in China and other people couldn't come till late and various other reasons why it's problematic, like every day of the 
+week is. So we decided to focus for three weeks on how to choose the best day of the week. So some people who thought this was important researched it,
+12:40
+and everyone in the group picked their number one, number two, and number three best day of the week, and we come up with an algorithm. One person came up with an algorithm 
+and put all the data in, and it came out, and the best day of the week was Tuesday. So why go through the pain?
+13:00
+Learn from others' experience. There are also anti-patterns in the Hackerspace design patterns. This one is really relevant. If you have a space and warm community that's 
+friendly and open and inviting, people are going to come who don't necessarily belong.
+13:22
+How do you choose that or not is open for discussion, and it's a really important discussion, but some people will start to abuse the space and using the resources without 
+contributing in significant enough ways. It's a shared resource. We have to be aware of other people. If you sleep in a space, you're not just taking up this area that 
+you're sleeping in.
+13:40
+People are very aware, perhaps subconsciously, that you're there, and maybe that person isn't necessarily bathing as well as they could. So it's taking up a lot of psychic 
+space, and at Noisebridge, this is one of the many problems that led up to about a year ago of Noisebridge almost dissolving as some people who don't belong sleeping in our 
+space.
+14:04
+I'm going to talk more about that in a bit. One of the main things with design patterns, rather than saying what you should and shouldn't do, all hackerspaces are different 
+and unique, so it's really not a cookbook to say follow these simple steps, but patterns, rules of thumb, things to think about, to ponder.
+14:24
+This is what's worked well and not well at these other spaces, so what do you want to do at your space? Learn from the experience of others, and if you violate or do it 
+differently than what the patterns show, do so consciously. It's totally okay, but do so consciously.
+14:41
+For instance, a long time ago, one of the earlier hackerspaces is Tempilab, just outside of Paris in a suburb which was not very friendly, kind of high crime, and they 
+decided that one of the people would live there to have a living presence there, knowing full well about the patterns, and that worked really well for them.
+15:03
+Also, for instance, here's a pattern that is now sometimes an anti-pattern, depending on the space. We need food. It's wonderful to bond together while eating food. At so 
+many of the hackerspaces I've been to around the world, I've had fantastic experiences meeting people and having great conversations over food, great food that everyone 
+could eat.
+15:25
+But at Noisebridge and many other spaces, it's definitely an anti-pattern. We have a grocery store in the first floor of our building. There are rats. They migrated to our 
+space because it was a friendlier environment for them.
+15:45
+It also became a place where a lot of people who weren't really part of our community were hanging out in the kitchen, just use the kitchen and then leaving or hanging out 
+with each other and not really being open to people who are part of the community joining in conversations, and people got kind of uncomfortable,
+16:03
+and things got messier and messier just like that. Rats, roaches, we ended up last year choosing to close our kitchen, which saddens me, but I think it was the right choice 
+for us. There's a lot of patterns that are really, really relevant.
+16:22
+They cover many topics, including sustainability, funding, conflict resolution, and others. But that gives you a taste of what the patterns are like. You give up a problem 
+and some solutions, implementation ideas. Now with many, many more hackerspaces in the world, way more,
+16:43
+and eight more years of collective experience, I think we can add to these patterns so that other people starting hackerspaces and running hackerspaces can benefit from 
+this. To prepare for this talk, I put the word out.
+17:02
+I didn't want to just come up with these patterns myself. I have a lot of experience traveling around and visiting hackerspaces, but I want it to be collective input from 
+as many people as possible. So I put out the word on hackerspace email lists, many of them. I put it out on the hackerspaces.org email list, and I was deluged with a lot of 
+suggestions, really, really good ones.
+17:24
+Some of them are very specific to a particular space. Some of them are really good for a subset of hackerspaces. What I wanted to initially do was create patterns that are 
+good universally, somehow distilling what's universal out of these ideas
+17:41
+and presenting ones that are universal for everywhere in the world, hackerspaces. I think we can do that. But I also would like to create ones that are good for subsets of 
+hackerspaces, like urban ones or ones in decaying industrial urban areas or whatever, whatever we do.
+18:01
+So I actually got 81 small-type pages of raw notes from people, and I'm still getting, even today I got some more ideas, people sending me ideas. So clearly people are 
+thinking about this. People think it's important. So let's bring our ideas together and make some Hackerspace Design Patterns 2.0.
+18:26
+The topics range quite broad, many of the ones in the original design patterns, but some new ones, too. So we have funding, people who are toxic to community, keeping 
+people motivated, group organization, conflict resolution,
+18:44
+how to deal with physical stuff that accumulates. So many different important topics. I can't go over all of them now, but I want to point out just a few that I think are 
+interesting. These aren't really all fleshed out yet, but they're really good ideas for making them real.
+19:02
+The mentor pattern is for bringing new people on, so as they come in, they know what your community is about and what it's not about, and they feel welcomed, and they can 
+be almost from the get-go and integral part of the community and grow together.
+19:21
+And maybe that was created because of the mentoring program that started a few years ago at Chaos Congress, and it's been working really well there. This is when we came up 
+with Noisebridge after we actually, for the time being anyway, solved our serious problems.
+19:41
+We call it the cultural immune system pattern. So if your body, a living organism, and our communities can be considered living organisms, they take on a life of their own 
+more than the sum of the parts. If we can, like our bodies, deal with invading elements that don't fit well
+20:04
+and also attract what is healthy, then we're healthier. The community, it's the same thing. So there's many ways to go about that. With Noisebridge, one of the main 
+problems is people who don't belong, so we talked about how to define that for ourselves,
+20:22
+and we came up with some good guidelines for that. And also, taking off on the mentor one, we have greeters. Everyone who comes in is greeted. The greeter takes full 
+responsibility for that person, shows them Noisebridge, how cool it is, what Noisebridge is and is not about,
+20:41
+and empowers them to become part of the community and do what they think is awesome in our space. And the greeter also kicks out people who are tweaking. So the reboot 
+pattern, this is also from Noisebridge. I don't want to make this Noisebridge centric,
+21:00
+but I think these patterns that I'm talking about from Noisebridge apply universally to all community, whether it's hackerspaces or not. If your operating system isn't 
+working too well, your computer's not working too well, you turn it off and on again, and it solves a lot of problems quite often. So that's what we did with our space. 
+There were people sleeping there, there were people stealing stuff,
+21:21
+there were everyone taking no care of the tools, they were mostly all broken. If you wanted to do anything there, you had to clean up for 45 minutes. And people drifted 
+away. People who don't belong kept coming, and we really seriously considered giving up. But we had the idea of shutting up space down,
+21:44
+only allowing people who are fixing the place up to come in. It attracted new people, it attracted old people. Everyone again felt part of creating the space that they want 
+to be in. It was super high. And when we reopened, we had a party. And it was really fun.
+22:01
+We had not more LEDs than China, but we had a lot of LEDs and lasers and a lot of cool projects from all sorts of people in the community. And we made sure that the people 
+who are toxic to our community stayed out. And we actually painfully had to kick some people within the community out
+22:22
+because they were becoming disruptive. Community really isn't easy, but it's way rewarding and worth the effort we put in. I just want to briefly show what Noisebridge was 
+like before the reboot. And during the reboot.
+22:40
+Kind of night and day, huh? And we invited artists in after we painted all the walls white. And we have a mural of Tesla. And all these other beautiful murals on a wall. 
+And now it's a thriving, really positive community that I'm super excited to see what's happening every time I come home. So again, that's just a little taste of what I've 
+compiled.
+23:04
+I would love to have this as the beginning of a discussion that we can have a living document, the Hackerspace design patterns, that we keep adding to so that our 
+communities are healthy. So there's great diversity in our Hackerspaces and all around the world.
+23:25
+Yet I really do think we can distill some universal patterns to ponder. And, like I said, ones that are good for subsets. So I would love to start that conversation at a 
+workshop following this talk for anyone who's interested. I have a slide for that later.
+23:45
+The world really does need Hackerspaces. We need to create, and we need community. And Hackerspaces brings this together and makes it available, these opportunities for 
+everyone. In this room, we probably all have this opportunity, or most of us, anyways.
+24:01
+Many of us have probably even started Hackerspaces. So we have to make more, I think. Not every one of us, but if we can help other people who want to start more, then 
+maybe some percentage, ideally all 7 billion people in the world, have this opportunity that we have.
+24:20
+I don't know what will happen, but I think it's worth a try to help let this grow even further. So this is where the flyers I put up around about anyone interested coming 
+to NOPE, Norton's obscure, foggy embassy.
+24:40
+Foggy with a P-H. And we do have a fog machine like San Francisco. Please come if you want to talk about this. And if we run out of space, we can go to a bigger one. Also, 
+it's pretty much related. Hackerspaces.org website has been somewhat neglected over the years, and there's things that are obsolete on it. I still think it's a fantastic 
+resource.
+25:00
+Of course, if we put some energy into it, that can be way better into the future. So I'm having a talk about that at NOPE, Norton's obscure, foggy embassy, on Sunday at 7 
+o'clock. So that's all I had to say. If you ever want to contact me at camp, there's the relevant information.
+25:23
+If you want to contact me anytime, anywhere, for any reason, that's the relevant information. Thanks everyone for being here at such an unbearably early time on day three.
+25:52
+Thank you very much. You're very welcome. For the presentation. We'll have two more minutes for Q&A. If anyone wants to ask something or to state something,
+26:04
+please line up with the microphones at the left. My right and left. Afterwards, we'll have these three-hour discussions, so every question hopefully and comment will be 
+cleared.
+26:22
+Questions? Everybody seems to be sleeping still. Please join for the discussion at NOPE where we can talk in depth. Hey Mitch, how's it going? I'm really glad to see that 
+hackerspaces.org
+26:43
+and the design patterns are getting their own sort of reboot. It was a great presentation and I agree with a lot of what you said. One of the things that I'm wondering 
+about myself is how do we make that specific stuff? Because as hackers we like to find the one ring to rule them all,
+27:03
+or the top three principles to ha-da-da, and people are squishy and different and all sorts of parts of the world are very different, and the ways that we can support each 
+other and community will look different. You were talking about urban areas and suburban areas, and I'm just wondering if you have any ideas about the different categories
+27:22
+that we can use to start identifying some of the general these are design patterns for. In my case, I would think the Middle East, or people that live under a dictatorship, 
+or people that live in places where people that build stuff terrify the people around them. Just wondering what your general categories are,
+27:42
+or your thoughts about that. Yeah, thanks. That's Bilal. He travels around the world helping hackerspaces form everywhere, but he's been focusing on the Middle East, so he 
+knows about that realm very well. I don't have necessarily subcategories to suggest at this point.
+28:07
+Certainly ones that are rich urban areas and ones that are poor ex-industrial areas in North America could be categories. The Middle East has its own set of assets and 
+problems to draw from,
+28:21
+but same with other parts of the world. Asia is different. Like I said, I really do think there are some patterns that are really good for all communities, even 
+hackerspaces, including hackerspaces, that can be helpful for people to consider when they're forming community or trying to enhance their community.
+28:41
+This is what I'd like to start the conversation with, and we can start that at NOPE after this. For anyone who's interested, whether you're just curious and want to listen, 
+or whether you have burning things you want to share, whatever, just come and let's talk about this. Let's take notes and start this ball rolling.
+29:02
+Okay, I think we'll be having one more question because we're really tight on schedule. Are you okay with coming to the workshop afterwards? Yeah? Okay, thank you. Go 
+ahead. Hi, I was curious if you have any clear idea of this call to action, of having this conversation, this discussion,
+29:23
+talking about going over to NOPE. I don't know if we should have this discussion on hackerspaces.org's mailing list, or if there's a wiki somewhere. We can say, let's have 
+this discussion, but where are we having it? Right. Well, I guess that's up for grabs, too. I wanted to start it at this workshop discussion,
+29:42
+brainstorming session, whatever to call it, at NOPE. Clearly, hackerspaces.org is a great repository for hackerspace design patterns up till now, and I think it can be far 
+into the future. If there's a few people who can be motivated to get together, myself included, to revitalize hackerspaces.org and keep it current and keep it going,
+30:01
+that's a fantastic place for these discussions to happen. It's kind of embarrassing. The week leading up to camp, the hackerspaces.org email list was down. That's not okay. 
+Let's have some people who are on top of things who have the time and energy and desire to keep that happening,
+30:23
+and then hackerspaces.org would be a great place for that, too. I would love to see this discussion happen at all of our hackerspaces and people who are forming 
+hackerspaces, and maybe hackerspaces.org is the best place to compile that information and have it grow and spread from there.
+30:41
+That's what I've thought of till now. Okay. Thank you very much again. Thanks.