A distinct point of view.
Display
2.625rem to 5.5rem · 400 · 0.96 line height · -0.035em tracking
Human outcomes, major page statements, and one leading product promise.
Design System Release 1.0
Lumenfield
Warm framed fields that pair a human outcome with specific proof and a clear next action. Built for climate technology, home services, energy products, consumer infrastructure, and mission led platforms.
Make complex systems feel bright, capable, and close to home.
- Begin with the human outcome
- Let warmth guide attention
- Pair atmosphere with proof
- Keep the frame legible
- Make progress feel natural
Lumenfield 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
Field 08
- 01Begin with the human outcome
- 02Let warmth guide attention
- 03Pair atmosphere with proof
- 04Keep the frame legible
- 05Make progress feel natural
02 / Semantic colors
Light and dark roles
Light
- Background
#fff8ecThe warm cream field behind navigation, framed stories, product content, and open transitions.
- Foreground
#1b1611Primary reading, editorial statements, decisive labels, and meaningful symbols.
- Card
#ffffffBounded tasks, forms, dialogs, and focused evidence that must separate from the cream field.
- Muted
#f2e5d2Supporting panes, secondary content groups, skeletons, and quiet state regions.
- Muted Foreground
#685a4dExplanation, captions, timestamps, and lower priority product information.
- Border
#9d8976Radiant window divisions, control boundaries, table groups, and structural separators.
- Primary
#b84200The current path, decisive action, active selection, focus, and one meaningful warm highlight.
- Primary Foreground
#ffffffReadable text and icons placed directly on the burnt orange primary.
- Destructive
#a72f3fIrreversible loss, failed requirements, and destructive confirmation.
- Success
#26643fVerified completion and healthy outcomes paired with explicit text.
- Warning
#765400Conditions needing attention before they become failures.
- Info
#175d7aNeutral product context and informative status.
- Ring
#b84200Persistent keyboard focus around every interactive component.
Dark
- Background
#17110cThe warm cream field behind navigation, framed stories, product content, and open transitions.
- Foreground
#fff4e5Primary reading, editorial statements, decisive labels, and meaningful symbols.
- Card
#221811Bounded tasks, forms, dialogs, and focused evidence that must separate from the cream field.
- Muted
#302218Supporting panes, secondary content groups, skeletons, and quiet state regions.
- Muted Foreground
#d8c2adExplanation, captions, timestamps, and lower priority product information.
- Border
#8a6e59Radiant window divisions, control boundaries, table groups, and structural separators.
- Primary
#ff9a5cThe current path, decisive action, active selection, focus, and one meaningful warm highlight.
- Primary Foreground
#2a1206Readable text and icons placed directly on the burnt orange primary.
- Destructive
#ff9aa2Irreversible loss, failed requirements, and destructive confirmation.
- Success
#88d7aaVerified completion and healthy outcomes paired with explicit text.
- Warning
#f6c86fConditions needing attention before they become failures.
- Info
#8ecdf8Neutral product context and informative status.
- Ring
#ff9a5cPersistent keyboard focus around every interactive component.
03 / Typography
Role based type scale
Section
Section
1.75rem to 3.25rem · 400 · 1.02 line height · -0.02em tracking
Section statements, panel titles, and important grouped evidence.
Clear hierarchy makes complex product work easier to understand.
Body
0.9375rem to 1.125rem · 400 · 1.6 line height · 0em tracking
Explanation, navigation, forms, settings, and sustained product reading.
EVALUATED DIRECTION
Label
0.6875rem to 0.8125rem · 500 · 1.4 line height · 0.1em tracking
Window captions, status, dates, units, identifiers, and compact context.
Metric
Metric
1.75rem to 2.75rem · 600 · 1 line height · -0.025em tracking
Measured values with explicit units, freshness, and explanatory labels.
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 · Caption details, icons, and very tight relationships.
- 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 · Cards, panels, and form groups.
- 8
2rem · Framed field padding and distinct task groups.
- 12
3rem · Section groups and compact surface transitions.
- 16
4rem · Major product sections and generous working separation.
- 24
6rem · High impact introductions and major outcome transitions.
- 32
8rem · Opening fields and intentionally spacious story transitions.
05 / Layout and responsive behavior
Constraints that preserve hierarchy
Frame one human outcome with specific evidence and a ranked action while leaving enough warm open space for the hierarchy to breathe.
Maximum 92rem · Reading width 68ch · Columns 1/6/12 · Gutters 1/1.5/2rem
Mobile
320px and wider
Stack outcome, proof, and action in source order with a labelled compact navigation trigger.
Tablet
768px and wider
Collapse secondary navigation and place the evidence pane below the focal statement when needed.
Desktop
1120px and wider
Use the twelve column field for one asymmetrical focal statement, specific proof, and a clear next action.
Zoom
200% zoom
Let navigation, captions, metrics, tables, and actions wrap or reflow without clipping.
Reflow
320px reflow
Preserve complete source ordered fields and use labelled overflow only for irreducible data comparison.
06 / Radius, borders, and elevation
Surface geometry and depth
Radius
Compact · 0.125rem · Data cells, tags, and compact indicators.
Control · 0.25rem · Buttons, fields, menus, and ordinary interactions.
Panel · 0.5rem · Cards, dialogs, and bounded working surfaces.
Media · 1rem · Large supplied images and atmospheric media frames.
Borders
Frame · 1px · Radiant windows, tables, and structural fields.
Control · 1px · Buttons, fields, menus, cards, and ordinary interactive boundaries.
Focus · 2px · Focus, active selection, and consequential separation.
Elevation
Flat · Default fields and working surfaces.
Raised · Temporary menus and movable content.
Overlay · Dialogs and temporary content above the framed field.
07 / Controls
Buttons and links
Use one filled burnt orange action per focal field and keep secondary actions defined, direct, and stable. Use specific destinations, persistent prose underlines, and an explicit current navigation state.08 / Fields
Forms and inputs
Group fields by a human decision, keep help persistent, and place validation in the same reading path. Keep warm card fields visibly labelled, preserve help, and attach correction text without moving adjacent content.09 / Containers
Cards and panels
Use a card for one story, proof set, or task, and keep its caption attached to the content it qualifies. Pair one focal pane with one evidence pane and remove divisions that do not clarify the relationship.10 / Wayfinding
Navigation
Show the current destination with text and a warm rule, then replace the full list with a labelled mobile trigger when space is limited.11 / Data
Tables, lists, and data display
Keep the object, status, date, and action aligned with explicit captions, semantic row headings, and tabular values. Reflow into labelled records first, or use a keyboard reachable scroll region that keeps row identity visible.| Service | Status | Date |
|---|---|---|
| Home inspection | Confirmed | Aug 22 |
| System installation | Scheduled | Sep 04 |
| Service activation | Upcoming | Pending |
Plan details
- Profile completeComplete
Household details are ready.
- Plan reviewedCurrent
The current estimate needs review.
- Service scheduledUpcoming
Choose an available appointment.
12 / Feedback
Badges, alerts, and feedback states
Attach feedback to the affected outcome, preserve useful information during refresh, and keep the next valid action visible. Pair every tone with a written state, meaningful icon, or structural relationship so color is never the only cue.- CurrentThe step or view in progress
- CompleteA verified outcome
- Needs reviewAttention is required before continuing
- UnavailableA requirement or operation failed
Plan ready to review
The estimate and supplied assumptions are available.
Usage needs attention
Review the missing period before continuing.
13 / Consequence
Dialogs and destructive actions
Name the purpose, keep the consequence visible, trap focus only while modal, and preserve safe cancellation. Repeat the named object, scope, consequence, and true recovery status before enabling confirmation.Confirm service date
Review the supplied appointment details before confirming.
- Escape closes without saving and leaves the current date unchanged.
- Return focus to the button that opened the date dialog.
Home energy profile
The saved profile and its current plan will be removed.
Removal cannot be undone unless the product explicitly provides recovery.
Home energy profile 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
Reveal focal and evidence panes only after navigation or direct action, keep controls stable, and avoid ambient motion.
Reduced motion
Remove translation, scaling, smooth scrolling, and sequential pane reveals while preserving labels, focus, and the same information.
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, menus, forms, selection, sorting, overflow, row actions, and dialogs operable in logical source order.
Focus
Use a persistent two pixel semantic ring with adequate offset on every interactive element.
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 important touch actions.
Zoom
Support 200 percent page zoom and 400 percent browser zoom without loss of content or operation.
Reflow
Reflow at 320 CSS pixels without two dimensional page scrolling, clipping, or hidden priority information.
Forced colors
Preserve control boundaries, current state, status, and focus with system colors and explicit text.
Status communication
Name every state in text and announce asynchronous outcomes deliberately without stealing focus.
Preview
The Design System Preview is a public visual and descriptive specimen of the 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