Design System Inventory

Purpose: Curated "blessed defaults" - the 15-25 most common design system elements you'll need when building UI features.

How to use: Start here when implementing UI. If you don't find what you need, use the design-system-navigator skill to search deeper.

---

Buttons

Primary Button (Full Width)

Where: Sources/Styleguide/Buttons.swiftSearch: rg "struct PrimaryButtonStyle\|static.*primary:" Sources/Styleguide/Buttons.swiftUsage:

Button("Save") {
    // action
}
.buttonStyle(.primary)

When to use: Primary actions, form submissions, main CTAs. Default full-width style.

Primary Button (Small)

Where: Sources/Styleguide/Buttons.swiftSearch: rg "struct PrimaryButtonStyle\|static.*primary:" Sources/Styleguide/Buttons.swiftUsage:

Button("Save") {
    // action
}
.buttonStyle(.primary(size: .small))

When to use: Primary actions in constrained spaces, inline actions.

Secondary Button

Where: Sources/Styleguide/Buttons.swiftSearch: rg "struct SecondaryButtonStyle\|static.*secondary:" Sources/Styleguide/Buttons.swiftUsage:

Button("Cancel", systemImage: "xmark") {
    // action
}
.buttonStyle(.secondary)

When to use: Secondary actions, cancel buttons, actions with icons.

Rounded Primary Button (Icon Only)

Where: Sources/Styleguide/Buttons.swiftSearch: rg "struct RoundedPrimaryButton\|static.*primaryRounded" Sources/Styleguide/Buttons.swiftUsage:

Button("", systemImage: "plus") {
    // action
}
.buttonStyle(.primaryRounded)

When to use: Floating action buttons, icon-only primary actions. See Sources/TaskFeature/TaskOverviewView.swift for example usage.

Pill Button

Where: Sources/Styleguide/Buttons.swiftSearch: rg "struct PillButtonStyle\|static.*pill" Sources/Styleguide/Buttons.swiftUsage:

Button("Active") {
    // action
}
.buttonStyle(.pill(isActive: true))

When to use: Toggle buttons, filter chips, segmented controls.

---

Colors

Primary Brand Color

Where: Sources/Styleguide/Colors.swiftSearch: rg "riisePrimary" Sources/Styleguide/Colors.swiftUsage:

.foregroundStyle(Color.riisePrimary)
.background(Color.riisePrimary)

When to use: Primary brand elements, active states, primary buttons.

Background Colors

Where: Sources/Styleguide/Colors.swiftSearch: rg "riiseBackground\|appBackgroundLight\|appGreyBackground" Sources/Styleguide/Colors.swiftUsage:

.background(Color.riiseBackground)      // Main app background
.background(Color.appBackgroundLight)    // Light background variant
.background(Color.appGreyBackground)     // Grey background

When to use: Screen backgrounds, card backgrounds, section backgrounds.

Text Colors

Where: Sources/Styleguide/Colors.swiftSearch: rg "appForegroundText\|appTextBase\|appForegroundBase" Sources/Styleguide/Colors.swiftUsage:

.foregroundStyle(Color.appForegroundText)  // Primary text
.foregroundStyle(Color.appTextBase)        // Base text color
.foregroundStyle(Color.appForegroundBase)  // Base foreground

When to use: Text content, labels, headings.

Disabled States

Where: Sources/Styleguide/Colors.swiftSearch: rg "appDisabled" Sources/Styleguide/Colors.swiftUsage:

.foregroundStyle(Color.appDisabledForeground)
.background(Color.appDisabledBackground)

When to use: Disabled buttons, inactive states. Automatically applied via @Environment(\.isEnabled) in button styles.

Semantic Colors

Where: Sources/Styleguide/Colors.swiftSearch: rg "appGreenCompleted\|appCompleted\|appBackgroundSemanticWarningContrast" Sources/Styleguide/Colors.swiftUsage:

.foregroundStyle(Color.appGreenCompleted)  // Success states
.foregroundStyle(Color.appCompleted)       // Completed items
.background(Color.appBackgroundSemanticWarningContrast)  // Warning backgrounds

When to use: Status indicators, completion states, semantic feedback.

---

Typography

Headings

Where: Sources/Styleguide/Fonts.swiftSearch: rg "appHeading" Sources/Styleguide/Fonts.swiftUsage:

Text("Title")
    .font(.appHeadingXL)    // 32pt, bold
    .font(.appHeading1)      // 28pt, bold
    .font(.appHeading2)      // 22pt, bold
    .font(.appHeading3)      // 17pt, bold
    .font(.appHeading4)      // 15pt, bold

