Theming
Customize every visual aspect through the S0 design-token system.
All S0 components reference a central S0.Theme struct defined in S0Theme.swift. Changing a token value updates every component that uses it.
Spacing
| Token | Value | Usage |
|---|---|---|
| Spacing.xxs | 2 pt | Tight gaps, required indicator offset |
| Spacing.xs | 4 pt | Inline spacing, label gaps |
| Spacing.sm | 8 pt | Icon-to-text gaps, compact padding |
| Spacing.md | 12 pt | Default horizontal padding, HStack spacing |
| Spacing.lg | 16 pt | Section padding, card padding |
| Spacing.xl | 24 pt | Large section spacing |
| Spacing.xxl | 32 pt | Extra-large button padding |
Radius
| Token | Value | Usage |
|---|---|---|
| Radius.sm | 4 pt | Checkboxes, small elements |
| Radius.md | 8 pt | Default component radius, inputs |
| Radius.lg | 12 pt | Cards, alerts, toasts |
| Radius.xl | 16 pt | Large containers |
| Radius.full | 9999 pt | Badges, avatars, pills |
The default Theme.radius used by most components is Radius.md (8 pt).
Typography
| Token | Size | Weight |
|---|---|---|
| Typography.largeTitle | 34 pt | Bold |
| Typography.title | 22 pt | Bold |
| Typography.headline | 17 pt | Semibold |
| Typography.body | 17 pt | Regular |
| Typography.callout | 16 pt | Regular |
| Typography.subheadline | 15 pt | Regular |
| Typography.footnote | 13 pt | Regular |
| Typography.caption | 12 pt | Regular |
| Typography.button | 14 pt | Medium |
Colors
Colors adapt automatically to light/dark mode via system APIs.
| Token | Light | Dark |
|---|---|---|
| Colors.primary | Color.primary | Color.primary |
| Colors.primaryForeground | systemBackground | windowBackgroundColor |
| Colors.background | systemBackground | windowBackgroundColor |
| Colors.card | systemBackground | windowBackgroundColor |
| Colors.secondaryBackground | secondarySystemBg | controlBackgroundColor |
| Colors.muted | tertiarySystemFill | underPageBgColor |
| Colors.border | separator | separatorColor |
| Colors.destructive | Color.red | Color.red |
| Colors.success | Color.green | Color.green |
| Colors.warning | Color.orange | Color.orange |
Shadows
| Token | Radius | Opacity | Y Offset |
|---|---|---|---|
| Shadow.sm | 2 pt | 5% | 1 pt |
| Shadow.md | 6 pt | 10% | 3 pt |
| Shadow.lg | 15 pt | 15% | 8 pt |
Apply with the .s0Shadow(.md) view modifier.
Animation
| Token | Curve | Duration |
|---|---|---|
| Animation.fast | easeOut | 0.1s |
| Animation.default | easeOut | 0.2s |
| Animation.slow | easeInOut | 0.35s |
| Animation.spring | spring(response: 0.35, damping: 0.7) | — |
Customizing tokens
Since you own the code, just edit S0Theme.swift directly. For example, to change the default corner radius:
// S0Theme.swift
public struct Theme {
// Change the default radius
public static let radius: CGFloat = Radius.lg // was Radius.md
// Customize spacing
public struct Spacing {
public static let lg: CGFloat = 20 // was 16
}
}