1_general_forum/site/style-guide/index.html

2502 lines
92 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Building technology for the common good">
<link rel="canonical" href="https://0_timeline.org/style-guide/">
<link rel="prev" href="../smartup-zero/executive-summary/">
<link rel="icon" href="../assets/flavicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.15">
<title>Style Guide - 0_timeline</title>
<link rel="stylesheet" href="../assets/stylesheets/main.342714a4.min.css">
<link rel="stylesheet" href="../assets/stylesheets/palette.06af60db.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro,+Arial,+sans-serif:300,300i,400,400i,700,700i%7CFira+Mono,+monospace:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Source Sans Pro, Arial, sans-serif";--md-code-font:"Fira Mono, monospace"}</style>
<link rel="stylesheet" href="../stylesheets/extra.css">
<script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<link href="../assets/stylesheets/glightbox.min.css" rel="stylesheet"/><style>
html.glightbox-open { overflow: initial; height: 100%; }
.gslide-title { margin-top: 0px; user-select: text; }
.gslide-desc { color: #666; user-select: text; }
.gslide-image img { background: white; }
.gscrollbar-fixer { padding-right: 15px; }
.gdesc-inner { font-size: 0.75rem; }
body[data-md-color-scheme="slate"] .gdesc-inner { background: var(--md-default-bg-color);}
body[data-md-color-scheme="slate"] .gslide-title { color: var(--md-default-fg-color);}
body[data-md-color-scheme="slate"] .gslide-desc { color: var(--md-default-fg-color);}</style> <script src="../assets/javascripts/glightbox.min.js"></script></head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="amber" data-md-color-accent="lime">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#0_timeline-content-style-guide" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href=".." title="0_timeline" class="md-header__button md-logo" aria-label="0_timeline" data-md-component="logo">
<img src="../assets/flavicon.png" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
0_timeline
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Style Guide
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="amber" data-md-color-accent="lime" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
<input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="amber" data-md-color-accent="lime" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href=".." title="0_timeline" class="md-nav__button md-logo" aria-label="0_timeline" data-md-component="logo">
<img src="../assets/flavicon.png" alt="logo">
</a>
0_timeline
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href=".." class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../0_timeline/the-observation/" class="md-nav__link">
<span class="md-ellipsis">
The Observation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../0_timeline/the-smartup-hypothesis/" class="md-nav__link">
<span class="md-ellipsis">
The Hypothesis
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="">
<span class="md-ellipsis">
The Experiment
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
The Experiment
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../0_timeline/the-experiment/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../0_timeline/social-subsystem/" class="md-nav__link">
<span class="md-ellipsis">
A new social subsystem
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../0_timeline/technical-subsystem/" class="md-nav__link">
<span class="md-ellipsis">
A new technical subsyem
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../0_timeline/external-subsystem/" class="md-nav__link">
<span class="md-ellipsis">
A new external subsystem
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../0_timeline/history/" class="md-nav__link">
<span class="md-ellipsis">
Project History
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../0_timeline/terminology/" class="md-nav__link">
<span class="md-ellipsis">
Terminology
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../divider1" class="md-nav__link">
<span class="md-ellipsis">
---
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_8" >
<label class="md-nav__link" for="__nav_8" id="__nav_8_label" tabindex="">
<span class="md-ellipsis">
FOR VALIDATION:'The Official SMARTUP ZERO Business Plan - We are building ONLIFE'
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_8">
<span class="md-nav__icon md-icon"></span>
FOR VALIDATION:'The Official SMARTUP ZERO Business Plan - We are building ONLIFE'
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../smartup-zero/one-pager.md" class="md-nav__link">
<span class="md-ellipsis">
0. One Pager
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../smartup-zero/executive-summary/" class="md-nav__link">
<span class="md-ellipsis">
1. Executive Summary
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../smartup-zero/design-blueprint.md" class="md-nav__link">
<span class="md-ellipsis">
2. Design blueprint
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../smartup-zero/development-blueprint.md" class="md-nav__link">
<span class="md-ellipsis">
3. Development blueprint
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../smartup-zero/business-blueprint.md" class="md-nav__link">
<span class="md-ellipsis">
4. Business blueprint
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../smartup-zero/media-blueprint.md" class="md-nav__link">
<span class="md-ellipsis">
5. Media blueprint
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../smartup-zero/science-blueprint.md" class="md-nav__link">
<span class="md-ellipsis">
6. Science blueprint
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../smartup-zero/operational-blueprint.md" class="md-nav__link">
<span class="md-ellipsis">
7. Operational blueprint
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../divider2" class="md-nav__link">
<span class="md-ellipsis">
---
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_10" checked>
<label class="md-nav__link" for="__nav_10" id="__nav_10_label" tabindex="">
<span class="md-ellipsis">
Contributing
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_10_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_10">
<span class="md-nav__icon md-icon"></span>
Contributing
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Style Guide
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Style Guide
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#visual-language" class="md-nav__link">
<span class="md-ellipsis">
🎨 Visual Language
</span>
</a>
<nav class="md-nav" aria-label="🎨 Visual Language">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#icon-dictionary" class="md-nav__link">
<span class="md-ellipsis">
Icon Dictionary
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#color-philosophy" class="md-nav__link">
<span class="md-ellipsis">
Color Philosophy
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#content-patterns" class="md-nav__link">
<span class="md-ellipsis">
📐 Content Patterns
</span>
</a>
<nav class="md-nav" aria-label="📐 Content Patterns">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#page-headers" class="md-nav__link">
<span class="md-ellipsis">
Page Headers
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#our-general-forum" class="md-nav__link">
<span class="md-ellipsis">
Our General Forum
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#status-indicators" class="md-nav__link">
<span class="md-ellipsis">
Status Indicators
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#team-cards" class="md-nav__link">
<span class="md-ellipsis">
Team Cards
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#phase-documentation" class="md-nav__link">
<span class="md-ellipsis">
Phase Documentation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#call-to-action-sections" class="md-nav__link">
<span class="md-ellipsis">
Call-to-Action Sections
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#writing-guidelines" class="md-nav__link">
<span class="md-ellipsis">
📝 Writing Guidelines
</span>
</a>
<nav class="md-nav" aria-label="📝 Writing Guidelines">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#voice-tone" class="md-nav__link">
<span class="md-ellipsis">
Voice &amp; Tone
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#structure-guidelines" class="md-nav__link">
<span class="md-ellipsis">
Structure Guidelines
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#common-phrases" class="md-nav__link">
<span class="md-ellipsis">
Common Phrases
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#component-library" class="md-nav__link">
<span class="md-ellipsis">
🧩 Component Library
</span>
</a>
<nav class="md-nav" aria-label="🧩 Component Library">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#definition-boxes" class="md-nav__link">
<span class="md-ellipsis">
Definition Boxes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#warning-boxes" class="md-nav__link">
<span class="md-ellipsis">
Warning Boxes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#example-boxes" class="md-nav__link">
<span class="md-ellipsis">
Example Boxes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#quote-boxes" class="md-nav__link">
<span class="md-ellipsis">
Quote Boxes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#tabs-for-multiple-perspectives" class="md-nav__link">
<span class="md-ellipsis">
Tabs for Multiple Perspectives
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#expandable-details" class="md-nav__link">
<span class="md-ellipsis">
Expandable Details
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#button-styles" class="md-nav__link">
<span class="md-ellipsis">
Button Styles
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#mermaid-diagrams" class="md-nav__link">
<span class="md-ellipsis">
Mermaid Diagrams
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#progress-indicators" class="md-nav__link">
<span class="md-ellipsis">
Progress Indicators
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#technical-formatting" class="md-nav__link">
<span class="md-ellipsis">
🔧 Technical Formatting
</span>
</a>
<nav class="md-nav" aria-label="🔧 Technical Formatting">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#code-blocks" class="md-nav__link">
<span class="md-ellipsis">
Code Blocks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#file-contents" class="md-nav__link">
<span class="md-ellipsis">
File Contents
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#terminal-commands" class="md-nav__link">
<span class="md-ellipsis">
Terminal Commands
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#tables-and-data" class="md-nav__link">
<span class="md-ellipsis">
📊 Tables and Data
</span>
</a>
<nav class="md-nav" aria-label="📊 Tables and Data">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#standard-table-format" class="md-nav__link">
<span class="md-ellipsis">
Standard Table Format
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#linking-strategy" class="md-nav__link">
<span class="md-ellipsis">
🌐 Linking Strategy
</span>
</a>
<nav class="md-nav" aria-label="🌐 Linking Strategy">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#internal-links" class="md-nav__link">
<span class="md-ellipsis">
Internal Links
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#external-links" class="md-nav__link">
<span class="md-ellipsis">
External Links
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cross-references" class="md-nav__link">
<span class="md-ellipsis">
Cross-References
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#checklist-for-new-pages" class="md-nav__link">
<span class="md-ellipsis">
✅ Checklist for New Pages
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#quick-start-template" class="md-nav__link">
<span class="md-ellipsis">
🚀 Quick Start Template
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#visual-language" class="md-nav__link">
<span class="md-ellipsis">
🎨 Visual Language
</span>
</a>
<nav class="md-nav" aria-label="🎨 Visual Language">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#icon-dictionary" class="md-nav__link">
<span class="md-ellipsis">
Icon Dictionary
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#color-philosophy" class="md-nav__link">
<span class="md-ellipsis">
Color Philosophy
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#content-patterns" class="md-nav__link">
<span class="md-ellipsis">
📐 Content Patterns
</span>
</a>
<nav class="md-nav" aria-label="📐 Content Patterns">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#page-headers" class="md-nav__link">
<span class="md-ellipsis">
Page Headers
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#our-general-forum" class="md-nav__link">
<span class="md-ellipsis">
Our General Forum
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#status-indicators" class="md-nav__link">
<span class="md-ellipsis">
Status Indicators
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#team-cards" class="md-nav__link">
<span class="md-ellipsis">
Team Cards
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#phase-documentation" class="md-nav__link">
<span class="md-ellipsis">
Phase Documentation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#call-to-action-sections" class="md-nav__link">
<span class="md-ellipsis">
Call-to-Action Sections
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#writing-guidelines" class="md-nav__link">
<span class="md-ellipsis">
📝 Writing Guidelines
</span>
</a>
<nav class="md-nav" aria-label="📝 Writing Guidelines">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#voice-tone" class="md-nav__link">
<span class="md-ellipsis">
Voice &amp; Tone
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#structure-guidelines" class="md-nav__link">
<span class="md-ellipsis">
Structure Guidelines
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#common-phrases" class="md-nav__link">
<span class="md-ellipsis">
Common Phrases
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#component-library" class="md-nav__link">
<span class="md-ellipsis">
🧩 Component Library
</span>
</a>
<nav class="md-nav" aria-label="🧩 Component Library">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#definition-boxes" class="md-nav__link">
<span class="md-ellipsis">
Definition Boxes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#warning-boxes" class="md-nav__link">
<span class="md-ellipsis">
Warning Boxes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#example-boxes" class="md-nav__link">
<span class="md-ellipsis">
Example Boxes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#quote-boxes" class="md-nav__link">
<span class="md-ellipsis">
Quote Boxes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#tabs-for-multiple-perspectives" class="md-nav__link">
<span class="md-ellipsis">
Tabs for Multiple Perspectives
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#expandable-details" class="md-nav__link">
<span class="md-ellipsis">
Expandable Details
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#button-styles" class="md-nav__link">
<span class="md-ellipsis">
Button Styles
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#mermaid-diagrams" class="md-nav__link">
<span class="md-ellipsis">
Mermaid Diagrams
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#progress-indicators" class="md-nav__link">
<span class="md-ellipsis">
Progress Indicators
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#technical-formatting" class="md-nav__link">
<span class="md-ellipsis">
🔧 Technical Formatting
</span>
</a>
<nav class="md-nav" aria-label="🔧 Technical Formatting">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#code-blocks" class="md-nav__link">
<span class="md-ellipsis">
Code Blocks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#file-contents" class="md-nav__link">
<span class="md-ellipsis">
File Contents
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#terminal-commands" class="md-nav__link">
<span class="md-ellipsis">
Terminal Commands
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#tables-and-data" class="md-nav__link">
<span class="md-ellipsis">
📊 Tables and Data
</span>
</a>
<nav class="md-nav" aria-label="📊 Tables and Data">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#standard-table-format" class="md-nav__link">
<span class="md-ellipsis">
Standard Table Format
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#linking-strategy" class="md-nav__link">
<span class="md-ellipsis">
🌐 Linking Strategy
</span>
</a>
<nav class="md-nav" aria-label="🌐 Linking Strategy">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#internal-links" class="md-nav__link">
<span class="md-ellipsis">
Internal Links
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#external-links" class="md-nav__link">
<span class="md-ellipsis">
External Links
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cross-references" class="md-nav__link">
<span class="md-ellipsis">
Cross-References
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#checklist-for-new-pages" class="md-nav__link">
<span class="md-ellipsis">
✅ Checklist for New Pages
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#quick-start-template" class="md-nav__link">
<span class="md-ellipsis">
🚀 Quick Start Template
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="0_timeline-content-style-guide">📖 <abbr title="The public-facing, static website and primary transparency layer for the Smartup Zero experiment. Shows latest progress, business plan, team structure, roles, and documentation.">0_timeline</abbr> Content Style Guide<a class="headerlink" href="#0_timeline-content-style-guide" title="Permanent link">&para;</a></h1>
<div class="admonition info">
<p class="admonition-title">Purpose</p>
<p>This guide ensures consistent content across the <abbr title="The public-facing, static website and primary transparency layer for the Smartup Zero experiment. Shows latest progress, business plan, team structure, roles, and documentation.">0_timeline</abbr> website. All contributors should reference this when creating or editing content. Our goal is to make complex ideas accessible while maintaining the experimental, transparent spirit of <abbr title="A digital cooperative that builds tools for resilience and SDG advancement through transparent, collective systems.">Smartup</abbr> Zero.</p>
</div>
<h2 id="visual-language">🎨 Visual Language<a class="headerlink" href="#visual-language" title="Permanent link">&para;</a></h2>
<h3 id="icon-dictionary">Icon Dictionary<a class="headerlink" href="#icon-dictionary" title="Permanent link">&para;</a></h3>
<p>Always use these icons for consistency across all pages:</p>
<table>
<thead>
<tr>
<th>Concept</th>
<th>Icon Code</th>
<th>Usage</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Organizational Structure</strong></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><abbr title="See *1_general_forum*.">General Forum</abbr></td>
<td><code>:material-forum:</code></td>
<td>Public discussions, voting, governance</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 12V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v14l4-4h10a1 1 0 0 0 1-1m4-6h-2v9H6v2a1 1 0 0 0 1 1h11l4 4V7a1 1 0 0 0-1-1"/></svg></span></td>
</tr>
<tr>
<td><abbr title="See *2_workplace*.">Workplace</abbr></td>
<td><code>:material-briefcase:</code></td>
<td>Worker-only spaces and content</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8c0-1.11.89-2 2-2h4V4c0-1.11.89-2 2-2m4 4V4h-4v2z"/></svg></span></td>
</tr>
<tr>
<td>Teams</td>
<td><code>:material-account-group:</code></td>
<td><abbr title="See *3_teams*.">Team</abbr>-related content</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5.5A3.5 3.5 0 0 1 15.5 9a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8.5 9 3.5 3.5 0 0 1 12 5.5M5 8c.56 0 1.08.15 1.53.42-.15 1.43.27 2.85 1.13 3.96C7.16 13.34 6.16 14 5 14a3 3 0 0 1-3-3 3 3 0 0 1 3-3m14 0a3 3 0 0 1 3 3 3 3 0 0 1-3 3c-1.16 0-2.16-.66-2.66-1.62a5.54 5.54 0 0 0 1.13-3.96c.45-.27.97-.42 1.53-.42M5.5 18.25c0-2.07 2.91-3.75 6.5-3.75s6.5 1.68 6.5 3.75V20h-13zM0 20v-1.5c0-1.39 1.89-2.56 4.45-2.9-.59.68-.95 1.62-.95 2.65V20zm24 0h-3.5v-1.75c0-1.03-.36-1.97-.95-2.65 2.56.34 4.45 1.51 4.45 2.9z"/></svg></span></td>
</tr>
<tr>
<td>Roles</td>
<td><code>:material-card-account-details:</code></td>
<td><abbr title="See *4_roles*.">Role</abbr> definitions and assignments</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 3h20c1.05 0 2 .95 2 2v14c0 1.05-.95 2-2 2H2c-1.05 0-2-.95-2-2V5c0-1.05.95-2 2-2m12 3v1h8V6zm0 2v1h8V8zm0 2v1h7v-1zm-6 3.91C6 13.91 2 15 2 17v1h12v-1c0-2-4-3.09-6-3.09M8 6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3"/></svg></span></td>
</tr>
<tr>
<td><abbr title="Defined missions or sprints within Teams, breaking vision into actionable deliverables.">Objectives</abbr></td>
<td><code>:material-target:</code></td>
<td>Project goals and missions</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 2v2.07A8 8 0 0 0 4.07 11H2v2h2.07A8 8 0 0 0 11 19.93V22h2v-2.07A8 8 0 0 0 19.93 13H22v-2h-2.07A8 8 0 0 0 13 4.07V2m-2 4.08V8h2V6.09c2.5.41 4.5 2.41 4.92 4.91H16v2h1.91c-.41 2.5-2.41 4.5-4.91 4.92V16h-2v1.91C8.5 17.5 6.5 15.5 6.08 13H8v-2H6.09C6.5 8.5 8.5 6.5 11 6.08M12 11a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1"/></svg></span></td>
</tr>
<tr>
<td>Tasks</td>
<td><code>:material-checkbox-marked-circle:</code></td>
<td>Individual work items</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m10 17-5-5 1.41-1.42L10 14.17l7.59-7.59L19 8m-7-6A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2"/></svg></span></td>
</tr>
<tr>
<td><strong>Project Specifics</strong></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><abbr title="First pilot project of Smartup Zero—an open-source emergency mesh network prototype for smartphones that functions when all other networks fail.">ONLIFE</abbr></td>
<td><code>:material-alert-decagram:</code></td>
<td>Emergency network references</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23 12-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68zm-10 5h-2v-2h2zm0-4h-2V7h2z"/></svg></span></td>
</tr>
<tr>
<td><abbr title="A digital cooperative that builds tools for resilience and SDG advancement through transparent, collective systems.">Smartup</abbr> Model</td>
<td><code>:material-atom:</code></td>
<td>Core model concepts</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 11a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1M4.22 4.22C5.65 2.79 8.75 3.43 12 5.56c3.25-2.13 6.35-2.77 7.78-1.34s.79 4.53-1.34 7.78c2.13 3.25 2.77 6.35 1.34 7.78s-4.53.79-7.78-1.34c-3.25 2.13-6.35 2.77-7.78 1.34S3.43 15.25 5.56 12C3.43 8.75 2.79 5.65 4.22 4.22m11.32 4.24c.61.62 1.17 1.25 1.69 1.88 1.38-2.13 1.88-3.96 1.13-4.7-.74-.75-2.57-.25-4.7 1.13.63.52 1.26 1.08 1.88 1.69m-7.08 7.08c-.61-.62-1.17-1.25-1.69-1.88-1.38 2.13-1.88 3.96-1.13 4.7.74.75 2.57.25 4.7-1.13-.63-.52-1.26-1.08-1.88-1.69m-2.82-9.9c-.75.74-.25 2.57 1.13 4.7.52-.63 1.08-1.26 1.69-1.88.62-.61 1.25-1.17 1.88-1.69-2.13-1.38-3.96-1.88-4.7-1.13m4.24 8.48c.7.7 1.42 1.34 2.12 1.91.7-.57 1.42-1.21 2.12-1.91s1.34-1.42 1.91-2.12c-.57-.7-1.21-1.42-1.91-2.12S12.7 8.54 12 7.97c-.7.57-1.42 1.21-2.12 1.91S8.54 11.3 7.97 12c.57.7 1.21 1.42 1.91 2.12m8.48 4.24c.75-.74.25-2.57-1.13-4.7-.52.63-1.08 1.26-1.69 1.88-.62.61-1.25 1.17-1.88 1.69 2.13 1.38 3.96 1.88 4.7 1.13"/></svg></span></td>
</tr>
<tr>
<td>Experiment</td>
<td><code>:material-flask:</code></td>
<td>Scientific method references</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 22a3 3 0 0 1-3-3c0-.6.18-1.16.5-1.63L9 7.81V6a1 1 0 0 1-1-1V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1v1.81l5.5 9.56c.32.47.5 1.03.5 1.63a3 3 0 0 1-3 3zm-1-3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1c0-.21-.07-.41-.18-.57l-2.29-3.96L14 17l-5.07-5.07-3.75 6.5c-.11.16-.18.36-.18.57m8-9a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1"/></svg></span></td>
</tr>
<tr>
<td><strong>Actions &amp; States</strong></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Vote</td>
<td><code>:material-vote:</code></td>
<td>Governance decisions</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 13h-.68l-2 2h1.91L19 17H5l1.78-2h2.05l-2-2H6l-3 3v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4zm-1-5.05-4.95 4.95L8.5 9.36l4.96-4.95zm-4.24-5.66L6.39 8.66a.996.996 0 0 0 0 1.41L11.34 15c.39.41 1.02.41 1.41 0l6.36-6.34a.996.996 0 0 0 0-1.41L14.16 2.3a.975.975 0 0 0-1.4-.01"/></svg></span></td>
</tr>
<tr>
<td>Join</td>
<td><code>:material-account-plus:</code></td>
<td>Recruitment/onboarding</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 14c-2.67 0-8 1.33-8 4v2h16v-2c0-2.67-5.33-4-8-4m-9-4V7H4v3H1v2h3v3h2v-3h3v-2m6 2a4 4 0 0 0 4-4 4 4 0 0 0-4-4 4 4 0 0 0-4 4 4 4 0 0 0 4 4"/></svg></span></td>
</tr>
<tr>
<td>Build</td>
<td><code>:material-hammer:</code></td>
<td>Development work</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 19.63 13.43 8.2l-.71-.7 1.42-1.43L12 3.89c1.2-1.19 3.09-1.19 4.27 0l3.6 3.61-1.42 1.41h2.84l.71.71-3.55 3.59-.71-.71V9.62l-1.47 1.42-.71-.71L4.13 21.76z"/></svg></span></td>
</tr>
<tr>
<td>Success</td>
<td><code>:material-check-circle:</code></td>
<td>Completed/positive items</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"/></svg></span></td>
</tr>
<tr>
<td>Warning</td>
<td><code>:material-alert:</code></td>
<td>Important notices</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z"/></svg></span></td>
</tr>
<tr>
<td>Info</td>
<td><code>:material-information:</code></td>
<td>Explanations</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2"/></svg></span></td>
</tr>
<tr>
<td><strong>Financial</strong></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Treasury</td>
<td><code>:material-currency-eur:</code></td>
<td>Money/funding matters</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 18.5c-2.5 0-4.68-1.42-5.76-3.5H15l1-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15l1-2H9.24A6.49 6.49 0 0 1 15 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.96 8.96 0 0 0 15 3c-3.92 0-7.24 2.5-8.5 6H3l-1 2h4.06c-.06.33-.06.66-.06 1s0 .67.06 1H3l-1 2h4.5c1.26 3.5 4.58 6 8.5 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57"/></svg></span></td>
</tr>
<tr>
<td>Credits</td>
<td><code>:material-coin:</code></td>
<td><abbr title="A digital cooperative that builds tools for resilience and SDG advancement through transparent, collective systems.">Smartup</abbr> Credits (SC)</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5m5.45 5.6c-.39-.4-.88-.6-1.45-.6h-7l-2.08-.73.33-.94L13 16h2.8c.35 0 .63-.14.86-.37s.34-.51.34-.82c0-.54-.26-.91-.78-1.12L8.95 11H7v9l7 2 8.03-3c.01-.53-.19-1-.58-1.4M5 11H.984v11H5z"/></svg></span></td>
</tr>
<tr>
<td><strong>Technical</strong></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Code</td>
<td><code>:material-code-tags:</code></td>
<td>Development/repos</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m14.6 16.6 4.6-4.6-4.6-4.6L16 6l6 6-6 6zm-5.2 0L4.8 12l4.6-4.6L8 6l-6 6 6 6z"/></svg></span></td>
</tr>
<tr>
<td>Infrastructure</td>
<td><code>:material-server:</code></td>
<td>Technical stack</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 1h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1m0 8h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1m0 8h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1M9 5h1V3H9zm0 8h1v-2H9zm0 8h1v-2H9zM5 3v2h2V3zm0 8v2h2v-2zm0 8v2h2v-2z"/></svg></span></td>
</tr>
<tr>
<td>Communication</td>
<td><code>:material-chat:</code></td>
<td><abbr title="The decentralized, encrypted chat and collaboration platform (Matrix protocol with the Element client) used for governance, team coordination, and bot integration.">Matrix/Element</abbr></td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3c5.5 0 10 3.58 10 8s-4.5 8-10 8c-1.24 0-2.43-.18-3.53-.5C5.55 21 2 21 2 21c2.33-2.33 2.7-3.9 2.75-4.5C3.05 15.07 2 13.13 2 11c0-4.42 4.5-8 10-8"/></svg></span></td>
</tr>
</tbody>
</table>
<h3 id="color-philosophy">Color Philosophy<a class="headerlink" href="#color-philosophy" title="Permanent link">&para;</a></h3>
<ul>
<li><strong>Primary (Amber)</strong> 🟨: Energy, innovation, warmth - use for main CTAs and highlights</li>
<li><strong>Accent (Lime)</strong> 🟩: Growth, freshness, progress - use for success states and secondary actions</li>
<li><strong>Semantic Colors</strong>: Use mkdocs-material's built-in admonition colors for meaning</li>
</ul>
<h2 id="content-patterns">📐 Content Patterns<a class="headerlink" href="#content-patterns" title="Permanent link">&para;</a></h2>
<h3 id="page-headers">Page Headers<a class="headerlink" href="#page-headers" title="Permanent link">&para;</a></h3>
<p>Every page should start with a clear hierarchy.</p>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code><span class="gu">###:material-forum: Our General Forum</span>
!!! info &quot;What is this?&quot;
The public square for all Smartup Zero owners where governance happens.
<span class="gu">### Purpose</span>
This is where we make collective decisions that shape our project&#39;s future.
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<h3 id="our-general-forum"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 12V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v14l4-4h10a1 1 0 0 0 1-1m4-6h-2v9H6v2a1 1 0 0 0 1 1h11l4 4V7a1 1 0 0 0-1-1"/></svg></span> Our <abbr title="See *1_general_forum*.">General Forum</abbr><a class="headerlink" href="#our-general-forum" title="Permanent link">&para;</a></h3>
<div class="admonition info">
<p class="admonition-title">What is this?</p>
<p>The public square for all <abbr title="A digital cooperative that builds tools for resilience and SDG advancement through transparent, collective systems.">Smartup</abbr> Zero owners where governance happens.</p>
</div>
<p><strong>Purpos</strong>e</p>
<p>This is where we make collective decisions that shape our project's future.</p>
<h3 id="status-indicators">Status Indicators<a class="headerlink" href="#status-indicators" title="Permanent link">&para;</a></h3>
<p>For showing project or phase status.</p>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code>&lt;div class=&quot;grid cards&quot; markdown&gt;
<span class="k">-</span><span class="w"> </span>:material-check-circle:{ .lg .middle } <span class="gs">**Infrastructure**</span>
---
Core services deployed and operational
[<span class="nt">:octicons-arrow-right-24: View details</span>](<span class="na">#</span>)
<span class="k">-</span><span class="w"> </span>:material-progress-clock:{ .lg .middle } <span class="gs">**ONLIFE Development**</span>
---
Building the MVP emergency network
[<span class="nt">:octicons-arrow-right-24: Track progress</span>](<span class="na">#</span>)
<span class="k">-</span><span class="w"> </span>:material-calendar-clock:{ .lg .middle } <span class="gs">**First Funding**</span>
---
Crowdfunding campaign preparation
[<span class="nt">:octicons-arrow-right-24: See timeline</span>](<span class="na">#</span>)
&lt;/div&gt;
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<div class="grid cards">
<ul>
<li>
<p><span class="twemoji lg middle"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"/></svg></span> <strong>Infrastructure</strong></p>
<hr />
<p>Core services deployed and operational</p>
<p><a href="#"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.22 19.03a.75.75 0 0 1 0-1.06L18.19 13H3.75a.75.75 0 0 1 0-1.5h14.44l-4.97-4.97a.749.749 0 0 1 .326-1.275.75.75 0 0 1 .734.215l6.25 6.25a.75.75 0 0 1 0 1.06l-6.25 6.25a.75.75 0 0 1-1.06 0"/></svg></span> View details</a></p>
</li>
<li>
<p><span class="twemoji lg middle"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 2.03v2.02c4.39.54 7.5 4.53 6.96 8.92-.46 3.64-3.32 6.53-6.96 6.96v2c5.5-.55 9.5-5.43 8.95-10.93-.45-4.75-4.22-8.5-8.95-8.97m-2 .03c-1.95.19-3.81.94-5.33 2.2L7.1 5.74c1.12-.9 2.47-1.48 3.9-1.68zM4.26 5.67A9.9 9.9 0 0 0 2.05 11h2c.19-1.42.75-2.77 1.64-3.9zM2.06 13c.2 1.96.97 3.81 2.21 5.33l1.42-1.43A8 8 0 0 1 4.06 13zm5.04 5.37-1.43 1.37A10 10 0 0 0 11 22v-2a8 8 0 0 1-3.9-1.63M12.5 7v5.25l4.5 2.67-.75 1.23L11 13V7z"/></svg></span> <strong><abbr title="First pilot project of Smartup Zero—an open-source emergency mesh network prototype for smartphones that functions when all other networks fail.">ONLIFE</abbr> Development</strong></p>
<hr />
<p>Building the MVP emergency network</p>
<p><a href="#"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.22 19.03a.75.75 0 0 1 0-1.06L18.19 13H3.75a.75.75 0 0 1 0-1.5h14.44l-4.97-4.97a.749.749 0 0 1 .326-1.275.75.75 0 0 1 .734.215l6.25 6.25a.75.75 0 0 1 0 1.06l-6.25 6.25a.75.75 0 0 1-1.06 0"/></svg></span> Track progress</a></p>
</li>
<li>
<p><span class="twemoji lg middle"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 13h1.5v2.82l2.44 1.41-.75 1.3L15 16.69zm4-5H5v11h4.67c-.43-.91-.67-1.93-.67-3a7 7 0 0 1 7-7c1.07 0 2.09.24 3 .67zM5 21a2 2 0 0 1-2-2V5c0-1.11.89-2 2-2h1V1h2v2h8V1h2v2h1a2 2 0 0 1 2 2v6.1c1.24 1.26 2 2.99 2 4.9a7 7 0 0 1-7 7c-1.91 0-3.64-.76-4.9-2zm11-9.85A4.85 4.85 0 0 0 11.15 16c0 2.68 2.17 4.85 4.85 4.85A4.85 4.85 0 0 0 20.85 16c0-2.68-2.17-4.85-4.85-4.85"/></svg></span> <strong>First Funding</strong></p>
<hr />
<p>Crowdfunding campaign preparation</p>
<p><a href="#"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.22 19.03a.75.75 0 0 1 0-1.06L18.19 13H3.75a.75.75 0 0 1 0-1.5h14.44l-4.97-4.97a.749.749 0 0 1 .326-1.275.75.75 0 0 1 .734.215l6.25 6.25a.75.75 0 0 1 0 1.06l-6.25 6.25a.75.75 0 0 1-1.06 0"/></svg></span> See timeline</a></p>
</li>
</ul>
</div>
<hr />
<h3 id="team-cards"><abbr title="See *3_teams*.">Team</abbr> Cards<a class="headerlink" href="#team-cards" title="Permanent link">&para;</a></h3>
<p>Standard format for presenting teams.</p>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code><span class="gs">**:material-account-group: Development Team**</span>
&lt;aside class=&quot;md-typeset&quot; markdown&gt;
!!! tip inline end &quot;Quick Links&quot;
:material-git: [<span class="nt">Team Repos</span>](<span class="na">https://smartup-zero-forgejo.fly.dev/smartup-zero/dev-team</span>)
:material-chat: [<span class="nt">Team Room</span>](<span class="na">#3_dev-team</span>)
:material-clipboard-list: [<span class="nt">Open Tasks</span>](<span class="na">#</span>)
&lt;/aside&gt;
<span class="gs">**Captain:**</span> [<span class="nt">@alice</span>](<span class="na">https://matrix.to/#/@alice:matrix.org</span>)
<span class="gs">**Members:**</span> 5 active contributors
<span class="gs">**Formed:**</span> January 2025
<span class="gs">**Mission:**</span> Build the ONLIFE emergency communication protocol and apps.
<span class="gs">**Current Objectives:**</span>
<span class="k">-</span><span class="w"> </span>Complete Android MVP by Feb 28
<span class="k">-</span><span class="w"> </span>Implement mesh networking core
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<p><strong><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5.5A3.5 3.5 0 0 1 15.5 9a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8.5 9 3.5 3.5 0 0 1 12 5.5M5 8c.56 0 1.08.15 1.53.42-.15 1.43.27 2.85 1.13 3.96C7.16 13.34 6.16 14 5 14a3 3 0 0 1-3-3 3 3 0 0 1 3-3m14 0a3 3 0 0 1 3 3 3 3 0 0 1-3 3c-1.16 0-2.16-.66-2.66-1.62a5.54 5.54 0 0 0 1.13-3.96c.45-.27.97-.42 1.53-.42M5.5 18.25c0-2.07 2.91-3.75 6.5-3.75s6.5 1.68 6.5 3.75V20h-13zM0 20v-1.5c0-1.39 1.89-2.56 4.45-2.9-.59.68-.95 1.62-.95 2.65V20zm24 0h-3.5v-1.75c0-1.03-.36-1.97-.95-2.65 2.56.34 4.45 1.51 4.45 2.9z"/></svg></span> <abbr title="Technical core of the Smartup. Builds and tests product or service (frontend, backend, security, QA).">Development Team</abbr></strong></p>
<aside class="md-typeset">
<div class="admonition tip inline end">
<p class="admonition-title">Quick Links</p>
<p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.6 10.59 8.38 4.8l1.69 1.7c-.24.85.15 1.78.93 2.23v5.54c-.6.34-1 .99-1 1.73a2 2 0 0 0 2 2 2 2 0 0 0 2-2c0-.74-.4-1.39-1-1.73V9.41l2.07 2.09c-.07.15-.07.32-.07.5a2 2 0 0 0 2 2 2 2 0 0 0 2-2 2 2 0 0 0-2-2c-.18 0-.35 0-.5.07L13.93 7.5a1.98 1.98 0 0 0-1.15-2.34c-.43-.16-.88-.2-1.28-.09L9.8 3.38l.79-.78c.78-.79 2.04-.79 2.82 0l7.99 7.99c.79.78.79 2.04 0 2.82l-7.99 7.99c-.78.79-2.04.79-2.82 0L2.6 13.41c-.79-.78-.79-2.04 0-2.82"/></svg></span> <a href="https://smartup-zero-forgejo.fly.dev/smartup-zero/dev-team"><abbr title="See *3_teams*.">Team</abbr> Repos</a> <br />
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3c5.5 0 10 3.58 10 8s-4.5 8-10 8c-1.24 0-2.43-.18-3.53-.5C5.55 21 2 21 2 21c2.33-2.33 2.7-3.9 2.75-4.5C3.05 15.07 2 13.13 2 11c0-4.42 4.5-8 10-8"/></svg></span> <a href="#3_dev-team"><abbr title="See *3_teams*.">Team</abbr> Room</a> <br />
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2M7 8h2v4H8V9H7zm3 9v1H7v-.92L9 15H7v-1h2.25c.41 0 .75.34.75.75 0 .2-.08.39-.21.52L8.12 17zm1-13c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1m6 13h-5v-2h5zm0-6h-5V9h5z"/></svg></span> <a href="#">Open Tasks</a> </p>
</div>
</aside>
<p><strong>Captain:</strong> <a href="https://matrix.to/#/@alice:matrix.org">@alice</a><br />
<strong>Members:</strong> 5 active contributors<br />
<strong>Formed:</strong> January 2025 </p>
<p><strong>Mission:</strong> Build the <abbr title="First pilot project of Smartup Zero—an open-source emergency mesh network prototype for smartphones that functions when all other networks fail.">ONLIFE</abbr> emergency communication protocol and apps.</p>
<p><strong>Current <abbr title="Defined missions or sprints within Teams, breaking vision into actionable deliverables.">Objectives</abbr>:</strong>
- Complete Android MVP by Feb 28
- Implement mesh networking core</p>
<hr />
<h3 id="phase-documentation">Phase Documentation<a class="headerlink" href="#phase-documentation" title="Permanent link">&para;</a></h3>
<p>For describing project phases.</p>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code><span class="gs">**:material-numeric-0-circle: Phase 0: Micro-Pilot**</span>
&lt;aside class=&quot;md-typeset&quot; markdown&gt;
!!! info inline end &quot;Phase Status&quot;
<span class="gs">**Status:**</span> Active
<span class="gs">**Duration:**</span> 30 days
<span class="gs">**Started:**</span> Jan 1, 2025
<span class="gs">**Target:**</span> Jan 31, 2025
&lt;/aside&gt;
<span class="gs">**Goals for This Phase**</span>
<span class="k">- [x]</span> Deploy core infrastructure
<span class="k">- [ ]</span> Onboard 15-20 contributors
<span class="k">- [ ]</span> Complete one full work cycle
<span class="gs">**Key Deliverables**</span>
| Deliverable | Description | Status |
|-------------|-------------|---------|
| Tech Stack | Forgejo + Matrix deployed | :material-check: Done |
| Engelbot | Automation bot v0.1 | :material-progress-wrench: In Progress |
| First Task | Test the SC system | :material-calendar: Planned |
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<p><strong><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 7a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zm0 2h2v6h-2zm1-7a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2"/></svg></span> <abbr title="A one-month, invite-only trial with 1520 contributors to test onboarding, role assignment, task execution, SC minting, and voting workflows.">Phase 0: Micro-Pilot</abbr></strong></p>
<div class="admonition info inline end">
<p class="admonition-title">Phase Status</p>
<p><strong>Status:</strong> Active<br />
<strong>Duration:</strong> 30 days<br />
<strong>Started:</strong> Jan 1, 2025<br />
<strong>Target:</strong> Jan 31, 2025</p>
</div>
<p><strong>Goals for This Phase</strong></p>
<ul>
<li>[x] Deploy core infrastructure</li>
<li>[ ] Onboard 15-20 contributors </li>
<li>[ ] Complete one full work cycle</li>
</ul>
<p><strong>Key Deliverables</strong></p>
<table>
<thead>
<tr>
<th>Deliverable</th>
<th>Description</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tech Stack</td>
<td><abbr title="The self-hosted Git forge (ethical fork of Gitea) used for code, project boards, issue tracking, Smartup Credits ledger, and CI/CD automation.">Forgejo</abbr> + Matrix deployed</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z"/></svg></span> Done</td>
</tr>
<tr>
<td><abbr title="The custom Smartup bot acting as the Midfielder in the ADM Triangle. Automates notifications, bridges Forgejo and Matrix, parses structured commands, and logs key events.">Engelbot</abbr></td>
<td>Automation bot v0.1</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 2.03v2.02c4.39.54 7.5 4.53 6.96 8.92-.46 3.64-3.32 6.53-6.96 6.96v2c5.5-.55 9.5-5.43 8.95-10.93-.45-4.75-4.22-8.5-8.95-8.97m-2 .03c-1.95.19-3.81.94-5.33 2.2L7.1 5.74c1.12-.9 2.47-1.48 3.9-1.68zM4.26 5.67A9.9 9.9 0 0 0 2.05 11h2c.19-1.42.75-2.77 1.64-3.9zM2.06 13c.2 1.96.97 3.81 2.21 5.33l1.42-1.43A8 8 0 0 1 4.06 13zm5.04 5.37-1.43 1.37A10 10 0 0 0 11 22v-2a8 8 0 0 1-3.9-1.63m9.72-3.18-4.11-4.11c.41-1.04.18-2.26-.68-3.11-.9-.91-2.25-1.09-3.34-.59l1.94 1.94-1.35 1.36-1.99-1.95c-.54 1.09-.29 2.44.59 3.35.86.86 2.08 1.08 3.12.68l4.11 4.1c.18.19.45.19.63 0l1.04-1.03c.22-.18.22-.5.04-.64"/></svg></span> In Progress</td>
</tr>
<tr>
<td>First <abbr title="See *6_tasks*.">Task</abbr></td>
<td>Test the SC system</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 19H5V8h14m-3-7v2H8V1H6v2H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-1V1m-1 11h-5v5h5z"/></svg></span> Planned</td>
</tr>
</tbody>
</table>
<hr />
<h3 id="call-to-action-sections">Call-to-Action Sections<a class="headerlink" href="#call-to-action-sections" title="Permanent link">&para;</a></h3>
<p>For encouraging participation.</p>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code><span class="gs">**:material-rocket-launch: Ready to Contribute?**</span>
&lt;div class=&quot;grid&quot; markdown&gt;
:material-account-plus:{ .lg }
<span class="gs">**Join the Project**</span>
Become a Smartup Zero owner
[<span class="nt">Join via Open Collective :material-open-in-new:</span>](<span class="na">https://opencollective.com/smartup-zero</span>){ .md-button }
:material-chat:{ .lg }
<span class="gs">**Start Discussing**</span>
Connect with the community
[<span class="nt">Enter Matrix Space :material-open-in-new:</span>](<span class="na">#</span>){ .md-button }
:material-hammer:{ .lg }
<span class="gs">**Start Building**</span>
Pick up your first task
[<span class="nt">Browse Open Tasks :material-open-in-new:</span>](<span class="na">#</span>){ .md-button }
&lt;/div&gt;
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<p><strong><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13.13 22.19-1.63-3.83c1.57-.58 3.04-1.36 4.4-2.27zM5.64 12.5l-3.83-1.63 6.1-2.77C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39S16.66.269 11 5.93c-2.19 2.19-3.5 4.6-4.35 6.71-.28.75-.09 1.57.46 2.13l2.13 2.12c.55.56 1.37.74 2.12.46A19.1 19.1 0 0 0 18.07 13c5.66-5.66 3.54-10.61 3.54-10.61m-7.07 7.07c-.78-.78-.78-2.05 0-2.83s2.05-.78 2.83 0c.77.78.78 2.05 0 2.83s-2.05.78-2.83 0m-5.66 7.07-1.41-1.41zM6.24 22l3.64-3.64c-.34-.09-.67-.24-.97-.45L4.83 22zM2 22h1.41l4.77-4.76-1.42-1.41L2 20.59zm0-2.83 4.09-4.08c-.21-.3-.36-.62-.45-.97L2 17.76z"/></svg></span> Ready to Contribute?</strong></p>
<div class="grid">
<p><span class="twemoji lg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 14c-2.67 0-8 1.33-8 4v2h16v-2c0-2.67-5.33-4-8-4m-9-4V7H4v3H1v2h3v3h2v-3h3v-2m6 2a4 4 0 0 0 4-4 4 4 0 0 0-4-4 4 4 0 0 0-4 4 4 4 0 0 0 4 4"/></svg></span></p>
<p><strong>Join the Project</strong></p>
<p>Become a <abbr title="A digital cooperative that builds tools for resilience and SDG advancement through transparent, collective systems.">Smartup</abbr> Zero owner</p>
<p><a class="md-button" href="https://opencollective.com/smartup-zero">Join via Open Collective <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2z"/></svg></span></a></p>
<p><span class="twemoji lg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3c5.5 0 10 3.58 10 8s-4.5 8-10 8c-1.24 0-2.43-.18-3.53-.5C5.55 21 2 21 2 21c2.33-2.33 2.7-3.9 2.75-4.5C3.05 15.07 2 13.13 2 11c0-4.42 4.5-8 10-8"/></svg></span></p>
<p><strong>Start Discussing</strong></p>
<p>Connect with the community</p>
<p><a class="md-button" href="#">Enter Matrix Space <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2z"/></svg></span></a></p>
<p><span class="twemoji lg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 19.63 13.43 8.2l-.71-.7 1.42-1.43L12 3.89c1.2-1.19 3.09-1.19 4.27 0l3.6 3.61-1.42 1.41h2.84l.71.71-3.55 3.59-.71-.71V9.62l-1.47 1.42-.71-.71L4.13 21.76z"/></svg></span></p>
<p><strong>Start Building</strong></p>
<p>Pick up your first task</p>
<p><a class="md-button" href="#">Browse Open Tasks <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2z"/></svg></span></a></p>
</div>
<h2 id="writing-guidelines">📝 Writing Guidelines<a class="headerlink" href="#writing-guidelines" title="Permanent link">&para;</a></h2>
<h3 id="voice-tone">Voice &amp; Tone<a class="headerlink" href="#voice-tone" title="Permanent link">&para;</a></h3>
<ul>
<li><strong>Inclusive</strong>: Always "we" not "I" or "they"</li>
<li><strong>Experimental</strong>: Acknowledge we're learning ("we believe", "our hypothesis")</li>
<li><strong>Transparent</strong>: Share both successes and challenges</li>
<li><strong>Accessible</strong>: Explain technical terms on first use</li>
</ul>
<h3 id="structure-guidelines">Structure Guidelines<a class="headerlink" href="#structure-guidelines" title="Permanent link">&para;</a></h3>
<ol>
<li><strong>Start with Why</strong>: Lead with purpose/problem before solution</li>
<li><strong>Show, Don't Just Tell</strong>: Use examples and diagrams</li>
<li><strong>Progressive Disclosure</strong>: Overview first, details in expandable sections</li>
</ol>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code>** The Smartup Credit System
<span class="gs">**Why it exists:**</span> We need a fair way to track and reward contributions before cash arrives.
??? info &quot;How it works (Technical Details)&quot;
When a contributor completes a task, the Team Captain approves it and
Smartup Credits are minted to the ledger. These credits represent a
future claim on treasury funds at a 1 SC = 1 EUR rate.
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<p><strong>The <abbr title="A digital cooperative that builds tools for resilience and SDG advancement through transparent, collective systems.">Smartup</abbr> Credit System</strong></p>
<p><strong>Why it exists:</strong> We need a fair way to track and reward contributions before cash arrives.</p>
<details class="info">
<summary>How it works (Technical Details)</summary>
<p>When a contributor completes a task, the <abbr title="Elected leader of a Team. Manages roles, approves tasks, allocates budget, and represents the Team in the Leadership Team.">Team Captain</abbr> approves it and
<abbr title="A digital cooperative that builds tools for resilience and SDG advancement through transparent, collective systems.">Smartup</abbr> Credits are minted to the ledger. These credits represent a
future claim on treasury funds at a 1 SC = 1 EUR rate.</p>
</details>
<h3 id="common-phrases">Common Phrases<a class="headerlink" href="#common-phrases" title="Permanent link">&para;</a></h3>
<p>Use these standardized phrases:</p>
<ul>
<li>"<abbr title="A digital cooperative that builds tools for resilience and SDG advancement through transparent, collective systems.">Smartup</abbr> Zero" (not "SmartUp" or "smartup")</li>
<li>"<abbr title="A digital cooperative that builds tools for resilience and SDG advancement through transparent, collective systems.">Smartup</abbr> Credits (SC)" on first mention, then "SC"</li>
<li>"the experiment" (lowercase when referring to our project)</li>
<li>"collective ownership/craftsmanship/governance" (our three pillars)</li>
<li>"<abbr title="First pilot project of Smartup Zero—an open-source emergency mesh network prototype for smartphones that functions when all other networks fail.">ONLIFE</abbr>" (all caps - it's an acronym)</li>
</ul>
<h2 id="component-library">🧩 Component Library<a class="headerlink" href="#component-library" title="Permanent link">&para;</a></h2>
<h3 id="definition-boxes">Definition Boxes<a class="headerlink" href="#definition-boxes" title="Permanent link">&para;</a></h3>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code>!!! info &quot;Smartup&quot;
A new organizational model based on collective ownership, collective
craftsmanship, and collective governance.
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<div class="admonition info">
<p class="admonition-title"><abbr title="A digital cooperative that builds tools for resilience and SDG advancement through transparent, collective systems.">Smartup</abbr></p>
<p>A new organizational model based on collective ownership, collective
craftsmanship, and collective governance.</p>
</div>
<hr />
<h3 id="warning-boxes">Warning Boxes<a class="headerlink" href="#warning-boxes" title="Permanent link">&para;</a></h3>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code>!!! warning &quot;Experimental Phase&quot;
This process is still being tested in our micro-pilot.
Procedures may change based on learnings.
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<div class="admonition warning">
<p class="admonition-title">Experimental Phase</p>
<p>This process is still being tested in our micro-pilot.
Procedures may change based on learnings.</p>
</div>
<hr />
<h3 id="example-boxes">Example Boxes<a class="headerlink" href="#example-boxes" title="Permanent link">&para;</a></h3>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code>!!! example &quot;How This Works in Practice&quot;
When a developer completes a task worth 500 SC, the Team Captain
approves it, triggering an automatic ledger update via Engelbot.
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<div class="admonition example">
<p class="admonition-title">How This Works in Practice</p>
<p>When a developer completes a task worth 500 SC, the <abbr title="Elected leader of a Team. Manages roles, approves tasks, allocates budget, and represents the Team in the Leadership Team.">Team Captain</abbr>
approves it, triggering an automatic ledger update via <abbr title="The custom Smartup bot acting as the Midfielder in the ADM Triangle. Automates notifications, bridges Forgejo and Matrix, parses structured commands, and logs key events.">Engelbot</abbr>.</p>
</div>
<hr />
<h3 id="quote-boxes">Quote Boxes<a class="headerlink" href="#quote-boxes" title="Permanent link">&para;</a></h3>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code>!!! quote &quot;Our Inscription&quot;
We don&#39;t accept our reality but seek to alter it. We are not too late
or too early but precisely on time. The next big thing will be a mosaic
of small things.
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<div class="admonition quote">
<p class="admonition-title">Our Inscription</p>
<p>We don't accept our reality but seek to alter it. We are not too late
or too early but precisely on time. The next big thing will be a mosaic
of small things.</p>
</div>
<hr />
<h3 id="tabs-for-multiple-perspectives">Tabs for Multiple Perspectives<a class="headerlink" href="#tabs-for-multiple-perspectives" title="Permanent link">&para;</a></h3>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code>=== &quot;:material-account: For Contributors&quot;
Learn how to join the project and start earning Smartup Credits
by contributing your skills to building ONLIFE.
=== &quot;:material-currency-eur: For Supporters&quot;
Discover how your financial support directly enables the development
of public-good technology with transparent fund allocation.
=== &quot;:material-cellphone: For Future Users&quot;
Understand how ONLIFE will provide emergency communication when
traditional networks fail.
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<div class="tabbed-set tabbed-alternate" data-tabs="1:3"><input checked="checked" id="__tabbed_1_1" name="__tabbed_1" type="radio" /><input id="__tabbed_1_2" name="__tabbed_1" type="radio" /><input id="__tabbed_1_3" name="__tabbed_1" type="radio" /><div class="tabbed-labels"><label for="__tabbed_1_1"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"/></svg></span> For Contributors</label><label for="__tabbed_1_2"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 18.5c-2.5 0-4.68-1.42-5.76-3.5H15l1-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15l1-2H9.24A6.49 6.49 0 0 1 15 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.96 8.96 0 0 0 15 3c-3.92 0-7.24 2.5-8.5 6H3l-1 2h4.06c-.06.33-.06.66-.06 1s0 .67.06 1H3l-1 2h4.5c1.26 3.5 4.58 6 8.5 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57"/></svg></span> For Supporters</label><label for="__tabbed_1_3"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 19H7V5h10m0-4H7c-1.11 0-2 .89-2 2v18a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2"/></svg></span> For Future Users</label></div>
<div class="tabbed-content">
<div class="tabbed-block">
<p>Learn how to join the project and start earning <abbr title="A digital cooperative that builds tools for resilience and SDG advancement through transparent, collective systems.">Smartup</abbr> Credits
by contributing your skills to building <abbr title="First pilot project of Smartup Zero—an open-source emergency mesh network prototype for smartphones that functions when all other networks fail.">ONLIFE</abbr>.</p>
</div>
<div class="tabbed-block">
<p>Discover how your financial support directly enables the development
of public-good technology with transparent fund allocation.</p>
</div>
<div class="tabbed-block">
<p>Understand how <abbr title="First pilot project of Smartup Zero—an open-source emergency mesh network prototype for smartphones that functions when all other networks fail.">ONLIFE</abbr> will provide emergency communication when
traditional networks fail.</p>
</div>
</div>
</div>
<hr />
<h3 id="expandable-details">Expandable Details<a class="headerlink" href="#expandable-details" title="Permanent link">&para;</a></h3>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code>??? question &quot;What are Smartup Credits?&quot;
Smartup Credits (SC) are internal units that track contributions
before cash is available. 1 SC = 1 EUR claim on the treasury.
??? tip &quot;Pro Tip: Claiming Your First Task&quot;
Start with tasks labeled &quot;good-first-task&quot; in Forgejo. Comment
on the issue to claim it before starting work.
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<details class="question">
<summary>What are <abbr title="A digital cooperative that builds tools for resilience and SDG advancement through transparent, collective systems.">Smartup</abbr> Credits?</summary>
<p><abbr title="A digital cooperative that builds tools for resilience and SDG advancement through transparent, collective systems.">Smartup</abbr> Credits (SC) are internal units that track contributions
before cash is available. 1 SC = 1 EUR claim on the treasury.</p>
</details>
<details class="tip">
<summary>Pro Tip: Claiming Your First <abbr title="See *6_tasks*.">Task</abbr></summary>
<p>Start with tasks labeled "good-first-task" in <abbr title="The self-hosted Git forge (ethical fork of Gitea) used for code, project boards, issue tracking, Smartup Credits ledger, and CI/CD automation.">Forgejo</abbr>. Comment
on the issue to claim it before starting work.</p>
</details>
<hr />
<h3 id="button-styles">Button Styles<a class="headerlink" href="#button-styles" title="Permanent link">&para;</a></h3>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code>[<span class="nt">Primary Action :material-arrow-right:</span>](<span class="na">#</span>){ .md-button .md-button--primary }
[<span class="nt">Secondary Action</span>](<span class="na">#</span>){ .md-button }
[<span class="nt">Text Link with Icon :material-open-in-new:</span>](<span class="na">#</span>)
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<p><a class="md-button md-button--primary" href="#">Primary Action <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg></span></a>
<a class="md-button" href="#">Secondary Action</a>
<a href="#">Text Link with Icon <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2z"/></svg></span></a></p>
<hr />
<h3 id="mermaid-diagrams">Mermaid Diagrams<a class="headerlink" href="#mermaid-diagrams" title="Permanent link">&para;</a></h3>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code><span class="sb">```mermaid</span>
<span class="s">graph TD</span>
<span class="s"> A[Contributor] --&gt;|Creates| B[Task]</span>
<span class="s"> B --&gt;|Completes| C[Review]</span>
<span class="s"> C --&gt;|Approves| D[SC Minted]</span>
<span class="s"> D --&gt;|Logged in| E[Ledger]</span>
<span class="sb">```</span>
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<pre class="mermaid"><code>graph TD
A[Contributor] --&gt;|Creates| B[Task]
B --&gt;|Completes| C[Review]
C --&gt;|Approves| D[SC Minted]
D --&gt;|Logged in| E[Ledger]</code></pre>
<hr />
<h3 id="progress-indicators">Progress Indicators<a class="headerlink" href="#progress-indicators" title="Permanent link">&para;</a></h3>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code>!!! abstract &quot;Micro-Pilot Progress&quot;
:material-progress-check: <span class="gs">**35% Complete**</span>
<span class="w"> </span><span class="k">- [x]</span> Infrastructure deployed
<span class="w"> </span><span class="k">- [x]</span> Core team assembled
<span class="w"> </span><span class="k">- [ ]</span> First work cycle
<span class="w"> </span><span class="k">- [ ]</span> Binding vote held
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<div class="admonition abstract">
<p class="admonition-title"><abbr title="Phase 0 of the Smartup lifecycle—a one-month, invite-only pilot that validates onboarding, role assignment, task execution, SC minting, and voting workflows on a small scale.">Micro-Pilot</abbr> Progress</p>
<p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 2.03v2.02c4.39.54 7.5 4.53 6.96 8.92-.46 3.64-3.32 6.53-6.96 6.96v2c5.5-.55 9.5-5.43 8.95-10.93-.45-4.75-4.22-8.5-8.95-8.97m-2 .03c-1.95.19-3.81.94-5.33 2.2L7.1 5.74c1.12-.9 2.47-1.48 3.9-1.68zM4.26 5.67A9.9 9.9 0 0 0 2.05 11h2c.19-1.42.75-2.77 1.64-3.9zM15.5 8.5l-4.88 4.88-2.12-2.12-1.06 1.06 3.18 3.18 5.94-5.94zM2.06 13c.2 1.96.97 3.81 2.21 5.33l1.42-1.43A8 8 0 0 1 4.06 13zm5.04 5.37-1.43 1.37A10 10 0 0 0 11 22v-2a8 8 0 0 1-3.9-1.63"/></svg></span> <strong>35% Complete</strong></p>
<ul>
<li>[x] Infrastructure deployed</li>
<li>[x] Core team assembled</li>
<li>[ ] First work cycle</li>
<li>[ ] Binding vote held</li>
</ul>
</div>
<h2 id="technical-formatting">🔧 Technical Formatting<a class="headerlink" href="#technical-formatting" title="Permanent link">&para;</a></h2>
<h3 id="code-blocks">Code Blocks<a class="headerlink" href="#code-blocks" title="Permanent link">&para;</a></h3>
<p>Always specify language for syntax highlighting.</p>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code><span class="sb">```python</span>
<span class="k">def</span><span class="w"> </span><span class="nf">mint_credits</span><span class="p">(</span><span class="n">worker</span><span class="p">,</span> <span class="n">amount</span><span class="p">):</span>
<span class="w"> </span><span class="sd">&quot;&quot;&quot;Mint Smartup Credits for completed work.&quot;&quot;&quot;</span>
<span class="k">return</span> <span class="n">ledger</span><span class="o">.</span><span class="n">add_entry</span><span class="p">(</span><span class="n">worker</span><span class="p">,</span> <span class="n">amount</span><span class="p">)</span>
<span class="sb">```</span>
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<div class="highlight"><pre><span></span><code><span class="k">def</span><span class="w"> </span><span class="nf">mint_credits</span><span class="p">(</span><span class="n">worker</span><span class="p">,</span> <span class="n">amount</span><span class="p">):</span>
<span class="w"> </span><span class="sd">&quot;&quot;&quot;Mint Smartup Credits for completed work.&quot;&quot;&quot;</span>
<span class="k">return</span> <span class="n">ledger</span><span class="o">.</span><span class="n">add_entry</span><span class="p">(</span><span class="n">worker</span><span class="p">,</span> <span class="n">amount</span><span class="p">)</span>
</code></pre></div>
<hr />
<h3 id="file-contents">File Contents<a class="headerlink" href="#file-contents" title="Permanent link">&para;</a></h3>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code>!!! example &quot;ledger.log&quot;
<span class="sb"> ```json</span>
<span class="w"> </span><span class="p">{</span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;mint&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;worker&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;@alice&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;amount&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">500</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;task&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;#42&quot;</span><span class="p">}</span>
<span class="sb"> ```</span>
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<div class="admonition example">
<p class="admonition-title">ledger.log</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;mint&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;worker&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;@alice&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;amount&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">500</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;task&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;#42&quot;</span><span class="p">}</span>
</code></pre></div>
</div>
<hr />
<h3 id="terminal-commands">Terminal Commands<a class="headerlink" href="#terminal-commands" title="Permanent link">&para;</a></h3>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code><span class="sb">```console</span>
<span class="gp">$ </span>git<span class="w"> </span>clone<span class="w"> </span>https://smartup-zero-forgejo.fly.dev/smartup-zero/0_timeline.git
<span class="gp">$ </span><span class="nb">cd</span><span class="w"> </span>0_timeline
<span class="gp">$ </span>mkdocs<span class="w"> </span>serve
<span class="go">INFO - Building documentation...</span>
<span class="go">INFO - Documentation built in 2.43 seconds</span>
<span class="sb">```</span>
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<div class="highlight"><pre><span></span><code><span class="gp">$ </span>git<span class="w"> </span>clone<span class="w"> </span>https://smartup-zero-forgejo.fly.dev/smartup-zero/0_timeline.git
<span class="gp">$ </span><span class="nb">cd</span><span class="w"> </span>0_timeline
<span class="gp">$ </span>mkdocs<span class="w"> </span>serve
<span class="go">INFO - Building documentation...</span>
<span class="go">INFO - Documentation built in 2.43 seconds</span>
</code></pre></div>
<h2 id="tables-and-data">📊 Tables and Data<a class="headerlink" href="#tables-and-data" title="Permanent link">&para;</a></h2>
<h3 id="standard-table-format">Standard Table Format<a class="headerlink" href="#standard-table-format" title="Permanent link">&para;</a></h3>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code>| Component | Status | Notes |
|-----------|--------|-------|
| Matrix Server | :material-check-circle: Operational | 99.9% uptime |
| Forgejo | :material-check-circle: Operational | v1.21.3 |
| Engelbot | :material-progress-wrench: In Progress | v0.1 pending |
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Status</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Matrix Server</td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"/></svg></span> Operational</td>
<td>99.9% uptime</td>
</tr>
<tr>
<td><abbr title="The self-hosted Git forge (ethical fork of Gitea) used for code, project boards, issue tracking, Smartup Credits ledger, and CI/CD automation.">Forgejo</abbr></td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"/></svg></span> Operational</td>
<td>v1.21.3</td>
</tr>
<tr>
<td><abbr title="The custom Smartup bot acting as the Midfielder in the ADM Triangle. Automates notifications, bridges Forgejo and Matrix, parses structured commands, and logs key events.">Engelbot</abbr></td>
<td><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 2.03v2.02c4.39.54 7.5 4.53 6.96 8.92-.46 3.64-3.32 6.53-6.96 6.96v2c5.5-.55 9.5-5.43 8.95-10.93-.45-4.75-4.22-8.5-8.95-8.97m-2 .03c-1.95.19-3.81.94-5.33 2.2L7.1 5.74c1.12-.9 2.47-1.48 3.9-1.68zM4.26 5.67A9.9 9.9 0 0 0 2.05 11h2c.19-1.42.75-2.77 1.64-3.9zM2.06 13c.2 1.96.97 3.81 2.21 5.33l1.42-1.43A8 8 0 0 1 4.06 13zm5.04 5.37-1.43 1.37A10 10 0 0 0 11 22v-2a8 8 0 0 1-3.9-1.63m9.72-3.18-4.11-4.11c.41-1.04.18-2.26-.68-3.11-.9-.91-2.25-1.09-3.34-.59l1.94 1.94-1.35 1.36-1.99-1.95c-.54 1.09-.29 2.44.59 3.35.86.86 2.08 1.08 3.12.68l4.11 4.1c.18.19.45.19.63 0l1.04-1.03c.22-.18.22-.5.04-.64"/></svg></span> In Progress</td>
<td>v0.1 pending</td>
</tr>
</tbody>
</table>
<h2 id="linking-strategy">🌐 Linking Strategy<a class="headerlink" href="#linking-strategy" title="Permanent link">&para;</a></h2>
<h3 id="internal-links">Internal Links<a class="headerlink" href="#internal-links" title="Permanent link">&para;</a></h3>
<ul>
<li>Use relative paths: <code>[Team Structure](../smartup-zero/3_teams.md)</code></li>
<li>Link to sections: <code>[Voting Process](1_general_forum.md#voting)</code></li>
</ul>
<h3 id="external-links">External Links<a class="headerlink" href="#external-links" title="Permanent link">&para;</a></h3>
<ul>
<li>Always add icon: <code>[Open Collective :material-open-in-new:](https://opencollective.com/smartup-zero)</code></li>
<li>Use descriptive text, not "click here"</li>
</ul>
<h3 id="cross-references">Cross-References<a class="headerlink" href="#cross-references" title="Permanent link">&para;</a></h3>
<p><strong>Example Code:</strong>
<div class="highlight"><pre><span></span><code>!!! tip &quot;Related Topics&quot;
<span class="w"> </span><span class="k">-</span><span class="w"> </span>[<span class="nt">The Smartup Model</span>](<span class="na">../0_timeline/the-smartup-hypothesis.md</span>)
<span class="w"> </span><span class="k">-</span><span class="w"> </span>[<span class="nt">How to Contribute</span>](<span class="na">../smartup-zero/2_workplace.md</span>)
<span class="w"> </span><span class="k">-</span><span class="w"> </span>[<span class="nt">Team Structure</span>](<span class="na">../smartup-zero/3_teams.md</span>)
</code></pre></div></p>
<p><strong>Renders as:</strong></p>
<div class="admonition tip">
<p class="admonition-title">Related Topics</p>
<ul>
<li><a href="../0_timeline/the-smartup-hypothesis.md">The <abbr title="A digital cooperative that builds tools for resilience and SDG advancement through transparent, collective systems.">Smartup</abbr> Model</a></li>
<li><a href="../smartup-zero/2_workplace.md">How to Contribute</a></li>
<li><a href="../smartup-zero/3_teams.md"><abbr title="See *3_teams*.">Team</abbr> Structure</a></li>
</ul>
</div>
<h3 id="checklist-for-new-pages">✅ Checklist for New Pages<a class="headerlink" href="#checklist-for-new-pages" title="Permanent link">&para;</a></h3>
<p>Before publishing any new page, ensure:</p>
<ul>
<li>[ ] Uses appropriate icon in title</li>
<li>[ ] Has "What is this?" info box</li>
<li>[ ] Follows voice &amp; tone guidelines</li>
<li>[ ] Includes at least one visual element (diagram, table, or card grid)</li>
<li>[ ] Has clear CTAs if applicable</li>
<li>[ ] Links to related content</li>
<li>[ ] Uses consistent terminology</li>
<li>[ ] Mobile-friendly (test grid layouts)</li>
</ul>
<h2 id="quick-start-template">🚀 Quick Start Template<a class="headerlink" href="#quick-start-template" title="Permanent link">&para;</a></h2>
<p>Copy this template when creating new pages:</p>
<div class="highlight"><pre><span></span><code>**:material-icon: Page Title
!!! info &quot;What is this?&quot;
One-sentence explanation of what this page covers.
<span class="gs">**Purpose**</span>
Brief paragraph explaining why this matters in the Smartup Zero context.
<span class="gs">**Main Content**</span>
Your content here, following the patterns above...
<span class="gs">**:material-rocket-launch: Next Steps**</span>
What the reader should do after reading this page.
!!! tip &quot;Related Topics&quot;
<span class="w"> </span><span class="k">-</span><span class="w"> </span>[<span class="nt">Related Page 1</span>](<span class="na">link</span>)
<span class="w"> </span><span class="k">-</span><span class="w"> </span>[<span class="nt">Related Page 2</span>](<span class="na">link</span>)
</code></pre></div>
<hr />
<div class="admonition success">
<p class="admonition-title">Ready to Create Content!</p>
<p>Now you have all the patterns and examples needed to create consistent,
beautiful content for <abbr title="The public-facing, static website and primary transparency layer for the Smartup Zero experiment. Shows latest progress, business plan, team structure, roles, and documentation.">0_timeline</abbr>. Remember to reference
this guide whenever you're unsure about formatting or style choices.</p>
</div>
<aside class="md-source-file">
<span class="md-source-file__fact">
<span class="md-icon" title="Last update">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg>
</span>
2025-07-16
</span>
</aside>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset" style="text-align: center; font-size: 0.8rem;">
<p>
This is a <strong>SOS Project</strong>. <br>
Society Of Solutions is a global open cooperative running as an unincorporated alliance and transparently funded via <a href="https://opencollective.com" target="_blank" rel="noopener">Open Collective</a>.
</p>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "..", "features": ["navigation.instant", "navigation.sections", "navigation.expand", "content.hero", "toggle", "toc.follow", "content.tooltips"], "search": "../assets/javascripts/workers/search.d50fe291.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
<script src="../assets/javascripts/bundle.56ea9cef.min.js"></script>
<script src="../javascripts/extra.js"></script>
<script id="init-glightbox">const lightbox = GLightbox({"touchNavigation": true, "loop": false, "zoomable": true, "draggable": true, "openEffect": "zoom", "closeEffect": "zoom", "slideEffect": "slide"});
document$.subscribe(() => { lightbox.reload() });
</script></body>
</html>