When to use: Page titles, section headers, card titles.

Body Text

Where: Sources/Styleguide/Fonts.swiftSearch: rg "appParagraph" Sources/Styleguide/Fonts.swiftUsage:

Text("Body text")
    .font(.appParagraphLg)      // 18pt
    .font(.appParagraphRegular) // 16pt (default)
    .font(.appParagraphSmall)   // 14pt
    .font(.appParagraphXS)      // 12pt

When to use: Body content, descriptions, paragraphs.

Labels

Where: Sources/Styleguide/Fonts.swiftSearch: rg "appLabel" Sources/Styleguide/Fonts.swiftUsage:

Text("Label")
    .font(.appLabelLargeBold)   // 18pt, bold
    .font(.appLabelMediumBold)  // 15pt, bold (button default)
    .font(.appLabelSmallBold)   // 13pt, bold
    .font(.appLabelXSBold)      // 12pt, bold

When to use: Button labels, form labels, UI element labels.

---

Components

Card View

Where: Sources/SwiftUIHelpers/CardView.swiftSearch: rg "struct CardView" Sources/SwiftUIHelpers/CardView.swiftUsage:

CardView {
    Text("Card content")
}

// With header
CardView {
    AsyncImage(url: headerImageURL)
} content: {
    Text("Card content")
}

// With footer
CardView {
    Text("Card content")
} footer: {
    Button("Action") { }
        .buttonStyle(.primary)
}

When to use: Content cards, list items, elevated containers. Supports .elevated (default) and .outlined styles.

Avatar View

Where: Sources/SwiftUIHelpers/AvatarView.swiftSearch: rg "struct AvatarView" Sources/SwiftUIHelpers/AvatarView.swiftUsage:

AvatarView(user: user)
AvatarView(user: user, size: .large)
AvatarView(avatar: Avatar(name: "John", profileImageURL: url))

When to use: User avatars, profile pictures. Automatically handles initials fallback.

Badge

Where: Sources/SwiftUIHelpers/Badge.swiftSearch: rg "struct Badge" Sources/SwiftUIHelpers/Badge.swiftUsage:

Badge(size: .medium) {
    Text("1")
}
Badge(size: .small) {
    Image(systemName: "star.fill")
}

When to use: Count badges, status indicators, icon containers. Used internally by AvatarView.

Audio Level Trail View

Where: Sources/SwiftUIHelpers/AudioLevelTrailView.swiftSearch: rg "struct AudioLevelTrailView" Sources/SwiftUIHelpers/AudioLevelTrailView.swiftUsage:

AudioLevelTrailView(history: meterHistory)
    .frame(height: 32)

// With custom color
AudioLevelTrailView(
    history: meterHistory,
    barColor: .riisePrimary
)

When to use: Audio level visualization, waveform displays, recording feedback. Shows horizontal bars with opacity fade from left (oldest) to right (newest). Related: BrainDumpFeature uses this for recording visualization.

---

Text Fields

Where: Sources/Styleguide/TextFields.swiftUsage: Check file for available text field styles and modifiers. When to use: Form inputs, text entry fields.

---

Dividers

Where: Sources/Styleguide/CustomDivider.swiftUsage:

CustomDivider()

When to use: Section separators, list item dividers.

---

Asset Locations

Feature-Specific Assets

Pattern: Sources/{FeatureName}/Resources/Media.xcassetsExamples:

• Sources/TaskFeature/Resources/Media.xcassets
• Sources/HomeFeature/Resources/Media.xcassets
• Sources/CoursesFeature/Resources/Media.xcassets

When to use: Icons, images, Lottie animations specific to a feature.

Shared Assets

Where: Sources/Styleguide/Resources/Media.xcassetsWhen to use: App-wide icons, shared images, design system assets.

---

Quick Decision Tree

Need a button? → Check Buttons section above → Sources/Styleguide/Buttons.swiftNeed a color? → Check Colors section above → Sources/Styleguide/Colors.swiftNeed a font? → Check Typography section above → Sources/Styleguide/Fonts.swiftNeed a component? → Check Components section above → Sources/SwiftUIHelpers/Need an asset? → Check Asset Locations above → Sources/*Feature/Resources/Media.xcassets

Not found? → Use design-system-navigator skill to search deeper.

---

Verification Commands

Before recommending, verify existing usage:

# Find button style usage
rg "\.buttonStyle\(\.primary\)" Sources

# Find color usage
rg "Color\.riisePrimary" Sources

# Find component usage
rg "CardView" Sources

# Find font usage
rg "\.font\(\.appHeading" Sources