Skip to content

Introduction

RisingSwamp’s design system — Tactile Cyber-Naturalism — is not a stylesheet. It is the visual implementation of a clinical argument about how ADHD brains interact with software.

The aesthetic is a clinical argument. Every visual decision has a neurological cost or benefit. The dark palette, organic textures, and bioluminescent accents are calibrated against the Moderate Brain Arousal model and biophilic design research.

Two planes. All UI lives in Plane 1 — flat, static, predictable, trustworthy. The swamp environment (Plane 2) is atmospheric and alive but never carries functional information.

Elevation without shadows. Depth is expressed through background tone (--bg--surface--surface2). Drop shadows imply a light source. There is no light source in the swamp.

Scarcity-dependent effects. Glow and delight phenomenon colours derive their neurological impact from rarity. Using them in everyday UI elements permanently destroys the effect.

The system follows the five-layer model from Laying the Foundations:

LayerWhat lives here
FoundationsColour tokens, spacing scale, type scale, motion tokens
ComponentsButton, Input, Tag, Card, Tooltip
PatternsLoading philosophy, empty states, error handling, form layout
FeaturesCapture overlay, Search interface, Saltie companion layer
ScreensDashboard, Vault browser, Search results
  • SolidJS 1.9.x — fine-grained reactivity, no virtual DOM
  • Panda CSS 0.52.x — token-driven, codegen-based styling. No runtime, atomic CSS, semantic tokens defined in panda.config.ts
  • Park UI 0.42.x (preset for Panda) — pre-themed component recipes
  • Ark UI Solid 4.x — headless accessible primitives that Park UI wraps. Use directly only when the DS has no matching component
  • Tauri 2 — desktop shell (Rust backend, WebView frontend)

The complete rationale, constraints, and token definitions live in notes/DESIGN-SYSTEM.md. That document governs all visual decisions. Read it before changing anything.