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]]
- 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
four levels, each built from the previous:
atoms → molecules → cells → aips
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 |
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) | — |
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 |
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]]
| 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 |
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
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
5 atoms. 22 molecules. 3 cells. 10 aips. 17 atom SVGs. 59 molecule SVGs. acid color palette (17 tokens). responsive rules defined
don't trust. don't fear. don't beg.