Koder Design

The intentional shape of every Koder product.

Each page is a spec, rendered Visual · Code · Data · Interface · System

spec → render

Every visual artefact on this site is rendered from a spec. Same story, every page.

specs/icons/products.kmd

--- name: Product Icons type: spec --- A forma É o ícone. Sem quadrado, círculo ou superelipse de fundo. A silhueta do conceito é preenchida com a cor dominante.

→

koder-design

See the spec →

Facets

Visual

How Koder products look and behave — themes, icons, components, voice, accessibility.

Browse 44 UI styles, 17 components →

Code

How source code is written across the Stack — formatting, naming, errors, anti-patterns.

def sha256(s) = Crypto.sha256 s

11 specs shipped — Koda style, indentation, naming, more →

Data

How data is modeled, stored, and configured — schemas, multi-tenancy, formats.

field	type
koder_user_id	uuid
workspace_id	uuid
created_at	tstz

kdb-as-unified-data-plane, koder-toml, kpkg, kvg →

Interface

How Koder components talk — APIs, IPC, protocols, command surfaces.

GET /v1/me accept: json → 200 OK

IPC protocol, settings, audit, cache-purge →

System

How the Stack is structured — architecture, principles, audit, testing, releases.

app → service

service → kdb

RFCs, testing strategy, release model →

Specs catalog

Every spec from meta/docs/stack/specs/ rendered automatically. Click a row to read.

