Printed from https://preview.headlandyachting.com/brand/spacing-and-shape/

Spacing and shape

Space, corners and shadows are set once and used everywhere, so pages feel consistent without anyone measuring.

Spacing scale

Token	Size	Drawn to size
	`0px`
	`4px`
	`8px`
	`12px`
	`16px`
	`20px`
	`24px`
	`32px`
	`40px`
	`48px`
	`56px`

Running text

Articles, case studies and other long pages space their paragraphs and headings with the flow tokens, so every long page reads the same way.

Token	Light	Dark	Use
	`16px`space.4	`16px`space.4	Between paragraphs, lists, figures and other blocks
	`12px`space.3	`12px`space.3	From a heading to the text under it
	`24px`space.6	`24px`space.6	Above an h3
	`32px`space.8	`32px`space.8	Above an h2

Corners

Card Button Form field

Card Button Form field

Cards, buttons and form fields each have their own corner

Token	Light	Dark	Use
	`8px`radius.sm	`8px`radius.sm	Cards, panels, callouts, dialogs
	`4px`radius.xs	`4px`radius.xs	Buttons
	`4px`radius.xs	`4px`radius.xs	Text fields, selects and text areas
	`4px`radius.xs	`4px`radius.xs	The header search box and the search page's box

Shadows

Token	Light	Dark	Use
	`0 1px 2px rgba(21,34,56,0.06), 0 8px 24px rgba(21,34,56,0.06)`	`0 1px 2px rgba(0,0,0,0.3), 0 8px 28px rgba(0,0,0,0.35)`	Two-layer CSS shadow, stored as a string (the build passes it through as-is)
	`0 1px 2px rgba(21,34,56,0.06), 0 0 0 1px color-mix(in srgb, var(--somnia-color-action-primary) 14%, transparent), 0 14px 44px color-mix(in srgb, var(--somnia-color-action-primary) 16%, transparent)`	`0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px color-mix(in srgb, var(--somnia-color-action-primary) 26%, transparent), 0 12px 48px color-mix(in srgb, var(--somnia-color-action-primary) 20%, transparent)`	A soft glow in the brand accent that lifts one feature (the case study mockup) above the page. Use sparingly.