Statuses and labels - fd-object-status: a status word with a matching icon. Semantic colours: --positive (settled, complete), --critical (pending, needs attention), --negative (rejected, failed), --informative (information), none (neutral). fd-object-status--inverted fills the background. Map the data's status codes to plain words. - fd-info-label: a short category in a soft pill (fd-info-label--accent-color-1 to -10). Decorative colour only: use the same colour for the same category everywhere. - fd-object-marker: a small icon with a word for a flag on an item (Locked, Draft).

Buttons: fd-button, with the text in fd-button__text and an optional icon before it. - fd-button--emphasized: the one primary action in a view (blue). - fd-button (default) and fd-button--ghost: secondary actions. - fd-button--transparent: toolbar and card-header actions, icon-only buttons. - fd-button--positive / --negative: Approve / Reject style semantic actions (rare here). - fd-button--toggled with aria-pressed: an on/off button; a group of them is a segmented button (components/segmented.html). An icon-only button needs an aria-label (and title). Disabled: the disabled attribute.

Card: the container for one topic (fundamental-styles' fd-card, Horizon's rounded white tile). The header nesting is fixed: header > header-main > header-main-container > header-text > title-area > title. Keep every wrapper. - fd-card__subtitle-area: a line under the title (scope, period). - fd-card__header-main-actions: a counter (fd-object-status fd-card__counter) and transparent icon buttons on the right. - sf-card__toolbar: filters for the card's content (segmented button, search, select). - fd-card__content--with-spacing: padded content. Leave the modifier off for lists and tables that run edge to edge (and add fd-card--table for a table). - sf-card__footer: a source note, a timestamp or a link.

Charts 1. Sparkline (.sf-sparkline): a trend with no axes. Green when rising; add sf-sparkline--down when falling (red) or --neutral (blue). Build the paths with the function below. Set the height with --sf-sparkline-height. 2. Share bars (.sf-bar in an .sf-row): a value as a share of a whole, like "balance by currency". Set --value as a percentage, and --bar-color to a chart colour. 3. Bigger charts: inline SVG. Style marks with CSS classes and var() so they follow the theme: categorical series in --sapChart_OrderedColor_1 to _11 order, good/bad/neutral in --sapChart_Good / --sapChart_Bad / --sapChart_Critical / --sapChart_Neutral, axes and grid lines in --sapChart_LineColor_1, labels in --sapContent_LabelColor at 0.75rem. Legend: ul.sf-legend with --dot-color on each item.

Dynamic page: SAP's own page frame (the Fiori floorplans are built on it), as an alternative to .sf-page when the app is one object or one list rather than a dashboard: a breadcrumb, the title with its actions, a subtitle, a collapsible header for the key figures, then the content. The collapse button hides the header; the pin keeps it open while scrolling. Put the content's cards in an .sf-grid inside fd-dynamic-page__content. design_reference "Dynamic Page" for the sizes (fd-dynamic-page--sm / --md / --lg / --xl), tabs in the header and the floating footer.

