Standard container sizing spec

Summary

A construction page that specifies the standard container's corner radius, interior margins and how both scale with the 12pt base grid, using red callout labels over slate panels.

Visual description

Cream (#F4F0E8) page with the standard header (Visual Identity / Graphic Devices, title "Standard container / Corner radius and sizing", page "141"). The left column carries detailed body copy with bold call-outs giving exact values: outside radius 12pt, inside radius 6pt, interior margins 12pt. The right area shows slate-grey rounded rectangles on a faint grid annotated in F1 warm red: a large square panel marked "Corner Radius", "Inside 6pt" and "Interior Margins 12pt" with thin red corner-construction marks, plus two tall portrait panels and one landscape panel demonstrating the same radius at different proportions. Across the bottom, a row of squares steps up in size from tiny to large, showing the corner radius scaling with the grid unit.

Key takeaway

The stepped row of increasing squares that proves a corner radius scaling rule in one glance. Using a single accent (red) only for measurement annotations against neutral grey shapes, so spec callouts never compete with the device itself. The nested inside-radius rule (halve the radius when a container sits inside another) is a tidy, reusable system idea.

Reuse notes

A model page for documenting corner-radius and spacing rules in a component or shape system. The grey-shape-plus-red-annotation convention is directly reusable for any geometry spec. Best paired with the intro and uses pages around it. The exact 12pt/6pt values are F1-specific; swap for your own grid.