Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.prism.byescaleira.com/llms.txt

Use this file to discover all available pages before exploring further.

Design tokens are the single source of truth for every visual decision in PrismUI. Instead of scattering raw values like Color(.systemBlue) or padding(16) throughout your codebase, you reference named tokens that resolve to concrete values through the active theme. This means swapping an entire visual identity requires changing one line, and every component in your app updates automatically. PrismUI ships with six token types. Each one is a Swift enum, so the compiler catches typos, Xcode auto-completes every case, and refactoring is safe across your entire project.

​
Color tokens

ColorToken defines 28 semantic color roles organized into six groups. The active theme resolves each role to a concrete Color — the same token maps to different hues in DefaultTheme, DarkTheme, or your own BrandTheme.
Use semantic tokens, not specific hues. Write .brand instead of .blue so your UI adapts automatically when the theme changes.
TokenGroupPurpose
brandBrandPrimary brand color
brandVariantBrandSecondary brand tint (80% opacity of brand)
backgroundBackgroundsPrimary screen background
backgroundSecondaryBackgroundsGrouped or secondary background
backgroundTertiaryBackgroundsTertiary or inset background
surfaceSurfacesCard and container background
surfaceSecondarySurfacesSecondary card background
surfaceElevatedSurfacesElevated surface (modals, popovers)
onBackgroundContentPrimary text on backgrounds
onBackgroundSecondaryContentSecondary text on backgrounds
onBackgroundTertiaryContentTertiary / placeholder text
onSurfaceContentPrimary text on surfaces
onSurfaceSecondaryContentSecondary text on surfaces
onBrandContentText and icons placed on brand color
borderBordersStandard border
borderSubtleBordersSubtle / lighter border
separatorBordersList and section separators
interactiveInteractiveDefault interactive element color
interactiveHoverInteractiveHover state (90% interactive)
interactivePressedInteractivePress state (70% interactive)
interactiveDisabledInteractiveDisabled state
successFeedbackPositive / confirmation
warningFeedbackCaution
errorFeedbackDestructive / failure
infoFeedbackInformational
shadowUtilityShadow tint
overlayUtilityModal backdrop
Apply a semantic color to any view with the .prismColor() modifier: 
Text("Account balance")
    .prismColor(.onBackgroundSecondary)

Image(systemName: "exclamationmark.triangle")
    .prismColor(.error)
Read the resolved Color directly when you need it in imperative code: 
@Environment(\.prismTheme) private var theme

let tint = theme.color(.interactive)

​
Typography tokens

TypographyToken maps to Apple’s Dynamic Type system. Every case corresponds to a Font.TextStyle and carries a default Font.Weight, so text scales correctly with the user’s preferred text size without any extra work on your part.
TokenText styleDefault weight
largeTitle.largeTitle.bold
title.title.bold
title2.title2.bold
title3.title3.semibold
headline.headline.semibold
subheadline.subheadline.regular
body.body.regular
callout.callout.regular
footnote.footnote.regular
caption.caption.regular
caption2.caption2.regular
Apply a typography token with .prismFont(): 
Text("Dashboard")
    .prismFont(.title)

Text("Last updated 2 minutes ago")
    .prismFont(.caption)
You can also call .font directly on the token value: 
let font = TypographyToken.body.font(weight: .medium, design: .monospaced)

​
Spacing tokens

SpacingToken is a 4-point grid system. Every spacing value is a multiple of 4pt, which keeps layouts consistent and makes spacing decisions deterministic.
TokenValue
none0 pt
xxs2 pt
xs4 pt
sm8 pt
md12 pt
lg16 pt
xl24 pt
xxl32 pt
xxxl48 pt
section64 pt
Apply spacing with .prismPadding(): 
Text("Welcome back")
    .prismPadding(.lg)

​
Radius tokens

RadiusToken controls corner rounding using Apple’s continuous (squircle) style — the same curve used throughout iOS and macOS. Every token exposes a ready-to-use RoundedRectangle shape via .shape and an UnevenRoundedRectangle via .clipShape.
TokenValue
none0 pt
xs4 pt
sm8 pt
md12 pt
lg16 pt
xl24 pt
full9999 pt (capsule)
Apply a background with a radius using .prismSurface(): 
Text("New")
    .prismPadding(horizontal: .sm, vertical: .xs)
    .prismSurface(.brand, radius: .full)
    .prismColor(.onBrand)
Clip a view to a continuous rounded shape with .prismRadius(): 
Image("cover")
    .resizable()
    .scaledToFill()
    .frame(width: 120, height: 80)
    .prismRadius(.md)
Access the shape directly when you need it as a SwiftUI.Shape: 
someView
    .background(theme.color(.surface), in: RadiusToken.lg.shape)

​
Elevation tokens

ElevationToken controls shadow depth through a five-level hierarchy. Higher levels signal more visual prominence — use them for modals and overlays, not for ordinary cards.
TokenShadow radiusY offsetOpacity
flat0 pt0 pt0
low2 pt1 pt6%
medium4 pt2 pt10%
high8 pt4 pt15%
overlay16 pt8 pt20%
Apply elevation with .prismElevation(): 
PrismCard {
    Text("Balance")
        .prismFont(.headline)
}
.prismElevation(.medium)
ElevationToken conforms to Comparable, so you can sort or compare levels in logic: 
if currentElevation < .high {
    // safe to add more elevation
}

​
Motion tokens

MotionToken defines animation durations and curves. Every animation in PrismUI uses these tokens — and the .prismAnimation() modifier automatically disables animations when the user has enabled Reduce Motion in system accessibility settings.
TokenDurationCurve
instant0.10 s.linear
fast0.15 s.easeOut
normal0.25 s.easeInOut
slow0.35 s.easeInOut
expressive0.50 s.spring(bounce: 0.2)
snappy0.25 s.snappy
bouncy0.35 s.bouncy
smooth0.30 s.smooth
Apply a motion-safe animation with .prismAnimation(): 
Image(systemName: "checkmark.circle")
    .prismAnimation(.fast, value: isComplete)
Access the underlying Animation directly: 
withAnimation(MotionToken.normal.animation) {
    isVisible = true
}
Always use .prismAnimation() or check @Environment(\.accessibilityReduceMotion) before running animations. PrismUI components do this internally, but custom animations in your own views need the same treatment.

​
Combining tokens

Tokens compose naturally. The following example uses all four view-modifier tokens together: 
Text("Welcome")
    .prismFont(.title)
    .prismColor(.onBackground)
    .prismPadding(.lg)
    .prismSurface(.surfaceSecondary, radius: .lg)
This applies the title text style, the onBackground semantic color, 16 pt padding, and a surfaceSecondary background with a 16 pt continuous corner radius — all resolved through the active theme at runtime.