F Kitchen Sink

Design system

Controls

Buttons

Three button variants built on Bootstrap's .btn base.

Classes

.btn-forge · .btn-forge-outline · .btn-cyan-outline

Badges

Compact labels with color-coded backgrounds.

Cyan Amber Emerald Red Dim

Classes

.forge-badge + .badge-cyan / .badge-amber / .badge-emerald / .badge-red / .badge-dim

Callouts / Alerts

Contextual callout boxes for tips, warnings, and status messages.

Info

Cyan callout — informational context or tips.

Warning

Amber callout — caution or important notes.

Success

Emerald callout — success or positive outcome.

Error

Red callout — errors or critical warnings.

Surface

Surface callout — neutral container.

Code Blocks & Inline

Inline code and Ctrl+K keyboard shortcut styling.

def forge_spark(backlog, agent): # AI-native delivery loop task = backlog.pop() result = agent.execute(task) return result

Classes

.forge-code · .keyword · .highlight · .comment

Form fields

Forge maps Bootstrap 5.3 form variables to design tokens (:root in forge-theme.css). Use .forge-form-panel to group settings-style blocks. Python helpers live in components.components for generators.

Shown on profile cards and audit trails.
Native select; use a JS plugin for search or multi-select.
https://
Use .input-group for prefixed or suffixed fields.
Range input uses the cyan accent on the thumb.

Python / API

render_form_stack() · render_form_input() · render_form_select() · render_form_textarea() · render_form_check() · render_form_switch() · render_form_group()

Validation states

Use createFormController(root, { validate }) for programmatic validation on render_form_* markup, or .is-invalid / .is-valid classes manually.

Enter a valid email address.
Synced with registry.

JS API

createFormController · getValues() · setValues() · setErrors() · event ks-form-change

Action dropdown

Generic menus use Bootstrap's dropdown JS. Add .forge-dropdown-menu on .dropdown-menu for the glass surface (distinct from the fixed theme capsule in the corner).

Classes

.dropdown · .dropdown-menu.forge-dropdown-menu · data-bs-toggle="dropdown"

Beyond Bootstrap

Bootstrap covers primitives; data-heavy apps use KS tier-C factories inside .forge-widget-host. Python mount helpers: render_data_table_mount(), render_filter_toolbar_mount(), render_tree_combobox_mount(), render_governed_combobox_mount(). See data-tables.html and docs/design/dynamic-ui/API.md.

Need KS factory Typical add-on (when KS is not enough)
Sortable / paginated data table createDataTable · render_data_table_mount —
Search + filter toolbar createFilterToolbar · render_filter_toolbar_mount —
Searchable combobox createTreeCombobox / createGovernedCombobox Tom Select for multi-select tags
Editable / spreadsheet grid Read-only render_table styles only Tabulator, Handsontable, AG Grid
Date / time picking None in core Flatpickr, Tempus Dominus, native type="date"

Topic preview card

For product sites that load forge-theme.js + forgesdlc-theme.css, use render_topic_preview_trigger() (or an <a class="fs-topic-preview-card" href="…">) to open a page in a same-tab modal. The iframe requests ?fs-embed=1 and fs-preview-rail=1; forge-theme.js adds matching html classes so global chrome (sidebar, primary nav, mobile bar, offcanvas, theme dropdown) is hidden inside the iframe. A Markdown .toc, if present, is hoisted into the modal’s right rail; otherwise it stays in-article (embed-only without the rail flag). The modal shell uses a minimal top-right toolbar (open full page + close).

This page loads product CSS only for this section — see For Agents if tokens clash on a handbook-themed page.

Product siteProduct layout (embed demo)

Opens preview in a modal: iframe uses ?fs-embed=1&fs-preview-rail=1 — site chrome hidden inside the frame; Markdown .toc is cloned into a right-hand rail when present.

Preview on this page

Python / API

render_topic_preview_trigger(href=…, title=…, description=…, eyebrow=…) · JS: openTopicPreviewModal · query: fs-embed=1 + fs-preview-rail=1

Segmented control

Expected behavior

ks-segmented

Radio group styled as segmented control; createSegmentedControl get/set API.

JS API

createSegmentedControl(root, { onChange }) · getValue() · setValue()

Stepper wizard

  1. 1Plan
  2. 2Build
  3. 3Verify
  4. 4Ship

Expected behavior

ks-stepper

Back/Next updates aria-current step; createStepperWizard get/set API.

JS API

createStepperWizard(root, { onChange, steps }) · getValue() · setValue(stepIndex)

Pagination tactile

Expected behavior

ks-pagination-tactile

Raised tactile page buttons; page changes via createPaginationTactile.

JS API

createPaginationTactile(container, { page, totalPages, onChange }) · auto-init data-ks-pagination

Filter chip scroller

Expected behavior

ks-filter-chip-scroller

Horizontal chip rail; selection via createFilterChipScroller.

JS API

createFilterChipScroller · differs from createFilterToolbar (search + selects on data-tables page)

Governed combobox

Expected behavior

ks-governed-combobox

Flat-list combobox via createGovernedCombobox (Gcb hash).

JS API

createGovernedCombobox wraps createTreeCombobox · auto-init data-ks-combobox

Disclosure stack

What is governed?

Hashes, contracts, and oracles ship together.

How to verify?

Run nav-layout-verifier against showcase HTML.

Expected behavior

ks-disclosure-stack

Depth-stacked details panels.

Sticky action bar

Expected behavior

ks-sticky-action-bar

Sticky bottom toolbar; actions via createStickyActionBar.

JS API

createStickyActionBar(container, { actions, onAction }) · event ks-sticky-action