Typography & spacing
A readable hierarchy and a consistent rhythm.
BluUI uses an Inter-first system font stack. If Inter is not installed, it uses the platform’s system sans-serif. This preserves the current OutSystems typography without an external font dependency.
Type with a clear job
Page titleA clear starting point
24–34 px / 650Section headingKeep related things together
18 px / 600Component headingCustomer details
16 px / 650BodyReadable labels make work easier to understand.
14 px / 400Supporting textSaved a moment ago.
12 px / 400A four-pixel rhythm
The shared spacing tokens provide a predictable base for component layout.
4 px
--blu-space-18 px
--blu-space-212 px
--blu-space-316 px
--blu-space-420 px
--blu-space-524 px
--blu-space-6Shape and emphasis
4
--blu-radius-xs6
--blu-radius-sm8
--blu-radius-md12
--blu-radius-lg16
--blu-radius-xlUse modest rounding and restrained shadows. Let typography, spacing, and borders establish the hierarchy.