A distinct point of view.
Display
2.5rem to 4rem · 600 · 1 line height · -0.045em tracking
Singular product outcomes and major chapter statements.
Design System Release 1.0
Relay
Brisk, structured, and momentum-driven SaaS. Built for workflow and automation products.
Momentum stays visible.
- Visible routes through work
- Chartreuse reserved for momentum
- Evidence attached to action
Relay is retrieved anonymously from AgentKogei's public Design Systems collection. The CLI shows the absolute target and the exact change before it writes anything.
Design System Preview / Rendered evidence
One direction across the whole product.
Preview is evidence, not the Design Contract. It demonstrates direction and evaluated coverage; the Design Contract itself is public, so you can read every word before you add it.
01 / Principles
Principles and signature
Route 05
- 01Visible routes through work
- 02Chartreuse reserved for momentum
- 03Evidence attached to action
02 / Semantic colors
Light and dark roles
Light
- Background
#f7f8f2The neutral route behind every working surface.
- Foreground
#171a12Primary copy, strong labels, and high emphasis symbols.
- Card
#ffffffFocused working planes and bounded evidence regions.
- Muted
#ecefe4Supporting bands, inactive stages, and secondary controls.
- Muted Foreground
#555d4dContext, timestamps, and secondary evidence that remain readable.
- Border
#b8beadRoute boundaries, control outlines, and internal stage rules.
- Primary
#4f6800The active route, primary action, focus, links, and current selection.
- Primary Foreground
#ffffffReadable content placed on the primary cue.
- Destructive
#aa2634Irreversible actions, failed operations, and critical errors.
- Success
#35671bVerified completion and healthy outcomes, distinct from active progress.
- Warning
#775500Attention that may delay progress without representing failure.
- Info
#245d91Neutral instructions, queued state, and explanatory feedback.
- Ring
#5d7900Keyboard focus around every interactive control.
Dark
- Background
#141610The neutral route behind every working surface.
- Foreground
#f3f5ecPrimary copy, strong labels, and high emphasis symbols.
- Card
#1c1f18Focused working planes and bounded evidence regions.
- Muted
#282c22Supporting bands, inactive stages, and secondary controls.
- Muted Foreground
#b6bcaaContext, timestamps, and secondary evidence that remain readable.
- Border
#474d3eRoute boundaries, control outlines, and internal stage rules.
- Primary
#ceff00The active route, primary action, focus, links, and current selection.
- Primary Foreground
#15190aReadable content placed on the primary cue.
- Destructive
#ff7a78Irreversible actions, failed operations, and critical errors.
- Success
#9bd467Verified completion and healthy outcomes, distinct from active progress.
- Warning
#efc15dAttention that may delay progress without representing failure.
- Info
#8ec5f4Neutral instructions, queued state, and explanatory feedback.
- Ring
#ceff00Keyboard focus around every interactive control.
03 / Typography
Role based type scale
Visual foundations
Heading
1.75rem to 2.5rem · 600 · 1.1 line height · -0.03em tracking
Page, section, and decision region hierarchy.
Clear hierarchy makes complex product work easier to understand.
Body
0.875rem to 1rem · 400 · 1.6 line height · 0em tracking
Interface explanations, guidance, and readable product copy.
EVALUATED DIRECTION
Label
0.6875rem to 0.75rem · 600 · 1.35 line height · 0.1em tracking
Stage indices, compact metadata, counters, and wayfinding.
Metric
Metric
1.5rem to 2rem · 600 · 1.05 line height · -0.025em tracking
Progress totals and operational summaries with visible units.
npx agentkogei@latest add
Code
0.75rem to 0.8125rem · 400 · 1.5 line height · 0em tracking
Identifiers, timestamps, commands, and technical values.
04 / Spacing
Spacing scale
- 1
0.25rem · Tight icon and label relationships.
- 2
0.5rem · Compact inline groups and status details.
- 3
0.75rem · Control internals and paired metadata.
- 4
1rem · Default component and field rhythm.
- 5
1.25rem · Process band padding and related control groups.
- 6
1.5rem · Cards, panels, and distinct component sections.
- 8
2rem · Major product groups and evidence separation.
- 12
3rem · Chapter transitions and compact marketing sections.
- 16
4rem · Major product and marketing composition breaks.
05 / Layout and responsive behavior
Constraints that preserve hierarchy
Arrange sequential process bands on a stable route, alternate concise outcomes with evidence, and keep active work beside its context.
Maximum 92rem · Reading width 68ch · Columns 1/6/12 · Gutters 1/1.5/2rem
Mobile
320px and wider
Stack stages in source order and keep the active action beside its explanation.
Tablet
768px and wider
Pair a stage summary with evidence only when both remain independently readable.
Desktop
1024px and wider
Use the twelve column route for alternating chapters, a working region, and compact context.
Zoom
200% zoom
Let stage labels, actions, and evidence wrap without clipping or overlap.
Reflow
320px reflow
Convert the route to one vertical sequence while retaining every status and action.
06 / Radius, borders, and elevation
Surface geometry and depth
Radius
Subtle · 0.25rem · Stage markers, badges, and restrained detail.
Control · 0.25rem · Buttons, fields, menu items, and compact interactive surfaces.
Panel · 0.375rem · Cards, process bands, dialogs, and evidence panels.
Pill · 999rem · Short status badges only.
Borders
Hairline · 1px · Internal routes, dividers, and table structure.
Default · 1px · Controls and ordinary working boundaries.
Strong · 2px · Focus, active stages, and consequential separation.
Elevation
Flat · Default surfaces separated by boundaries and spacing.
Raised · Movable queue items and temporary emphasis.
Overlay · Dialogs, menus, and temporary content above the route.
07 / Controls
Buttons and links
Use one filled primary cue per decision region and keep secondary actions bounded but quiet. Use specific destinations, persistent underlines, and the primary cue only for actionable text.08 / Fields
Forms and inputs
Group fields by outcome, keep help persistent, and place validation in the same reading path. Align fields to the route, keep labels visible, and reserve stable space for help and validation.09 / Containers
Cards and panels
Use one card for one handoff and attach compact evidence to the decision it supports. Use internal rules and stage labels instead of nesting separate cards for each route item.10 / Wayfinding
Navigation
Name the current stage in text, preserve sequence, and keep every destination reachable by keyboard.11 / Data
Tables, lists, and data display
Keep stage, ownership, freshness, and action context aligned with each work item. Preserve the complete comparison in a labelled keyboard reachable scroll region when priority columns cannot fit.| Work item | Stage | Owner · updated |
|---|---|---|
| Launch brief | Review | A. Rivera · 8 min ago |
| Release notes | Ready | M. Chen · 21 min ago |
| Campaign plan | Blocked | S. Patel · 1 hr ago |
Current route summary
- BriefComplete
Scope and owner are confirmed.
- ReviewCurrent
Two decisions remain open.
- PublishWaiting
Begins after approval.
12 / Feedback
Badges, alerts, and feedback states
Attach state to the affected work item, preserve existing evidence, and include the next useful recovery. Pair every status color with a label, icon, boundary, or stage position.- WaitingThe route has not reached this stage
- CurrentThis stage owns the next valid action
- CompleteThe stage finished with a verified result
- AttentionA named concern needs review
- BlockedA failed requirement prevents progress
Route ready to continue
Every required review has a verified result.
Owner response required
Resolve the missing approval before the route can continue.
13 / Consequence
Dialogs and destructive actions
Keep the handoff summary concise, place safe review first, and preserve the originating context. Repeat the route name, consequence, and real recovery status before the destructive boundary.Confirm route handoff
Review the next owner, due time, and included work before continuing.
- Escape closes the dialog because the handoff is not applied until confirmation.
- Return focus to the handoff control that opened the dialog.
Launch route
Pending stages and their unsubmitted handoff context will be removed.
This preview action is reversible and changes only local specimen state.
Launch route remains available.
13
Motion and reduced motion
Timing supports state changes and never starts without a Builder action.Motion timings
- feedback
- 120 ms
- transition
- 190 ms
- spatial
- 260 ms
Move attention along the route with short axis aligned transitions and no ambient or continuous motion.
Reduced motion
Remove translation, scaling, smooth scrolling, and loops while preserving immediate labelled route changes.
14
Accessibility guidance
Complete accessibility direction for the Design System Preview.Semantics
Use native landmarks, headings, controls, tables, lists, and status regions before adding ARIA.
Keyboard
Keep route navigation, stage actions, overflow regions, menus, and dialogs fully operable in logical source order.
Focus
Use a persistent two pixel focus indicator and restore focus after every modal interaction.
Contrast
Measure text, controls, boundaries, status, and focus in both supported color schemes.
Target size
Provide targets at least 24 by 24 CSS pixels with adequate spacing and prefer 44 pixels for primary touch actions.
Zoom
Preserve every status, label, and action at 200 percent page zoom and 400 percent browser zoom.
Reflow
Reflow the route to 320 CSS pixels without two dimensional page scrolling.
Forced colors
Retain boundaries, active stage, focus, selection, and feedback when system colors replace authored colors.
Status communication
Announce async outcomes intentionally and never rely on color, position, or motion alone.
Preview
The Design System Preview is a public visual and descriptive specimen of evaluated direction.
Design Contract
The complete Design Contract is the public raw Markdown installed into a Project.
Evaluation evidence
Evaluation metadata and raw evidence paths remain public so coverage can be inspected.
Read the methodologyRelease 1.0