Alignment

Alignment is a layout principle that contributes to visual organization and clarity. Consistent alignment helps users predict where to find information and how to interact with controls.

Principles

Consistent alignment creates order and professionalism.
Shared edges and columns make forms, tables, and toolbars easier to scan.
Match header alignment to the data in each column (text left, numbers right).
Primary actions align to the right in dialogs and panels; content stays left-aligned.

Alignment in panels

Desktop feature panels use right-aligned labels with a shared control column. Standalone buttons align with the left edge of inputs, not the label column.

File name

Width (px)

Format

Label column min-width 100px · 6px gap to controls · actions right-aligned in control column

Alignment in web forms

Company web forms stack the label above the control. Fields share the same left edge; buttons align with the field column.

Alignment in tables

Text and identifiers are left-aligned. Numeric values and units are right-aligned so digits line up for comparison. Column headers follow the same alignment as their data.

File name	Width	Height	Format
Brightfield_001.tif	1920	1080	TIFF
Brightfield_002.tif	2048	1536	TIFF
Phase_003.tif	512	512	PNG

Numeric columns share a right edge · text columns share a left edge

Alignment in dialogs

Dialog body copy is left-aligned. Action buttons sit in the footer with the primary action on the right and dismiss on the left (Z-pattern reading).

This removes the selected ROI and its statistics. This action cannot be undone.

Alignment in button groups

Ribbon and toolbar controls share a horizontal baseline. Icon buttons center their label under the icon; groups are separated by vertical dividers.

Icons top-aligned · labels centered under each icon · groups separated by dividers

Alignment in lists

List rows keep the primary label on the left. Metadata columns (size, type) align to the right in fixed-width columns so values stack vertically across rows.

Brightfield_001.tif 2.4 MB TIFF
Brightfield_002.tif 18 MB TIFF
Phase_003.tif 512 KB PNG

Usage reference

Context	Alignment	Notes
Panel forms (desktop)	Labels right · controls left-aligned column	100px min label width; 6px label-to-control gap; inset 9px from panel edge
Web forms	Labels above · fields left-aligned	Stacked layout; buttons align with field left edge
Tables / datatables	Text left · numbers right	Headers match column data alignment; monospace optional for numeric columns
Dialogs	Body left · actions footer right	Primary on the right; secondary/dismiss on the left
Button groups / ribbon	Icons top · labels centered below	Single row per group; vertical dividers between groups
Lists	Primary text left · metadata right	Fixed metadata columns for scannable size, type, or date values