Kerogeni v0.1
A source layer for coherent product interfaces.
A deliberately small shared language for Operably, Edge, Traceoil Insights, and Contabilidad Personal.
Common conventions make a new screen easier to build, review, and use.
Foundations
Semantic tokens before brand decoration.
Components
Adopted upstream, owned in this repository.
Patterns
The repeated decisions around a primitive.
Foundations
Use intent, not raw color.
Components consume semantic tokens such as background, muted,
and primary. Product teams should too.
background
Canvas and page surface
card
Contained information
primary
Decisive action
muted
Supporting context
Core pattern
App shell: two layers, one mental model.
The top bar answers “where can I go across the product?” The sidebar answers “what can I do in this area?” Controls that affect only the current page stay in the content header.
01
Primary navigation
Persistent destinations across the product.
02
Contextual navigation
Tasks and views within the selected area.
03
Page controls
Filters and actions, located with their page.
Core pattern
A contextual page
Page header
One location for a page’s identity, supporting context, and the actions that belong to it.
Component inventory
Adopt only what a product needs.
Start with these primitives and two shared patterns.
| Component | Kind | Status |
|---|---|---|
| AppShell | Pattern | Core |
| PageHeader | Pattern | Core |
| Button | Action | Adopted |
| Sidebar + Sheet | Navigation | Adopted |
| Table | Data display | Adopted |
| Field + Input | Forms | Adopted |
| Badge | Data display | Adopted |