A distinct point of view.
Display
2.5rem to 4.5rem · 500 · 1 line height · -0.03em tracking
Page titles, collection chapters, and singular editorial statements.
Design System Release 1.0
Cabinet
Spacious editorial catalogs with context attached to every record. Built for archives, libraries, editorial collections, and knowledge products.
Every record keeps its context.
- Air around consequential records
- Captions attached to evidence
- Vermilion reserved for wayfinding
Cabinet 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
Register 06
- 01Air around consequential records
- 02Captions attached to evidence
- 03Vermilion reserved for wayfinding
02 / Semantic colors
Light and dark roles
Light
- Background
#f7f3ebThe warm open field behind collections, reading, and navigation.
- Foreground
#1d1915Primary copy, editorial headings, strong labels, and meaningful symbols.
- Card
#fffdf8Bounded reading surfaces, dialogs, and records that require independent action.
- Muted
#ebe5daSupporting registers, inactive filters, metadata bands, and quiet placeholders.
- Muted Foreground
#625a50Captions, provenance, dates, and supporting context that remain readable.
- Border
#bdb4a5Hairline registers, table groups, field outlines, and collection boundaries.
- Primary
#9e2d17Links, current selection, keyboard focus support, and decisive actions.
- Primary Foreground
#ffffffReadable content placed on a filled primary action.
- Destructive
#9f2636Irreversible loss, failed operations, and critical record errors.
- Success
#37643bVerified completion and healthy results, distinct from primary wayfinding.
- Warning
#765400Attention that needs review without representing a failed operation.
- Info
#365f7bNeutral instructions, collection context, and explanatory feedback.
- Ring
#a8321bKeyboard focus around every interactive control.
Dark
- Background
#171410The warm open field behind collections, reading, and navigation.
- Foreground
#f4eee4Primary copy, editorial headings, strong labels, and meaningful symbols.
- Card
#211d18Bounded reading surfaces, dialogs, and records that require independent action.
- Muted
#2c2721Supporting registers, inactive filters, metadata bands, and quiet placeholders.
- Muted Foreground
#c4baacCaptions, provenance, dates, and supporting context that remain readable.
- Border
#5a5248Hairline registers, table groups, field outlines, and collection boundaries.
- Primary
#ff8066Links, current selection, keyboard focus support, and decisive actions.
- Primary Foreground
#27100aReadable content placed on a filled primary action.
- Destructive
#ff8792Irreversible loss, failed operations, and critical record errors.
- Success
#8fc692Verified completion and healthy results, distinct from primary wayfinding.
- Warning
#e3bc65Attention that needs review without representing a failed operation.
- Info
#91bdd8Neutral instructions, collection context, and explanatory feedback.
- Ring
#ff8066Keyboard focus around every interactive control.
03 / Typography
Role based type scale
Visual foundations
Heading
1.75rem to 2.75rem · 500 · 1.08 line height · -0.02em tracking
Section titles, record groups, and important reading landmarks.
Clear hierarchy makes complex product work easier to understand.
Body
0.9375rem to 1.0625rem · 400 · 1.65 line height · 0em tracking
Explanations, interface guidance, record descriptions, and sustained reading.
EVALUATED DIRECTION
Label
0.6875rem to 0.75rem · 600 · 1.35 line height · 0.09em tracking
Categories, counts, dates, provenance, and compact wayfinding.
Metric
Metric
1.5rem to 2rem · 600 · 1.05 line height · -0.025em tracking
Meaningful collection totals and measured values with visible units.
npx agentkogei@latest add
Code
0.75rem to 0.8125rem · 400 · 1.5 line height · 0em tracking
Record identifiers, commands, machine values, and checksums.
04 / Spacing
Spacing scale
- 1
0.25rem · Tight icon, label, and status relationships.
- 2
0.5rem · Caption metadata and compact inline groups.
- 3
0.75rem · Control internals and paired record details.
- 4
1rem · Default field rhythm and related controls.
- 6
1.5rem · Card padding and distinct component groups.
- 8
2rem · Record internals and working surface separation.
- 12
3rem · Collection groups and compact chapter transitions.
- 16
4rem · Major product groups and editorial transitions.
- 24
6rem · Open specimen fields and full collection chapters.
05 / Layout and responsive behavior
Constraints that preserve hierarchy
Pair concise editorial context with open record fields and keep every caption, state, and action attached to its object.
Maximum 88rem · Reading width 68ch · Columns 1/6/12 · Gutters 1/1.5/2rem
Mobile
320px and wider
Stack records in source order and place each caption immediately after its object.
Tablet
768px and wider
Pair context with one featured record only when both retain a useful reading measure.
Desktop
1024px and wider
Use the twelve column field for editorial context, featured records, and a sparse supporting register.
Zoom
200% zoom
Let headings, captions, filters, and actions wrap without clipping or separating from their records.
Reflow
320px reflow
Convert every collection to one complete vertical register without losing metadata or actions.
06 / Radius, borders, and elevation
Surface geometry and depth
Radius
Square · 0rem · Hairline registers, tables, and structural collection boundaries.
Control · 0.25rem · Buttons, fields, menus, and compact interactive surfaces.
Panel · 0.375rem · Dialogs and bounded reading surfaces that require separation.
Borders
Hairline · 1px · Captions, collection registers, and internal table groups.
Default · 1px · Controls, cards, and ordinary working boundaries.
Strong · 2px · Focus, current selection, and consequential separation.
Elevation
Flat · Default records and surfaces organized by space and rules.
Raised · Movable records and temporary emphasis within a working collection.
Overlay · Dialogs, menus, and temporary content above the collection.
07 / Controls
Buttons and links
Use one filled primary action per decision region and keep secondary actions defined but quiet. Use specific destinations, persistent underlines, and the primary cue only for actionable text.08 / Fields
Forms and inputs
Group fields around the record they describe, keep help persistent, and place validation in the same reading path. Keep labels visible, align fields to the reading register, and reserve stable space for help and validation.09 / Containers
Cards and panels
Use a card only when a record needs an independent action or background; ordinary specimens stay in the open field. Use one rule and aligned captions instead of separate containers for every register item.10 / Wayfinding
Navigation
Name the current section in text, preserve reading order, and keep every destination reachable by keyboard.11 / Data
Tables, lists, and data display
Keep record title, type, provenance, freshness, and actions aligned in one readable register. Preserve the complete comparison in a labelled keyboard reachable scroll region when priority columns cannot fit.| Record | Type | Context · updated |
|---|---|---|
| Field note 24 | Document | Research desk · today |
| Oral history 08 | Audio | Archive team · yesterday |
| Image study 12 | Image | Collections · 3 days ago |
Current collection summary
- FeaturedReady
The lead record has complete context.
- RecentReview
Two additions are awaiting review.
- UnresolvedAttention
One record needs a source note.
12 / Feedback
Badges, alerts, and feedback states
Attach state to the affected record, preserve existing context, and include the next useful recovery. Pair every status color with a label, icon, boundary, or explicit state text.- DraftThe record remains editable and unpublished
- In reviewThe record is being checked for completeness
- ReadyThe record has a verified complete result
- AttentionA named concern needs review
- UnavailableA failed requirement prevents publication
Collection ready to archive
Every required record has complete context.
Source note required
Add the missing context before archiving this record.
13 / Consequence
Dialogs and destructive actions
Keep the record summary concise, place safe review first, and preserve the originating context. Repeat the collection name, consequence, and real recovery status before the destructive boundary.Confirm record publication
Review the title, collection, visibility, and included context before continuing.
- Escape closes the dialog because publication does not occur until confirmation.
- Return focus to the publication control that opened the dialog.
Field notes collection
Unpublished records and their context notes will be removed.
This preview action is reversible and changes only local specimen state.
Field notes collection remains available.
13
Motion and reduced motion
Timing supports state changes and never starts without a Builder action.Motion timings
- feedback
- 120 ms
- transition
- 180 ms
- spatial
- 240 ms
Preserve the relationship between a record and its caption with short direct transitions and no ambient motion.
Reduced motion
Remove translation, scaling, smooth scrolling, and loops while preserving immediate labelled collection changes.
14
Accessibility guidance
Complete accessibility direction for the Design System Preview.Semantics
Use native landmarks, headings, controls, tables, lists, figures, and status regions before adding ARIA.
Keyboard
Keep collection navigation, filters, record 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, rules, 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 caption, label, filter, and action at 200 percent page zoom and 400 percent browser zoom.
Reflow
Reflow the collection to 320 CSS pixels without two dimensional page scrolling.
Forced colors
Retain rules, current selection, focus, and feedback when system colors replace authored colors.
Status communication
Announce asynchronous 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