// Brand Identity Manual · 2026
Visual identity guidelines for SHOCKNET and its product suite. Covers logos, color, typography, and UI components — across both dark and light themes.
v1.0 · SHOCKNET Brand System
The SHOCKNET symbol is a two-path geometric form derived from a bisected arc. On dark backgrounds the mark renders in #F1F1F1. On light backgrounds it renders in #111213. Toggle the theme to see both.
Every element — mark, wordmark, product logos, buttons, pills — updates in real time. Each product section also has a fixed two-panel showing Avatar Theme Variants simultaneously.
The SHOCKNET mark and all product logos must be applied consistently. These rules exist to protect the integrity of the brand across every surface, size, and context.
Always maintain a minimum exclusion zone of ½× the mark height on all sides. No other graphic elements, text, photography, or decorative elements may enter this zone.
Clear space = ½ mark height on all sides
Never alter the mark in any way. The following treatments are strictly forbidden.
Don't stretch
Never distort proportions in any axis.
Don't rotate
The mark must always sit in its canonical orientation.
Don't add effects
No drop shadows, glows, gradients, or filters of any kind.
A Bitcoin Lightning wallet and social layer. The cyan-to-blue gradient represents the flow of value — instant, frictionless, and open.
Dark: Cyan #1BCFE0 → Blue #3A7BFF · Light: Cyan #4FD6F0 → Blue #2E6DCE
This SHOCKWALLET logotype variant, reading as WALLET, optimize readability in small sizes views and is to use in cases where width of the space is reduced (i.e. mobile app or responsive mobile view).
This SHOCKWALLET logotype variant reading as SHOCK WALLET with the centred avatar mark placed between the two words , balance its weights and is to use in cases where the gogo is placed in the center of the space (i.e. welcome screens).
A decentralized social publishing network on Lightning. The orange-to-purple gradient evokes energy, creativity, and the borderless nature of open publishing.
Dark: Orange #FF8A00 → Magenta #F040F5 · Light: Orange #FF9900 → Magenta #D75AD7
Bitcoin-native video streaming with pay-per-view on Lightning. A singular bold red communicates live action, urgency, and the immediacy of streaming.
Dark: #FF0050 — deep electric red for dark backgrounds · Light: #FF3366 — warmer rose-red for light surfaces
This LIGHTNING.video logotype variant, reading as LN.video, optimize readability and is to use in cases where width of the space is reduced (i.e. mobile app or responsive mobile view).
BXRD is the social and publishing layer of the SHOCKNET ecosystem. A singular violet communicates depth, creativity, and the expressive power of decentralised identity.
Dark: #9B63FF — vivid violet on dark surfaces · Light: #8A6BE5 — deeper violet for legibility on white
Private, encrypted communications on Lightning. A saturated emerald green projects safety, growth, and trustworthiness.
Dark: #25E673 — vivid emerald for dark backgrounds · Light: #4FD27A — muted green that reads well on white surfaces
Lightning-powered tipping and micro-transactions. Yellow signals speed and energy; violet adds depth and a sense of occasion. Together they make every transaction feel like a celebration.
Dark: Yellow #F7FF00 / Purple #9B63FF · Light: Yellow #F0E91A / Purple #8A6BE5
NYMRANK is a pseudonymous reputation and ranking protocol built on the Lightning Network. Yellow signals signal strength and visibility; green signals trust, growth, and on-chain verification.
Dark: Yellow #F7FF00 / Green #59B942 · Light: Yellow #D4C800 / Green #3D8428
Each product has a designated color identity that adapts between themes. The split swatches below always show both: left half = dark theme, right half = light theme. The live panel at the bottom shows only the currently active theme's values.
Dark values are calibrated for luminosity on dark surfaces. Light values are adjusted for legibility and reduced glare on white backgrounds. Using dark values on light backgrounds or vice versa violates brand guidelines.
Night
#111213
Coal
#212325
Graphene
#3C3C3C
Dust
#8A8A8A
Ice
#F1F1F1
Light
#FFFFFF
Left half = dark · Right half = light
Blue
Cyan
Green
Yellow
Orange
Red
Magenta
Purple
Switch themes in the top-right nav button to see these colors update in real time.
Three typefaces form the system. DM Mono anchors all display and heading usage. Inter handles all interface copy. DM Mono handles supporting and technical text. All three are free and open-source.
SHOCKNET is an open infrastructure layer enabling censorship-resistant payments, publishing, and media over the Bitcoin Lightning Network.
Get Started · Connect Wallet · Send Payment · View Dashboard
node_id: 03a9d79bcfab7feb0f24c3cd61a272d7cbe4dbfac3f58f3f74e43d76437c279e8c
capacity: 2,100,000 sats · alias: shocknet.node · status: online
All three typefaces in the SHOCKNET system are free and open-source. Download them directly from their respective foundries.
A monospaced type family derived from Donald Knuth's Computer Modern. The Condensed variant is used for all SHOCKNET headings and display text.
gust.org.pl — DownloadA typeface carefully crafted for computer screens, with a tall x-height and open letterforms. Used for all SHOCKNET body copy and UI elements.
rsms.me/inter — DownloadA monospaced typeface designed for clarity at small sizes. Used throughout SHOCKNET for labels, technical data, and interface annotations.
colophon-foundry.org — DownloadThe primary container. Shape and radius are constant across themes — only surface fill and border color change.
Standard dark surface used across all interfaces.
Light surface for white-background layouts.
Normal: h 42px · r 10px · Inter Medium 16px. Small: h 36px · r 5px · Inter Medium 12px.
SHOCKNET and all its products use Ionicons as the primary icon library — open-source, MIT-licensed, and available as a web component or SVG. Supplementary sets may be used when a specific glyph is unavailable, provided they follow the same weight and optical sizing guidelines.
Always prefer the -outline variant for interface actions. Use filled variants only for active/selected states or high-emphasis decoration. Never mix weight styles (outline + filled) within the same UI context.
Over 1,300 icons in three variants — outline, filled, and sharp. Used natively in all SHOCKNET products as a web component or inline SVG export.
ionic.io/ionicons — BrowseA flexible icon family offering six weights — Thin through Bold. Use when a glyph is missing from Ionicons, especially for data, charts, and technical UI.
phosphoricons.com — BrowseA community-maintained fork of Feather Icons with a consistent 2px stroke weight and pixel-precise geometry. Recommended for desktop and web app contexts.
lucide.dev — BrowseIcons scale with their surrounding text or context. Four standardized sizes cover all SHOCKNET UI contexts.
Use outline for default/inactive states. Use filled for active, selected, or high-emphasis states within the same component.
Core glyphs used across the SHOCKNET product suite. All shown at 24px outline weight.
Icons appear at 18px inside buttons and 14px inside pills. Always left-aligned to the label with 8px gap.
All spacing in SHOCKNET products derives from a 4px base unit. Every gap, padding, and margin must be a multiple of 4. This creates rhythm and predictability across all product interfaces without visual improvisation.
All product interfaces use a 12-column grid with a 20px gutter. Common layout patterns — full-width, half, thirds, and asymmetric splits — are shown below.
12 col — full width hero, nav, footer
6 · 6 — two-column split
4 · 4 · 4 — card trios, product grid
8 · 4 — content + sidebar, article + metadata
Spacing become really important to balance visual weights and to improve visibility and readibility. These below are defaul spaces witdths or heights to be used across all SHOCKNET interfaces.
SHOCKNET is a technical infrastructure with a human purpose. The voice is rooted in precision — we don't talk around things — but it's never cold. Each product has a tonal adjustment within the shared voice framework.
Direct
Say what needs to be said in the fewest correct words. No filler. No hedge words. Confidence without arrogance.
Technical
Respect the reader's intelligence. Use correct terminology. Never dumb things down, but always explain why something matters.
Bold
Take a clear stance. Acknowledge that what we're building is meaningful and new. The passive voice is a prohibited construction.
Human
Never robotic. Payments are a personal act. Show warmth in error states, success messages, and any moment of friction.
All products share the four pillars above. Tone shifts the balance of those pillars without abandoning them.
"An unexpected error has occurred. Please try again later."
"Payment didn't go through. Check your channel balance and retry."
Direct cause + direct action. No apology needed.
"Welcome! Get started by creating your first wallet experience."
"No wallet yet. Add a node to start sending."
Skip the welcome ceremony. Tell the user what to do.
"Your payment has been successfully processed and confirmed."
"Sent. 21,000 sats landed instantly."
Short, specific, and satisfying. Name the amount when possible.
"Are you sure you want to proceed with this action?"
"Close channel" / "This will settle on-chain. No undo."
Name the action precisely. State the consequence once.
The mark and product identities must carry through every digital touchpoint — from a 16×16 browser tab to a 1200×630 social share card. These specs define how each surface works.
App icons use the SHOCKNET symbol mark centered on a product-colored square with a 22% corner radius (iOS / Android convention). The mark fills 52% of the icon area. No wordmark at this size.
At favicon sizes (16×16, 32×32) only the mark is used — never the wordmark. The mark is centered with no background padding at 16px; at 32px a 2px margin is acceptable. For product pages use the product-colored variant.
When SHOCKNET products appear alongside external brands, partner marks, or in third-party contexts, specific rules govern how the marks relate to each other — protecting both parties and maintaining brand clarity.
No third-party organization may use the SHOCKNET mark or any product mark in co-branded materials without prior written authorization. This includes "Built with", "Powered by", and "Integrated with" lockups.
When co-branding with a partner, the SHOCKNET (or product) mark and the partner mark must remain visually distinct. The exclusion zone between the two marks must be at least 1× the SHOCKNET mark height.
The SHOCKNET mark and a partner mark must remain visually independent. Never overlap, interlock, or combine paths from two different marks into a single composition.
The 1× mark-height exclusion zone surrounding the SHOCKNET mark must remain clear of all third-party marks, logotypes, wordmarks, and decorative elements.
In co-branded contexts, the SHOCKNET mark must use only its approved dark or light variant — never a color derived from, or meant to harmonize with, the partner's brand palette.
Third-party developers integrating SHOCKNET technology may use a minimal "Powered by SHOCKNET" text attribution using DM Mono, 10px, with the SHOCKNET wordmark in the approved color for the background. The mark symbol is optional at this usage size.
Individual product marks (SHOCKWALLET, LIGHTNING.pub, etc.) may appear in third-party contexts independently of the SHOCKNET parent mark — but the co-branding rules above still apply in full.