A distinct point of view.
Display
3rem to 5rem · 600 · 1 line height · -0.05em tracking
Singular page statements and expressive product moments.
Design System Release 1.0
Foundation
Neutral, crisp, and highly legible B2B SaaS. Built for versatile product foundations.
Clarity before character.
- Quiet surfaces
- Decisive actions
- Accessible by construction
Foundation 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 01
- 01Quiet surfaces
- 02Decisive actions
- 03Accessible by construction
02 / Semantic colors
Light and dark roles
Light
- Background
oklch(0.985 0.003 247)The page canvas behind every surface.
- Foreground
oklch(0.205 0.015 255)Primary text and high emphasis symbols.
- Card
oklch(1 0 0)Grouped content and raised working surfaces.
- Muted
oklch(0.955 0.006 247)Subdued regions, secondary controls, and quiet fills.
- Muted Foreground
oklch(0.49 0.02 255)Supporting copy that remains readable.
- Border
oklch(0.89 0.01 247)Separators, control outlines, and structural rules.
- Primary
oklch(0.47 0.15 255)Primary actions, selection, and active emphasis.
- Primary Foreground
oklch(0.99 0.002 247)Content placed on the primary color.
- Destructive
oklch(0.55 0.2 27)Irreversible actions and critical errors.
- Success
oklch(0.5 0.13 155)Confirmed completion and healthy status.
- Warning
oklch(0.62 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.57 0.17 255)Keyboard focus indication around interactive controls.
Dark
- Background
oklch(0.17 0.012 255)The page canvas behind every surface.
- Foreground
oklch(0.94 0.007 247)Primary text and high emphasis symbols.
- Card
oklch(0.215 0.014 255)Grouped content and raised working surfaces.
- Muted
oklch(0.255 0.014 255)Subdued regions, secondary controls, and quiet fills.
- Muted Foreground
oklch(0.72 0.015 247)Supporting copy that remains readable.
- Border
oklch(0.34 0.018 255)Separators, control outlines, and structural rules.
- Primary
oklch(0.72 0.13 255)Primary actions, selection, and active emphasis.
- Primary Foreground
oklch(0.17 0.012 255)Content placed on the primary color.
- Destructive
oklch(0.7 0.17 27)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.13 255)Keyboard focus indication around interactive controls.
03 / Typography
Role based type scale
Visual foundations
Heading
1.75rem to 2.5rem · 600 · 1.15 line height · -0.025em tracking
Section hierarchy and important grouped content.
Clear hierarchy makes complex product work easier to understand.
Body
0.875rem to 1rem · 400 · 1.6 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.
- 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 · Largest page sections and major composition breaks.
05 / Layout and responsive behavior
Constraints that preserve hierarchy
Constrain reading width, align surfaces to shared columns, and let empty space preserve hierarchy.
Maximum 72rem · Reading width 72ch · Columns 1/6/12 · Gutters 1/1.5/2rem
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.375rem · Small indicators and restrained detail.
Control · 0.5rem · Buttons, fields, and compact interactive surfaces.
Panel · 0.75rem · Cards, panels, and larger grouped regions.
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 one clear primary action and quiet secondary actions with stable geometry. Keep destination language specific and preserve the underline as a noncolor cue.08 / Fields
Forms and inputs
Keep labels visible, help persistent, and validation adjacent to the affected field. Align field edges, keep labels above values, and reserve space for help and validation.09 / Containers
Cards and panels
Group one topic per card with a stable title, summary, evidence, and action hierarchy. Use panels for durable context and align related rows to a shared grid.10 / Wayfinding
Navigation
Mark the current location in text and structure, and preserve logical keyboard order.11 / Data
Tables, lists, and data display
Use quiet alignment, clear row headings, and stable columns for structured product data. Keep the table intact inside a labelled horizontal scroll region when columns do not fit.| Release | Evaluation | Owner |
|---|---|---|
| Foundation 1.0 | Passed | Design systems |
| Editorial 1.0 | Reviewing | Content systems |
| Command 1.0 | Queued | Product systems |
Release readiness summary
- Design ContractComplete
Immutable release document is pinned.
- EvaluationPassed
Keyboard, reflow, and both themes are covered.
- PublicationWaiting
Maintainer approval remains explicit.
12 / Feedback
Badges, alerts, and feedback states
Place status beside the object it describes and keep recovery information in the same reading path. Pair every tone with a plain language label, symbol, or structural treatment.- DraftWork is still editable
- In reviewA maintainer is checking the release
- PassedRequired evaluation is complete
- BlockedA named requirement prevents publication
Evaluation complete
All automated checks and required reviews passed.
Publication blocked
Resolve the missing accessibility evidence before continuing.
13 / Consequence
Dialogs and destructive actions
Name the dialog, describe its purpose, and keep actions in a predictable order. Repeat the affected object in the confirmation and state both consequence and recoverability before the action.Review release evidence
Inspect the local summary before returning to the publication checklist.
- Escape closes the review dialog because no irreversible work is in progress.
- Return focus to the control that opened the dialog.
Foundation 1.0 candidate
Its local evaluation record and review progress will be removed.
This specimen is reversible and changes only local component state.
Foundation 1.0 candidate 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
Use short, settled transitions that clarify hierarchy without competing with the Builder's task.
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