A distinct point of view.
Display
2.25rem to 4.5rem · 500 · 1 line height · -0.04em tracking
Singular page statements and expressive product moments.
Design System Release 1.0
Editorial
Warm, spacious, and content-forward SaaS. Built for knowledge and content products.
Ideas need room.
- Editorial hierarchy
- Warm paper surfaces
- Spacious reading rhythm
Editorial 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
Volume 01
- 01Editorial hierarchy
- 02Warm paper surfaces
- 03Spacious reading rhythm
02 / Semantic colors
Light and dark roles
Light
- Background
oklch(0.975 0.014 82)The page canvas behind every surface.
- Foreground
oklch(0.22 0.025 48)Primary text and high emphasis symbols.
- Card
oklch(0.995 0.008 82)Grouped content and raised working surfaces.
- Muted
oklch(0.935 0.02 79)Subdued regions, secondary controls, and quiet fills.
- Muted Foreground
oklch(0.46 0.035 52)Supporting copy that remains readable.
- Border
oklch(0.82 0.025 74)Separators, control outlines, and structural rules.
- Primary
oklch(0.38 0.095 335)Primary actions, selection, and active emphasis.
- Primary Foreground
oklch(0.985 0.008 82)Content placed on the primary color.
- Destructive
oklch(0.5 0.17 28)Irreversible actions and critical errors.
- Success
oklch(0.43 0.1 145)Confirmed completion and healthy status.
- Warning
oklch(0.55 0.11 72)Caution that needs attention without blocking work.
- Info
oklch(0.43 0.08 245)Neutral guidance and informational status.
- Ring
oklch(0.52 0.13 335)Keyboard focus indication around interactive controls.
Dark
- Background
oklch(0.18 0.018 48)The page canvas behind every surface.
- Foreground
oklch(0.92 0.018 82)Primary text and high emphasis symbols.
- Card
oklch(0.22 0.02 48)Grouped content and raised working surfaces.
- Muted
oklch(0.265 0.025 48)Subdued regions, secondary controls, and quiet fills.
- Muted Foreground
oklch(0.73 0.025 76)Supporting copy that remains readable.
- Border
oklch(0.37 0.03 52)Separators, control outlines, and structural rules.
- Primary
oklch(0.76 0.09 335)Primary actions, selection, and active emphasis.
- Primary Foreground
oklch(0.18 0.018 48)Content placed on the primary color.
- Destructive
oklch(0.69 0.15 28)Irreversible actions and critical errors.
- Success
oklch(0.7 0.1 145)Confirmed completion and healthy status.
- Warning
oklch(0.76 0.1 72)Caution that needs attention without blocking work.
- Info
oklch(0.72 0.08 245)Neutral guidance and informational status.
- Ring
oklch(0.76 0.09 335)Keyboard focus indication around interactive controls.
03 / Typography
Role based type scale
Visual foundations
Heading
2.25rem to 4rem · 500 · 1.15 line height · -0.025em tracking
Section hierarchy and important grouped content.
Clear hierarchy makes complex product work easier to understand.
Body
1rem to 1.125rem · 400 · 1.7 line height · 0em tracking
Reading text, explanations, and form guidance.
EVALUATED DIRECTION
Label
0.75rem to 0.8125rem · 600 · 1.3 line height · 0.08em tracking
Compact labels, metadata, and interface wayfinding.
npx agentkogei@latest add
Code
0.8125rem to 0.875rem · 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.
- 4
1rem · Compact control internals and paired labels.
- 6
1.5rem · Related content within one component.
- 8
2rem · Default control and card rhythm.
- 12
3rem · Distinct groups within a section.
- 16
4rem · Major sections and page level separation.
- 24
6rem · Generous chapter and editorial section spacing.
- 32
8rem · Largest reading transitions and page openings.
05 / Layout and responsive behavior
Constraints that preserve hierarchy
Center a generous reading column, let supporting material sit in the margins, and use whitespace as punctuation.
Maximum 80rem · Reading width 62ch · Columns 1/6/12 · Gutters 1/2/3rem
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.125rem · Small indicators and restrained detail.
Control · 0.125rem · Buttons, fields, and compact interactive surfaces.
Panel · 0.25rem · Cards, panels, and larger grouped regions.
Pill · 999rem · Compact tags only, never ordinary cards or fields.
Borders
Hairline · 1px · Quiet dividers and table structure.
Default · 1px · Controls and ordinary surface boundaries.
Strong · 1px · 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
Let the primary action punctuate the reading flow while secondary actions remain typographic. Treat links as part of the prose while retaining persistent underlines and precise destinations.08 / Fields
Forms and inputs
Give each response room, keep labels visible, and place validation in the reading path. Use generous line height, clear rules, and visible labels that never collapse into placeholders.09 / Containers
Cards and panels
Use cards as editorial entry points with generous hierarchy and restrained boundaries. Use panels for supporting context and let typography do more work than decoration.10 / Wayfinding
Navigation
Name the current reading location and keep navigation in document order.11 / Data
Tables, lists, and data display
Let typography, generous measure, and aligned headings make dense editorial data readable. Preserve every column in a labelled horizontal scroll region and never compress copy below a readable measure.| Story | Stage | Edition |
|---|---|---|
| Field notes | Copy edit | June journal |
| The long view | Ready | June journal |
| Opening note | Draft | July journal |
Issue production summary
- Opening noteReady
A short orientation for the issue.
- Feature essayCopy edit
The central long form argument.
- Field observationsDraft
Brief reports from contributors.
12 / Feedback
Badges, alerts, and feedback states
Write feedback as a calm editorial note with the next useful action close by. Use explicit stage names, readable symbols, and borders so status never depends on hue.- DraftThe story remains open for writing
- Copy editThe story is under editorial review
- ReadyThe story can enter the edition
- HeldA named concern blocks publication
Issue ready for proofing
Every story has completed its editorial review.
Contributor credit missing
Add the author credit before this story can be published.
13 / Consequence
Dialogs and destructive actions
Keep the dialog in the reading flow with a clear title and restrained actions. Name the story and explain its place in the edition before asking for confirmation.Review issue note
Read the local editorial note before returning to the issue.
- Escape closes the note because it does not commit publication work.
- Return focus to the issue note control.
The long view
The story will be removed from the local June journal order.
This specimen can restore the story because it changes only local component state.
The long view remains available.
13
Motion and reduced motion
Timing supports state changes and never starts without a Builder action.Motion timings
- feedback
- 160 ms
- transition
- 240 ms
- spatial
- 360 ms
Use measured transitions that preserve reading rhythm and make changes feel deliberate.
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