spec-doc accessibility/nutrition-labels.kmd Accessibility nutrition labels
spec-doc accessibility/personas.kmd Inclusive design personas
spec-doc ai/agent-stream.kmd
spec-doc ai/skill-format.kmd
spec-doc ai-ui/README.kmd AI/MCP UX/UI specs
spec-doc ai-ui/agent-step-trace.kmd AI agent step trace
spec-doc ai-ui/ai-disclaimer.kmd AI generated content disclaimer
spec-doc ai-ui/artifact-panel.kmd AI artifact panel
spec-doc ai-ui/chat-message-bubble.kmd AI chat message bubble
spec-doc ai-ui/citations.kmd AI citations / source attribution
spec-doc ai-ui/code-block.kmd AI code block
spec-doc ai-ui/conversation-history.kmd AI conversation history
spec-doc ai-ui/cost-display.kmd AI cost display
spec-doc ai-ui/inline-suggest.kmd AI inline suggest / ghost text
spec-doc ai-ui/mcp-elicitation.kmd MCP elicitation UI
spec-doc ai-ui/mcp-permission-prompt.kmd MCP permission prompt
spec-doc ai-ui/mcp-sampling-approval.kmd MCP sampling approval
spec-doc ai-ui/mcp-server-state.kmd MCP server state
spec-doc ai-ui/mcp-tool-invocation.kmd MCP tool invocation card
spec-doc ai-ui/memory-drawer.kmd AI memory drawer
spec-doc ai-ui/model-selector.kmd AI model selector
spec-doc ai-ui/multimodal-input.kmd AI multimodal input composer
spec-doc ai-ui/prompt-gallery.kmd AI prompt template gallery
spec-doc ai-ui/streaming-text.kmd AI streaming text
spec-doc ai-ui/system-prompt-editor.kmd AI system prompt editor
spec-doc ai-ui/thinking-state.kmd AI thinking state
spec-doc ai-ui/voice-mode.kmd AI voice mode UI
spec-doc api/kds-public-api.kmd
spec-doc app-layout/adaptive-layouts.kmd Adaptive layouts (list-detail, supporting-pane, feed)
spec-doc app-layout/canonical-layouts.kmd Canonical layouts
spec-doc app-layout/pane-scaffolds.kmd Pane scaffolds (Adaptive)
spec-doc app-layout/safe-area.kmd App Safe-Area / Window-Insets
spec-doc app-layout/topbar-placement.kmd App Topbar — Placement & Layout Rules
spec-doc app-layout/window-size-classes.kmd Layout — Window size classes
spec-doc audit/frontmatter.kmd Audit Frontmatter
spec-doc auth/oauth-flow-test-template.kmd Koder ID OAuth Flow — TDD Test Template
spec-doc auth/oauth-flow.kmd Koder ID OAuth Flow — consumer-side contract
spec-doc backlog/numbering.kmd Backlog Ticket Numbering
spec-doc binaries-and-cli/naming.kmd Binary, CLI and Desktop App Naming
spec-doc binaries-and-cli/standard-flags.kmd Standard CLI Flags for Koder Apps
spec-doc cache-purge/contract.kmd
spec-doc chat-channels/capability-matrix.kmd Chat Channel Capability Matrix
spec-doc code/anti-patterns.kmd Code Anti-patterns
spec-doc code/comments.kmd Code Comments
spec-doc code/error-handling.kmd Error Handling
spec-doc code/functions.kmd Functions & Methods
spec-doc code/imports.kmd Imports & Dependencies
spec-doc code/indentation.kmd Indentation
spec-doc code/languages/koda-style.kmd Koda Code Style
spec-doc code/naming.kmd Naming Conventions
spec-doc code/project-layout.kmd Project Layout
spec-doc commands/structure.kmd Command Structure
spec-doc components/app-bars.kmd App bars
spec-doc components/badges.kmd Badges
spec-doc components/banners.kmd Banners
spec-doc components/button-groups-expressive.kmd Button groups — Expressive extension
spec-doc components/buttons.kmd Buttons
spec-doc components/cards.kmd Cards
spec-doc components/carousels-expressive.kmd Carousels — Hero Expressive extension
spec-doc components/carousels.kmd Carousels
spec-doc components/charts.kmd Charts (line / bar / area / pie / scatter / graph)
spec-doc components/checkbox.kmd Checkbox
spec-doc components/chips.kmd Chips
spec-doc components/code-block.kmd Code Block
spec-doc components/combobox.kmd Combobox (typeahead select)
spec-doc components/data-table.kmd Data table (admin-grade)
spec-doc components/date-picker.kmd Date picker (single, range, time)
spec-doc components/dialogs.kmd Dialogs
spec-doc components/dividers.kmd Dividers
spec-doc components/fab-menu.kmd FAB menu
spec-doc components/guide-cue.kmd Guide cue (one-shot onboarding tooltip)
spec-doc components/index-filters.kmd Index filters with saved views
spec-doc components/info-sprinkle.kmd Info sprinkle (inline help dot)
spec-doc components/inline-definition.kmd Inline definition (contextual term explainer)
spec-doc components/lists.kmd Lists
spec-doc components/loading-indicator.kmd Loading indicator
spec-doc components/menus.kmd Menus
spec-doc components/model-viewer.kmd Model viewer
spec-doc components/navigation.kmd Navigation containers
spec-doc components/phone-input.kmd Phone input (country selector + i18n format)
spec-doc components/pickers.kmd Pickers (date + time)
spec-doc components/progress-indicators.kmd Progress indicators
spec-doc components/radio-buttons.kmd Radio buttons
spec-doc components/search-view.kmd Search view
spec-doc components/sheets.kmd Sheets
spec-doc components/skeleton.kmd Skeleton (loading placeholder)
spec-doc components/sliders.kmd Sliders
spec-doc components/snackbars.kmd Snackbars
spec-doc components/split-button.kmd Split button
spec-doc components/switch.kmd Switch
spec-doc components/tabs.kmd Tabs
spec-doc components/text-fields.kmd Text fields
spec-doc components/toolbars.kmd Toolbars (docked + floating)
spec-doc components/tooltips.kmd Tooltips
spec-doc content/grammar-and-mechanics.kmd Grammar and mechanics
spec-doc content/plain-language.kmd Plain language
spec-doc content/voice-and-tone.kmd Voice and tone
spec-doc desktop-apps/title-bar-double-click.kmd Title-Bar Drag and Double-Click Gestures
spec-doc desktop-apps/title-bar.kmd Product Name in Desktop Title Bar
spec-doc develop/android-compose.kmd Android Compose bindings catalog
spec-doc develop/browser-support.kmd Browser and platform support matrix
spec-doc develop/code-samples-toggle.kmd Per-platform code samples toggle
spec-doc develop/docs-mobile-responsiveness.kmd KDS docs mobile responsiveness
spec-doc develop/get-started.kmd Develop — Get Started
spec-doc develop/handoff-process.kmd Designer-to-developer handoff process
spec-doc develop/ide-integration.kmd IDE integration (VSCode + Zed + JetBrains)
spec-doc develop/ios-swiftui.kmd iOS SwiftUI bindings catalog
spec-doc develop/mcp-integration.kmd MCP integration (KDS for AI agents)
spec-doc develop/overrides-api.kmd Overrides API — named subpart contract for KDS components
spec-doc develop/visual-regression-tdds.kmd Visual regression TDDs (overflow / chrome-overlap / proportion / sibling-collision)
spec-doc develop/wear-os.kmd Develop — Wear OS
spec-doc develop/xr-composables.kmd XR — canonical composables
spec-doc develop/xr-preview.kmd XR developer preview
spec-doc docs/generation.kmd Document Generation
pattern errors/reporting.kmd Error Reporting (all modules)
pattern errors/user-facing-messages.kmd User-Facing Error Messages
spec-doc fonts/typography.kmd Koder Design — Typography
spec-doc foundations/adaptive-design.kmd Adaptive design
spec-doc foundations/customization.kmd Customization
spec-doc foundations/elements.kmd Designing — Elements
spec-doc foundations/usability.kmd Usability — applying M3 Expressive
spec-doc foundations/ux-writing.kmd Content design — UX writing
spec-doc git-object-format/objects-on-kdb.kmd
spec-doc git-object-format/sha256-promotion.kmd
pattern i18n/contract.kmd Internationalization (i18n) Cross-Surface Contract
pattern i18n/leak-detection.kmd i18n leak detection
pattern i18n/test-template.kmd i18n TDD Test Template (Cross-Surface)
icon icons/generation-targets.kmd Icon Generation Targets
icon icons/products.kmd Product Icons
icon icons/ui-symbols.kmd Verge Symbols (UI icon design language)
pattern identity/consent.kmd Scoped Consent Tokens
pattern identity/erasure-flow.kmd
pattern identity/login-resolution-test-template.kmd Login Identifier Resolution — TDD Test Templates
pattern identity/login-resolution.kmd Login Identifier Resolution
spec-doc interaction/pull-to-refresh.kmd Pull-to-refresh
spec-doc interaction/selection.kmd Interaction — Selection
spec-doc interaction/states.kmd Interaction — States
spec-doc ipc/protocol.kmd KoderIPC Protocol
spec-doc kmd/format.kmd Koder Markdown Format (.kmd)
spec-doc kode/config-format.kmd
spec-doc kode/hooks.kmd
spec-doc kode/skill-format.kmd
spec-doc koder-app/behaviors.kmd Koder App Behaviors
spec-doc koder-app/collection-toolbar.kmd Collection Toolbar — segment slot + standard collection segment
spec-doc koder-toml/category.kmd koder.toml — `category` field
spec-doc koder-toml/design-coverage.kmd
spec-doc kover/ab-report.kmd Kover A/B Report & Gate Verdict
spec-doc kover/capture.kmd Kover Capture & Data
spec-doc kover/protocol.kmd Kover Connector Protocol
spec-doc kover/scenario-dsl.kmd Kover Scenario DSL & Mirror Mode
spec-doc kpkg/format.kmd Koder Package Format (.kpkg)
spec-doc kvg/format.kmd Koder Vector Graphics Format (.kvg)
spec-doc kzip/format.kmd Kzip — Format Spec (v1 — restic-compatible bootstrap)
spec-doc landing-pages/areas.kmd Landing Pages — Áreas
spec-doc landing-pages/catalog.kmd Landing Pages — Catálogos
spec-doc landing-pages/conformance-privacy.kmd Landing Conformance — Privacy
spec-doc landing-pages/conformance-ux.kmd Landing Conformance — UX
spec-doc landing-pages/download-button.kmd Download Button (landings)
spec-doc landing-pages/institutional.kmd Landing Pages — Institucionais
spec-doc landing-pages/meta.kmd Landing Pages — Meta Portal (meta.koder.dev)
spec-doc landing-pages/packages.kmd Landing Pages — Hub Package Pages
spec-doc landing-pages/products.kmd Landing Pages — Produtos Koder
spec-doc landing-pages/sectors.kmd Landing Pages — Sectors
spec-doc landing-pages/specs.kmd Landing Pages — Specs / Formatos
media media/audio.kmd Media — Audio record, playback, mic gate, formats (privacy + widgets)
media media/document.kmd Media — Document pick, preview, OCR, formats (privacy + widgets)
media media/image.kmd Media — Image capture, pick, preview, crop, formats (privacy + widgets)
media media/video.kmd Media — Video record, playback, screen-capture, formats (privacy + widgets)
spec-doc messaging/cross-service-events.kmd
spec-doc migrations/expand-migrate-contract.kmd Expand-migrate-contract migration recipes
spec-doc multi-tenancy/contract.kmd Multi-tenancy contract
spec-doc naming/brand-score.kmd Brand Score (naming)
spec-doc naming/forms.kmd Component Naming Forms
pattern navigation/back-behavior.kmd Back-button / ESC / Swipe-back Behaviour
spec-doc observability/instrumentation-contract.kmd Instrumentation Contract
spec-doc pair/handshake.kmd Koder Pair — peer-to-peer device pairing handshake
pattern patterns/admin-data-table.kmd Admin data table pattern
pattern patterns/ai-agent-state-hooks.kmd AI agent state hooks (useKoderAgent / useKoderChat)
pattern patterns/ai-chat-surface.kmd AI chat surface primitives
pattern patterns/ai-feature-visual-language.kmd AI feature visual language
pattern patterns/ai-welcome-screen.kmd AI welcome / first-run screen
pattern patterns/callout-card.kmd Callout card pattern
pattern patterns/deprecation.kmd Feature deprecation / end-of-life communication
pattern patterns/empty-state.kmd Empty state pattern
pattern patterns/feature-paywall.kmd Feature paywall + access restriction
pattern patterns/visual-golden-widget.kmd Visual golden widget pattern (headless compositor + screencopy)
pattern patterns/wizard-multistep.kmd Multi-step wizard
spec-doc postgres-compat/perf-baseline-vs-pg17.kmd
spec-doc postgres-compat/pg-dump-v17.kmd
spec-doc privacy/posture-schema.kmd
spec-doc readmes/products.kmd README — Produtos Koder
spec-doc releases/packaging.kmd Release Packaging Formats
spec-doc rfc-frontmatter/phases.kmd RFC frontmatter — `phases:` array
spec-doc security/csp.kmd Content-Security-Policy — canonical posture for Koder Flow + sibling apps
spec-doc settings/patterns.kmd Settings Patterns
spec-doc signing/eidas.kmd eIDAS digital signature — Koder Signer EU profile (stub)
spec-doc signing/esign.kmd ESIGN digital signature — Koder Signer US profile (stub)
spec-doc signing/icp-brasil.kmd ICP-Brasil digital signature — Koder Signer contract
spec-doc slo/flow.kmd
spec-doc snapshots/manifest.kmd Snapshot manifest format (.kvg)
spec-doc sound/vocabulary.kmd Sound design vocabulary
spec-doc testing/always-on-recipes.kmd Always-on test recipes T1-T9
spec-doc testing/auto-heal-selectors.kmd
spec-doc testing/ouia-test-hooks.kmd OUIA test hooks (data-ouia-* contract)
spec-doc themes/a11y-modes.kmd A11y theme modes (color-blind, low-vision)
spec-doc themes/brand-mandatory-tokens.kmd Brand-mandatory tokens
spec-doc themes/color-customization.kmd Color — Advanced customization
spec-doc themes/color-dynamic.kmd Dynamic color
spec-doc themes/color-resources.kmd Color resources (tokens export)
spec-doc themes/color-roles.kmd Color roles
spec-doc themes/color-schemes.kmd Color Schemes
spec-doc themes/density.kmd Koder Design — Density modes
spec-doc themes/depth.kmd Depth & z-axis model
spec-doc themes/editorial-palette.kmd Editorial palette
spec-doc themes/elevation.kmd Elevation
spec-doc themes/koder-style.kmd Koder Style — Design Decisions
theme themes/light-dark.kmd Light/Dark Theme Toggle
spec-doc themes/lighting.kmd Lighting & shadow model
spec-doc themes/materials.kmd Materials — translucent surface tokens
spec-doc themes/motion/easing-duration.kmd Motion — Easing & Duration
spec-doc themes/motion/physics.kmd Motion — Physics
spec-doc themes/motion/reveal.kmd Motion — reveal effect (cursor highlight)
spec-doc themes/motion/spatial.kmd Motion — spatial & perceived depth
spec-doc themes/motion/transitions.kmd Motion — Transitions
spec-doc themes/motion.kmd Motion
spec-doc themes/presets-families.kmd UI Style preset families
spec-doc themes/shape-library.kmd Shape library
spec-doc themes/shape.kmd Shape
spec-doc themes/typography.kmd Typography
ui-style themes/ui-style.kmd UI Style
spec-doc themes/verge.kmd Verge (v1 — OLED-aware dark)
spec-doc tools/blog-changelog-index.kmd Blog / changelog index
spec-doc tools/blog-editorial-posts.kmd Blog — editorial posts (extension)
spec-doc tools/contrast-checker.kmd Contrast checker
spec-doc tools/design-kit-export.kmd Design kit export (Figma / Sketch / Adobe XD)
spec-doc tools/kds-sidebar-order.kmd
spec-doc tools/migration-guides.kmd Migration guides
spec-doc tools/migration-m3-expressive-uplift.kmd Migration — M3 baseline → M3 Expressive uplift
spec-doc tools/theme-builder.kmd Theme Builder
spec-doc variants/taxonomy.kmd Variantes — Taxonomy
voice voice/wake-word.kmd Voice — Wake-word + Talk Mode (settings + privacy)
spec-doc web-apps/responsiveness.kmd Web App Responsiveness
spec-doc wire-compat/flow-vs-forgejo.kmd Wire/API compatibility — Koder Flow vs upstream Forgejo
spec-doc workflow/executor-protocol.kmd Workflow Executor Protocol