Choose your brand
Try a primary colour.
FG UI stays the same system. Only the colour tokens change.
Live playground
Change one brand colour and watch FG UI respond.
This page demonstrates one of the easiest ways to make FG UI feel like your product. Pick a colour, then the preview updates using the same semantic FG UI variables you would override in your own project.
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.
Why this matters
You customise the system, not every button.
Semantic variables flow through the components that use them. That makes branding much faster than hunting through hundreds of selectors.
Keep the Core untouched.
Load fgui.css, then place your token overrides after it. Future FG UI updates do not need to overwrite your brand settings.
Live preview
Real FG UI components under your colour.
Buttons, chips, status, navigation, progress, alerts and Combined patterns all continue using the same component markup.
Actions
Primary, secondary and selected states.
Progress
System feedback keeps the same brand language.
In progress
Feature card
Combined layouts inherit the same tokens without needing a separate theme.
Tabs
Interactive state follows the current brand colour.
Form
Focus and action colours remain consistent.
Now build something
Move from the playground to a real page.
The beginner guide shows exactly where the colour override goes and how to build a small site from a blank HTML file.