Design System Natif
Systeme de design unifie pour toutes les applications Apple YaniPay. Couleurs, typographie, modifiers et tokens SwiftUI centralises.
Overview
Le fichier YaniPayDesignSystem.swift definit les design tokens centralises pour toutes les plateformes Apple. Ce systeme garantit une coherence visuelle entre iOS, iPadOS, macOS, watchOS et visionOS tout en respectant les conventions Apple Human Interface Guidelines.
La typographie utilise SF Rounded pour les titres (donnant un aspect moderne et accueillant) et SF Mono pour les montants financiers (lisibilite optimale des chiffres avec espacement fixe).
Philosophie du Design System
Le design system YaniPay est construit sur trois piliers :
- Coherence - Memes tokens sur toutes les plateformes Apple
- Accessibilite - Contrastes WCAG AA, Dynamic Type, VoiceOver
- Natif - Utilisation des conventions Apple (SF Symbols, Materials, Haptics)
Brand Colors
La palette de couleurs YaniPay est composee de quatre couleurs semantiques principales. Chaque couleur est definie dans l'Asset Catalog pour supporter automatiquement les modes clair et sombre.
Orange
#FDB62E
Primary Action
Green
#A9D49B
Success
Blue
#748BC5
Information
Red
#D97B66
Error
Chaque couleur possede des variantes d'opacite pour les backgrounds, les bordures et les etats hover. Le mode sombre utilise des versions ajustees automatiquement par le systeme de couleurs adaptatif d'Apple.
import SwiftUI
extension Color {
/// YaniPay brand colors
enum YaniPay {
/// Primary action color - Orange (#FDB62E)
static let primary = Color(hex: "FDB62E")
/// Success indicator - Green (#A9D49B)
static let success = Color(hex: "A9D49B")
/// Information - Blue (#748BC5)
static let info = Color(hex: "748BC5")
/// Error / Destructive - Red (#D97B66)
static let error = Color(hex: "D97B66")
/// Background variants with opacity
static let primaryBackground = primary.opacity(0.12)
static let successBackground = success.opacity(0.12)
static let infoBackground = info.opacity(0.12)
static let errorBackground = error.opacity(0.12)
}
}
extension Color {
init(hex: String) {
let hex = hex.trimmingCharacters(in: .alphanumerics.inverted)
var int: UInt64 = 0
Scanner(string: hex).scanHexInt64(&int)
let r = Double((int >> 16) & 0xFF) / 255.0
let g = Double((int >> 8) & 0xFF) / 255.0
let b = Double(int & 0xFF) / 255.0
self.init(red: r, green: g, blue: b)
}
}Typography
Le systeme typographique YaniPay utilise trois familles de polices systeme Apple, chacune optimisee pour son usage specifique. Aucune police tierce n'est necessaire, garantissant des performances optimales et une coherence avec l'OS.
SF Rounded
Titres et headings. Aspect moderne et accueillant, coherent avec l'identite visuelle fintech de YaniPay.
SF Mono
Montants et valeurs financieres. Espacement fixe pour un alignement parfait des chiffres et des devises.
SF Pro
Corps de texte et contenu general. Police systeme par defaut, lisibilite optimale sur tous les ecrans Apple.
struct YaniPayDesignSystem {
// Display (Headings) - SF Rounded
static let displayLarge = Font.system(.largeTitle, design: .rounded, weight: .bold)
static let displayMedium = Font.system(.title, design: .rounded, weight: .bold)
static let displaySmall = Font.system(.title2, design: .rounded, weight: .semibold)
// Amount (Currency) - SF Mono
static let amountLarge = Font.system(.title, design: .monospaced, weight: .bold)
static let amountMedium = Font.system(.title2, design: .monospaced, weight: .semibold)
static let amountSmall = Font.system(.body, design: .monospaced, weight: .medium)
// Body (Content)
static let bodyLarge = Font.system(.body, weight: .regular)
static let bodyMedium = Font.system(.callout, weight: .regular)
static let bodySmall = Font.system(.footnote, weight: .regular)
}struct WalletBalanceView: View {
let balance: Int64
let currency: String
var body: some View {
VStack(spacing: 4) {
Text("Solde disponible")
.font(YaniPayDesignSystem.bodySmall)
.foregroundStyle(.secondary)
Text(formattedBalance)
.font(YaniPayDesignSystem.amountLarge)
.foregroundStyle(Color.YaniPay.primary)
Text(currency)
.font(YaniPayDesignSystem.bodyMedium)
.foregroundStyle(.tertiary)
}
}
private var formattedBalance: String {
let value = Double(balance) / 100.0
return String(format: "%.2f", value)
}
}View Modifiers
YaniPay definit des Viewmodifiers reutilisables qui encapsulent les patterns visuels recurrents de l'application. Ces modifiers utilisent les Materialsd'Apple pour un effet glassmorphism natif, optimise sur chaque plateforme.
extension View {
func premiumCard(padding: CGFloat = 16) -> some View {
self
.padding(padding)
.background(.ultraThinMaterial)
.cornerRadius(16)
.shadow(color: .black.opacity(0.1), radius: 10, y: 5)
}
func glassmorphism() -> some View {
self
.background(.ultraThinMaterial)
.cornerRadius(12)
}
func minimumTouchTarget() -> some View {
self.frame(minWidth: 44, minHeight: 44)
}
}.premiumCard()
Carte premium avec padding, ultraThinMaterial, corner radius 16 et ombre subtile. Utilise pour les cartes de solde et transactions.
.glassmorphism()
Effet glass avec ultraThinMaterial et corner radius 12. Ideal pour les overlays, les sheets et les elements flottants.
.minimumTouchTarget()
Garantit une zone de touch minimale de 44x44pt conformement aux Apple Human Interface Guidelines.
struct TransactionCard: View {
let transaction: Transaction
var body: some View {
HStack {
VStack(alignment: .leading, spacing: 4) {
Text(transaction.merchantName ?? "Transaction")
.font(YaniPayDesignSystem.bodyLarge)
.fontWeight(.medium)
Text(transaction.date, style: .relative)
.font(YaniPayDesignSystem.bodySmall)
.foregroundStyle(.secondary)
}
Spacer()
Text(transaction.formattedAmount)
.font(YaniPayDesignSystem.amountMedium)
.foregroundStyle(
transaction.amountInCentimes >= 0
? Color.YaniPay.success
: Color.YaniPay.error
)
}
.premiumCard() // Applies the design system modifier
}
}Materials et performances
Les .ultraThinMateriald'Apple sont rendus par le GPU et optimises nativement. Ils sont plus performants que les effets blur manuels et s'adaptent automatiquement au mode sombre, au contraste eleve et a la transparence reduite dans les reglages d'accessibilite.
SF Symbols
YaniPay utilise exclusivement SF Symbolspour l'iconographie, garantissant une coherence visuelle native sur toutes les plateformes Apple. Les symboles s'adaptent automatiquement au Dynamic Type, au poids de police et au mode d'accessibilite de l'utilisateur.
Navigation
Onglets principaux de la tab bar
Transactions
Actions financieres et transferts
Securite
Authentification et chiffrement
Y.A.N.I.
Assistant IA et interactions
struct TabBarView: View {
@State private var selection: Tab = .home
var body: some View {
TabView(selection: $selection) {
HomeView()
.tabItem {
Label("Accueil", systemImage: "house.fill")
}
.tag(Tab.home)
WalletView()
.tabItem {
Label("Wallet", systemImage: "creditcard.fill")
}
.tag(Tab.wallet)
AnalyticsView()
.tabItem {
Label("Stats", systemImage: "chart.bar.fill")
}
.tag(Tab.analytics)
SettingsView()
.tabItem {
Label("Reglages", systemImage: "gearshape.fill")
}
.tag(Tab.settings)
}
.tint(Color.YaniPay.primary)
}
}
enum Tab: Hashable {
case home, wallet, analytics, settings
}SF Symbols 6
YaniPay cible SF Symbols 6 (disponible avec iOS 18 et macOS 15) qui inclut plus de 6 000 symboles avec support des animations natives (.symbolEffect), du rendu multi-couche et des variantes de remplissage automatiques.
// Animated symbol effects (SF Symbols 6)
Image(systemName: "creditcard.fill")
.symbolEffect(.bounce, value: paymentCompleted)
Image(systemName: "arrow.up.circle.fill")
.symbolEffect(.pulse, isActive: isProcessing)
// Rendering modes
Image(systemName: "lock.shield.fill")
.symbolRenderingMode(.hierarchical)
.foregroundStyle(Color.YaniPay.success)
// Variable value (e.g., signal strength)
Image(systemName: "wifi", variableValue: signalStrength)
.symbolRenderingMode(.palette)
.foregroundStyle(Color.YaniPay.primary, .secondary)Outil de developpement recommande
Utilisez l'application gratuite SF Symbols d'Apple (disponible sur le Mac App Store) pour explorer les symboles, tester les animations et exporter les configurations. L'app permet de previsualiser le rendu sur toutes les tailles de police et tous les poids.