Olon Design System — Design Language

Design System

Design Language

A contract layer for the agentic web — and a design system built to communicate it. Every token, component, and decision is grounded in the concept of the holon: whole in itself, part of something greater.

Token Reference

All tokens defined in theme.json and bridged via index.css.

Token	CSS var	Value	Tailwind class
Backgrounds
background	--background	n/a	bg-background
card	--card	n/a	bg-card
elevated	--elevated	n/a	bg-elevated
Text
foreground	--foreground	n/a	text-foreground
muted-foreground	--muted-foreground	n/a	text-muted-foreground
Brand
primary	--primary	n/a	bg-primary / text-primary
primary-foreground	--primary-foreground	n/a	text-primary-foreground
Accent
accent	--accent	n/a	bg-accent / text-accent
Border
border	--border	n/a	border-border
border-strong	--border-strong	n/a	border-border-strong
Feedback
destructive	--destructive	n/a	bg-destructive
success	--success	n/a	bg-success
warning	--warning	n/a	bg-warning
info	--info	n/a	bg-info
Typography
font-primary	--theme-font-primary	n/a	font-primary
font-display	--theme-font-display	n/a	font-display
font-mono	--theme-font-mono	n/a	font-mono

Color System

Labradorite brand ramp + semantic layer. Dark-first. Every stop has a role.

Backgrounds

Base

n/a

bg-background

Surface

n/a

bg-card

Elevated

n/a

bg-elevated

Border

n/a

border-border

Brand Ramp — Labradorite

100

200

300

400

500

600brand

700

800

900

Accent — Parchment

Accent

n/a

text-accent

Feedback

Destructiven/a

Successn/a

Warningn/a

Infon/a

Typography

Three typefaces, three voices. Built on contrast.

Display · font-display

Merriweather Variable

Google Fonts

The contract layer

for the agentic web.

UI · font-primary

Geist

400 · 500

15px / 400

Machine-readable endpoints.

13px / 500

Schema contracts.

11px / 400 · muted

Governance, audit.

Code · font-mono

Geist Mono

import Olon from 'olonjs'

const page = Olon.contract('/about.json')

Spacing & Radius

Radius scale is deliberate — corners communicate hierarchy.

radius-sm · 4px

Badges, tags, chips.

radius-md · 8px

Inputs, buttons, inline.

radius-lg · 12px

Cards, panels, modals.

Mark & Logo

The mark is a holon: a nucleus held inside a ring. Two circles, one concept.

Mark · Dark

Mark · Mono

Logo Lockups

Standard (nav, sidebar ≥ 18px)

Hero display (marketing · ≥ 48px)

Button

Five variants. All use semantic tokens — no hardcoded colors.

Default (primary)

Accent (CTA)

Secondary (outline)

Ghost

Badge

Status, versioning, feature flags. Small but precise.

StableOSSv1.4NewDeployed

Input

Form elements. Precision over decoration.

Tenant slug

Schema version Invalid format

Must follow semver (e.g. 1.4.0)

Card

The primary container primitive. Three elevation levels.

Default · bg-card

JsonPages contract

Tenant: acme-corp · 4 routes · Last sync 2m ago

Active

Elevated · bg-elevated

OlonJS Enterprise

NX monorepo · Private cloud · SOC2 ready

Accent · border-primary bg-primary-900

Ship your first tenant in hours,
not weeks.

Code Block

Developer-first. Syntax highlighting uses brand ramp stops only.

olon.config.ts

import { defineConfig } from 'olonjs'

export default defineConfig({
  tenants: [{
    slug: 'olon-ds'
  }]
}