Zenon Design System, Brand Skill & UI Package — consistent UI and AI-generated content for the whole ecosystem
The problem
NoM has a growing number of community-built apps but theres not a lot consistency between them, just look at the zenon.network, Bridge, Syrius and ZenonHub to name a few. Each team is making the same foundational decisions independently: which shade of green, how to truncate an address, how to display an amount, what a pending transaction looks like. The results are inconsistent, and the ecosystem ends up looking more fragmented than it actually is.
Beyond the visual inconsistency, there’s a subtler problem with AI-generated content. When community members use AI to produce marketing material, blog posts, or UI mockups for Zenon projects, the output often drifts — wrong green, wrong font, generic blockchain energy rather than anything that feels distinctly NoM.
The solutions
Design System + Brand Skill
zenon-design-system — GitHub - digitalSloth/zenon-design-system: A design system and brand guidelines for Zenon, the Network of Momentum (NoM) · GitHub
A single source of truth for how Zenon looks and feels, distilled from the existing product suite (Syrius, the block explorer, the bridge). It covers colour tokens, typography, elevation, motion, voice guidelines, and the blockchain-specific UI patterns that appear in every NoM app.
The repo also ships zenon-brand.skill.md — a self-contained brand prompt for AI agents. You can use it as a skill in Claude, paste it as a system prompt in ChatGPT, feed it to Gemini, load it into a local model via Ollama, drop it into any LangChain pipeline. The file inlines the real token values, voice rules, and a copy-paste CSS starter, so any AI can produce on-brand landing pages, announcements, social posts, and decks immediately, with no access to the rest of the repo needed.
nom-ui
nom-ui — GitHub - digitalSloth/nom-ui: Shared shadcn-vue component library for NoM apps — Vue 3 (Composition API) + Tailwind CSS 4. · GitHub
Demo: nom-ui — playground
The Vue component library. Vue 3 + Tailwind CSS 4, distributed as source so your bundler compiles it. npm install github:digitalSloth/nom-ui, two lines in your CSS entry point, and you have ~40 components ready to go — including the blockchain primitives that matter most: Address (truncated display with a copy button), Amount (tabular figures, consistent trailing zero handling), TxStatus, TxDirection, and TokenIcon. The components you’d otherwise build differently in every app, built once.
Why this matters
A shared system lowers the cost of building on NoM correctly. You don’t have to solve typography, colour, or address formatting from scratch — and your app ends up looking like it belongs in the same ecosystem as everything else.
Both repos are MIT licensed and open to contributions, all input is welcome and encouraged so we can land on a design system the community built. If you’re building on NoM and run into a missing component or a guideline that doesn’t cover your use case, open an issue.
Visibility
I’d like to migrate both repos to the zenon-network GitHub org. It makes sense for shared infrastructure like this to live under the official org rather than a personal account.
Examples
Zenon.network homepage:
Syrius concept:
Explorer:
Social post:
