RAGBAZ Design System

RAGBAZ

// design system

RAGBAZ Design System

docs/products/ragbaz-design-system

Warm solarized-dark / gruvbox-dark-warm aesthetic with orange ember as the primary accent and cyan-blue as the secondary accent. All RAGBAZ products, documentation, and marketing surfaces follow this system.

COLORS · TYPOGRAPHY · SPACING · COMPONENTS · BRAND VOICE

The design system codifies the brand vocabulary for all RAGBAZ surfaces. It is derived from the MATCHES studio codebase and governs all products, documentation, and marketing surfaces. Click any hex value to copy it.

---

Design Philosophy

RAGBAZ builds for operators, not consumers. The aesthetic discipline is not decoration — it is a statement of values:

• Clarity over charm — tools read like a well-maintained configuration file
• Legibility over delight — content hierarchy is structural, not decorative
• Substance over surface — every visual decision carries semantic weight

The emotional register is warm precision — the feeling of a terminal configured exactly right. #f3c46c (orange ember) against dark stone is the color of a desk lamp at 2 a.m., of work that matters to the person doing it.

Design Constraints

The following are outside the vocabulary — not style choices you can opt back into:

Glassmorphism backdrop-filter blur rounded-full pills Glow shadows (blur > 2px) Gradient backgrounds on surfaces Decorative animations

---

Core Tokens

Backgrounds

Backdrop stack from deepest (page void) to highest chrome.

Backdropsdeeper → shallower

Borders

Hairline to strong divider.

Borders

Text

Warm cream scale, hi to low emphasis.

Texthi → low emphasis

Brand — Orange Ember (Primary)

Signature accent — section heads, carets, key lines, wordmark.

Orange Emberprimary brand

Brand — Cyan-Blue (Secondary)

Links, info accents, logo teal.

Cyan Bluesecondary brand

Semantic — Gruvbox Palette

Status and semantic feedback colors.

Semantic

Controls & Chrome

Button borders and chrome tokens — dark gray default, warm/cool contextual variants.

Controls

--btn-border-warm and --btn-border-cool resolve to their respective brand accent (orange-1 / blue-1) — included here for a complete token inventory.

---

Typography

Type Scale

--t-display44pxAa Display

--t-h128pxAa Heading 1

--t-h220pxAa Heading 2

--t-h316pxAa Heading 3

--t-body14pxAa Body text specimen

--t-small12pxAa Small label

--t-micro11pxAa micro caption

Font Families

Property	Value
Font Mono	"Intel One Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace
Font Sans	"Noto Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif
Font Serif	"Noto Serif", "Iowan Old Style", Georgia, serif

Line Heights & Tracking

Token	Value
--lh-tight	1.15
--lh-snug	1.35
--lh-body	1.55
--lh-prose	1.7
--tracking-tight	-0.01em
--tracking-wide	0.06em
--tracking-allcaps	0.12em

---

Spacing

4px grid from tiny gap to generous section margin.

Spacing Scale

---

Radii

Border Radii

---

Shadows

Shadow Glowscolor-bearing shadow tokens

--shadow-10 1px 0 rgba(0,0,0,0.4) — subtle 3D separation

--shadow-20 4px 18px rgba(0,0,0,0.45) — elevated surfaces

--shadow-glow0 0 0 1px rgba(243,196,108,0.25) — orange active caret

--shadow-glow-blue0 0 0 1px rgba(122,184,255,0.25) — blue focus ring

--shadow-glow

--shadow-glow-blue

---

Motion

Token	Value
--dur-fast	120ms
--dur-base	200ms
--dur-slow	400ms
--ease-out	cubic-bezier(0.22, 1, 0.36, 1)
--ease-snap	cubic-bezier(0.55, 0, 0.1, 1)

Animations limited to hover transitions, focus rings, and content visibility (fade in/out). No decorative or continuous animations.

---

Components

Design Elements

Component	Description
Hero	Document masthead — marque, tagline, title, axes
Plate	Titled section with domain tag + number
Callout	Accent-bordered aside (green/blue/orange/purple)
Lead	Lead paragraph (size 1 or 2)
Note	Muted note paragraph
SpecTable	Token / value / note reference table
DomainChips	Four highlight-domain legend chips

