Foundations
The rules underneath every FG UI component.
Colours, typography, spacing, radius, elevation and states are centralised so products stay visually consistent.
Core colours
FG Brand Blue is the permanent primary colour for identity, primary actions and primary buttons. Deeper FG blues are reserved for hover, active and supporting states. Semantic colours remain shared across FG UI.
Typography
Manrope 800
Clear product hierarchy
Reusable heading scale
Body text stays readable and practical across administrator and frontend surfaces.
Manrope is loaded locally from FG UI assets.States
Success feedback
Warning feedback
Danger feedback
Neutral information
Radius and elevation
Soft, modern surfaces without heavy visual noise.
Controls
Compact radius for fields and controls.
Cards
Larger radius for content surfaces.
Soft surfaces
Pale support backgrounds.
Selected
Clear active state with FG Blue.
See the foundations in use
The component catalogue demonstrates these same rules across every interface family.
Primary means FG Blue. The default primary colour and primary-button background are always
#0F79CC. Deeper blue is reserved for hover and active states.