primitives.ios-blue.50 | #eff6ff | |
primitives.ios-blue.100 | #dbeafe | |
primitives.ios-blue.200 | #bfdbfe | |
primitives.ios-blue.300 | #5AC8FA | |
primitives.ios-blue.400 | #0A84FF | iOS 17 systemBlue dark |
primitives.ios-blue.500 | #007AFF | iOS 17 systemBlue light |
primitives.ios-blue.600 | #0064D2 | |
primitives.ios-blue.700 | #004EA3 | |
primitives.ios-blue.500-12 | rgba(0, 122, 255, 0.12) | |
primitives.ios-blue.500-18 | rgba(0, 122, 255, 0.18) | |
primitives.ios-blue.400-12 | rgba(10, 132, 255, 0.12) | |
primitives.ios-blue.400-18 | rgba(10, 132, 255, 0.18) | |
primitives.ios-gray.50 | #F2F2F7 | systemGroupedBackground |
primitives.ios-gray.100 | #E5E5EA | systemGray5 light |
primitives.ios-gray.200 | #D1D1D6 | systemGray4 light |
primitives.ios-gray.300 | #C7C7CC | systemGray3 light |
primitives.ios-gray.400 | #AEAEB2 | systemGray2 light |
primitives.ios-gray.500 | #8E8E93 | systemGray light |
primitives.ios-gray.600 | #636366 | systemGray2 dark |
primitives.ios-gray.700 | #48484A | systemGray3 dark |
primitives.ios-gray.800 | #3A3A3C | systemGray4 dark |
primitives.ios-gray.850 | #2C2C2E | tertiarySystemBg dark / secondarySystemFill dark |
primitives.ios-gray.900 | #1C1C1E | secondarySystemBg dark |
primitives.ios-gray.950 | #000000 | systemBg dark — true black |
primitives.ios-red.50 | #FFF1F0 | |
primitives.ios-red.400 | #FF453A | systemRed dark |
primitives.ios-red.500 | #FF3B30 | systemRed light |
primitives.ios-red.400-18 | rgba(255, 69, 58, 0.18) | |
primitives.ios-red.500-12 | rgba(255, 59, 48, 0.12) | |
primitives.ios-orange.50 | #FFF8ED | |
primitives.ios-orange.400 | #FF9F0A | systemOrange dark |
primitives.ios-orange.500 | #FF9500 | systemOrange light |
primitives.ios-orange.400-18 | rgba(255, 159, 10, 0.18) | |
primitives.ios-orange.500-12 | rgba(255, 149, 0, 0.12) | |
primitives.ios-green.50 | #ECFFF2 | |
primitives.ios-green.400 | #30D158 | systemGreen dark |
primitives.ios-green.500 | #34C759 | systemGreen light |
primitives.ios-green.400-18 | rgba(48, 209, 88, 0.18) | |
primitives.ios-green.500-12 | rgba(52, 199, 89, 0.12) | |
primitives.ios-teal.50 | #EFF9FF | |
primitives.ios-teal.400 | #64D2FF | systemTeal dark |
primitives.ios-teal.500 | #32ADE6 | systemTeal light |
semantic.light.background | {ios-gray.50} | systemGroupedBackground — gray root |
semantic.light.canvas | #FFFFFF | secondarySystemGroupedBackground |
semantic.light.foreground | #000000 | label primary |
semantic.light.background-inverse | {ios-gray.900} | |
semantic.light.foreground-inverse | #FFFFFF | |
semantic.light.background-overlay | rgba(0, 0, 0, 0.40) | |
semantic.light.border | rgba(60, 60, 67, 0.29) | separator, opaque — alpha-based |
semantic.light.border-secondary | rgba(60, 60, 67, 0.12) | separator, non-opaque |
semantic.light.border-ghost | transparent | |
semantic.light.muted | rgba(120, 120, 128, 0.12) | systemFill — alpha-based |
semantic.light.muted-foreground | rgba(60, 60, 67, 0.60) | secondaryLabel |
semantic.light.muted-inverse | rgba(120, 120, 128, 0.36) | secondarySystemFill |
semantic.light.muted-inverse-foreground | rgba(60, 60, 67, 0.30) | tertiaryLabel |
semantic.light.input | rgba(120, 120, 128, 0.08) | quaternarySystemFill |
semantic.light.input-border | rgba(60, 60, 67, 0.18) | |
semantic.light.card | #FFFFFF | secondarySystemGroupedBackground — solid white card on gray |
semantic.light.card-foreground | #000000 | |
semantic.light.card-border | rgba(60, 60, 67, 0.12) | alpha-based card border |
semantic.light.card-border-ghost | transparent | |
semantic.light.card-border-subtle | rgba(60, 60, 67, 0.06) | |
semantic.light.card-subtle | rgba(255, 255, 255, 0.70) | translucent white card |
semantic.light.card-subtle-inverse | rgba(28, 28, 30, 0.60) | translucent dark card |
semantic.light.card-inverse | {ios-gray.900} | inverted solid card |
semantic.light.card-inverse-foreground | #FFFFFF | |
semantic.light.surface | #FFFFFF | User override — kept white, not Apple gray alternating |
semantic.light.surface-foreground | #000000 | |
semantic.light.surface-subtle | rgba(255, 255, 255, 0.55) | translucent white surface |
semantic.light.surface-subtle-foreground | #000000 | |
semantic.light.surface-strong | rgba(28, 28, 30, 0.60) | inverted surface |
semantic.light.surface-strong-foreground | #FFFFFF | |
semantic.light.primary | {ios-blue.500} | |
semantic.light.primary-foreground | #FFFFFF | |
semantic.light.primary-muted | {ios-blue.500-12} | |
semantic.light.primary-muted-foreground | {ios-blue.600} | |
semantic.light.secondary | {ios-teal.500} | |
semantic.light.secondary-foreground | #FFFFFF | |
semantic.light.secondary-muted | rgba(50, 173, 230, 0.12) | |
semantic.light.secondary-muted-foreground | {ios-teal.500} | |
semantic.light.accent | {ios-blue.500-12} | |
semantic.light.accent-foreground | {ios-blue.500} | |
semantic.light.destructive | {ios-red.500} | |
semantic.light.destructive-foreground | #FFFFFF | |
semantic.light.destructive-muted | {ios-red.500-12} | |
semantic.light.destructive-muted-foreground | {ios-red.500} | |
semantic.light.warning | {ios-orange.500} | |
semantic.light.warning-foreground | #FFFFFF | |
semantic.light.warning-muted | {ios-orange.500-12} | |
semantic.light.warning-muted-foreground | {ios-orange.500} | |
semantic.light.success | {ios-green.500} | |
semantic.light.success-foreground | #FFFFFF | |
semantic.light.success-muted | {ios-green.500-12} | |
semantic.light.success-muted-foreground | {ios-green.500} | |
semantic.light.info | {ios-teal.500} | |
semantic.light.info-foreground | #FFFFFF | |
semantic.light.info-muted | rgba(50, 173, 230, 0.12) | |
semantic.light.info-muted-foreground | {ios-teal.500} | |
semantic.dark.background | {ios-gray.950} | True black — OLED optimized |
semantic.dark.canvas | {ios-gray.900} | secondarySystemBackground dark |
semantic.dark.foreground | #FFFFFF | |
semantic.dark.background-inverse | {ios-gray.50} | |
semantic.dark.foreground-inverse | #000000 | |
semantic.dark.background-overlay | rgba(0, 0, 0, 0.60) | |
semantic.dark.border | rgba(84, 84, 88, 0.60) | separator dark — alpha-based |
semantic.dark.border-secondary | rgba(84, 84, 88, 0.30) | |
semantic.dark.border-ghost | rgba(255, 255, 255, 0.04) | |
semantic.dark.muted | rgba(120, 120, 128, 0.24) | systemFill dark |
semantic.dark.muted-foreground | rgba(235, 235, 245, 0.60) | secondaryLabel dark |
semantic.dark.muted-inverse | rgba(120, 120, 128, 0.32) | |
semantic.dark.muted-inverse-foreground | rgba(235, 235, 245, 0.30) | |
semantic.dark.input | rgba(120, 120, 128, 0.18) | quaternarySystemFill dark |
semantic.dark.input-border | rgba(84, 84, 88, 0.40) | |
semantic.dark.card | {ios-gray.900} | secondarySystemGroupedBg dark |
semantic.dark.card-foreground | #FFFFFF | |
semantic.dark.card-border | rgba(84, 84, 88, 0.35) | alpha card border dark |
semantic.dark.card-border-ghost | rgba(255, 255, 255, 0.06) | |
semantic.dark.card-border-subtle | rgba(84, 84, 88, 0.18) | |
semantic.dark.card-subtle | rgba(44, 44, 46, 0.65) | translucent dark card |
semantic.dark.card-subtle-inverse | rgba(242, 242, 247, 0.70) | translucent light card |
semantic.dark.card-inverse | {ios-gray.50} | inverted solid card dark |
semantic.dark.card-inverse-foreground | {ios-gray.900} | |
semantic.dark.surface | {ios-gray.850} | tertiarySystemBackground dark |
semantic.dark.surface-foreground | #FFFFFF | |
semantic.dark.surface-subtle | rgba(44, 44, 46, 0.50) | translucent surface dark |
semantic.dark.surface-subtle-foreground | rgba(255, 255, 255, 0.80) | |
semantic.dark.surface-strong | rgba(242, 242, 247, 0.70) | inverted surface dark |
semantic.dark.surface-strong-foreground | {ios-gray.900} | |
semantic.dark.primary | {ios-blue.400} | |
semantic.dark.primary-foreground | #FFFFFF | |
semantic.dark.primary-muted | {ios-blue.400-18} | |
semantic.dark.primary-muted-foreground | {ios-blue.400} | |
semantic.dark.secondary | {ios-teal.400} | |
semantic.dark.secondary-foreground | #FFFFFF | |
semantic.dark.secondary-muted | rgba(100, 210, 255, 0.18) | |
semantic.dark.secondary-muted-foreground | {ios-teal.400} | |
semantic.dark.accent | {ios-blue.400-12} | |
semantic.dark.accent-foreground | {ios-blue.400} | |
semantic.dark.destructive | {ios-red.400} | |
semantic.dark.destructive-foreground | #FFFFFF | |
semantic.dark.destructive-muted | {ios-red.400-18} | |
semantic.dark.destructive-muted-foreground | {ios-red.400} | |
semantic.dark.warning | {ios-orange.400} | |
semantic.dark.warning-foreground | #FFFFFF | |
semantic.dark.warning-muted | {ios-orange.400-18} | |
semantic.dark.warning-muted-foreground | {ios-orange.400} | |
semantic.dark.success | {ios-green.400} | |
semantic.dark.success-foreground | #FFFFFF | |
semantic.dark.success-muted | {ios-green.400-18} | |
semantic.dark.success-muted-foreground | {ios-green.400} | |
semantic.dark.info | {ios-teal.400} | |
semantic.dark.info-foreground | #FFFFFF | |
semantic.dark.info-muted | rgba(100, 210, 255, 0.18) | |
semantic.dark.info-muted-foreground | {ios-teal.400} | |
effects.shadow-sm | 0 1px 2px rgba(0, 0, 0, 0.02), 0 2px 8px rgba(0, 0, 0, 0.02) | |
effects.shadow-md | 0 2px 4px rgba(0, 0, 0, 0.02), 0 12px 40px rgba(0, 0, 0, 0.04) | |
effects.shadow-lg | 0 4px 8px rgba(0, 0, 0, 0.04), 0 24px 80px rgba(0, 0, 0, 0.06) | |
effects.shadow-xl | 0 8px 16px rgba(0, 0, 0, 0.06), 0 40px 120px rgba(0, 0, 0, 0.08) | |
effects.backdrop-blur | blur(40px) saturate(180%) | iOS vibrancy backdrop. Used with material surfaces. |
effects.effects-dark.shadow-sm | 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.06) | |
effects.effects-dark.shadow-md | 0 2px 4px rgba(0, 0, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.10) | |
effects.effects-dark.shadow-lg | 0 4px 8px rgba(0, 0, 0, 0.10), 0 24px 80px rgba(0, 0, 0, 0.14) | |
effects.effects-dark.shadow-xl | 0 8px 16px rgba(0, 0, 0, 0.12), 0 40px 120px rgba(0, 0, 0, 0.16) | |
border-radius.none | 0 | |
border-radius.sm | 8 | |
border-radius.default | 10 | iOS default corner radius |
border-radius.md | 13 | iOS grouped cell radius |
border-radius.lg | 16 | |
border-radius.xl | 20 | iOS card radius |
border-radius.2xl | 24 | |
border-radius.3xl | 32 | |
border-radius.4xl | 40 | iOS notification/sheet radius |
border-radius.full | 9999 | |
remapped-primitives.zinc.50 | #F2F2F7 | |
remapped-primitives.zinc.100 | #E5E5EA | |
remapped-primitives.zinc.200 | #D1D1D6 | |
remapped-primitives.zinc.300 | #C7C7CC | |
remapped-primitives.zinc.400 | #AEAEB2 | |
remapped-primitives.zinc.500 | #8E8E93 | |
remapped-primitives.zinc.600 | #636366 | |
remapped-primitives.zinc.700 | #48484A | |
remapped-primitives.zinc.800 | #3A3A3C | |
remapped-primitives.zinc.900 | #1C1C1E | |
remapped-primitives.zinc.950 | #000000 | |
remapped-primitives.red.50 | #FFF1F0 | |
remapped-primitives.red.400 | #FF453A | |
remapped-primitives.red.500 | #FF3B30 | |
remapped-primitives.red.600 | #D70015 | |
remapped-primitives.red.700 | #D70015 | |
remapped-primitives.red.400-24 | rgba(255, 69, 58, 0.24) | |
remapped-primitives.amber.50 | #FFF8ED | |
remapped-primitives.amber.400 | #FF9F0A | |
remapped-primitives.amber.500 | #FF9500 | |
remapped-primitives.amber.600 | #CC7700 | |
remapped-primitives.amber.400-24 | rgba(255, 159, 10, 0.24) | |
remapped-primitives.emerald.50 | #ECFFF2 | |
remapped-primitives.emerald.400 | #30D158 | |
remapped-primitives.emerald.500 | #34C759 | |
remapped-primitives.emerald.600 | #248A3D | |
remapped-primitives.sky.50 | #EFF9FF | |
remapped-primitives.sky.400 | #64D2FF | |
remapped-primitives.sky.500 | #32ADE6 | |
remapped-primitives.sky.600 | #0071A4 | |