Do / Don’t guide

Use FG UI well from the start.

Use native HTML for native responsibilities, reuse FG UI tokens and components, and initialise dynamic content through the public runtime instead of creating a second behaviour layer.

Built with FG UI itself.

This page is built entirely with FG UI using the same components, layout primitives, icons and interactions available in the kit. No Bootstrap, Tailwind or external UI framework is required.

DO

Use a native button

<button class="fgui-btn fgui-btn--primary" type="button">Save</button>
DON’T

Fake a button with a div

<div class="fgui-btn" onclick="save()">Save</div>

Native buttons already provide keyboard and disabled-state semantics.

DO

Label fields

<label class="fgui-field">
  <span class="fgui-label">Email</span>
  <input class="fgui-input" type="email">
</label>
DON’T

Use placeholder-only labelling

<input class="fgui-input" placeholder="Email">

A placeholder is not a replacement for a label.

DO

Compose existing components

Combine Card + Status + Metadata Row + Button when those pieces already express the interface.

DON’T

Create product-specific copies

Do not invent a new Core family only because one page uses an existing Card with a Status and Button.