Shapes

Corners

Everything we make has soft corners, and the radius grows with the size of the thing. Small parts get a small radius, big surfaces a bigger one. The five steps are the radius tokens of the app, plus radiusLG (48px) for the rare round element that needs a fixed radius; in the app they are drawn as smooth corners, a squircle, instead of a plain circle arc.

• Nested corners get smaller. A card at 12px holds tiles at 8px and bars at 4px, so the inner curve follows the outer one.
• No sharp corners, also not on images. Photos in a card take the card's radius.

Buttons and pills

Buttons have 12px corners, in the app, on the website and in email. A pill is for what you read or pick, not for what you press: status tags, payment chips and the segmented control.

• Solid blue is the main action, one per view. Outline is a secondary action, dark is for store and download buttons.
• Buttons are 44px high in the app and in email, 36px in a website header, with 16 to 24px of padding on each side.
• Status tags are the status text color on the status background, never a strong color with white. See status.
• On a mesh, chips are an outline in white at 25%, and the selected option of a segmented control is white with dark text.

Materials

What we lay on top of a mesh surface. Glass lets the color through; the floating card sits above it with a soft shadow.

Grain

Every mesh surface has a fine film grain on top: an SVG noise texture at 42% opacity, blend mode overlay. It takes the digital smoothness off the gradient and makes it feel printed. Grain goes on mesh surfaces only, never on flat colors, photos or the product UI.

In code, put sp-grain and one of sp-mesh-cool, sp-mesh-warm or sp-mesh-deep on the element. The gradients on the color page have the CSS of each mesh.