Design System v0.1

Enbox Design Language

A unified visual system for decentralised tools. Dark-first, terminal-native, accent-driven. Each product shares structural DNA while expressing its own identity through color.

View Enbox Landing View gitd Landing

Philosophy Colors Product Accents Typography Buttons Cards Code Blocks Install Bar Stats Logos Pages

Design Philosophy

Crisp. Dark. Decentralised.

Dark-first

Every surface is built on a neutral dark palette. No warm tints, no cool biases in the base. Color comes exclusively from product accents.

Terminal-native

Monospace install bars, code-forward hero sections, CLI-first product showcases. These are tools built by developers, for developers.

Accent-driven identity

One shared structure, one shared dark palette. Each product is differentiated solely by its accent color and gradient. Swap data-product and the entire page recolors.

Precision over decoration

Inspired by Ghostty's restraint, Vercel's precision, Bun's personality. No gradients on backgrounds. No hero images. Let whitespace, type, and accent color do the work.

Frosted glass nav

Sticky navigation with backdrop-filter blur. Subtle border. The nav becomes a constant orientation point as users scroll.

Motion with purpose

Scroll-reveal fade-up animations with staggered delays. Subtle hover lifts on cards and buttons. Respects prefers-reduced-motion. No gratuitous animation.

Color System

Neutral Scale

The shared dark palette. No warm or cool bias—pure neutral grays from near-black to white.

gray-950

#08090a

gray-900

#0e1011

gray-850

#131618

gray-800

#1a1d20

gray-750

#21252a

gray-700

#2a2f35

gray-600

#3d444d

gray-500

#545d69

gray-400

#78828f

gray-300

#a0a9b4

gray-200

#c4cad1

gray-100

#e2e5e9

gray-50

#f3f4f6

Product Accent Colors

One system, many identities

Each product overrides --accent and its derivatives. Apply data-product="gitd" to any container and every component inside recolors automatically.

enbox

Umbrella brand. Pure white accent for neutrality across the suite.

gitd

Decentralised git. Mint-to-cyan gradient.

meshd

WireGuard mesh VPN. Orange-to-amber warmth.

memoryd

AI memory network. Violet-to-lavender.

notesd

Decentralised notes. Sky blue-to-ice.

moneyd

Decentralised payments. Gold-to-warm yellow.

authd

DID authentication. Rose-to-pink.

sociald

Social graph. Emerald-to-green.

Typography

Type Scale

Inter for headings and body. JetBrains Mono for code, install bars, and monospace accents.

text-5xl / 60px / Inter Bold / -0.03em

Decentralised by default

text-4xl / 48px / Inter Bold / -0.03em

Own your infrastructure

text-3xl / 36px / Inter Semibold / -0.02em

Protocols, not platforms

text-2xl / 28px / Inter Semibold / -0.02em

Your data. Your identity.

text-xl / 21px / Inter Semibold

Feature heading

text-lg / 18px / Inter Medium

Card title or subheading

text-base / 15px / Inter Regular / body copy

Every product in the enbox suite shares this base body size. Readable, compact, and comfortable for long-form content. The max-width is capped at 65ch for optimal line length.

text-sm / 13px / JetBrains Mono / monospace

curl -fsSL https://gitd.sh/install | bash

text-xs / 12px / JetBrains Mono / overline

Open Source Protocol

Buttons

Button System

Three tiers across all products. Pill-shaped with subtle hover lift. The primary button uses each product's accent fill.

enbox (default)

Get Started Documentation Learn more

gitd

Install gitd Documentation View on GitHub

meshd

Install meshd Documentation View on GitHub

memoryd

Install memoryd Documentation View on GitHub

notesd

Install notesd Documentation View on GitHub

moneyd

Install moneyd Documentation View on GitHub

Size variants

Small Default Large

Install Bar

One-liner install

The curl-pipe-bash install bar. A signature element borrowed from Bun and OpenCode, adapted for each product.

gitd

$ curl -fsSL https://gitd.sh/install | bash

meshd

$ curl -fsSL https://meshd.sh/install | bash

memoryd

$ curl -fsSL https://memoryd.sh/install | bash

Cards

Card System

Feature cards, borderless cards, and product cards. All responsive from 1 to 4 columns.

Feature Cards (3-up)

DID-native identity

Every push, every issue, every patch is signed with your decentralised identifier. No usernames, no platforms.

11 composable protocols

Issues, patches, CI, releases, registry, wiki, org, notifications, social. Each protocol stands alone or composes with others.

No vendor lock-in

Your data lives in your DWN. Migrate freely. The protocol is the platform.

Borderless Cards (2-up, Ghostty-style)

WireGuard data plane

Standard WireGuard tunnels via dexnet. NAT traversal, UDP hole punching, relay fallback. The data plane you already trust.

DWN control plane

Membership, ACLs, and endpoint records stored as encrypted DWN records. No coordination server required.

Encrypted metadata

Not just tunnel traffic. Endpoint addresses, policies, and membership data are all JWE-encrypted and DID-signed.

Coexists with Tailscale

Dedicated IP ranges let meshd run alongside existing VPN solutions on the same host. No conflicts.

Code Blocks

Terminal Display

Mac-style window chrome with language label. Syntax colors designed for the dark palette.

            
terminal

$ gitd setup
# Generates DID, configures git credential helper

$ gitd clone did:dht:abc123/my-repo
# Clones from a decentralised web node

$ gitd issue create --title "Fix auth flow"
# Creates a DWN-backed issue

$ gitd patch create
# Opens a patch request (decentralised PR)

            
terminal

$ meshd init
# Generates WireGuard keys + DID identity

$ meshd network create --name "home-lab"
# Creates a new mesh network

$ meshd peer add did:dht:k5f8...
# Adds a peer by their DID

$ meshd up
# Brings the mesh interface online