Shape & Spacing

Unlike colors and typography, Sundial has no central spacing/radius/shadow token file. Shape and spacing are conventions enforced by the component themes in app_theme.dart and by the Styled* components themselves. This page documents those conventions as they exist in code.

Corner radii

Radius	Where
16	Elevated / outlined / text buttons, `StyledCard` (`kDefaultCardBorderRadius = 16.0`), `StyledTextField`
8	Filled buttons, dialogs
12	Menus
24	Styled bottom sheet card
32	Chips (fully pill at typical heights)
Pill / stadium	`StyledNavigationBar`, `StyledFloatingActionButton`, `StyledTabBar`

The only exported radius constant is kDefaultCardBorderRadius = 16.0 in styled_card.dart. Everything else is inline in the component themes. Rule of thumb: primary tappable surfaces and cards are 16; dense system surfaces (dialogs, filled buttons) are 8; anything navigational is a pill.

Padding

Recurring values from the component themes:

Padding	Where
`EdgeInsets.symmetric(vertical: 17, horizontal: 20)`	All button styles (elevated, outlined, text, filled)
`EdgeInsets.all(16)`	Input fields (`contentPadding`)
`EdgeInsets.all(20)`	`StyledCard` default content padding (`kDefaultCardPadding`)
`EdgeInsets.symmetric(vertical: 10, horizontal: 16)`	Chips
`EdgeInsets.all(8)`	Icon buttons (within a fixed 40×40 hit target)

Elevation & shadows

Sundial is intentionally flat: buttons set elevation: 0, the navigation bar sets elevation: 0, and surfaces communicate hierarchy through the surfaceBg → surfaceElevated → surfaceHigh color ladder instead of shadows. The exception is StyledCard’s default (elevated) variant, which draws a subtle shadow derived from its elevation parameter (default 1.0). The .outlined() and .filled() variants are shadowless.

Sizing

Value	Where
40 × 40	Icon button fixed size (24 px icon)
24	Standard icon size in buttons
330	Drawer width
32 × 4	Bottom-sheet drag handle
4	Slider track height (12 px thumb radius)
40	`ashToolbarHeight` — the `StyledAppBar` toolbar height

Layout spacing

Gaps between siblings use Flutter’s modern spacing parameter rather than SizedBox separators:

Column(
  spacing: 8,
  children: [/* … */],
)

Row(
  spacing: 12,
  children: [/* … */],
)

There is no enforced spacing scale; common values in the codebase are 4, 8, 12, 16, 20.

Animation durations

Also not centrally tokenized — durations are declared where they’re used (e.g. wallpaper image fade-in is 500 ms). When adding motion, match the durations of neighboring components rather than inventing new ones.

If a central spacing/radius/duration token file is ever introduced, it should live in lib/design_system/tokens/ alongside the color and typography tokens — and this page should become a spec table like the others.

Getting Started

Craft and Foundations

Brand

Design System

For Agents

Shape & Spacing

Corner radii

Padding

Elevation & shadows

Sizing

Layout spacing

Animation durations