Fields: each control sits in a .fd-form-item with a .fd-form-label (for= its id). - Text, search, number and date: input.fd-input. Give a field room with an inline style such as style="flex: 1; min-width: 14rem". - Dropdowns: a native select in .sf-select (fundamental-styles' own select needs a popover and scripts). The arrow icon comes after the select. - Checkboxes: input.fd-checkbox then label.fd-checkbox__label with the checkmark span. - Switches: label.fd-switch wrapping the input and the slider. - Required: fd-form-label--required. Errors: is-error on the input plus aria-invalid.

Key figures: the few numbers the app is about, at the top of a card or the page. .sf-kpi holds a label, the value and a line of context. The value is an fd-object-number (large: 1.5rem, light 72): the amount in fd-object-number__text, then the currency CODE (not a symbol) in fd-object-number__unit. Semantic colour only when the number itself is good or bad news: fd-object-number--positive / --negative / --critical. A change is an fd-object-status with a trend icon and the signed figure, never colour alone.

List: items with a title and a byline (accounts, beneficiaries, alerts). fd-list--byline gives each item two lines: the title, then fd-list__byline with a left and a right part. The right part can carry a semantic colour (--positive, --negative, --critical). Lists go in a plain fd-card__content so the rows run edge to edge. fd-list__item--link makes a row clickable (put the content in an a.fd-list__link).

Notice: a message strip about the data or the page, with the matching icon. Types: fd-message-strip--information (blue), --success, --warning, --error. Place it close to what it's about, start the text with the outcome, and use role="status" for information and good news, role="alert" for errors. Add fd-message-strip--dismissible and the close button only when the person may put it away. Don't use a strip inside a table cell or for one field's error.

Page: the frame every app uses. A bold title with a quiet subtitle (like a Fiori overview page), actions on the right, then a 12-column grid of cards on the grey page background. sf-span-3 / 4 / 6 / 8 set a card's width on wide screens; cards are full width on phones. The body needs no class: the host already sets the page background, font and text colour.

Panel: a collapsible section inside a card or the page (details, less-used filters, breakdowns). The expand button toggles aria-expanded and the content's hidden attribute. fd-panel--fixed makes a panel that can't collapse.

Segmented button: one choice among a few (a period, a view). A group of fd-buttons in .fd-segmented-button; the chosen one has fd-button--toggled and aria-pressed="true". The script below moves the choice and fires a change event the app can listen for.

States: what a card shows while data loads, when there's none, and when a call fails. fd-busy-indicator is SAP's spinner (sizes: none = small, --m, --l). Live apps show the loading state while nio.call is pending; replace it with the content, the empty state or the error state (which keeps a Retry button). Every data area needs all three.

Table: rows of records (transactions, payments, accounts). fd-table needs its wrappers: thead.fd-table__header, tbody.fd-table__body, tr.fd-table__row, th/td.fd-table__cell. Put it in a card as fd-card--table with a plain fd-card__content (no --with-spacing), and wrap it in .sf-table-wrap so it scrolls sideways on phones. - Numbers: add sf-num to the th and td (right-aligned, tabular). - A second line of detail: a div.fd-table__text with sf-muted sf-small. - Status: an fd-object-status, never colour alone. - Sorting: a transparent fd-button in the th, with aria-sort on the th that is sorted. - Empty: one row with td.fd-table__cell--no-data spanning every column.

Tabs: a few views of the same card, with counts in the labels. SAP's Icon Tab Bar in its text-only form (fd-tabs is deprecated). Each tab is li.fd-icon-tab-bar__item > a.fd-icon-tab-bar__tab with aria-selected on the chosen one; each panel is a section.fd-icon-tab-bar__panel, hidden when not chosen. The script below switches them. Other forms (icons, semantic colours, filter and process tabs): design_reference "Icon Tab Bar".

Toolbar: a row of actions above a table or list (not the page header; the page has sf-page__actions). fd-toolbar--title with an fd-title--h5 on the left, a spacer, then transparent buttons; fd-toolbar__separator between groups. fd-toolbar--transparent fd-toolbar--clear removes the background and border for use inside a card.

Every component in fundamental-styles, SAP's CSS for Fiori, one page each with all of SAP's examples in the real styles. The AI asks for any of them by name (the design_reference tool) and gets the same markup. Grey names have no stylesheet in the package.

Components: Action Bar · Action Sheet · Avatar Group · Avatar · Bar · Breadcrumb · Busy Indicator · Buttons › Button Split · Buttons › Button · Buttons › Segmented Button · Calendar · Card › Card · Card › Media Card · Carousel · Code · Counter · Cx Side Navigation · Dialog · Feed Input · Feed List and Item · File Uploader · Forms › Checkbox · Forms › Field Set · Forms › Form Group · Forms › Form Header · Forms › Form Item · Forms › Form Label · Forms › Form Message · Forms › Input Group · Forms › Input · Forms › Prompt Input · Forms › Radio · Forms › Textarea · Generic Tag · Generic Tiles · Grid List › Grid List · Grid List › Selection · Icon Tab Bar · Icons › BusinessSuiteInAppSymbol Icons · Icons › SAP Icons · Icons › TNT Icons · Illustrated Message · Info Label · List › Byline · List › Standard · List › Subline · Menu · Message Box · Message Page · Message Popover · Message Strip · Message Toast · Micro Process Flow · Notifications · Object Identifier · Object List · Object Marker · Object Number · Object Status · Pagination · Panel · Popover · Product Switch · Progress Indicator · Quick View · Rating Indicator · Scrollbar · Search Field · Select · Settings · Shellbar · Side Navigation · Skeleton · Slider · Status Indicator · Step Input · Switch · Table · Text · Time Picker · Time · Title · Token · Tokenizer · Toolbar · Tree · Upload Collection · User Menu · Variant Management · Vertical Navigation · Wizard

AI: Components › Busy Indicator · Components › Button · Components › Loading Bar · Components › Prompt Input · Patterns › Acknowledgment · Patterns › Guided Prompt · Patterns › Notice · Patterns › Progress Indicator · Patterns › Writing Assistant Toolbar

BTP: Avatar · Button · Navigation › Horizontal Navigation · Navigation Menu · Navigation › Vertical Navigation · Splitter · Title Bar · Tool Header · User Menu

Patterns: Combobox Input · Contextual Menu · Date Picker · Horizontal Navigation · Multi Input

Deprecated: Components › Tabs · Components › Time Picker

Dev: Drag and Drop Icon Tab Bar · Facets · Numeric Content · Object Attribute · Off Screen

Layouts: Dynamic Page · Dynamic Side Content · Fixed Card Layout · Flexible Column · Layout Grid · Layout Panel · Margins · Paddings · Page Footer · Page · Resizable Card Layout · Section · Tool Layout

Utilities (SCSS mixins, no stylesheet): Border Radius · Border · Component Reset · Container Queries · Elevation · Heading · Label · Media Queries · Overflow · Padding · Text · Titles · Typography

SAP's Fiori design guidelines (from SAP's ai-skills-library, Apache-2.0): floorplans, page layouts and the guidance for each kind of element. The AI reads a topic with design_reference, kind "guideline".

foundations-best-practices: Ui Elements › Title Hierarchy Guidance

foundations-visual: Iconography › Iconography Horizon · Iconography › Product Launch Icons · Typography › Typography Horizon

foundations-writing-and-wording: Ux Writing › Ux Writing For Notifications

page-types: Floorplans › Analytical List Page · Floorplans › List Report Floorplan Sap Fiori Element · Floorplans › Object Page · Floorplans › Overview Page · Page Layouts › Dynamic Page Layout · Page Layouts › Dynamic Page Web Component · Page Layouts › Page Header

ui-actions: Button · Link · Toggle Button

ui-containers: Cards · Filter Bar · Notification Center · P13n Dialog Popup · Popover · Shell Bar · Table Bar · User Menu

ui-display: Avatar · Avatar Group

ui-inputs: Checkbox · Date Picker · Datetime Picker · Input Field · Range Slider · Select · Select Web Component · Slider · Switch

ui-lists-tables: Analytical Table Alv · Grid List · Grid Table · Responsive Table · Upload Set With Table Plugin

ui-messages: Message Strip

ui-navigation: Icontabbar · Segmented Button · Shell Search · Side Navigation