Foundations
The rules underneath every FG UI component.
Colours, typography, spacing, radius, elevation and states are centralised so products stay visually consistent.
Core colours
Brand and semantic state colours used 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.