Applies colors, typography, spacing, sizing, visual states, and other styling attributes for BaristaNotes .NET MAUI app. Use this skill when implementing UI components, updating styles, or ensuring visual consistency across the app.
Applies colors, typography, spacing, sizing, visual states, and other styling attributes for BaristaNotes .NET MAUI app. Use this skill when implementing UI components, updating styles, or ensuring visual consistency across the app.
BaristaNotes .NET MAUI Styling Guide
Overview
Use this skill when implementing or modifying visual elements in BaristaNotes. It provides the definitive color palette, typography, spacing system, theme keys, and coding patterns for consistent UI.
Search existing resources first - Check AppColors, ThemeKeys, AppIcons, and MaterialSymbolsFont before creating anything new
Use the closest existing option - If an 80% match exists, use it rather than creating a 100% match
Extend only when necessary - Add new tokens only when existing ones genuinely don't fit the use case
When Adding New Resources
Colors: Must complement the existing coffee palette (warm browns, cream tones). Never override semantic colors (Primary, Success, Error, etc.)
Theme Keys: Follow naming conventions in ThemeKeys.cs. Reuse existing styling patterns from ApplicationTheme.cs
Icons: Search MaterialSymbolsFont.cs (3,700+ icons) before requesting new assets. Add to AppIcons.cs only if the icon will be reused across multiple components
Spacing/Typography: Use existing and tokens. These scales are intentionally limited for consistency
AppSpacing
AppFontSizes
Color Palette
All colors are defined in AppColors.cs. Use theme-aware colors via AppColors.Light.* or AppColors.Dark.*.
// Use constants from AppFontSizes
Label()
.FontFamily("Manrope")
.FontSize(AppFontSizes.TitleMedium)
.TextColor(AppColors.Dark.TextPrimary)
// For headlines
Label()
.FontFamily("ManropeSemibold")
.FontSize(AppFontSizes.TitleLarge)
Why: Emojis render inconsistently across platforms, break accessibility (screen readers), and violate professional UI standards.
ThemeKey System (MANDATORY)
Never use inline styling methods. All styling MUST use the ThemeKey system for consistency and theme support.
// ❌ WRONG: Inline styling is PROHIBITED
Label("Title")
.FontSize(24)
.TextColor(Colors.Brown)
.FontAttributes(FontAttributes.Bold)
// ✅ CORRECT: Always use ThemeKeys
Label("Title")
.ThemeKey(ThemeKeys.Headline)
Before creating new theme keys, check existing keys in:
ThemeKeys.cs - Theme key constants
ApplicationTheme.cs - Theme implementations
Accessibility (WCAG 2.1 Level AA)
All interactive elements must be keyboard navigable
Screen-reader compatible labels required
Minimum contrast ratios must be maintained
Touch targets minimum 44x44dp
Deprecated APIs - DO NOT USE
// ❌ NEVER use these deprecated controls:
Frame() // Use Border() instead
ListView() // Use CollectionView() instead
TableView() // Use CollectionView() instead
