the design system of cyb — a visual language for interfacing with Superintelligence
every screen in cyb is a composition of prysm components: atoms → molecules → cells → aips. the system defines how humans perceive, navigate, and interact with the cybergraph
prysm renders the cybergraph for human perception. every component maps to a protocol concept: particle → content renderer, neuron → identity card, cyberlink → navigation action, cyberank → ordering. emotion palette: 7 acid colors from color-emotion spectrum. monospace. 8px grid. UTC 0, Unix epoch = year 0. prysm/responsive: commander always at bottom
from subgraph prysm
prysm
the design system of cyb — a visual language for interfacing with Superintelligence
every screen in cyb is a composition of prysm components. the system defines how humans perceive, navigate, and interact with the cybergraph
first principles
- the interface is a lens — cyb refracts the cybergraph into something a human can perceive and act on
- emotion as signal — components carry emotion, a color-coded signal layer computed from cyberank, karma, and context
- everything is a particle — text, image, video, audio, pdf, 3d model. the renderer adapts, the interface stays consistent
- the neuron is the user — every action traces to a neuron, every view is from a neuron's perspective
- glass as medium — translucent panes that layer and compose, defining spatial hierarchy
composition model
four levels, each built from the previous:
atoms → molecules → cells → aips
atoms
the smallest visual units. an atom cannot be broken into smaller prysm components — it is a single rendered element with one responsibility. a glass pane, a line of text, a divider line. atoms carry no domain logic. they accept data and emotion, render a visual, and emit events. they look the same on desktop and mobile. they know nothing about neurons, particles, or cyberlinks — that meaning comes from how molecules combine them
5 atoms: surfaces (glass), typography (text), structure (ion, saber), iconography (images)
| atom | description | variants |
|---|---|---|
| glass | surface pane, foundational container | plane, side-button |
| text | typography | left, center, right, paragraph |
| ion | icon-label pair | centric, horizontal, input, star, trapezoid |
| saber | accent line and divider | 1px, 2px, horizontal |
| images | icon library | 16, 20, 32, 48, 96 px |
molecules
where atoms gain meaning. a molecule is two or more atoms composed into a functional unit with a clear interface: what data it takes, what actions it emits, what states it can be in. a neuron-card is a glass + address + counter + ion arranged to show identity. an input is a glass + text + button + saber wired for data entry. the molecule knows its domain — it understands what a neuron is, what a particle looks like, how to display a search result
molecules are grouped by role:
- actions — button, toggle: how you interact
- navigation — hud, tabs, mind (commander): how you move through cyb
- content — content, display, neuron-card, aip, avatar, adviser, tooltip: how you see data
- identity — address, counter, indicator: how you read state
- input — input, filter, slider: how you enter and refine data
- data — table, bar: how you read structured information
- tags — pill: how you classify and filter
- widgets — brain, sense, sigma, time: persistent sidebar tools
each molecule adapts between desktop and mobile. atoms inside stay identical — the molecule rearranges their layout
| molecule | description | assets |
|---|---|---|
| button | call-to-action (saber + text + saber) | default, double, triple, side |
| toggle | binary state switch | on, off, star |
| slider | continuous value selector | range, progress |
| indicator | progress display | partial, full |
| counter | numeric display with emotion | default, danger |
| address | neuron identity with hash-bar waveform | big, small |
| hud | heads-up display shell | — |
| tabs | section navigation | 3 4 5 m |
| content | particle renderers by format | text+L LR R H3 num |
| display | content container | highlight 2-line empty |
| neuron-card | neuron identity card | big small |
| aip | entity card | 2-line 3-line +menu |
| avatar | identity strip | 2-line chooser |
| adviser | contextual hint | closed positive negative neutral particle |
| input | data entry | L R LR dropdown |
| filter | result filtering | 3-items wide |
| table | data grid | line row-L row-R |
| bar | saber+ion composite | 1-sided bi-sided |
| time-widget | personal history | time |
| pill | tag badge | green red blue white |
| tooltip | floating contextual popup | — |
| mind | commander (bottom action bar) | — |
cells
a cell owns a region of the screen. it composes molecules into a coherent experience: the oracle-cell arranges a search input, content feed, and aip selector into a discovery flow. a cell manages layout, scroll behavior, and data flow between its molecules. cells are the unit of screen real estate — an aip is one or more cells filling the viewport
| cell | description |
|---|---|
| portal-cell | onboarding: citizenship, gift, hud, cyb-map |
| cyberver-cell | learning: hud, mentors, learner, stats, faculties |
| oracle-cell | search: aip selector, mind, particle display, content feed |
aips
the top level. an aip (autonomous intelligent program) is a full-screen application built from cells. each aip is a complete experience: search (oracle), file management (brain), onboarding (portal), messaging (sense), wallet (sigma). aips own their routing, state management, and connection to the cybergraph. they are what the user sees and names
cyb/oracle · cyb/brain · cyb/portal · cyberver · cyb/sense · cyb/sigma · teleport · sphere · warp · aos/hfr
properties
| property | values |
|---|---|
| color | dark base, light foreground. 7 acid emotion colors from color-emotion spectrum: red (anger), orange (disgust), yellow (surprise), green (joy), blue (interest), indigo (sadness), violet (fear). see COLOR_AUDIT.md |
| typography | monospace, hierarchy through size: h1(32) h2(24) h3(20) body(16) caption(14) micro(12) |
| spacing | 8px grid. padding: 8, 16, 24. gaps: 24, 32, 48 |
| motion | 150ms ease state changes, 200ms ease-out glass depth. no decorative animation |
| responsive | desktop (>768) / mobile (<=768). atoms identical, molecules rearrange, commander always at bottom. see responsive |
| time | UTC 0, Unix epoch (1970) = year 0 of machine time. e.g. 2026 = year 56 |
interfaces
every component exposes:
- inputs: data, emotion, context
- outputs: action, state change, cyberlink
- states: default, hover, active, disabled (+ loading, error, empty, expanded for stateful components)
emotion overlays any state with a color signal
source tree
root/ knowledge graph pages (optica subgraph)
svg/
atoms/ SVG atoms with acid palette (32 files)
components/
0-atoms/ atom PNG assets from Sketch
images/ icon library (16x16)
1-molecules/ molecule PNG assets from Sketch
status
5 atoms. 22 molecules. 3 cells. 10 aips. 17 atom SVGs. 59 molecule SVGs. acid color palette (17 tokens). responsive rules defined
license
don't trust. don't fear. don't beg.