A distinct point of view.
Display
2.75rem to 5.5rem · 600 · 0.96 line height · -0.05em tracking
Product promises, major page statements, and one leading outcome.
Design System Release 1.0
Playform
Tactile focal frames that make complex collaborative work feel clear and inviting. Built for collaborative saas, creative tools, education, workflow builders, and approachable business software.
Turn complex work into something people can see, hold, and move forward.
- Make the next move obvious
- Turn systems into useful objects
- Pair rigor with delight
- Spend color with intent
- Let the field breathe
Playform 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
Form 08
- 01Make the next move obvious
- 02Turn systems into useful objects
- 03Pair rigor with delight
- 04Spend color with intent
- 05Let the field breathe
02 / Semantic colors
Light and dark roles
Light
- Background
#f7f5efThe warm open field behind navigation, focal frames, and product content.
- Foreground
#171614Primary copy, decisive statements, strong labels, and meaningful symbols.
- Card
#ffffffA single useful object, task, dialog, or independent proof set.
- Muted
#ebe9e1Supporting bands, inactive regions, skeletons, and calm contextual frames.
- Muted Foreground
#625f58Explanation, metadata, helper copy, timestamps, and lower priority information.
- Border
#8c8880Visible control boundaries, object edges, data groups, and structural separators.
- Primary
#3157f5The next action, current path, selected state, and purposeful form orbit cue.
- Primary Foreground
#ffffffReadable text and icons placed directly on the cobalt primary.
- Destructive
#b4233fIrreversible loss, failed requirements, and destructive confirmation.
- Success
#267044Verified completion and positive outcomes paired with explicit text.
- Warning
#765400Conditions requiring attention before work can continue safely.
- Info
#135d89Neutral guidance, educational context, and informative status.
- Ring
#3157f5Persistent keyboard focus around every interactive component.
Dark
- Background
#121722The warm open field behind navigation, focal frames, and product content.
- Foreground
#f8f7f2Primary copy, decisive statements, strong labels, and meaningful symbols.
- Card
#1c2330A single useful object, task, dialog, or independent proof set.
- Muted
#283140Supporting bands, inactive regions, skeletons, and calm contextual frames.
- Muted Foreground
#bec6d2Explanation, metadata, helper copy, timestamps, and lower priority information.
- Border
#707b8eVisible control boundaries, object edges, data groups, and structural separators.
- Primary
#8198ffThe next action, current path, selected state, and purposeful form orbit cue.
- Primary Foreground
#101520Readable text and icons placed directly on the cobalt primary.
- Destructive
#ff91a5Irreversible loss, failed requirements, and destructive confirmation.
- Success
#78d8a4Verified completion and positive outcomes paired with explicit text.
- Warning
#efc763Conditions requiring attention before work can continue safely.
- Info
#7bcaf1Neutral guidance, educational context, and informative status.
- Ring
#9aabffPersistent keyboard focus around every interactive component.
03 / Typography
Role based type scale
Section
Section
1.75rem to 3rem · 600 · 1.04 line height · -0.035em tracking
Section statements, frame titles, and important grouped work.
Clear hierarchy makes complex product work easier to understand.
Body
1rem to 1.125rem · 400 · 1.58 line height · 0em tracking
Explanation, navigation, forms, settings, and sustained product reading.
EVALUATED DIRECTION
Label
0.6875rem to 0.75rem · 600 · 1.4 line height · 0.12em tracking
Form orbit captions, steps, status, timestamps, units, and compact categories.
Metric
Metric
2rem to 3rem · 600 · 1 line height · -0.04em tracking
Measured progress and values with explicit units and context.
npx agentkogei@latest add
Code
0.75rem to 0.875rem · 400 · 1.5 line height · 0em tracking
Commands, machine values, identifiers, durations, and source text.
04 / Spacing
Spacing scale
- 1
0.25rem · Tiny object details, orbit relationships, and icon alignment.
- 2
0.5rem · Inline labels, metadata, and compact control groups.
- 3
0.75rem · Control internals and paired values.
- 4
1rem · Default field rhythm and related actions.
- 6
1.5rem · Controls, card internals, and form groups.
- 8
2rem · Useful object padding and distinct task groups.
- 12
3rem · Section groups and compact frame transitions.
- 16
4rem · Major product sections and generous object separation.
- 24
6rem · Focal frame padding and high impact transitions.
- 32
8rem · Marketing introductions and singular spatial statements.
05 / Layout and responsive behavior
Constraints that preserve hierarchy
Place one useful object at the center of each focal frame, align its context nearby, and leave the surrounding ivory field open.
Maximum 90rem · Reading width 66ch · Columns 1/6/12 · Gutters 1/1.5/2.5rem
Mobile
320px and wider
Stack statements, objects, and actions in source order with a labelled compact navigation trigger.
Tablet
768px and wider
Collapse secondary navigation and move contextual objects below the principal statement when width becomes awkward.
Desktop
1120px and wider
Use twelve columns for a leading statement, one central object, useful asymmetry, and a ranked action.
Zoom
200% zoom
Let navigation, labels, objects, tables, and actions wrap or reflow without clipping.
Reflow
320px reflow
Preserve complete source ordered frames and use labelled overflow only for irreducible data comparison.
06 / Radius, borders, and elevation
Surface geometry and depth
Radius
Compact · 0.625rem · Tags, compact controls, and small status objects.
Control · 0.875rem · Buttons, fields, menus, and ordinary interactions.
Card · 1.25rem · Cards, dialogs, and useful bounded objects.
Frame · 2.5rem · Major sections, marketing moments, and focal product frames.
Borders
Quiet · 1px · Large frames, supporting groups, and subtle separation.
Default · 1px · Controls, cards, tables, and ordinary boundaries.
Focus · 2px · Focus, active selection, and consequential separation.
Elevation
Flat · Default fields, tables, and large focal frames.
Raised · A singular focal card, temporary menu, or movable object.
Overlay · Dialogs and temporary content above the product field.
07 / Controls
Buttons and links
Use one filled cobalt action per decision frame and keep secondary actions calm, direct, and stable. Use specific destinations, persistent prose underlines, and explicit current navigation.08 / Fields
Forms and inputs
Group fields by decision, keep help persistent, and place validation in the same reading path. Keep labels visible, use generous control height, and reserve stable space for help and validation.09 / Containers
Cards and panels
Use a card for one independent object or proof set, not merely to add rounded corners. Use one focal frame and shared alignment instead of a separate container for every value.10 / Wayfinding
Navigation
Name the current section in text, preserve source order, and keep every destination keyboard reachable.11 / Data
Tables, lists, and data display
Keep entity, state, owner, freshness, and the next action aligned in one readable object. At narrow widths, preserve row headings and use a labelled keyboard reachable scroll region only when comparison requires it.| Project | State | Owner · freshness |
|---|---|---|
| Launch plan | In review | Growth team · 2 minutes ago |
| Learning path | Ready to share | Education team · 8 minutes ago |
| Community guide | Drafting | Programs team · 18 minutes ago |
Workspace activity summary
- Launch plan moved to reviewReady
The goal, owner, and acceptance notes remain attached.
- Learning path is ready to shareComplete
All required modules have complete descriptions.
- Community guide needs an ownerNeeds attention
Assign a collaborator before the next publishing step.
12 / Feedback
Badges, alerts, and feedback states
Attach feedback to the useful object or action it describes and reserve stable space for change. Pair every color with text, icon, position, or structure so meaning survives without color.- In progressWork is active and has a clear next step.
- CompleteThe named outcome has been verified.
- Needs reviewA person must review the object before work continues.
- BlockedThe object cannot proceed until the named failure is resolved.
Project brief is ready
Required context is complete and the next owner can begin.
One handoff needs attention
Choose an available team before moving the project forward.
13 / Consequence
Dialogs and destructive actions
Name the purpose, trap focus, expose a safe cancellation path, and keep consequences explicit. Separate irreversible actions from routine settings and repeat object, scope, consequence, and recovery truth.Move project to review
Review the owner, required context, and next action before changing the project state.
- Escape closes the dialog without changing the project and returns focus to its opener.
- Return focus to the action that opened the dialog and announce the resulting state when confirmed.
Project workspace
Deleting this workspace removes its briefs, assignments, and activity for every collaborator.
This preview action is reversible and changes only local specimen state.
Project workspace remains available.
13
Motion and reduced motion
Timing supports state changes and never starts without a Builder action.Motion timings
- feedback
- 100 ms
- transition
- 180 ms
- spatial
- 260 ms
Use short tactile motion to connect actions with useful objects; never animate merely to decorate the field.
Reduced motion
Remove translation, rotation, scaling, smooth scrolling, and nonessential fades while preserving labels, focus, and every state change.
14
Accessibility guidance
Complete accessibility direction for the Design System Preview.Semantics
Use native landmarks, headings, lists, controls, forms, dialogs, tables, and status regions before ARIA.
Keyboard
Keep navigation, filtering, selection, menus, overflow regions, row actions, and dialogs operable in logical source order.
Focus
Show a persistent two pixel semantic ring with separation from every control boundary.
Contrast
Measure text, controls, boundaries, status, meaningful graphics, and focus in light and dark schemes.
Target size
Provide at least 24 by 24 CSS pixels with adequate spacing and prefer 44 by 44 for primary touch actions.
Zoom
Support 200 percent page zoom and 400 percent browser zoom without loss of content or control access.
Reflow
Reflow at 320 CSS pixels without page level horizontal scrolling or hidden actions.
Forced colors
Preserve control boundaries, focus, selected state, and meaningful object structure in forced colors.
Status communication
Announce meaningful asynchronous outcomes deliberately without stealing focus or repeating static content.
Preview
The Design System Preview is a public visual and descriptive specimen of the evaluated Playform 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 Playform coverage can be inspected.
Read the methodologyRelease 1.0