The visual language for weavegate interfaces, diagrams, documentation, images, and motion.

Deterministically replay the DB race, gate the deploy.

This repository is the canonical source for the weavegate brand and design system. It brings the logo, tokens, reusable components, visual guidelines, production prompts, UI compositions, and approved diagrams under one coherent set of rules.

The system is maintained alongside weavegate/weavegate. Product facts come from that repository; this one defines how those facts are presented.

Design principles

• Evidence first. Commands, diagnostics, traces, and verdicts are primary interface material rather than decoration.
• One brand accent. Weave teal identifies the project and controlled flow. It never substitutes for verdict meaning.
• States have fixed semantics. PASS is green, FAIL is red, FLAKY is amber, and informational context is blue.
• Text remains technical and readable. IBM Plex Sans carries prose and UI; JetBrains Mono carries commands, evidence, diagnostics, machine values, and code voice.
• Geometry stays restrained. Compact cards, hairline rules, small radii, clear hierarchy, and no gradients.
• Motion reflects determinism. Transitions are short and direct, without bounce, overshoot, or decorative looping.

What is included

Path	Contents
assets/	Outlined logos, gate marks, app icons, favicons, verdict badges, and social compositions
tokens/	Color, typography, spacing, border, elevation, motion, and semantic CSS tokens
components/	JSX primitives, type declarations, usage prompts, and renderable component cards
guidelines/	Renderable cards covering brand, color, type, spacing, states, illustration, and motion
ui-kits/	Constructed CLI and docs surfaces, plus an explicitly planned CI-integration composition
examples/	Design-system overview and approved Korean and English architecture diagrams
CONTENT.md	Product wording, command, diagnostic, evidence, and publishing rules
SKILL.md	Instructions for an agent producing weavegate visual work

Brand foundations

The five-part gate glyph is the primary mark. SVG files are the editable source because there is no Figma source file. The wordmark is stored as outlined paths, so official lockups render consistently without requiring the original font.

Use:

• logo-horizontal.svg on light surfaces;
• logo-horizontal-white.svg on dark surfaces;
• mark-primary.svg where the project name is already clear;
• app-icon-light-1024.png for the current GitHub organization avatar;
• the simplified favicons below 24 px.

Preserve one leg-width of clear space around the mark. Verdict marks are product semantics, not alternate brand colors. More asset-specific guidance lives in assets/README.md.

Using the tokens

Load the complete token set through styles.css:

<link rel="stylesheet" href="/path/to/weavegate-design/styles.css">

Or import only the modules a composition needs:

@import url("tokens/colors.css");
@import url("tokens/spacing.css");
@import url("tokens/typography.css");
@import url("tokens/semantic.css");

The tokens and JSX components are currently source assets, not a published npm package or stable public API. Copy or vendor the needed files and record the source commit when another repository consumes them.

Previewing the system

The HTML reference cards and UI kits load React, Babel, Lucide, and fonts from external CDNs. Serve the checkout over HTTP so browser-loaded JSX and relative assets resolve correctly:

python3 -m http.server 8765

Then open, for example:

• http://localhost:8765/examples/design-system-overview.html
• http://localhost:8765/components/core/core.card.html
• http://localhost:8765/ui-kits/cli/index.html
• http://localhost:8765/ui-kits/docs_site/index.html
• http://localhost:8765/ui-kits/ci_gate/index.html

The CI kit is an illustrative treatment of a planned integration. It is not a capture of currently shipped GitHub Action or pull-request behavior.

Producing diagrams, images, and video

Start from the tokens and guidelines rather than sampling colors from an output image. The approved architecture diagrams demonstrate the intended information density, card hierarchy, connector treatment, and scope statement:

• architecture-ko.png
• architecture-en.png

For flow diagrams, use solid teal arrows for configuration, execution, data, and evidence. Use dashed blue arrows only for sync-point execution-order control. For video, use the timing and easing values in tokens/motion.css.

Before publishing any visual, follow CONTENT.md. Commands, diagnostics, versions, outputs, and capability claims must match the current product. Planned work must be labeled planned, and constructed output must not be presented as captured output.

Asset workflow

1. Edit the canonical SVG rather than a PNG derivative.
2. Keep the gate geometry and element IDs stable where possible.
3. Regenerate PNG derivatives after changing an SVG source.
4. Check light and dark surfaces and the documented minimum size.
5. Verify product copy against weavegate/weavegate.
6. Preview the affected component, composition, or diagram.
7. Record any changed public usage in the same change.

Repository status

This repository is currently maintained as a private project resource. Its layout and documentation are intentionally suitable for a future public release, but the repository is not yet distributed under an open-source license.

Before changing its visibility to public for general reuse:

• choose and add a license for code, components, tokens, documentation, and visual assets;
• decide whether the weavegate name and logo need a separate trademark or brand usage policy;
• document the IBM Plex Sans, JetBrains Mono, Lucide, React, Babel, and CDN dependencies and their applicable licenses;
• add contribution and security guidance if outside contributions will be accepted;
• review generated and imported asset provenance in notes/;
• decide whether consumers should vendor files, use tagged releases, or install a packaged distribution.

Until those decisions are recorded, repository visibility should not be read as permission to reuse or redistribute its contents.