# TooraSt-wikijs

**Vodafone-inspired design system for a household Wiki.js knowledge base.**

A bright, light-theme design system for a self-hosted Wiki.js instance that documents the household — entertainment, lighting, kitchen, garden, pets, and laundry. Everything about how the home works, what it uses, and how to fix it.

## What it is

A complete Wiki.js theme built on Vodafone's design language: white canvas, signature scarlet-red CTAs, near-black ink surfaces, and impossibly heavy weight-800 uppercase display type. The typographic story is the brand — a shout, then a calm sentence.

## Design system

| Token | Value | Role |
|-------|-------|------|
| Primary | `#e60000` | Vodafone Red — CTAs, accents |
| Ink | `#25282b` | Nav, hero band, footer, headings |
| Canvas | `#ffffff` | Light content background |
| Canvas soft | `#f2f2f2` | Chips, cards |
| Body | `#7e7e7e` | Secondary text |
| Display font | Inter (800/300) | Uppercase hero, weight-800 stencil |
| Radius | 60px pill / 6px card | Signature button geometry |

**Principles:** a single accent color, polarity-flip surfaces (dark hero → light content → dark footer), pill buttons on every CTA, no drop shadows — depth via surface contrast.

## Repository structure

```
├── DESIGN.md               # Vodafone design tokens (full system)
├── toora-global.css        # Global stylesheet injected via Wiki.js theme config
└── create-toora-pages.py   # GraphQL script — creates household section pages
```

## Deployment to Wiki.js

1. **Inject the theme:** in Wiki.js admin → *Theme*, set custom head HTML to wrap `toora-global.css` in a `<style>` tag. Keep dark mode **off**.
2. **Create pages:** run `create-toora-pages.py` (requires admin JWT) to create: Home, Entertainment, Lights, Kitchen, Garden, Pets, Laundry.
3. **Configure navigation:** the script pairs with the sidebar tree — Home, Entertainment, Lights, Kitchen, Garden, Pets, Laundry.

## Architecture patterns

- **Design-token driven** — CSS custom properties centralize the full Vodafone system
- **Band rhythm** — alternating dark/light content bands for visual hierarchy
- **Component library** — reusable `.vf-*` classes (buttons, cards, badges, nav, hero bands)
- **API-first deployment** — full setup via Wiki.js GraphQL, reproducible

## Tech

Wiki.js 2.x · GraphQL API · CSS custom properties · Inter (Google Fonts) · Python (deployment scripts)

---

*Part of a homelab documentation ecosystem — see also [SamsTechnical-wikijs](https://gitea.lab.audasmedia.com.au/sam/SamsTechnical-wikijs).*