Loria Component Library

A design system for collaborative intelligence

6 Tokens 5 Primitives 4 Molecules 6 Patterns

Design Tokens

Color

Semantic oklch colors, dark mode, high contrast

Space

Fluid spacing with clamp()

Typography

System fonts, fluid scaling

Aa

Motion

Expressive easing, reduced motion

Primitives

Text

Semantic text: headline, title, body, caption, label

Surface

Background container with grain texture

Stack

Flexbox layout (vertical/horizontal)

Spacer

Intentional whitespace

Icon

SVG container with a11y

Molecules

Badge

Status indicator (neutral/success/warning/error/info)

Neutral Success Warning

Button

Action trigger with loading state

Input

Form field with validation states

Avatar

Identity display with presence

Loria Patterns

Components mapped to Loria protocol entities

Identity

IdentityBadge

Ed25519 keypair display with truncation

Actor

ActorSwitcher

Multi-persona selector (actor-agnostic)

Biome

BiomeShell

Personal container layout

Rhizome

RhizomeTree

Branching visualization (diverges, never merges)

Node

NodeCard

Atomic content unit (string | null)

Request

RequestFlow

Consent-based turn-taking UI

Compositions

OnboardingFlow

6-step identity creation wizard

BiomeDashboard

Personal space overview

RequestThread

Consent-based conversation

Example Apps

Simple Chat

P2P messaging with RequestFlow

Personal Biome

Biome management dashboard

Request Manager

Request queue and consent flows