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

Design tokens are named constants that encode your design decisions. PrismUI uses six token families to keep your UI consistent across every component and platform.

​
ColorToken

Semantic color tokens map to purposes, not hues. The active PrismTheme resolves each token to a concrete Color.
ColorToken Cases
public enum ColorToken: String, Sendable, CaseIterable {
    // Brand
    case brand, brandVariant

    // Backgrounds
    case background, backgroundSecondary, backgroundTertiary

    // Surfaces
    case surface, surfaceSecondary, surfaceElevated

    // Content (text & icons)
    case onBackground, onBackgroundSecondary, onBackgroundTertiary
    case onSurface, onSurfaceSecondary, onBrand

    // Borders & Separators
    case border, borderSubtle, separator

    // Interactive States
    case interactive, interactiveHover, interactivePressed, interactiveDisabled

    // Feedback
    case success, warning, error, info

    // Utility
    case shadow, overlay
}
Using Color Tokens
@Environment(\.prismTheme) private var theme

Text("Status: Active")
    .foregroundStyle(theme.color(.success))
    .padding()
    .background(theme.color(.surface))
    .overlay(
        RoundedRectangle(cornerRadius: RadiusToken.sm.rawValue)
            .stroke(theme.color(.border), lineWidth: 1)
    )

​
SpacingToken

A consistent spacing scale based on a 4pt grid:
TokenValue
.xxs2pt
.xs4pt
.sm8pt
.md12pt
.lg16pt
.xl24pt
.xxl32pt
.xxxl48pt
Using Spacing Tokens
VStack(spacing: SpacingToken.md.rawValue) {
    Text("Title")
    Text("Subtitle")
}
.padding(SpacingToken.lg.rawValue)

​
TypographyToken

Type scale tokens for consistent text sizing:
TokenUse Case
.largeTitleScreen titles
.titleSection headings
.title2Subsection headings
.title3Card titles
.headlineEmphasized body text
.bodyPrimary content
.calloutSecondary content
.subheadlineLabels
.footnoteCaptions
.captionSmall metadata
.caption2Fine print
Using Typography Tokens
Text("Welcome Back")
    .prismTypography(.largeTitle)

Text("Your dashboard is ready")
    .prismTypography(.subheadline)

​
RadiusToken

Corner radius scale for consistent roundness:
TokenValue
.none0
.xs2pt
.sm4pt
.md8pt
.lg12pt
.xl16pt
.xxl24pt
.full9999pt (pill)
Using Radius Tokens
RoundedRectangle(cornerRadius: RadiusToken.lg.rawValue)
    .fill(theme.color(.surface))

​
ElevationToken

Shadow/elevation levels for depth hierarchy:
TokenDescription
.noneFlat, no shadow
.lowSubtle lift — cards
.mediumModerate — dropdowns, popovers
.highProminent — modals, dialogs
Using Elevation Tokens
PrismCard {
    Text("Elevated Card")
}
.prismElevation(.medium)

​
MotionToken

Animation timing presets for consistent motion:
TokenDurationUse Case
.instant100msToggle, switch
.fast150msHover, focus
.normal250msExpand, collapse
.slow350msPage transition
.deliberate500msOnboarding, attention
Using Motion Tokens
withAnimation(MotionToken.normal.animation) {
    isExpanded.toggle()
}
Every PrismUI component uses these tokens internally. When you change your theme or token values, the entire component library updates automatically.