Design system / component catalog
Precise structure. Quiet expression.
A dark interface system for portfolios, research and long-form work. Static by default and explicit about state.
Release candidate
HTML + CSS / zero browser JavaScript
Canvas#090b0f
Surface#0d1118
Text#e8edf4
Signal#79dfcb
Secondary#aab3c0
Line#202833
Research#a9b8ff
Prototype#e0b972
Interface inventory
Core components
Actions
Buttons and links
State
Status indicators
In development
Prototype
Research
Feedback
Notice and tags
Evidence note. Claims should describe the present system, not the intended one.
Interactive software
In developmentA compact research workspace that turns scattered observations into an evidence trail.
View project →
An interactive model for inspecting how a constrained system changes over time.
View project →
A local-first notebook for quiet observation and deliberate synthesis.
View project →
| Project | Status | Evidence | Next gate |
|---|
| Atlas | In development | Working local system | Reproducible demo |
| Pulse | Research | Interactive model | Document assumptions |
| Field Notes | Prototype | Complete interaction | Accessibility review |
Editorial
Long-form specimen
Quiet interfaces are not empty interfaces. They are systems in which every visible distinction carries information.
Structure before decoration
The shell, spacing grid and type scale establish a durable reading order. Color is then free to communicate state instead of compensating for weak hierarchy.
Restraint is useful when it makes the product easier to understand.
A compact rule set
- Use one geometry for structures.
- Reserve signal color for meaning.
- Write limitations beside evidence.
:root {
--canvas: #090b0f;
--signal: #79dfcb;
}