Visual

Specs

• A11y theme modes (color-blind, low-vision) themes/a11y-modes.kmd

  Two additional theme modes alongside Verge light/dark — `color-blind`

• AI agent step trace ai-ui/agent-step-trace.kmd

  Vertical step list + per-step expand (tool call, args, result, duration)

• AI artifact panel ai-ui/artifact-panel.kmd

  Side panel split-screen (desktop/web) or bottom sheet (mobile) for

• AI chat message bubble ai-ui/chat-message-bubble.kmd

  Baseline message bubble for any AI chat surface in Koder Stack:

• AI chat surface primitives patterns/ai-chat-surface.kmd

  Six composable primitives for assembling an AI chat surface in any

• AI citations / source attribution ai-ui/citations.kmd

  Footnote-style inline citations + hover/long-press preview cards +

• AI code block ai-ui/code-block.kmd

  AI-generated code rendering with language detection, syntax highlight,

• AI conversation history ai-ui/conversation-history.kmd

  Sidebar of past AI conversations: date-grouped (Today / Yesterday /

• AI cost display ai-ui/cost-display.kmd

  Per-message badge + session header total + breakdown drawer for AI

• AI feature visual language patterns/ai-feature-visual-language.kmd

  Canonical visual lexicon for distinguishing AI-driven surfaces from

• AI generated content disclaimer ai-ui/ai-disclaimer.kmd

  Risk-tiered disclaimer mechanism for AI-generated content in Koder

• AI inline suggest / ghost text ai-ui/inline-suggest.kmd

  Copilot-style ghost text autocomplete in any Koder editor surface

• AI memory drawer ai-ui/memory-drawer.kmd

  Drawer to edit AI persistent memory: list/search/edit/delete items;

• AI model selector ai-ui/model-selector.kmd

  Dropdown/menu for choosing AI model mid-conversation. Capability chips

• AI multimodal input composer ai-ui/multimodal-input.kmd

  Unified composer for text + image + file + voice input. Drag-and-drop

• AI prompt template gallery ai-ui/prompt-gallery.kmd

  Grid filterable de prompt templates: categoria + tag + author + provider

• AI streaming text ai-ui/streaming-text.kmd

  Token-by-token reveal of AI-generated text with cursor, Stop button,

• AI system prompt editor ai-ui/system-prompt-editor.kmd

  Advanced power-user editor for system prompts (Claude Projects style /

• AI thinking state ai-ui/thinking-state.kmd

  Collapsible "Thinking..." block for reasoning models (Claude extended

• AI voice mode UI ai-ui/voice-mode.kmd

  Fullscreen voice conversation mode UI: waveform (input/output color-coded),

• AI welcome / first-run screen patterns/ai-welcome-screen.kmd

  First-message hero an AI chat surface renders when the user hasn't

• AI/MCP UX/UI specs ai-ui/README.kmd

  Catalog of UX/UI specs for AI and MCP (Model Context Protocol)

• Adaptive design foundations/adaptive-design.kmd

  Koder UI is adaptive by default — single codebase serves phones,

• Adaptive layouts (list-detail, supporting-pane, feed) app-layout/adaptive-layouts.kmd

  Three canonical responsive layouts — list-detail, supporting-pane,

• Admin data table pattern patterns/admin-data-table.kmd

  Canonical composition pattern for Koder admin tools that list typed

• App Safe-Area / Window-Insets app-layout/safe-area.kmd

  Consumo obrigatório de window-insets (status bar, nav bar, display

• App Topbar — Placement & Layout Rules app-layout/topbar-placement.kmd

  Posição canônica do avatar (KoderUserBadge) e demais elementos primários

• App bars components/app-bars.kmd

  Horizontal bar anchored at the top or bottom of an application

• Back-button / ESC / Swipe-back Behaviour navigation/back-behavior.kmd

  Back (Android <, iOS swipe, ESC desktop, browser back) **sempre** volta

• Badges components/badges.kmd

  Small visual marker attached to another element, signalling presence

• Banners components/banners.kmd

  Persistent informational bar at the top of a content region —

• Binary, CLI and Desktop App Naming binaries-and-cli/naming.kmd

  Nomenclatura canônica para executáveis: binário k<slug>, dir

• Brand Score (naming) naming/brand-score.kmd

  Fórmula do Brand score (Type/Pron/Son/Mem), bandas de rating, checklist

• Brand-mandatory tokens themes/brand-mandatory-tokens.kmd

  Subset of design tokens flagged as brand-mandatory — must NEVER be

• Button groups — Expressive extension components/button-groups-expressive.kmd

  Material 3 Expressive extension to base button groups (specs/components/buttons.kmd

• Buttons components/buttons.kmd

  Button system — 7 variants (filled, tonal, outlined, text,

• Callout card pattern patterns/callout-card.kmd

  Dismissible in-product nudge — illustration + heading + body +

• Canonical layouts app-layout/canonical-layouts.kmd

  4 canonical layout templates that cover ~90% of Koder UI screens

• Cards components/cards.kmd

  Card — a container of related content + actions, typically clickable

• Carousels components/carousels.kmd

  Horizontally scrolling stack of items, optimized for browsing a

• Carousels — Hero Expressive extension components/carousels-expressive.kmd

  Material 3 Expressive extension to base Hero carousel (specs/components/

• Charts (line / bar / area / pie / scatter / graph) components/charts.kmd

  Canonical chart primitives — line / bar / stacked-bar / area /

• Checkbox components/checkbox.kmd

  Binary toggle in a multi-select context — user marks 0..N options

• Chips components/chips.kmd

  Compact element representing an entity, attribute, or action —

• Code Block components/code-block.kmd

  Code-block widget — the multi-framework code-tabs surface that hosts

• Color Schemes themes/color-schemes.kmd

  Catálogo canônico de **esquemas de cor** (paletas) da Koder Stack —

• Color resources (tokens export) themes/color-resources.kmd

  Catalog of color role exports per platform (CSS custom properties,

• Color roles themes/color-roles.kmd

  Semantic color role taxonomy — the mapping from concrete tokens

• Color — Advanced customization themes/color-customization.kmd

  How tenants + users customize the Koder color system beyond preset

• Combobox (typeahead select) components/combobox.kmd

  Typeahead input + dropdown of filtered options with optional async

• Component Naming Forms naming/forms.kmd

  Forms of reference for every Koder Stack component: type, display name,

• Content design — UX writing foundations/ux-writing.kmd

  Voice, tone, vocabulary, and pattern guide for every user-facing

• Customization foundations/customization.kmd

  How users + developers personalize Koder UI without leaving the

• Data table (admin-grade) components/data-table.kmd

  Admin-grade tabular component — sortable columns, multi-select with

• Date picker (single, range, time) components/date-picker.kmd

  Accessible date picker — typed ISO entry + calendar grid for single

• Depth & z-axis model themes/depth.kmd

  The cross-surface z-axis model. Defines depth as ONE abstract scale

• Designing — Elements foundations/elements.kmd

  Element-level guidance for every Koder UI. Defines the unit cells

• Develop — Wear OS develop/wear-os.kmd

  Wear OS 6 surface contract: EdgeButton (arc-shaped), Primary Layout

• Dialogs components/dialogs.kmd

  Modal interruption surface — basic dialog (centered modal), full-screen

• Dividers components/dividers.kmd

  Thin line separating content groups within a single surface

• Download Button (landings) landing-pages/download-button.kmd

  Botão Download em landings de produto Koder: sempre via

• Dynamic color themes/color-dynamic.kmd

  Generate a complete Koder color scheme from a single seed color —

• Editorial palette themes/editorial-palette.kmd

  12-color expressive palette for Koder marketing, landing illustration,

• Elevation themes/elevation.kmd

  Elevation system — 6 levels (0-5) expressed as shadows + tonal

• Empty state pattern patterns/empty-state.kmd

  Purpose-built UI for "no data yet" surfaces — illustration + heading

• Error Reporting (all modules) errors/reporting.kmd

  Relatório de erros para todos os módulos Koder: toggle "Relatório

• FAB menu components/fab-menu.kmd

  Material 3 Expressive FAB menu — successor of legacy "speed-dial"

• Feature deprecation / end-of-life communication patterns/deprecation.kmd

  Canonical pattern for communicating a feature's deprecation — in-app

• Feature paywall + access restriction patterns/feature-paywall.kmd

  Two sibling sub-patterns: (a) **paywall** — what surfaces when a

• Guide cue (one-shot onboarding tooltip) components/guide-cue.kmd

  One-shot tooltip-style component with arrow + title + body +

• Icon Generation Targets icons/generation-targets.kmd

  Regras de geração de variantes de ícone por plataforma (Android mipmaps,

• Inclusive design personas accessibility/personas.kmd

  Inventory of 8 archetypal personas covering the four ability axes

• Index filters with saved views components/index-filters.kmd

  Composite search + filter chips + saved views companion of

• Info sprinkle (inline help dot) components/info-sprinkle.kmd

  Lightweight inline help — small "i" icon next to a label that, on

• Inline definition (contextual term explainer) components/inline-definition.kmd

  Underlined term that, on hover / focus / tap, surfaces its definition

• Interaction — Selection interaction/selection.kmd

  How users mark/unmark items as selected — single-select, multi-select,

• Interaction — States interaction/states.kmd

  Visual + behavioral contract for the 8 interaction states every

• Internationalization (i18n) Cross-Surface Contract i18n/contract.kmd

  Contrato cross-surface de internacionalização da Koder Stack: idioma

• Koder App Behaviors koder-app/behaviors.kmd

  Comportamentos obrigatórios para todo app Koder (qualquer linguagem/

• Koder Design — Density modes themes/density.kmd

  Three canonical page-level density modes (compact / default / comfortable)

• Koder Design — Typography fonts/typography.kmd

  Closed vocabulary of typeface roles, canonical CSS variables, hosting

• Koder Style — Design Decisions themes/koder-style.kmd

  Companion to `specs/themes/verge.kmd`. Documents every design

• Landing Conformance — UX landing-pages/conformance-ux.kmd

  Detector de conformance de UX de landing pages: responsividade mobile

• Landing Pages — Catálogos landing-pages/catalog.kmd

  Estrutura e deploy de landing pages de **catálogo** (`platform.koder.dev`)

• Landing Pages — Hub Package Pages landing-pages/packages.kmd

  Estrutura, meta tags Open Graph + Twitter Card, e composição da OG image

• Landing Pages — Institucionais landing-pages/institutional.kmd

  Estrutura e deploy de landing pages **institucionais** (`www.koder.dev`,

• Landing Pages — Meta Portal (meta.koder.dev) landing-pages/meta.kmd

  Estrutura, IA, pipeline de render, deploy e governança do portal

• Landing Pages — Produtos Koder landing-pages/products.kmd

  Estrutura, seções, OG image e deploy de landing pages de produtos Koder

• Landing Pages — Sectors landing-pages/sectors.kmd

  Estrutura e deploy de landing pages de **Sectors** (sub-divisões de

• Landing Pages — Specs / Formatos landing-pages/specs.kmd

  Estrutura, seções, OG image e deploy de landing pages de specs ou

• Landing Pages — Áreas landing-pages/areas.kmd

  Estrutura, seções e deploy das landing pages das Áreas da Koder Stack

• Layout — Window size classes app-layout/window-size-classes.kmd

  4 canonical window-size classes (Compact / Medium / Expanded /

• Light/Dark Theme Toggle themes/light-dark.kmd

  Tema claro/escuro para todas as UIs Koder (web, Flutter mobile/desktop,

• Lighting & shadow model themes/lighting.kmd

  The light source model behind every shadow in Koder Design. Defines

• Lists components/lists.kmd

  Vertical stack of related items, each row showing a label and

• Loading indicator components/loading-indicator.kmd

  Material 3 Expressive Loading indicator — distinct from Progress

• MCP elicitation UI ai-ui/mcp-elicitation.kmd

  UI for MCP server-initiated user input requests mid-tool-execution

• MCP permission prompt ai-ui/mcp-permission-prompt.kmd

  Consent gate UI before invoking MCP tools with side effects. Implements

• MCP sampling approval ai-ui/mcp-sampling-approval.kmd

  UI for MCP server-initiated LLM completion requests delegated to

• MCP server state ai-ui/mcp-server-state.kmd

  Connection state visibility for every MCP server attached to a Koder

• MCP tool invocation card ai-ui/mcp-tool-invocation.kmd

  Visual indicator + arguments preview + result rendering for every

• Materials — translucent surface tokens themes/materials.kmd

  Translucent surface tokens for floating UI (acrylic) and window-chrome

• Media — Audio record, playback, mic gate, formats (privacy + widgets) media/audio.kmd

  Contrato cross-surface para gravação e reprodução de áudio em apps

• Media — Document pick, preview, OCR, formats (privacy + widgets) media/document.kmd

  Contrato cross-surface para seleção, preview, e OCR de documentos

• Media — Image capture, pick, preview, crop, formats (privacy + widgets) media/image.kmd

  Contrato cross-surface para captura, seleção e preview de imagens

• Media — Video record, playback, screen-capture, formats (privacy + widgets) media/video.kmd

  Contrato cross-surface para captura, playback e screen-capture

• Menus components/menus.kmd

  Floating list of choices anchored to a trigger — opens on demand,

• Model viewer components/model-viewer.kmd

  Interactive 3D model viewer — embed a glTF/GLB mesh that the user can

• Motion themes/motion.kmd

  Motion in Koder UI — index over 4 sub-specs: physics (principles +

• Motion — Easing & Duration themes/motion/easing-duration.kmd

  Duration tokens (5) and easing curves (5) for every deterministic

• Motion — Physics themes/motion/physics.kmd

  Motion physics for Koder UI — principles, performance budget, forbidden

• Motion — Transitions themes/motion/transitions.kmd

  Transition pattern catalog for Koder UI — 7 canonical patterns

• Motion — reveal effect (cursor highlight) themes/motion/reveal.kmd

  Cursor-tracking radial highlight on hoverable surfaces. Pointer-only

• Motion — spatial & perceived depth themes/motion/spatial.kmd

  Pseudo-3D motion on flat surfaces: pointer/gyroscope parallax,

• Multi-step wizard patterns/wizard-multistep.kmd

  Linear or branching multi-step flow with per-step validation, step

• Navigation containers components/navigation.kmd

  Primary navigation surfaces for switching between top-level

• Overrides API — named subpart contract for KDS components develop/overrides-api.kmd

  Defines the named-subpart Overrides API every KDS component MUST

• Pane scaffolds (Adaptive) app-layout/pane-scaffolds.kmd

  Material 3 Adaptive pane scaffolds — concrete APIs that materialize

• Phone input (country selector + i18n format) components/phone-input.kmd

  Country-aware phone input — country selector + locale-aware mask +

• Pickers (date + time) components/pickers.kmd

  Compound controls for selecting a date, time, date range, or

• Product Icons icons/products.kmd

  Padrão de ícones dos produtos Koder: 3D, forma = conceito, sem fundo

• Product Name in Desktop Title Bar desktop-apps/title-bar.kmd

  Como exibir o nome do produto na barra de título de apps desktop Koder

• Progress indicators components/progress-indicators.kmd

  Visual feedback that an operation is in progress — linear (bar) or

• Pull-to-refresh interaction/pull-to-refresh.kmd

  Material 3 Expressive pull-to-refresh pattern: drag from top ≥ threshold

• Radio buttons components/radio-buttons.kmd

  Single-select from N mutually exclusive options. Material parity

• Search view components/search-view.kmd

  Full-screen / overlay search experience triggered from a search

• Settings Patterns settings/patterns.kmd

  Convenção mestre de tela Settings em apps Koder: hierarquia canônica de

• Shape themes/shape.kmd

  Shape system — corner-radius scale, when to use which radius, and

• Shape library themes/shape-library.kmd

  Catalog of 35 named shapes + morphing contract for Material 3

• Sheets components/sheets.kmd

  Surface anchored to an edge of the screen, slidable to reveal

• Skeleton (loading placeholder) components/skeleton.kmd

  Skeleton placeholder primitives — block / line / circle / image —

• Sliders components/sliders.kmd

  Single-handle or range-handle control for selecting a numeric value

• Snackbars components/snackbars.kmd

  Transient feedback message at the bottom of the screen — confirms

• Sound design vocabulary sound/vocabulary.kmd

  Canonical 8-cue vocabulary for UI audio in Koder products

• Split button components/split-button.kmd

  Material 3 Expressive composite button: primary action + separate menu

• Switch components/switch.kmd

  ON/OFF toggle with immediate effect. Material parity

• Tabs components/tabs.kmd

  Horizontal navigation within a single context — primary tabs (top

• Text fields components/text-fields.kmd

  Text input control — 2 variants (filled, outlined), single-line and

• Title-Bar Drag and Double-Click Gestures desktop-apps/title-bar-double-click.kmd

  Como apps desktop Koder devem tratar arraste e duplo-clique na barra

• Toolbars (docked + floating) components/toolbars.kmd

  Material 3 Expressive Toolbars — substituem o legado Bottom App Bar

• Tooltips components/tooltips.kmd

  Brief contextual label revealing the name or description of a UI

• Typography themes/typography.kmd

  Typography system for Koder UIs — font stacks, type scale, weights,

• UI Style themes/ui-style.kmd

  Eixo "estilo de interface" ortogonal ao "esquema de cores" já existente

• UI Style preset families themes/presets-families.kmd

  Taxonomy organizing the Koder Design UI Style presets into 5

• Usability — applying M3 Expressive foundations/usability.kmd

  Foundation guidance on applying Material 3 Expressive without

• User-Facing Error Messages errors/user-facing-messages.kmd

  Toda mensagem de erro exibida a usuário final deve ter (1) texto humanizado

• Verge (v1 — OLED-aware dark) themes/verge.kmd

  Verge is the canonical visual language of the Koder Design System —

• Verge Symbols (UI icon design language) icons/ui-symbols.kmd

  Verge Symbols é a linguagem de ícones de UI do Koder Design System —

• Visual golden widget pattern (headless compositor + screencopy) patterns/visual-golden-widget.kmd

  Canonical recipe for shipping byte-exact visual regression

• Visual regression TDDs (overflow / chrome-overlap / proportion / sibling-collision) develop/visual-regression-tdds.kmd

  Every Koder UI surface — web, Flutter (mobile/desktop), Android native,

• Voice — Wake-word + Talk Mode (settings + privacy) voice/wake-word.kmd

  Toggles obrigatórios em Settings (`voice.enabled`, `voice.talkMode`,

• Web App Responsiveness web-apps/responsiveness.kmd

  Responsividade e conformidade mobile para web apps Koder (admin,

• XR — canonical composables develop/xr-composables.kmd

  Material 3 XR canonical composables: Orbiter, SpatialPanel,

• i18n TDD Test Template (Cross-Surface) i18n/test-template.kmd

  Template normativo de testes TDD pra validar conformidade com