ProDyn Design SystemA public style guide for ProDyn and Threadline pages: dark instrument-panel rhythm, sparse cyan signal, naked logo usage, self-hosted type, and motion that feels like systems staying alive.
The page should feel like an operational instrument, not a brochure. Dark space is not emptiness; it is the field that lets signal matter.
Use #050A0F with the exact shared Login Particle Veil. Decorative square and dot grids are retired as whole-page backgrounds. Functional grids remain inside charts, maps, scopes, media frames, and telemetry surfaces.
Use #30B0D0 for labels, live states, bars, particles, and thin controls. Do not make every surface glow.
Subtle particles, smoke streams, wave fields, and isolinear traces can imply continuity without becoming stock cyberpunk.
The approved Mk.ii blue foundation → is an explicit opt-in addendum. This guide retains the stable cyan palette.
Copper Restraint is the selected warm direction. Cyan remains the system color; copper appears only when the interface needs human heat, priority, intervention, escalation, hand-off, or a watch-state signal. Treat it as a roughly five-percent color: visible enough to mark the exception, never enough to define the field.
#C85A2ECopper Restraint: restrained warm signal for intervention and priority states.#8F3F20Low-emphasis copper depth for bars, traces, and tactical underpaint.#E96D39Reference only. Stronger operational heat, useful for future comparison.#FF6753Reference only. Vivid coral with higher attention and higher fatigue risk.#E4A43A / #F7C96AReference only. Good as a spark, but can drift into premium/gold if overused.The guide documents four roles. This public page serves only Oxanium and Departure Mono until the PP Neue Machina commercial/web license gate is confirmed.
Readable operational copy, cards, decks, and explainers. Documented as the intended body role; public serving waits on license confirmation.
Rare editorial emphasis. Use sparingly so it stays powerful.
The original cyan flame beside ProDyn.ai in Oxanium SemiBold. One transparent image for document tops, with no hyperlink or font dependency.
Use the real transparent PNG. No circle, badge, shield, rounded-square, avatar chip, or icon container. The page may carry atmosphere; the logo does not need a costume.
110
Cards should feel like an interface panel. Use borders, labels, counts, bars, and restrained motion. Avoid heavy shadows and decorative badges.
Use the exact shared `/ui` login effect unchanged: 80 rising particles, double-drawn halos, sine pulse, and short-range links. This replaces decorative page grids.
Use the exact two-field smoke bed and three sparse signal particles from the prodyn.ai footer. Do not increase the particle count, add a third blob, or substitute the retired canvas approximation.
M1–M14 remain on the motion registry. The canonical Motion Design add-on extends the set with M15–M18: acquisition, spatial continuity, kinetic type and aperture transit. New motion still requires a reviewed entry, a real specimen and composed reduced motion.
Motion is a relationship between cause, state and consequence. Explore four replayable interaction primitives, then follow the engineering and authoring contracts that make them safe to reuse.
M6 is the ProDyn plasma-fire motion primitive. Use the controls to compare the canonical layered flame, the soft body with rising motes, and the full combined treatment. Every option uses the same markup and DSM color tokens.
--flame-u; all animation respects reduced-motion preferences.Open full fire referenceUse isolinear features rarely, as restrained operational-glass material for memory, continuity, signal routing, and machine state. The motif should read as transparent technical substrate inside the ProDyn / Threadline world, not as franchise homage, prop replica, or sci-fi wallpaper.
Build at least two trace passes: a front-side network and a reverse-side network with a slight registration offset. A third ghost grid can add internal volume. Vary line weight subtly; use sparse pads, junctions, lane breaks, and stepped orthogonal branches.
Use transparency, blur separation, faint reflections, and quiet parallax so signal paths feel embedded inside a thin optical substrate. Keep it low contrast. If it reads as cool sci-fi decoration, reduce it.
<link rel="preload" href="/assets/fonts/Oxanium-wght.woff2" as="font" type="font/woff2" crossorigin>
<img class="pd-logo" src="/pd-logo.png" alt="Promethean Dynamic">
.pd-logo { background:none; border:0; border-radius:0; box-shadow:none; }