Interactive Widgets

Component	Description
Tabs	Content panel switching with animated indicator
Admonition	Five types: note, tip, info, warning, danger
Steps	Numbered step walkthrough
Reveal	Expand/collapse content block
ComposeStack	docker-compose collection as folding container
Plantuml	UML diagram renderer
ColorPalette	Color swatches with click-to-copy hex

MATCHES Studio

Component	Description
PointCloudSphere	3D point-cloud sphere — drag to orbit, compass/pitch monitors, vector toggles
BoneLayout	MATCHES skeleton armature + per-bone timeline lanes with keyframe markers

Infrastructure

Component	Description
ComposeSystemView	Full docker-compose topology with services, volumes, networks, env, ports

---

MATCHES Studio Demos

Point-Cloud Sphere

Two modes: interactive (drag to orbit, compass/pitch monitors, vector toggles) and view (auto-rotating, no UI overlays, controlled via props).

mode="interactive"

cloud · 720 pts

drag

readout

yaw

325.6°

pitch

20.1°

monitors

yaw monitor

tracks heading

vectors

X · orangeY · greenZ · blue

mode="view"

The interactive mode shows compass, pitch monitor, and vector toggles alongside the 720-point Fibonacci sphere. The view mode strips all UI and drives rotation from yawSpeed / pitchSpeed props — suitable for hero sections or ambient background visuals.

Bone Layout View

The MATCHES stick-figure skeleton (15 joints, 14 bones) with side-colored armature (blue left, orange right, green center). Below is the per-bone timeline with diamond keyframe markers — drag the scrubber to move the playhead across all lanes.

Bone ArmatureMATCHES skeleton · 15 joints · 14 bones

left · blueright · orangecenter · green

Timeline Lanesper-bone keyframe markers

spine

head

uArmL

lArmL

uArmR

lArmR

uLegL

lLegL

uLegR

lLegR

time0.50s

---

Component Library

For component documentation, visit:

• Bazweave Kit — @ragbaz/bazweave-kit — Description · Widgets Demo
• Diabaz — @ragbaz/diabaz — Description
• MailGuard — @ragbaz/mailguard — Description
• RAGAction — @ragbaz/ragaction — Description

---

Repository Structure

ragbaz-design-system/
├── README.md                    Full brand voice guide (425 lines)
├── colors_and_type.css          All CSS tokens (425 lines)
├── SKILL.md                     Portable skill manifest for agent use
├── preview/                     Static HTML preview cards (37 files)
│   ├── colors-surface.html
│   ├── colors-text.html
│   ├── colors-orange.html
│   ├── colors-blue.html
│   ├── colors-borders.html
│   ├── colors-semantic.html
│   ├── type-scale.html
│   ├── type-body.html
│   ├── type-headings.html
│   ├── spacing-scale.html
│   ├── buttons.html
│   ├── cards-variants.html
│   ├── form-controls.html
│   ├── pills.html
│   ├── shadows.html
│   ├── radius.html
│   ├── motion.html
│   ├── iconography.html
│   └── 17 more...
├── ui_kits/matches-studio/      Interactive click-through UI kit
└── assets/                      Logo, marketing layouts

Usage

The design system CSS is imported into projects directly:

@import "../path/to/ragbaz-design-system/colors_and_type.css";

The Docusaurus documentation atlas (doc.ragbaz.cc) imports it via:

@import "../../../ragbaz-design-system/colors_and_type.css";

Brand Voice

The README at ragbaz-design-system/README.md also serves as the brand voice guide, covering:

• Voice principles: lowercase, terse, refuses ornament
• Colors: semantic mapping and usage rules
• Typography: which faces for which contexts
• Spacing: the 8-step grid and layout principles
• Iconography: inline SVG only (no icon libraries)
• Content fundamentals: headings, lists, code blocks, links

Relationship to Products

• MATCHES — the design system is derived from the MATCHES studio UI and governs all MATCHES surfaces
• doc.ragbaz.cc — the Atlas imports and follows the design system
• Bazweave Kit — the component library uses design tokens from this system
• Future products — all new RAGBAZ-branded work should follow this system per AGENTS.md policy