LoomCycle — Design System Reference

01

Brand foundation

3 official logos · light-mode only

Five chibi agents stand in a circle around a wooden loom. They are joyful, big-eyed, small-mouthed — friendly small beings cooperating. The loom is genuine craftsmanship: wooden frame, woven thread, gears and bobbins as functional mechanisms.

Typographic wordmarkHero · page header · footer

Square primaryFavicon · app icon · social square

Wide social cardOG image · GitHub preview

02

Color palette

WCAG-AA verified

Primary palette

#FAF8F3

--lc-backgroundcream paper

Page canvas. Warmer than white — signals "craft, not corporate."

#1A1A2E

--lc-text15.4:1 ✓

Body, headlines. Near-black with cool tint matches the wordmark ink.

#8B4513

--lc-loom-wood6.4:1 ✓

Primary CTAs, brand-anchor accents. The wooden loom apparatus.

#7B4B94

--lc-thread-purple6.5:1 ✓

Links, secondary CTAs, "shipped" thread tags. The thread accents.

Agent palette · five characters

#3D8EE8

--lc-agent-blueillustration only

Memory primitive. Never small text on cream (3.4:1).

#F5A623

--lc-agent-orangehighlight

Channel primitive. War-story section anchor.

#F4C430

--lc-agent-yellowshipped tag

AgentDef primitive. "Shipped vX.Y" tag fills.

#6FCF45

--lc-agent-greensuccess

Evaluation primitive. Production-ready signals.

#5BC0EB

--lc-agent-tealinfo

Context primitive. Information / secondary action.

Neutrals & supporting

#E3F2FD

--lc-subtle-bg

Schematic-blueprint section tint behind the agents.

#B0D8F0

--lc-border-soft

Subtle borders, blueprint trace lines.

#52525B

--lc-text-muted6.8:1 ✓

Captions, meta info, body second-tier.

03

Typography

Self-hosted · 1.25 modular scale

Outfit for display — geometric, rounded, friendly-but-serious. Inter for body — the neutral workhorse the senior-dev audience reads in by default. JetBrains Mono for code, tool calls, and engineering-aesthetic moments.

5xl Loomcycle 72px · 800 · -0.02em

4xl · hero The kernel of an agentic OS. 56px · 700

3xl · h1 Five primitives 40px · 700

2xl · h2 The trust model 32px · 600

xl · h3 Memory · Channel · Context 25px · 600

lg · lead UNIX-style operator/caller trust separation. Default-deny everything. 20px · 400

base One Go binary owns the LLM tool-use loop end-to-end. No vendor SDK in the loop. 16px · 400 · 1.6

sm · meta Apache-2.0 · v0.8.14 · Active development through v1.0 14px · 400

mono {"tool":"memory","input":{"op":"set"}} 14px · 400

04

Spacing & rhythm

8px base grid

--lc-space-1

8px

--lc-space-2

16px

--lc-space-3

24px

--lc-space-4

32px

--lc-space-6

48px

--lc-space-8

64px

--lc-space-12

96px

Page max-width 1080px. Single column. Generous margins for the "paper / craft" feel — density contradicts the agents-have-room-to-play narrative.

05

The five agents

stub set · designer to replace pre-v1.0

Blue

memory · default action

Orange

channel · highlight

Yellow

agentdef · shipped

Green

evaluation · success

Teal

context · info

06

Components

building blocks for the landing page

CTA buttons

Read the architecture → View on GitHub → Read the migration story →

Status badges

Shipped v0.8.0 In flight v0.8.15 Production-validated Apache-2.0 v0.8.14

Inline code & links

Caller-authoritative allowed_hosts. The bearer token is the authority. Operator config is the floor; callers can narrow per-request but never widen.

Code block · tool call

# a real memory tool call
$ curl -N http://127.0.0.1:8787/v1/runs \
    -H "Authorization: Bearer $TOK" -d @- <<EOF
{
  "tool": "memory",
  "input": { "op": "set",
            "scope": "user",
            "key": "last_seen",
            "value": "2026-05-14" }
}
EOF

Primitive card

Memory

Persistent state per agent or per user. Atomic incr. TTL. Cross-run continuity.

Shipped v0.8.0

Channel

Persistent inter-agent message bus. Publish; subscribe; no orchestrator handoff.

Shipped v0.8.4

AgentDef

Agents fork themselves into versioned definitions with lineage tracking.

Shipped v0.8.5

07

Aesthetic principles

playful surface · serious substance

✓ Do

Use agent characters as illustration accents — one color per primitive.
Loom-wood primary CTAs · thread-purple secondary & links.
Generous whitespace. Agents need room to play.
Rounded corners 8–12px on cards and CTAs.
Cream canvas as default. Pure white reads sterile.

✗ Don't

No stock illustrations. The brand has its own characters.
No gradients — especially not the SaaS purple-to-pink cliché.
No carousels, parallax, or scroll-triggered animation beyond gentle fade.
No modals, popups, or interstitials.
No shadows heavier than 0 2px 8px rgba(26,26,46,0.08).