Skip to content

Commit 09aef51

Browse files
antmikinkaantmikinka
committed
feat(ui): comprehensive premium spacing overhaul across all pages
Apply 'Bold Generosity' design system to all 8 pages with dramatic spacing improvements: - Dashboard, Interview, Feedback, InterviewHistory, Jobs, Settings, Landing, Preparing Key changes across all pages: - Container padding: p-8 → p-12 (48px), max-w-5xl → max-w-6xl - Headlines: text-2xl → text-4xl/5xl (30px → 36px/48px) - Subtitles: text-sm → text-base with increased top margin - Card padding: p-4/p-5 → p-6/p-8 (16px/20px → 24px/32px) - Section spacing: space-y-3/4/6 → space-y-8/10 (12px/16px/24px → 32px/40px) - Typography scale: text-xs → text-sm, text-sm → text-base throughout - Touch targets: buttons px-5 py-2.5 → px-6/8 py-3.5/4, h-10 → h-12/16 - Icons: size={15/16} → size={18/20/22}, avatar w-8 → w-10 - Input fields: px-4 py-2.5 → px-5/8 py-3.5/5, text-sm → text-base - Gaps: gap-2/3 → gap-4/5/6 throughout - Empty states: larger icons (32/40 → 48), more padding (py-12 → py-16/20) Created DESIGN_SYSTEM.md documenting the 'Bold Generosity' philosophy: - Full screen utilization with centered hero layouts - 3x spacing rule when in doubt - Oversized typography for editorial impact - Generous touch targets (minimum h-16 for buttons) - Premium feel through whitespace and breathing room All pages now use consistent design tokens for a cohesive, premium aesthetic.
1 parent d592479 commit 09aef51

File tree

11 files changed

+1082
-897
lines changed

11 files changed

+1082
-897
lines changed

‎.claude/settings.local.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"permissions": {
3+
"allow": [
4+
"mcp__sequential-thinking__sequentialthinking",
5+
"Bash(git pull:*)",
6+
"mcp__clear-thought-server__visualreasoning",
7+
"Bash(git add:*)",
8+
"Bash(git checkout:*)",
9+
"Bash(git commit:*)",
10+
"Bash(git push:*)",
11+
"Bash(npm install)",
12+
"Bash(npm run build)",
13+
"Bash(npm start)",
14+
"Bash(npm run dev)"
15+
]
16+
}
17+
}

