selfdriven-ecosystem

Files (2)

• SKILL.md
• selfdriven-ecosystem.skill

SKILL.md (first lines)

# selfdriven Ecosystem Builder

Build production-grade web properties, documents, APIs, and organisational frameworks for the selfdriven Foundation ecosystem.

## Overview

The selfdriven Foundation operates a family of interconnected domains spanning sovereign identity, banking, AI, community, and professional services. This skill captures the brand system, architectural patterns, content frameworks, and technical standards needed to build consistently across the entire ecosystem — not just a single domain.

### Trigger Contexts

Consult this skill for any mention of:
- Any selfdriven domain: selfdriven.money, .foundation, .pro, .network, .ai, .services, .community, .finance, .bot
- TANA (community actuation platform) or any selfdriven-branded property
- KERI/ACDC identity integration in any vertical (banking, legal, healthcare, insurance, etc.)
- ISO 27001 ISMS, compliance frameworks, or governance documents for selfdriven entities
- The selfdriven brand palette, typography, or visual language
- 8 Areas of Focus framework, Human Conductor models, community self-actuation
- API servers for any selfdriven property (CDR Open Banking, identity, agent protocols)

### When to Use This Skill

- Creating or modifying any selfdriven-branded webapp, site, or dashboard
- Writing organisational papers, compliance documents, or governance frameworks
- Building API servers for any selfdriven domain
- Designing team/organisational structures using the 8 Areas of Focus
- Creating presentation or marketing pages for selfdriven properties
- Building any interface that combines sovereign identity (KERI/ACDC/passkeys) with a service vertical

## Brand System

### Design Tokens

Always use CSS variables. Always support both light and dark modes via `prefers-color-scheme`.

```css
/* Light mode (default) */
:root {
  --bg: #f5f2ed;
  --surface: #edeae3;
  --surface2: #e5e1d8;
  --border: #ddd8ce;
  --text: #1a1410;
  --muted: #6b5f52;
  --muted2: #9e9085;
  --accent: #c8442f;
  --accent-dim: rgba(200, 68, 47, 0.10);
  --accent-strong: rgba(200, 68, 47, 0.18);
  --card-radius: 20px;
  --shadow: 0 2px 16px rgba(0,0,0,0.07);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --surface: #161616;
    --surface2: #1e1e1e;
    --border: #2a2a2a;
    --text: #f0ede8;
    --muted: #b0a89e;
    --muted2: #7a7268;
    --accent: #e85d4a;
    --accent-dim: rgba(232, 93, 74, 0.12);
    --accent-strong: rgba(232, 93, 74, 0.20);
    --shadow: 0 2px 16px rgba(0,0,0,0.4);
  }
}
```

**CRITICAL**: Always test dark mode for text contrast. Common pitfalls: `var(--muted)` used for text that needs to be readable (use `var(--text)` or `var(--muted)` only — never `var(--muted2)` for body text in dark mode); inverted sections need explicit light text colours rather than `var(--bg)` which becomes `#0a0a0a` in dark mode.

### Typography

- **Primary font**: `Poppins` (Google Fonts) — weights 300–900
- **Monospace**: `JetBrains Mono` — for identifiers, AIDs, code, technical data
- **Never use**: Inter, Roboto, Arial, system fonts, DM Sans, Space Grotesk
- **Heading style**: Poppins 800/900 weight, letter-spacing -0.04em, large sizes
- **Body style**: Poppins 400/500, colour `var(--muted)`, line-height 1.6–1.8
- **Eyebrow labels**: 11px, weight 700, letter-spacing 0.12em, uppercase, colour `var(--accent)`

### Logo

The selfdriven logo is a square flamingo-coloured mark. When available as an uploaded file, embed as base64 for self-contained HTML:
- 80x80px on cover pages and auth screens
- 30-36px in navigation bars
- 18-20px in footers
- Always with `border-radius: 8-14px` and `overflow: hidden`

### Visual Language

- **Card style**: `var(--card-radius)` (20px), `1px solid var(--border)`, `var(--shadow)` on hover
- **Accent bar**: 3px top border on cards/modals using `var(--accent)` — signature selfdriven motif
- **Buttons**: Pill-shaped (`border-radius: 999px`) for CTAs, rounded (`border-radius: 12px`) for in-app actions
- **Dark sections**: Invert to `var(--text)` background with explicit light text. In dark mode, use `#141414` to contrast against `#0a0a0a` page
- **Scroll animations**: `IntersectionObserver` with staggered `transitionDelay` for card reveals
- **Nav**: Fixed, blurred backdrop on scroll (`backdrop-filter: blur(16px)`), accent-coloured brand text

### selfdriven Domain Family

| Domain | Purpose |
|--------|---------|
| selfdriven.foundation | Parent foundation entity |
| selfdriven.money | Banking platform |
| selfdriven.services | Professional services marketplace |
| selfdriven.pro | Human Conductor webapp (9 professional domains) |
| selfdriven.network | TANA community actuation platform |
| selfdriven.ai | AI automation and agent services |
| selfdriven.community | Community hub and governance |
| selfdriven.finance | Financial services and DeFi |
| selfdriven.bot | Agent marketplace and A2A protocols |

## 8 Areas of Focus Framework

The selfdriven Foundation organises **all** entities using 8 Areas of Focus. This framework applies to every selfdriven property, not just banking. When building any organisational content, always use these consistently:

| # | Area | Universal Purpose |
|---|------|-------------------|
| 01 | Direction | Strategy, vision, governance, and regulatory roadmap |
| 02 | Engagement | Community, partnerships, ecosystem relationships, and outreach |

From selfdriven-octo/skillzeb, CC0-1.0.

More from selfdriven-octo/skillzeb