OpenCatalogi
DATA · STABLE
Anatomy
Three faces, one ink. Coloured per family, change four CSS variables and the prism retints.
- Top face, family-100. The "lit" plan-view face. Content lives here: glyph, name, optional pill stack. Always lightest.
- Left face, family-300. The mid-tone vertical. Slightly shaded, gives depth without lighting tricks.
- Right face, family-500. The deep vertical. Anchors the prism on the page.
- Ink, family-700. Text, glyph, pill outline. Body-text contrast on family-100 is >7:1 (AAA).
- No outer stroke. Edges between faces are 1.25px ink at 18% opacity, it reads as form, not as a drawn shape.
Six families
One family per category. Cobalt is reserved for the workspace (Nextcloud / your platform). Don't invent a seventh.
Workspace
cobalt
--c-cobalt-*
Data
coral
--c-coral-*
Process
lavender
--c-lavender-*
Documents
gold
--c-gold-*
Integrations
mint
--c-mint-*
Infra
gray
--c-gray-*
Sizes
Small for catalog tiles. Medium for diagram members. Large for hero clusters. XL for the workspace only, it always reads as the centre of gravity.
Small
96px · catalog tile
Medium
diagram
144px · diagram member
Large
+ pill stack
supports content
192px · hero member
Nextcloud
PLATFORM · WORKSPACE
files · users · auth
240px · workspace only
Platform base
The faint isometric ground that every cluster sits on. ~6% gray, slightly inset from the prisms, never a hard line. It anchors the cluster without competing.
Catalogi
data
Nextcloud
platform
Connector
integrations
States & modifiers
Coming-soon badge for prisms representing unreleased apps. Pill-stack for prisms that need to expose feature chips on the top face. Don't invent more, the prism does one job: a coloured node on a diagram.
Coming
DocuDesk
documents
.badge-soon
Larping
workflows
timers
audit
.pill-stack
Catalogi
DATA · STABLE
+ glyph