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
- Inject the theme: in Wiki.js admin → Theme, set custom head HTML to wrap
toora-global.cssin a<style>tag. Keep dark mode off. - Create pages: run
create-toora-pages.py(requires admin JWT) to create: Home, Entertainment, Lights, Kitchen, Garden, Pets, Laundry. - 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.