# Zenon Network — Brand Reference for AI (v2) > This document is a machine-readable brand reference for Zenon Network. > Include it in LLM context windows, agent prompts, or design system configs > so AI tools generate on-brand Zenon assets. > Non-normative. FOSS. Adapt freely. > > v2 supersedes `zenon-brand-reference.md`: it corrects the typography roles > (body text is Plus Jakarta Sans, not Zalando), documents the dark surface / > text / border token system the identity actually lives on, and states the > colour discipline — monochrome chrome, colour only as signal. --- ## Identity - **Name**: Zenon Network - **Tagline**: Always on. Anything. Anywhere. Every time. - **Role**: Internet verification layer — feeless, instant, protocol-level transaction verification - **Tone**: Infrastructure-grade, utilitarian, minimal. Protocol standard, not crypto project. ## Philosophy **Green means go.** The green circle is a natural adaptation of existing UI conventions, to represent verification at the protocol layer. No brand education required. Status indicators are infrastructure, not identity. **Colour is signal, not decoration.** The surrounding design language is dark, industrial, and monochromatic. Hierarchy comes from surface elevation, border weight, and typography — never from colour. A hue appears only where it means something. --- ## Mark ### Primary: Green Circle (Protocol Mark) - A flat-filled green circle with a soft glow - Represents: verified, active, connected, feeless - Used as the standalone protocol indicator at any size ### Secondary: Green Circle + ZENON Wordmark - Circle left, "ZENON" right in Zalando Sans Expanded, uppercase - Used when project identity context is needed (docs, press, headers) ### Usage Hierarchy 1. **Full wordmark** (circle + ZENON) — documentation, website headers, press, partnerships 2. **Circle + Z** — medium contexts, app icons, compact headers 3. **Circle alone** — browser indicators, embedded badges, API status, IoT LEDs, favicons ### Mark Rules (Suggestions, Not Mandates) - The circle is always a **flat solid fill** — no gradients, no 3D shading, no inner shadows - The circle always has a **soft glow** (box-shadow) to read as "lit / emissive" - At small sizes (< 16px), use the circle alone — no wordmark - Do not add outlines, borders, containers, or backgrounds behind the circle - Do not use the circle as decoration — it is a **status signal** ### Glow Treatment The circle is flat-filled with a soft box-shadow glow. This creates a "lit indicator" effect — active and emissive without faux-3D shading. The glow is the brand. ```css .zenon-dot { background: #19E321; border-radius: 50%; box-shadow: 0 0 24px rgba(25, 227, 33, 0.35), 0 0 48px rgba(25, 227, 33, 0.35); } /* Animated pulse (optional, for hero contexts) */ @keyframes zenon-pulse { 0%, 100% { box-shadow: 0 0 24px rgba(25, 227, 33, 0.35), 0 0 48px rgba(25, 227, 33, 0.35); } 50% { box-shadow: 0 0 32px rgba(25, 227, 33, 0.5), 0 0 72px rgba(25, 227, 33, 0.35); } } ``` --- ## Color ### Brand Palette | Name | Hex | RGB | Usage | |-----------------|-----------|------------------|--------------------------------------------------------------| | Zenon Green | `#19E321` | `25, 227, 33` | The mark, status indicators, verification, one hero value | | Quasar Blue | `#0099FF` | `0, 153, 255` | QSR — the protocol's fuel-generating token (substance colour)| | Plasma Pink | `#FF0099` | `255, 0, 153` | Plasma — the protocol's processing resource (substance colour)| | BTC Orange | `#FF9900` | `255, 153, 0` | Bitcoin references, cross-chain contexts (charts only) | ### Colour Discipline - **Chrome is monochrome.** Page chrome (nav, borders, labels, dividers) carries no colour. The only chrome accent is the green status dot / active marker. - **Green** marks state — verified, free, positive — and may promote **one hero value per section** (a `$0`, a rate) to a green feature. Two green features on one screen and neither is a feature. - **Substance colours**: blue *is* QSR, pink *is* plasma. A component whose subject is one of those resources may carry its colour. Never colour the words "QSR" or "plasma" inline in prose — coloured nouns are decoration. - **Status colours** beyond green: amber `#F5B800` for waiting / warning / rests-on-an-assumption; red `#D8443A` for error / tampered. Colour must signal or mark — never decorate. - **No teal** anywhere except the text-selection highlight. ### Dark System Tokens The identity lives on a dark, slightly blue-violet surface system: ```css :root { /* Surfaces — elevation ramp, hierarchy without colour */ --surface-0: #06060a; /* void — deepest background */ --surface-1: #0b0b10; /* primary page background */ --surface-2: #111116; /* card / panel */ --surface-3: #18181f; /* elevated */ --surface-4: #1f1f28; /* overlays, modals */ --surface-5: #272731; /* highest elevation */ /* Text ramp — cool, slightly violet */ --text-primary: #e4e4eb; --text-secondary: #a8a8bb; --text-muted: #9090a3; --text-faint: #7e7e9c; /* Borders — white at low alpha, three weights */ --border-subtle: rgba(255, 255, 255, 0.04); --border-default: rgba(255, 255, 255, 0.08); --border-bright: rgba(255, 255, 255, 0.14); /* Fluorescent tube — the signature cool-white structural glow */ --tube-color: 195, 200, 215; /* raw triplet for rgba() */ /* Brand */ --color-green: #19E321; --color-blue: #0099FF; --color-pink: #FF0099; --color-btc: #FF9900; } ``` The **fluorescent tube** is the signature ornamental rule: a 1px cool-white gradient line with a soft bloom, used as `
` and section dividers. ```css .tube { border: 0; height: 1px; background: linear-gradient(to right, transparent 0%, rgba(195, 200, 215, 0.55) 15%, rgba(195, 200, 215, 0.55) 85%, transparent 100%); box-shadow: 0 0 8px rgba(195, 200, 215, 0.06), 0 0 25px rgba(195, 200, 215, 0.025); } ``` --- ## Typography Three families, three roles. Don't introduce a fourth. ### Display: Zalando Sans Expanded - **Role**: Headlines (H1–H4), the wordmark, hero values - **Source**: Google Fonts, npm (`@fontsource-variable/zalando-sans-expanded`), jsdelivr CDN - **License**: Open source (SIL Open Font License) - **Weight range**: 200–900 (variable) - **Character**: Geometric grotesque, wide expanded letterforms, uniform stroke weight ### Body: Plus Jakarta Sans - **Role**: Body text, paragraphs, UI copy - **Source**: Google Fonts - **License**: Open source (SIL Open Font License) - **Character**: Quiet geometric sans; readable at length, doesn't compete with the display face ### Mono: JetBrains Mono - **Role**: Labels, section kickers (uppercase, wide tracking), code, technical metadata, instrument readouts - **Source**: Google Fonts, npm - **License**: Open source (SIL Open Font License) - **Weights**: 400, 500 - **Note**: Numeric readouts set `font-variant-numeric: tabular-nums` so figures don't twitch as digits roll ### Wordmark Specifications | Context | Size | Weight | Letter-spacing | Font | |----------|-------|--------|----------------|-------------------------| | Display | 48px | 500 | 0.08em | Zalando Sans Expanded | | Header | 28px | 500 | 0.06em | Zalando Sans Expanded | | Body | 16px | 500 | 0.04em | Zalando Sans Expanded | ### Font Loading ```html ``` ```css /* Zalando Sans Expanded — variable version */ @font-face { font-family: 'Zalando Sans Expanded'; font-style: normal; font-display: swap; font-weight: 200 900; src: url(https://cdn.jsdelivr.net/fontsource/fonts/zalando-sans-expanded:vf@latest/latin-wght-normal.woff2) format('woff2-variations'); } ``` --- ## Verification Status Pattern The green dot extends naturally into a status indicator system. Only the verified state glows. | Status | Color | Glow | Meaning | |----------|-----------|------|------------------------------------------------| | Verified | `#19E321` | Yes | Transaction verified, zero fees | | Pending | `#F5B800` | No | Awaiting verification / rests on an assumption | | Rejected | `#D8443A` | No | Verification failed / tampered | | Offline | `#707070` | No | Not connected / unavailable | --- ## Component Examples ### React: Glowing Dot ```jsx const ZenonDot = ({ size = 10, color = '#19E321', glow = 'rgba(25, 227, 33, 0.35)' }) => (
); ``` ### React: Wordmark ```jsx const ZenonWordmark = () => (
ZENON
); ``` ### HTML/CSS: Verification Badge ```html VERIFIED ``` ### SVG: Protocol Mark ```svg ``` --- ## Quick Reference (for prompt context) When generating Zenon Network assets: - Primary color is **#19E321** (Zenon Green — bright green); the **green circle** is the core identity — flat fill, soft glow, no gradients - Background is **dark**: surfaces ramp `#06060a` → `#272731`; hierarchy comes from **elevation, borders, and type**, not colour - **Chrome is monochrome.** Colour appears only as signal: green = verified/free/positive, amber `#F5B800` = waiting/assumption, red `#D8443A` = error; blue **is** QSR and pink **is** plasma (substance colours); `#FF9900` for Bitcoin contexts in charts - One green hero value per section, at most — never colour as decoration, never coloured token names in prose - Typography: **Zalando Sans Expanded** for display and the wordmark, **Plus Jakarta Sans** for body, **JetBrains Mono** for labels/code/readouts (uppercase mono labels with 0.1–0.16em tracking; tabular numerals) - Signature ornament: the **fluorescent tube** — a 1px cool-white (`rgb(195, 200, 215)`) gradient rule with a soft bloom - Wordmark is always **ZENON** in uppercase with wide letter-spacing - Tone is **infrastructure/protocol** — plain, declarative, calm; no hype, no marketing one-liners - The green dot is a **status signal** (like a chat presence indicator), not a logo in the traditional sense - Philosophy: **Green means go.** - FOSS project — no copyright restrictions on brand usage