A living reference for the LynxDock look and feel. Every element below is rendered from the same tokens and components the site ships with - so what you see here is what you get everywhere else.
The graphite base, cyan signal, and status hues. Swatches read straight from the --ld-* CSS variables.
Background
--ld-bg
#05090c
Base canvas
Elevated
--ld-bg-elevated
#080d11
Panel
--ld-panel
#0d141a
Panel strong
--ld-panel-strong
#141d25
Border
--ld-border
rgba(94,242,242,0.14)
Hairline
Border strong
--ld-border-strong
rgba(94,242,242,0.35)
Hover / focus
Text
--ld-text
#cdd9de
Text strong
--ld-text-strong
#ffffff
Muted
--ld-muted
#9fb2ba
Muted 2
--ld-muted-2
#7f939b
Cyan
--ld-cyan
#35e0e0
Primary signal
Cyan bright
--ld-cyan-bright
#5ef2f2
Blue
--ld-blue
#3b82f6
Blue deep
--ld-blue-deep
#1d4ed8
Warning
--ld-warning
#f5b544
Success
--ld-success
#34d399
Danger
--ld-danger
#f87171
A single sans stack with tight tracking on headings, plus the HUD label and monospace treatments.
Command your community
Structure when you need it
Live command tree
The communication platform with a tactical operations center - private, lightweight, and yours.
Supporting caption and metadata text.
Built for People. Not Platforms.
Translucent surfaces with a hairline border and blur. Optional hover lift and glow variants.
Static surface for grouping content. Hairline border, subtle inner gradient.
Adds a border brighten and soft glow on hover. Use for interactive cards.
Carries a standing shadow-glow for emphasis - reserved for hero and CTA surfaces.
The ecosystem card: stage label, status dot, name, tagline, summary, and an animated link.
The flagship communication app
LynxDock is the flagship: a lightweight communication app for voice, chat, and screen sharing. Start a quick P2P call or run a self-hosted, persistent community - your accounts and data stay with the server you choose.
Explore LynxDockThe ecosystem IDE
The IDE for the LynxDock ecosystem - an AI-assisted workspace that links docs, sprints, architecture, and research into one navigable knowledge graph.
Explore StudioThe GSpec compiler
The compiler for the ecosystem - it reads the Genesis Specification and generates the website, docs, and project scaffolding automatically, from a single source of truth.
Explore BootstrapIcon tile, title, and a short description - used for principles and product feature grids.
No surveillance, no data harvesting, no dark patterns. Your accounts and data stay with the server you choose - not ours.
Lightweight by design. Fast to launch, light on resources, and calm to use - even on modest hardware.
A guided setup wizard generates a real config with sensible defaults - no config files or terminal commands required.
Persistent servers with accounts, rooms, history, and admin controls that belong to you and your community.
Developer-grade tooling across the ecosystem - from mission-control dashboards to an AI-assisted knowledge workspace.
LynxDock, Studio, and Bootstrap share one design language and one philosophy: built for people, not platforms.
Product shots sit in a windowed glass frame with a chrome bar and caption rail.
Subtle, tactical motion only. Every animation below is disabled automatically under prefers-reduced-motion.
The rules that keep Genesis usable for everyone, not just visually striking.
--ld-text on --ld-bg and strong text uses --ld-text-strong to clear WCAG AA for normal and large text.--ld-cyan-bright focus ring is applied globally via :focus-visible; never remove it.prefers-reduced-motion - animations and smooth scrolling collapse to near-instant.aria-hidden so screen readers skip them.Full spec: docs/GENESIS-DESIGN-SYSTEM.md. Tokens live in src/styles/tokens.css and src/data/designSystem.ts.