Foundations
Spacing and breakpoints
Spacing values on a 4px grid and window-width breakpoints.
Spacing
Spacing values follow a 4px grid, apart from a few control metrics and the 1px and 2px borders. Use Spacing::Gap::Tight (4px) or Normal (8px) between related controls, Gap::Loose (16px) between groups, Gap::Section (24px) between sections, and Spacing::Padding::Card (16px) inside cards. Standard controls are Spacing::ControlHeight::Standard (32px) tall.
#include <FluentQt/Design.h>
layout->setSpacing(Spacing::Gap::Normal);
const int pad = Spacing::Padding::Card;
layout->setContentsMargins(pad, pad, pad, pad);from fluentqt.design import Spacing
layout.setSpacing(Spacing.Gap.Normal)
pad = Spacing.Padding.Card
layout.setContentsMargins(pad, pad, pad, pad)Breakpoints
Breakpoints::Small (640px), Medium (1007px), and Large (1920px) are width thresholds for adapting a layout, for example collapsing a navigation pane or moving cards into one column.