style: redesign blue page - compact 14mm bar, refined typography proportions, premium negative space

lib/pdf-business-card.tsx

@@ -90,7 +90,7 @@ const styles = StyleSheet.create({
     top: 0,
     left: 0,
     right: 0,
-    bottom: '18mm', // Leave space for the bar below
+    bottom: '14mm', // Reduced bar height for better logo/bar proportion
     zIndex: 1,
   },
   frontBackgroundImage: {
@@ -101,7 +101,7 @@ const styles = StyleSheet.create({
   frontContainer: {
     flex: 1,
     paddingTop: '3mm', // Compensate for top bleed for perfect optical centering
-    paddingBottom: '18mm', // Leave space for the green bar
+    paddingBottom: '14mm', // Match the reduced bar height
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -111,9 +111,9 @@ const styles = StyleSheet.create({
   },
   frontTagline: {
     color: COLORS.white,
-    fontSize: 6,
+    fontSize: 5.5,
-    marginTop: 10,
+    marginTop: 8,
-    letterSpacing: 1.5,
+    letterSpacing: 2,
     fontWeight: 'bold',
     textTransform: 'uppercase',
     zIndex: 100,
@@ -123,40 +123,40 @@ const styles = StyleSheet.create({
     bottom: 0,
     left: 0,
     right: 0,
-    height: '18mm',
+    height: '14mm', // Compact bar — logo area gets more breathing room
-    paddingBottom: '3mm', // COMPENSATE FOR BOTTOM BLEED! Optical center for the trim edge.
+    paddingBottom: '2mm', // Compensate for bottom bleed (3mm trim, but content hugs center)
-    borderTop: `2pt solid ${COLORS.green}`,
+    borderTop: `1pt solid ${COLORS.green}`, // Thin, elegant separator
     backgroundColor: '#000a66',
     zIndex: 50,
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    gap: 4, // Tighter internal grouping
+    gap: 3,
   },
   frontIconsGroup: {
     flexDirection: 'row',
-    gap: 12,
+    gap: 14, // Wider gaps between icon groups for visual clarity at small size
   },
   frontBrandIconWrapper: {
     alignItems: 'center',
-    gap: 2,
+    gap: 1.5,
   },
   frontBrandIcon: {
-    width: 14, // Scaled down for elegance
+    width: 12, // Smaller for compact bar
-    height: 14,
+    height: 12,
-    opacity: 0.9,
+    opacity: 0.85,
   },
   frontBrandText: {
-    fontSize: 5, // Smaller font
+    fontSize: 4, // Tiny but readable at 300dpi print
     color: COLORS.white,
     textTransform: 'uppercase',
-    letterSpacing: 0.8, // Increased tracking
+    letterSpacing: 0.6,
-    opacity: 0.9,
+    opacity: 0.75,
   },
   frontTaglineBar: {
     color: COLORS.green,
-    fontSize: 6.5, // Slightly smaller
+    fontSize: 5.5, // Smaller — supporting role, not headline
-    letterSpacing: 1.8, // Wide premium tracking
+    letterSpacing: 2, // Wide premium tracking
     fontWeight: 'bold',
     textTransform: 'uppercase',
   },