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 .is-invalid / .is-valid with .invalid-feedback and .valid-feedback, or .was-validated on a <form> for browser constraint hints.

Enter a valid email address.
Synced with registry.

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 usually add focused libraries. Scope third-party roots inside .forge-widget-host so overrides stay predictable.

Example host — drop a grid, picker, or combobox mount node here.

Need Bootstrap 5.3 Typical add-on
Editable / spreadsheet grid Read-only table styles only Tabulator, Handsontable, AG Grid (+ KS CSS wrapper)
Searchable or multi-select field <select> or static dropdown Tom Select, Choices.js, Select2
Date / time picking None in core Flatpickr, Tempus Dominus, or native type="date"
Sortable data tables (remote data) None Same grid libraries + thin fetch layer

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