Styling

Views start with a plain, legible look: light text on the panel's dark glass, system font at 15 pt. Two layers change that:

1. Style presets – on buttons, one setting that sets several properties at once.
2. Appearance Overrides – individual properties you set per view, on top of the preset.

Panels always render in dark appearance, so pick colours that read on a dark or translucent backdrop.

Style presets

A Button has a Style at the top of its section:

Style	Look
Primary (default)	Blue fill, white title and icon, rounded corners
Secondary	Soft grey fill, blue title and icon, rounded corners
Destructive	Red fill, white title and icon, rounded corners
Custom	No fill, blue title and icon – a starting point for your own look

Any Appearance Override you set wins over the preset. A Primary button with a green Fill is a green button with the Primary title colour and corners.

Appearance Overrides

Each override starts unset. Click + on its row to set it, and the trash button to remove it again; an unset override means "use the default".

Override	Sets
Shape	Rectangle, Rounded (with a corner radius, 0–500 pt), Capsule or Circle. Rounds the view's background and clips its content
Fill	The background colour
Foreground	The colour of text and icons. On a Divider this row is called Color and sets the line; on a Slider it colours the track; on a Progress View, the bar or spinner
Border	A colour and a width, 0.5–8 pt
Shadow	A colour, an X and Y offset (−100 to 100 pt) and a Blur radius (0–50 pt). Starts as a soft black shadow 2 pt below the view
Font	Family, Size (6–200 pt), Weight and Letter Spacing (−10 to 20 pt)
Opacity	0–100 % for the whole view, including its children

Colour pickers include an opacity slider, so a Fill can be semi-transparent.

Font families: System, Rounded, Serif, Monospaced, Avenir and Futura. Weights: Regular, Medium, Semibold, Bold and Heavy.

A label's shadow follows the letters rather than the label's box, which makes it a text shadow.

Which overrides each view offers

Only the overrides that change a view appear in its section:

View	Overrides
Button, Text Field, Custom Toggle	Shape, Fill, Foreground, Border, Shadow, Font, Opacity
Label	Fill, Foreground, Shadow, Font, Opacity
Image, Web View, VStack, HStack, ZStack	Shape, Fill, Border, Shadow, Opacity
Shape	Fill, Border, Shadow, Opacity
Stepper	Foreground, Font, Opacity – applied to the stepper's Label text
Switch Toggle	Foreground, Opacity – Foreground colours the title
Slider, Progress View, Divider, Segmented Control	Foreground, Opacity
Spacer	none

A styled stack is the usual way to build a card: give a VStack padding, a Fill, a Rounded Shape and a Shadow, and put the content inside it.

A Button's Shape offers Rectangle, Rounded and Capsule; a capsule-shaped square button is already a circle.

Off and On states

A Toggle with the Custom style can look different when it is on. With a Custom toggle selected, an Off / On tab bar sits at the top of the inspector:

• Off edits the toggle's normal look.
• On edits only what changes when it is switched on. Anything you leave unset on the On tab is taken from the Off tab, so a toggle that just turns orange when on needs one override: Fill on the On tab.

The tab applies to the Title, the Image and every Appearance Override. The canvas shows the toggle in the selected state, whatever its Default On setting. Default On, layout and the other shared settings apply to both states.

A typical Custom toggle: Title "Show Dimensions" with an eye image when off, "Hide Dimensions" with a crossed-out eye and a filled background when on.

Copy and paste a style

Right-click a view and choose Copy Style (⌘⌥C), then Paste Style (⌘⌥V) on another. Paste replaces the target's whole style – the preset, every Appearance Override and both Off and On states. Its text, layout and other settings stay as they were.

Copy Style is available only on a view that has a style set.