cameron.stream
A React Native app for the ultimate thinking partner.
1// Letta Brand Spacing System - Based on 8px Grid
2
3export const spacing = {
4 // Base unit (8px)
5 1: 8,
6 2: 16,
7 3: 24,
8 4: 32,
9 5: 40,
10 6: 48,
11 7: 56,
12 8: 64,
13 9: 72,
14 10: 80,
15 12: 96,
16 16: 128,
17 20: 160,
18 24: 192,
19 32: 256,
20
21 // Fractional spacing
22 0.5: 4,
23 1.5: 12,
24 2.5: 20,
25 3.5: 28,
26
27 // Component-specific
28 componentGap: 24, // Gap between major UI components
29 sectionGap: 40, // Gap between major sections
30 messageGap: 24, // Gap between message groups
31 inputPadding: 16, // Padding inside inputs
32 buttonPadding: 12, // Padding inside buttons
33} as const;
34
35// Responsive breakpoints (following brand guidelines)
36export const breakpoints = {
37 mobile: 0,
38 tablet: 768,
39 desktop: 1024,
40 wide: 1440,
41} as const;
42
43// Layout dimensions
44export const layout = {
45 // Sidebar
46 sidebarWidth: 280,
47 sidebarCollapsedWidth: 64,
48
49 // Content
50 maxContentWidth: 840, // Optimal reading width based on golden ratio
51 maxInputWidth: 800,
52
53 // Component sizes
54 headerHeight: 56,
55 inputHeight: 48,
56 buttonHeight: 48,
57 buttonSmallHeight: 32,
58
59 // Border radius (geometric/minimal approach)
60 borderRadius: {
61 small: 4,
62 medium: 8,
63 large: 12,
64 round: 24,
65 }
66} as const;
67
68// Grid system
69export const grid = {
70 columns: {
71 mobile: 6,
72 tablet: 8,
73 desktop: 12,
74 },
75 gutterWidth: spacing[2], // 16px
76 marginWidth: spacing[3], // 24px on mobile, responsive
77} as const;
78
79export type Spacing = typeof spacing;
80export type Layout = typeof layout;