Design Tokens

Design tokens are the foundational values that define your app's visual language. PrettyUI provides a comprehensive token system for colors, spacing, border radius, shadows, and typography.

Color Tokens

Color tokens define your app's color palette. Each token has a specific semantic purpose.

Primary & Secondary

Token	Purpose
`primary`	Main brand color for CTAs, links, active states
`primaryForeground`	Text/icon color on primary backgrounds
`secondary`	Secondary actions, less prominent elements
`secondaryForeground`	Text/icon color on secondary backgrounds
`accent`	Highlights, emphasis, decorative elements
`accentForeground`	Text/icon color on accent backgrounds

Semantic Colors

Token	Purpose
`destructive`	Destructive actions (delete, remove, errors)
`destructiveForeground`	Text on destructive backgrounds
`success`	Success states, confirmations
`successForeground`	Text on success backgrounds
`warning`	Warning states, cautions
`warningForeground`	Text on warning backgrounds

Background & Surface

Token	Purpose
`background`	Main page background
`foreground`	Primary text color
`muted`	Subtle backgrounds (cards, inputs)
`mutedForeground`	Secondary/muted text
`card`	Card and surface backgrounds
`cardForeground`	Text on card backgrounds

Border & Focus

Token	Purpose
`border`	Default border color
`input`	Input field borders
`ring`	Focus ring color

Usage Example

struct MyView: View {
    @Environment(\.prettyTheme) private var theme
    @Environment(\.colorScheme) private var colorScheme
    
    var body: some View {
        let colors = theme.colors(for: colorScheme)
        
        VStack {
            Text("Hello")
                .foregroundColor(colors.foreground)
            
            Button("Action") { }
                .background(colors.primary)
                .foregroundColor(colors.primaryForeground)
        }
        .background(colors.background)
    }
}

Spacing Tokens

Spacing tokens provide a consistent scale for padding, margins, and gaps.

Token	Value	Usage
`xxs`	2pt	Micro spacing, icon gaps
`xs`	4pt	Tight spacing, small gaps
`sm`	8pt	Compact layouts, list items
`md`	16pt	Default spacing, card padding
`lg`	24pt	Section spacing, generous padding
`xl`	32pt	Large gaps, section dividers
`xxl`	48pt	Extra large spacing
`xxxl`	64pt	Maximum spacing, hero sections

Usage Example

VStack(spacing: theme.spacing.md) {
    Text("Title")
        .padding(.horizontal, theme.spacing.lg)
    
    Text("Subtitle")
        .padding(.bottom, theme.spacing.xl)
}
.padding(theme.spacing.md)

Custom Spacing

Use .custom(_:) for one-off values:

.padding(.horizontal, theme.spacing[.custom(20)])

Radius Tokens

Border radius tokens ensure consistent rounded corners across your app.

Token	Value	Usage
`none`	0pt	Sharp corners
`sm`	6pt	Small chips, tags, badges
`md`	10pt	Inputs, small buttons
`lg`	14pt	Standard cards, modals
`xl`	20pt	Large cards, images
`xxl`	28pt	Sheets, large modals
`full`	9999pt	Pills, avatars, circular buttons

Usage Example

RoundedRectangle(cornerRadius: theme.radius.lg)
    .fill(colors.card)

// Or using RadiusSize enum
Text("Tag")
    .padding(.horizontal, theme.spacing.sm)
    .background(colors.muted)
    .clipShape(RoundedRectangle(cornerRadius: theme.radius[.sm]))

Shadow Tokens

Shadow tokens create consistent elevation and depth.

Token	Radius	Y-Offset	Opacity	Usage
`none`	0pt	0pt	0%	No shadow
`sm`	4pt	2pt	4%	Cards at rest
`md`	12pt	4pt	8%	Cards on hover, tooltips
`lg`	20pt	8pt	10%	Floating elements
`xl`	32pt	12pt	12%	Modals, sheets
`xxl`	48pt	16pt	16%	Popovers, dropdowns

Usage Example

Card()
    .prettyShadow(theme.shadows.md)

// Or manually
Card()
    .shadow(
        color: theme.shadows.lg.color,
        radius: theme.shadows.lg.radius,
        x: theme.shadows.lg.x,
        y: theme.shadows.lg.y
    )

Custom Shadows

let customShadow = ShadowStyle(
    color: Color.blue.opacity(0.2),
    radius: 16,
    x: 0,
    y: 8
)

Card()
    .prettyShadow(customShadow)

Typography Tokens

Typography tokens define your app's text styling system.

Font Sizes

Token	Size	Usage
`xs`	12pt	Captions, fine print
`sm`	14pt	Secondary text, labels
`base`	16pt	Body text (default)
`lg`	18pt	Emphasized body text
`xl`	20pt	Subtitles
`xxl`	24pt	Section titles
`xxxl`	30pt	Page titles
`display`	36pt	Hero headlines

Font Weights

Token	Weight
`thin`	100
`light`	300
`regular`	400
`medium`	500
`semibold`	600
`bold`	700
`heavy`	800

Line Heights

Token	Multiplier	Usage
`tight`	1.25	Headlines, compact text
`normal`	1.5	Body text
`relaxed`	1.75	Comfortable reading
`loose`	2.0	Maximum readability

Letter Spacing

Token	Value	Usage
`tighter`	-0.8pt	Tight headlines
`tight`	-0.4pt	Headlines
`normal`	0pt	Body text
`wide`	0.4pt	All caps text
`wider`	0.8pt	Spaced text
`widest`	1.6pt	Maximum spacing

Usage Example

Text("Headline")
    .font(.system(size: theme.typography.sizes.xxl))
    .fontWeight(theme.typography.weights.bold)
    .tracking(theme.typography.letterSpacing.tight)

Customizing Tokens

You can customize any token set when creating a custom theme:

extension PrettyTheme {
    static let compact = PrettyTheme(
        spacing: SpacingTokens(
            xxs: 1,
            xs: 2,
            sm: 4,
            md: 8,
            lg: 12,
            xl: 16,
            xxl: 24,
            xxxl: 32
        ),
        radius: RadiusTokens(
            none: 0,
            sm: 4,
            md: 6,
            lg: 8,
            xl: 12,
            xxl: 16,
            full: 9999
        )
    )
}

Best Practices

Use semantic tokens — Prefer colors.primary over hardcoded colors
Stick to the scale — Use existing tokens instead of arbitrary values
Be consistent — Use the same spacing token for similar elements
Use .custom() sparingly — Only for genuinely unique one-off values
Access tokens from theme — Always read from theme.spacing, theme.radius, etc.