---
title: "Ui: designRules"
description: "smabar plugin reference: Ui: designRules"
canonical: "https://smabar.com/docs/plugin-ref-ui-design-rules/"
lang: en
---

# Ui: designRules

> smabar plugin reference: Ui: designRules

Canonical HTML version: https://smabar.com/docs/plugin-ref-ui-design-rules/ · Language: en · Publisher: smabar (https://smabar.com)

---

[Build my plugin](https://smabar.com/build-my-plugin.md) · [All references](https://smabar.com/docs/plugin-ref-index.md) · [Install the ZIP](https://smabar.com/docs/install-plugin-zip.md)

Source: smabar 1.5.0, revision `a019f2563965edc37a5e8d84742ea1ff2fa6f824`. [Export metadata and checksums](https://smabar.com/plugin-reference/export.json).

This is an offline reference. MCP calls quoted below describe the connected workflow; use the linked documents and create local files instead. Live state, installed plugins, available providers and the user's active theme are unknown. Never claim a live check.

Read with [styling](https://smabar.com/docs/plugin-ref-styling.md) and [examples](https://smabar.com/docs/plugin-ref-examples.md).

```json
[
  "Flyouts are desktop utility panels: compact by default (normally 340px), wider when tables or multi-column content need it. Request width through conventions.flyoutWidth, not inline width styles. Width and scrolling are independent: one outer scroller works at every width; use sb-split only for independently scrolling columns. Start with a title, useful data and controls; keep media at max-width 100%. See snippets.wideFlyout, screenFlyout and splitFlyout.",
  "Spacing is AUTOMATIC: every top-level block in your HTML, and every child of sb-card/sb-hero, already gets vertical rhythm from the kit — inside data-tabs, data-tab-panel, sb-reveal and accordion bodies too; surfaces (card, hero, KPI grid, alert, empty state, table, chart, tab panel) get a larger gap on both sides, and a field hint sits one clear step under its control. style= carries only a data value (a progress width, --sb-chart-value) or a documented token (--sb-grid-cols); spacing, type and flex come from sb-field (input+button on one line), sb-inline (horizontal cluster), sb-push (align to the end of a row), sb-grid with --sb-grid-cols, the sb-text-* steps and sb-flush/sb-tight — the shell reports any other inline style into your log.",
  "Keep the tile calm and compact: one primary value with an optional secondary label. The shell owns its outer surface, padding and interaction states; start with sb-tile and a cover recipe instead of wrapping another card around the content. Details belong in the flyout, actions in the flyout header (sb-header-actions).",
  "Use the sb-* kit classes and var(--sb-*) theme tokens instead of custom colors so tiles follow the active theme.",
  "Give every tile a stable, hugging width: the shell centers the cover as a whole; stacked values and labels share a leading edge. Cover digits are tabular in the theme's font by default; choose sb-mono only when a monospace face is wanted. Use data-marquee for growing text and data-rotator for several values (see tileSizing); do not add a fixed or minimum width around short content.",
  "The bar tile is one of the nine coverLayouts recipes; pick one by whenToUse and fill it with your data."
]
```