‎DESIGN_SYSTEM.md‎

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
# Interviewer Design System
2+
## Premium Spacing & Layout Guidelines
3+
4+
---
5+
6+
## 🎯 Design Philosophy
7+
8+
**"Bold Generosity"** - Every element deserves space to breathe. We embrace generous whitespace, oversized touch targets, and editorial-scale typography to create a premium, awe-inspiring experience.
9+
10+
### Core Principles
11+
12+
1. **Full Screen Utilization** - Use the entire viewport. No cramped cards.
13+
2. **3x Rule** - When you think spacing is enough, triple it.
14+
3. **Oversized Typography** - Headlines should command attention (text-4xl to text-6xl)
15+
4. **Generous Touch Targets** - Buttons minimum h-16 (64px), ideally h-20 (80px)
16+
5. **Editorial Layouts** - Think magazine spreads, not dashboards
17+
18+
---
19+
20+
## 📏 Spacing Scale
21+
22+
### Outer Spacing (Margins & Page Padding)
23+
24+
| Token | Class | Pixels | Usage |
25+
|-------|-------|--------|-------|
26+
| `px-16` | px-16 | 64px | Page-level horizontal padding |
27+
| `py-12` | py-12 | 48px | Page-level vertical padding |
28+
| `mb-20` | mb-20 | 80px | Major section separation |
29+
| `mb-16` | mb-16 | 64px | Hero to content transition |
30+
| `mb-12` | mb-12 | 48px | Section to content |
31+
| `gap-12` | gap-12 | 48px | Major element groups |
32+
| `gap-8` | gap-8 | 32px | Standard element separation |
33+
34+
### Inner Spacing (Container Padding)
35+
36+
| Token | Class | Pixels | Usage |
37+
|-------|-------|--------|-------|
38+
| `p-10` | p-10 | 40px | Card/container interior |
39+
| `p-12` | p-12 | 48px | Premium card interior |
40+
| `px-8` | px-8 | 32px | Input/button horizontal |
41+
| `py-5` | py-5 | 20px | Input/button vertical |
42+
43+
### Component Gaps
44+
45+
| Context | Gap Class | Pixels |
46+
|---------|-----------|--------|
47+
| Form fields | `gap-8` | 32px |
48+
| Label to input | `mb-4` | 16px |
49+
| Button groups | `gap-4` | 16px |
50+
| Icon to text | `gap-5` | 20px |
51+
| Steps/process | `gap-5` | 20px |
52+
53+
---
54+
55+
## 📐 Typography Scale
56+
57+
### Headlines
58+
59+
| Level | Class | Line-Height | Usage |
60+
|-------|-------|-------------|-------|
61+
| Hero | `text-6xl` | tight | Main page titles |
62+
| Page Title | `text-4xl` | tight | Primary section headers |
63+
| Section | `text-2xl` | tight | Major sections |
64+
| Subsection | `text-xl` | normal | Minor sections |
65+
66+
### Body Text
67+
68+
| Level | Class | Usage |
69+
|-------|-------|-------|
70+
| Large | `text-lg` | Hero subtitles, important context |
71+
| Base | `text-base` | Primary reading text |
72+
| Small | `text-sm` | Secondary text, captions |
73+
| XS | `text-xs` | Labels, metadata |
74+
75+
### Font Weights
76+
77+
- **Bold/Semibold**: `font-bold`, `font-semibold` - Headlines, CTAs
78+
- **Medium**: `font-medium` - Interactive elements, emphasis
79+
- **Regular/Light**: `font-light` - Body text, subtitles
80+
81+
### Letter Spacing
82+
83+
- **Tight**: `tracking-tight` - Headlines (text-xl and above)
84+
- **Wide**: `tracking-wider` - Labels, uppercase text
85+
- **Widest**: `tracking-widest` - Uppercase labels only
86+
87+
---
88+
89+
## 🎨 Component Specifications
90+
91+
### Buttons
92+
93+
```tsx
94+
// Primary CTA - Large
95+
className="h-16 px-12 rounded-full font-semibold text-lg tracking-wide"
96+
97+
// Primary CTA - Medium
98+
className="px-8 py-5 rounded-2xl font-semibold text-base"
99+
100+
// Secondary
101+
className="px-8 py-5 border border-gray-200/60 rounded-2xl"
102+
```
103+
104+
### Inputs
105+
106+
```tsx
107+
className="w-full px-8 py-5 rounded-2xl text-base"
108+
// Label: mb-4 (16px)
109+
```
110+
111+
### Cards
112+
113+
```tsx
114+
className="rounded-3xl p-10 shadow-sm"
115+
// Border: border-gray-200/60 dark:border-white/[0.08]
116+
```
117+
118+
### Upload Buttons
119+
120+
```tsx
121+
className="w-72 h-32 rounded-3xl border-2 border-dashed"
122+
// Icon container: w-14 h-14 rounded-2xl
123+
```
124+
125+
---
126+
127+
## 📱 Layout Patterns
128+
129+
### Centered Hero Layout
130+
131+
```tsx
132+
<div className="flex-1 flex flex-col items-center justify-center px-16">
133+
<div className="flex flex-col items-center mb-20">
134+
{/* Hero content */}
135+
</div>
136+
<div className="flex items-center gap-12 mb-16">
137+
{/* Action elements */}
138+
</div>
139+
</div>
140+
```
141+
142+
### Split Panel Layout
143+
144+
```tsx
145+
<div className="h-screen flex">
146+
{/* Left panel - Content */}
147+
<div className="flex-1 p-12 flex items-center justify-center">
148+
{/* Main content */}
149+
</div>
150+
151+
{/* Right panel - Sidebar */}
152+
<aside className="w-[600px] border-l p-10">
153+
{/* Sidebar content */}
154+
</aside>
155+
</div>
156+
```
157+
158+
### Centered Form Layout
159+
160+
```tsx
161+
<div className="flex-1 flex flex-col items-center justify-center px-16 py-12">
162+
<div className="flex flex-col items-center mb-16">
163+
<h1 className="text-4xl font-bold mb-3">Title</h1>
164+
<p className="text-base text-gray-500">Subtitle</p>
165+
</div>
166+
<div className="w-full max-w-5xl">
167+
{/* Form content */}
168+
</div>
169+
</div>
170+
```
171+
172+
---
173+
174+
## ✅ Checklist for Page Overhauls
175+
176+
### Spacing
177+
- [ ] Page padding is `px-16` minimum
178+
- [ ] Section margins are `mb-12` or `mb-16`
179+
- [ ] Card padding is `p-10` or `p-12`
180+
- [ ] Form field gaps are `gap-8`
181+
- [ ] Label margins are `mb-4`
182+
183+
### Typography
184+
- [ ] Page titles are `text-4xl` or larger
185+
- [ ] Section titles are `text-2xl` or `text-xl`
186+
- [ ] Body text is `text-base`
187+
- [ ] Labels are `text-xs` with `tracking-wider`
188+
189+
### Components
190+
- [ ] Primary buttons are `h-16` or `px-8 py-5`
191+
- [ ] Inputs are `px-8 py-5` with `text-base`
192+
- [ ] Cards are `rounded-3xl` with `p-10`
193+
- [ ] Icons are sized proportionally (18-28px)
194+
195+
### Overall Feel
196+
- [ ] Uses full screen width/height
197+
- [ ] Content is centered with generous whitespace
198+
- [ ] No cramped or condensed sections
199+
- [ ] Premium, editorial aesthetic achieved
200+
201+
---
202+
203+
## 📋 Page Status Tracker
204+
205+
| Page | Status | Notes |
206+
|------|--------|-------|
207+
| Landing.tsx | ✅ Complete | Full hero redesign, spacious form |
208+
| Preparing.tsx | 🔄 In Progress | Need wider sidebar, larger steps |
209+
| Dashboard.tsx | ⏳ Pending | |
210+
| Interview.tsx | ⏳ Pending | |
211+
| Feedback.tsx | ⏳ Pending | |
212+
| InterviewHistory.tsx | ⏳ Pending | |
213+
| Jobs.tsx | ⏳ Pending | |
214+
| Settings.tsx | ⏳ Pending | |
215+
216+
---
217+
218+
## 🔧 Quick Reference
219+
220+
**Before (WRONG):**
221+
```tsx
222+
className="p-4 mb-4 gap-2 text-sm"
223+
```
224+
225+
**After (RIGHT):**
226+
```tsx
227+
className="p-10 mb-12 gap-8 text-base"
228+
```
229+
230+
**Rule of thumb:**
231+
- If it looks "big enough" → make it 50% bigger
232+
- If text feels "readable" → increase font-size one level
233+
- If spacing feels "generous" → add one more increment
234+
235+
---
236+
237+
*Last updated: 2026-03-14*
238+
*Version: 1.0 - Premium Spacing Overhaul*

0 commit comments

Comments
 (0)