Working with Minchyn’s Theme and Design System

MinchynTheme Foundation: #

The design system is centralized in /constants/MinchynTheme.ts, providing a single source of truth for all visual styling. The theme includes color palettes with primary, secondary, success, warning, error, and info colors, each with light and dark variants for contrast. Typography scales define fontSize (xs to 6xl), fontWeight (thin to black), and lineHeight for text hierarchy. Spacing system uses a consistent scale: xs(4), sm(8), md(12), lg(16), xl(20), 2xl(24), 3xl(32), 4xl(48), 5xl(64) for margins, padding, and gaps. Border radius options range from none to full for component styling. Shadow definitions include elevation levels from subtle to dramatic for depth perception.

Using Theme Tokens: #

Always reference theme tokens instead of hardcoding values. Import with: import MinchynTheme from ‘@/constants/MinchynTheme’. Use color tokens: MinchynTheme.colors.primary, MinchynTheme.colors.text.primary, MinchynTheme.colors.background. Apply spacing: paddingVertical: MinchynTheme.spacing.md, marginHorizontal: MinchynTheme.spacing.lg. Typography: fontSize: MinchynTheme.fontSize.lg, fontWeight: MinchynTheme.fontWeight.semibold. Border radius: borderRadius: MinchynTheme.radius.md. Shadows: …MinchynTheme.shadows.md. This approach ensures consistency, simplifies theme updates, and enables dark mode support in the future by swapping theme definitions.

Responsive Design Patterns: #

The theme includes breakpoint definitions for responsive layouts: sm (640), md (768), lg (1024), xl (1280). Use Dimensions API to detect screen size and adjust layouts: const { width } = Dimensions.get(‘window’). Implement responsive spacing that scales with screen size: const isSmallScreen = width < MinchynTheme.dimensions.breakpoints.md. Use relative sizing with percentages and flex layouts instead of absolute pixel values. Test layouts on multiple device sizes: iPhone SE (small), iPhone 14 Pro (medium), iPad (tablet). The component library automatically adjusts sizes on tablets, but custom layouts should use flex: 1 and relative dimensions for adaptability.