A distinct point of view.
Display
3.5rem to 4.5rem · 500 · 1 line height · -0.04em tracking
Singular page statements and expressive product moments.
Design System Release 1.0
Mono
Monochrome, high-contrast, and content-spotlit. Built for media and creative tooling.
Ink and paper.
- Achromatic chrome
- Content carries color
- Bold typographic scale
Mono 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
System 03
- 01Achromatic chrome
- 02Content carries color
- 03Bold typographic scale
02 / Semantic colors
Light and dark roles
Light
- Background
oklch(1 0 0)The page canvas behind every surface.
- Foreground
oklch(0.145 0 0)Primary text and high emphasis symbols.
- Card
oklch(1 0 0)Grouped content and raised working surfaces.
- Muted
oklch(0.97 0 0)Subdued regions, secondary controls, and quiet fills.
- Muted Foreground
oklch(0.5 0 0)Supporting copy that remains readable.
- Border
oklch(0.922 0 0)Separators, control outlines, and structural rules.
- Primary
oklch(0.205 0 0)Primary actions, selection, and active emphasis.
- Primary Foreground
oklch(0.985 0 0)Content placed on the primary color.
- Destructive
oklch(0.55 0.21 27)Irreversible actions and critical errors.
- Success
oklch(0.5 0.13 155)Confirmed completion and healthy status.
- Warning
oklch(0.6 0.13 75)Caution that needs attention without blocking work.
- Info
oklch(0.55 0.12 230)Neutral guidance and informational status.
- Ring
oklch(0.44 0 0)Keyboard focus indication around interactive controls.
Dark
- Background
oklch(0.145 0 0)The page canvas behind every surface.
- Foreground
oklch(0.985 0 0)Primary text and high emphasis symbols.
- Card
oklch(0.205 0 0)Grouped content and raised working surfaces.
- Muted
oklch(0.269 0 0)Subdued regions, secondary controls, and quiet fills.
- Muted Foreground
oklch(0.708 0 0)Supporting copy that remains readable.
- Border
oklch(0.31 0 0)Separators, control outlines, and structural rules.
- Primary
oklch(0.985 0 0)Primary actions, selection, and active emphasis.
- Primary Foreground
oklch(0.145 0 0)Content placed on the primary color.
- Destructive
oklch(0.7 0.19 22)Irreversible actions and critical errors.
- Success
oklch(0.7 0.12 155)Confirmed completion and healthy status.
- Warning
oklch(0.78 0.12 75)Caution that needs attention without blocking work.
- Info
oklch(0.74 0.1 230)Neutral guidance and informational status.
- Ring
oklch(0.72 0 0)Keyboard focus indication around interactive controls.
03 / Typography
Role based type scale
Visual foundations
Heading
2.25rem to 3.5rem · 500 · 1.15 line height · -0.025em tracking
Section hierarchy and important grouped content.
Clear hierarchy makes complex product work easier to understand.
Body
0.9375rem to 1rem · 400 · 1.6 line height · 0em tracking
Reading text, explanations, and form guidance.
EVALUATED DIRECTION
Label
0.6875rem to 0.75rem · 600 · 1.3 line height · 0.08em tracking
Compact labels, metadata, and interface wayfinding.
npx agentkogei@latest add
Code
0.6875rem to 0.75rem · 400 · 1.5 line height · 0em tracking
Commands, values, identifiers, and technical evidence.
04 / Spacing
Spacing scale
- 2
0.5rem · Tight icon and inline relationships.
- 3
0.75rem · Compact control internals and paired labels.
- 4
1rem · Related content within one component.
- 6
1.5rem · Default control and card rhythm.
- 8
2rem · Distinct groups within a section.
- 12
3rem · Major sections and page level separation.
- 16
4rem · Large media group and page section separation.
- 24
6rem · Largest focal transitions around media and hero regions.
05 / Layout and responsive behavior
Constraints that preserve hierarchy
Frame one focal subject at a time, use stark scale changes for hierarchy, and keep chrome subordinate to content.
Maximum 72rem · Reading width 72ch · Columns 1/6/12 · Gutters 1/1.5/2.5rem
Mobile
320px and wider
Use one content column and preserve source order.
Tablet
768px and wider
Introduce paired regions only when each remains independently readable.
Desktop
1024px and wider
Use the full grid while keeping reading lines constrained.
Zoom
200% zoom
Allow controls and content to wrap without clipping or overlap.
Reflow
320px reflow
Retain every action and meaning in a single logical flow.
06 / Radius, borders, and elevation
Surface geometry and depth
Radius
Subtle · 0.5rem · Small indicators and restrained detail.
Control · 0.625rem · Buttons, fields, and compact interactive surfaces.
Panel · 1.125rem · Cards, panels, and larger grouped regions.
Pill · 999rem · Buttons and standalone inputs that form one control group.
Borders
Hairline · 1px · Quiet dividers and table structure.
Default · 1px · Controls and ordinary surface boundaries.
Strong · 2px · Selected, focused, or strongly separated regions.
Elevation
Flat · Default surfaces separated by spacing or borders.
Raised · Temporary emphasis and movable content.
Overlay · Dialogs, menus, and content above the working plane.
07 / Controls
Buttons and links
Use stark value contrast and compact labels so actions remain clear around visual work. Underline destinations and keep them visually distinct from adjacent labels.08 / Fields
Forms and inputs
Keep fields sparse, labels explicit, and validation aligned to the same visual axis. Use hard edges, compact spacing, and labels that remain distinct from values.09 / Containers
Cards and panels
Use strong scale shifts and clear edges to make the selected content unmistakable. Use panels for comparison, with rules and alignment carrying the hierarchy.10 / Wayfinding
Navigation
Keep the selected view explicit with text, border, and programmatic current state.11 / Data
Tables, lists, and data display
Use hard rules, stark alignment, and compact labels to make visual records comparable. Keep the comparison grid whole inside a labelled horizontal scroll region at narrow widths.| Frame | Format | State |
|---|---|---|
| Frame 040 | 4:3 | Archived |
| Frame 041 | 4:3 | Review |
| Frame 042 | 16:9 | Selected |
Selected frame details
- Crop16:9
Wide focal composition.
- Sequence03 of 12
Third frame in the working set.
- ExportReady
Print ready monochrome output.
12 / Feedback
Badges, alerts, and feedback states
Keep status terse, adjacent to the frame, and explicit about what changed. Combine each tone with a written state, distinct border, and recognizable symbol.- ArchivedThe frame is retained outside the active set
- ReviewThe frame needs a visual decision
- SelectedThe frame is in the active export
- MissingThe source frame is unavailable
Export ready
Every selected frame has complete metadata.
Source frame missing
Restore Frame 017 before exporting this sequence.
13 / Consequence
Dialogs and destructive actions
Frame the focused object clearly and keep the dialog actions compact. Keep the selected frame visible in the language and state how the sequence changes.Inspect frame details
Review the selected frame metadata without leaving the contact sheet.
- Escape closes inspection because no export or removal is in progress.
- Return focus to the frame details control.
Frame 042
The frame will leave the local export sequence.
This specimen can restore the frame because it has no persistence.
Frame 042 remains available.
13
Motion and reduced motion
Timing supports state changes and never starts without a Builder action.Motion timings
- feedback
- 100 ms
- transition
- 160 ms
- spatial
- 240 ms
Use direct focal movement with restrained timing and an immediately legible end state.
Reduced motion
Remove translation and scaling while preserving an immediate labelled state change.
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 every action reachable and operable in a logical source and tab order.
Focus
Show a persistent high contrast focus indicator and restore focus after modal interactions.
Contrast
Meet text, icon, control boundary, and state contrast in both supported color schemes.
Target size
Provide targets at least 24 by 24 CSS pixels with adequate spacing between adjacent actions.
Zoom
Preserve content and operation at 200 percent page zoom without overlap or clipping.
Reflow
Reflow to a 320 CSS pixel viewport without two dimensional page scrolling.
Forced colors
Retain boundaries, focus, selection, and status meaning when system colors replace authored colors.
Status communication
Announce asynchronous and local state changes in named status or alert regions without relying on color.
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