@dailyautomations/ui 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/PAGE_STRUCTURES.md +718 -0
  2. package/README.md +86 -55
  3. package/examples/README.md +150 -0
  4. package/examples/home-page.tsx +321 -0
  5. package/examples/index.html +12 -0
  6. package/examples/main.tsx +90 -0
  7. package/examples/pages/AboutPage.tsx +343 -0
  8. package/examples/pages/BlogPage.tsx +294 -0
  9. package/examples/pages/ContactPage.tsx +328 -0
  10. package/examples/pages/DashboardPage.tsx +355 -0
  11. package/examples/pages/ListPage.tsx +310 -0
  12. package/examples/pages/LoginPage.tsx +166 -0
  13. package/examples/pages/OnboardingPage.tsx +385 -0
  14. package/examples/pages/PricingPage.tsx +402 -0
  15. package/examples/pages/SettingsPage.tsx +417 -0
  16. package/examples/pages/SignupPage.tsx +194 -0
  17. package/examples/pages/index.ts +13 -0
  18. package/examples/styles.css +12 -0
  19. package/package.json +3 -1
package/PAGE_STRUCTURES.md ADDED
@@ -0,0 +1,718 @@
1
+ # Daily X Page Structure Guidelines
2
+
3
+ **Version:** 1.0.0 | **Last Updated:** 2026-01-29
4
+
5
+ _Standard page templates, layouts, and navigation patterns for Daily X products_
6
+
7
+ ---
8
+
9
+ ## Table of Contents
10
+
11
+ - [Layout Patterns](#layout-patterns)
12
+ - [Common Page Templates](#common-page-templates)
13
+ - [Navigation Structures](#navigation-structures)
14
+ - [Responsive Behavior](#responsive-behavior)
15
+ - [Page Anatomy](#page-anatomy)
16
+
17
+ ---
18
+
19
+ ## Layout Patterns
20
+
21
+ ### Shell Layout (Primary)
22
+
23
+ The standard layout for authenticated app pages. Sidebar navigation with main content area.
24
+
25
+ ```
26
+ ┌─────────────────────────────────────────────────────────┐
27
+ │ Logo Search User Menu │ Topbar │
28
+ ├────────┬────────────────────────────────────────────────┤
29
+ │ │ │
30
+ │ Nav │ Main Content Area │
31
+ │ Items │ │
32
+ │ │ │
33
+ │ │ │
34
+ │ │ │
35
+ │ │ │
36
+ │ │ │
37
+ │ │ │
38
+ ├────────┼────────────────────────────────────────────────┤
39
+ │ │ Footer (optional) │
40
+ └────────┴────────────────────────────────────────────────┘
41
+ ```
42
+
43
+ **Specifications:**
44
+ | Element | Desktop | Tablet | Mobile |
45
+ |---------|---------|--------|--------|
46
+ | Sidebar width | 240px | 64px (icons) | Hidden (drawer) |
47
+ | Topbar height | 64px | 56px | 56px |
48
+ | Content max-width | 1280px | 100% | 100% |
49
+ | Content padding | 32px | 24px | 16px |
50
+
51
+ **CSS Structure:**
52
+ ```css
53
+ .shell {
54
+ display: grid;
55
+ grid-template-columns: var(--sidebar-width) 1fr;
56
+ grid-template-rows: var(--topbar-height) 1fr;
57
+ min-height: 100vh;
58
+ }
59
+
60
+ .sidebar {
61
+ grid-row: 1 / -1;
62
+ background: var(--surface);
63
+ border-right: 1px solid var(--border);
64
+ }
65
+
66
+ .topbar {
67
+ background: var(--surface);
68
+ border-bottom: 1px solid var(--border);
69
+ }
70
+
71
+ .main {
72
+ overflow-y: auto;
73
+ padding: var(--spacing-lg);
74
+ }
75
+ ```
76
+
77
+ ---
78
+
79
+ ### Topbar Layout (Secondary)
80
+
81
+ Horizontal navigation at top. Use for simpler apps or marketing pages.
82
+
83
+ ```
84
+ ┌─────────────────────────────────────────────────────────┐
85
+ │ Logo Nav Items Search User Menu │
86
+ ├─────────────────────────────────────────────────────────┤
87
+ │ │
88
+ │ Main Content Area │
89
+ │ │
90
+ │ │
91
+ │ │
92
+ │ │
93
+ ├─────────────────────────────────────────────────────────┤
94
+ │ Footer │
95
+ └─────────────────────────────────────────────────────────┘
96
+ ```
97
+
98
+ **Use when:**
99
+ - 5 or fewer top-level navigation items
100
+ - Marketing/landing pages
101
+ - Simple single-purpose tools
102
+
103
+ ---
104
+
105
+ ### Centered Layout (Auth/Onboarding)
106
+
107
+ Focused layout for authentication and onboarding flows.
108
+
109
+ ```
110
+ ┌─────────────────────────────────────────────────────────┐
111
+ │ │
112
+ │ │
113
+ │ ┌───────────────┐ │
114
+ │ │ Logo │ │
115
+ │ │ │ │
116
+ │ │ Form/Content │ │
117
+ │ │ │ │
118
+ │ │ │ │
119
+ │ └───────────────┘ │
120
+ │ │
121
+ │ │
122
+ └─────────────────────────────────────────────────────────┘
123
+ ```
124
+
125
+ **Specifications:**
126
+ | Element | Value |
127
+ |---------|-------|
128
+ | Card max-width | 400px (login), 480px (signup), 560px (onboarding) |
129
+ | Card padding | 32px |
130
+ | Background | Gradient or subtle pattern on `--background` |
131
+ | Vertical position | Centered or 40% from top |
132
+
133
+ ---
134
+
135
+ ### Split Layout (Auth Alternative)
136
+
137
+ Half illustration, half content. Use for marketing-focused auth pages.
138
+
139
+ ```
140
+ ┌──────────────────────┬──────────────────────────────────┐
141
+ │ │ │
142
+ │ │ Logo │
143
+ │ Illustration │ │
144
+ │ / Branding │ Form/Content │
145
+ │ / Testimonial │ │
146
+ │ │ │
147
+ │ │ │
148
+ └──────────────────────┴──────────────────────────────────┘
149
+ ```
150
+
151
+ **Specifications:**
152
+ - Left panel: 40-50% width, hide on mobile
153
+ - Right panel: Centered content, max-width 400px
154
+ - Left panel background: Gradient `purple-500` to `orange-500`
155
+
156
+ ---
157
+
158
+ ## Common Page Templates
159
+
160
+ ### Dashboard Page
161
+
162
+ Primary landing page after login. Shows key metrics and recent activity.
163
+
164
+ ```
165
+ ┌─────────────────────────────────────────────────────────┐
166
+ │ Page Header │
167
+ │ ┌─────────────────────────────────────────────────────┐ │
168
+ │ │ Welcome, {Name} [Action Button] │ │
169
+ │ │ {Contextual subtitle} │ │
170
+ │ └─────────────────────────────────────────────────────┘ │
171
+ ├─────────────────────────────────────────────────────────┤
172
+ │ Metrics Row │
173
+ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
174
+ │ │ Metric 1 │ │ Metric 2 │ │ Metric 3 │ │ Metric 4 │ │
175
+ │ │ 123 │ │ 456 │ │ 78% │ │ $1.2k │ │
176
+ │ │ +12% │ │ -3% │ │ +5% │ │ +8% │ │
177
+ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
178
+ ├─────────────────────────────────────────────────────────┤
179
+ │ Primary Content │
180
+ │ ┌─────────────────────────────┐ ┌─────────────────────┐ │
181
+ │ │ │ │ │ │
182
+ │ │ Main Chart/Table │ │ Quick Actions │ │
183
+ │ │ │ │ or Activity Feed │ │
184
+ │ │ │ │ │ │
185
+ │ └─────────────────────────────┘ └─────────────────────┘ │
186
+ └─────────────────────────────────────────────────────────┘
187
+ ```
188
+
189
+ **Components:**
190
+ - Page header with greeting and primary action
191
+ - 3-5 metric cards in responsive grid
192
+ - Main content area (chart, table, or activity)
193
+ - Secondary panel (quick actions, recent items)
194
+
195
+ **Grid:**
196
+ - Metrics: 4 columns desktop, 2 tablet, 1 mobile
197
+ - Content: 2:1 ratio desktop, stacked on tablet/mobile
198
+
199
+ ---
200
+
201
+ ### List Page (Index)
202
+
203
+ Display collections of items with filtering and actions.
204
+
205
+ ```
206
+ ┌─────────────────────────────────────────────────────────┐
207
+ │ Page Header │
208
+ │ ┌─────────────────────────────────────────────────────┐ │
209
+ │ │ {Resource} (count) [+ Create New] │ │
210
+ │ └─────────────────────────────────────────────────────┘ │
211
+ ├─────────────────────────────────────────────────────────┤
212
+ │ Toolbar │
213
+ │ ┌─────────────────────────────────────────────────────┐ │
214
+ │ │ [Search...] [Filter ▾] [Sort ▾] [View: ☰ ⊞] │ │
215
+ │ └─────────────────────────────────────────────────────┘ │
216
+ ├─────────────────────────────────────────────────────────┤
217
+ │ Content │
218
+ │ ┌─────────────────────────────────────────────────────┐ │
219
+ │ │ ☐ Item 1 [Actions ▾] │ │
220
+ │ ├─────────────────────────────────────────────────────┤ │
221
+ │ │ ☐ Item 2 [Actions ▾] │ │
222
+ │ ├─────────────────────────────────────────────────────┤ │
223
+ │ │ ☐ Item 3 [Actions ▾] │ │
224
+ │ └─────────────────────────────────────────────────────┘ │
225
+ ├─────────────────────────────────────────────────────────┤
226
+ │ Pagination │
227
+ │ ┌─────────────────────────────────────────────────────┐ │
228
+ │ │ Showing 1-10 of 156 [← Prev] 1 2 3 [Next →] │ │
229
+ │ └─────────────────────────────────────────────────────┘ │
230
+ └─────────────────────────────────────────────────────────┘
231
+ ```
232
+
233
+ **Components:**
234
+ - Page header with count and create action
235
+ - Toolbar: search, filters, sort, view toggle
236
+ - Table or card grid view
237
+ - Bulk selection with batch actions
238
+ - Pagination or infinite scroll
239
+
240
+ **Empty State:**
241
+ ```
242
+ ┌─────────────────────────────────────────────────────────┐
243
+ │ 📦 │
244
+ │ No {resources} yet │
245
+ │ Create your first {resource} to │
246
+ │ get started with {benefit} │
247
+ │ │
248
+ │ [+ Create {Resource}] │
249
+ └─────────────────────────────────────────────────────────┘
250
+ ```
251
+
252
+ ---
253
+
254
+ ### Detail Page (Show)
255
+
256
+ View and edit a single resource.
257
+
258
+ ```
259
+ ┌─────────────────────────────────────────────────────────┐
260
+ │ Breadcrumb │
261
+ │ {Resources} / {Item Name} │
262
+ ├─────────────────────────────────────────────────────────┤
263
+ │ Page Header │
264
+ │ ┌─────────────────────────────────────────────────────┐ │
265
+ │ │ {Item Name} [Edit] [Delete] [⋮] │ │
266
+ │ │ Created {date} • Updated {date} │ │
267
+ │ └─────────────────────────────────────────────────────┘ │
268
+ ├─────────────────────────────────────────────────────────┤
269
+ │ Tabs (optional) │
270
+ │ [ Overview ] [ Activity ] [ Settings ] │
271
+ ├─────────────────────────────────────────────────────────┤
272
+ │ Content │
273
+ │ ┌─────────────────────────────┐ ┌─────────────────────┐ │
274
+ │ │ │ │ │ │
275
+ │ │ Primary Content │ │ Sidebar │ │
276
+ │ │ (details, form) │ │ (metadata, links) │ │
277
+ │ │ │ │ │ │
278
+ │ └─────────────────────────────┘ └─────────────────────┘ │
279
+ └─────────────────────────────────────────────────────────┘
280
+ ```
281
+
282
+ **Components:**
283
+ - Breadcrumb navigation
284
+ - Header with title, metadata, actions
285
+ - Optional tabs for sub-views
286
+ - 2:1 or 3:1 content/sidebar ratio
287
+ - Sidebar: status, metadata, related items, quick actions
288
+
289
+ ---
290
+
291
+ ### Settings Page
292
+
293
+ User or workspace configuration.
294
+
295
+ ```
296
+ ┌─────────────────────────────────────────────────────────┐
297
+ │ Page Header │
298
+ │ ┌─────────────────────────────────────────────────────┐ │
299
+ │ │ Settings │ │
300
+ │ └─────────────────────────────────────────────────────┘ │
301
+ ├────────────┬────────────────────────────────────────────┤
302
+ │ │ │
303
+ │ Profile │ Section Title │
304
+ │ Account │ ───────────────────────────────── │
305
+ │ Team │ │
306
+ │ Billing │ Form fields here │
307
+ │ Security │ │
308
+ │ API │ │
309
+ │ │ │
310
+ │ │ ───────────────────────────────── │
311
+ │ │ │
312
+ │ │ Another section │
313
+ │ │ │
314
+ │ │ [Save Changes] │
315
+ └────────────┴────────────────────────────────────────────┘
316
+ ```
317
+
318
+ **Components:**
319
+ - Vertical sub-navigation (left)
320
+ - Sections with clear headings
321
+ - Forms with inline validation
322
+ - Save button sticky at bottom or per-section
323
+
324
+ **Settings Categories:**
325
+ | Category | Content |
326
+ |----------|---------|
327
+ | Profile | Name, avatar, bio, timezone |
328
+ | Account | Email, password, 2FA |
329
+ | Team | Members, roles, invitations |
330
+ | Billing | Plan, payment method, invoices |
331
+ | Security | Sessions, API keys, audit log |
332
+ | Integrations | Connected apps, webhooks |
333
+ | Notifications | Email, push, in-app preferences |
334
+
335
+ ---
336
+
337
+ ### Auth: Login Page
338
+
339
+ ```
340
+ ┌─────────────────────────────────────────────────────────┐
341
+ │ │
342
+ │ Logo │
343
+ │ │
344
+ │ ┌─────────────────────────┐ │
345
+ │ │ Welcome back │ │
346
+ │ │ │ │
347
+ │ │ Email │ │
348
+ │ │ [________________] │ │
349
+ │ │ │ │
350
+ │ │ Password │ │
351
+ │ │ [________________] │ │
352
+ │ │ │ │
353
+ │ │ [x] Remember me │ │
354
+ │ │ │ │
355
+ │ │ [ Sign in ] │ ← Orange │
356
+ │ │ │ │
357
+ │ │ Forgot password? │ │
358
+ │ │ │ │
359
+ │ │ ─── or continue with ───│ │
360
+ │ │ │ │
361
+ │ │ [Google] [GitHub] │ │
362
+ │ │ │ │
363
+ │ │ Don't have an account? │ │
364
+ │ │ Sign up → │ │
365
+ │ └─────────────────────────┘ │
366
+ │ │
367
+ └─────────────────────────────────────────────────────────┘
368
+ ```
369
+
370
+ **Requirements:**
371
+ - Email + password fields
372
+ - Remember me checkbox
373
+ - Forgot password link
374
+ - Social login options (if applicable)
375
+ - Link to signup
376
+ - Error states inline
377
+
378
+ ---
379
+
380
+ ### Auth: Signup Page
381
+
382
+ ```
383
+ ┌─────────────────────────────────────────────────────────┐
384
+ │ │
385
+ │ Logo │
386
+ │ │
387
+ │ ┌─────────────────────────┐ │
388
+ │ │ Create your account │ │
389
+ │ │ │ │
390
+ │ │ Full name │ │
391
+ │ │ [________________] │ │
392
+ │ │ │ │
393
+ │ │ Work email │ │
394
+ │ │ [________________] │ │
395
+ │ │ │ │
396
+ │ │ Password │ │
397
+ │ │ [________________] │ │
398
+ │ │ • 8+ characters │ ← Requirements│
399
+ │ │ │ │
400
+ │ │ [x] I agree to Terms │ │
401
+ │ │ and Privacy Policy │ │
402
+ │ │ │ │
403
+ │ │ [ Create account ] │ ← Orange │
404
+ │ │ │ │
405
+ │ │ Already have account? │ │
406
+ │ │ Sign in → │ │
407
+ │ └─────────────────────────┘ │
408
+ │ │
409
+ └─────────────────────────────────────────────────────────┘
410
+ ```
411
+
412
+ **Requirements:**
413
+ - Name, email, password fields
414
+ - Password requirements visible
415
+ - Terms/privacy checkbox (required)
416
+ - Link to login
417
+
418
+ ---
419
+
420
+ ### Onboarding Flow
421
+
422
+ Multi-step wizard for new user setup.
423
+
424
+ ```
425
+ ┌─────────────────────────────────────────────────────────┐
426
+ │ │
427
+ │ Logo │
428
+ │ │
429
+ │ Step 1 ───●─────────●─────────○ Step 3 │
430
+ │ Welcome Setup Ready │
431
+ │ │
432
+ │ ┌─────────────────────────┐ │
433
+ │ │ Let's set up your │ │
434
+ │ │ workspace │ │
435
+ │ │ │ │
436
+ │ │ Workspace name │ │
437
+ │ │ [________________] │ │
438
+ │ │ │ │
439
+ │ │ What will you use │ │
440
+ │ │ Daily for? │ │
441
+ │ │ │ │
442
+ │ │ ○ Personal projects │ │
443
+ │ │ ○ Team collaboration │ │
444
+ │ │ ○ Client work │ │
445
+ │ │ │ │
446
+ │ │ [Continue →] │ │
447
+ │ │ │ │
448
+ │ │ Skip for now │ │
449
+ │ └─────────────────────────┘ │
450
+ │ │
451
+ └─────────────────────────────────────────────────────────┘
452
+ ```
453
+
454
+ **Components:**
455
+ - Progress indicator (steps or progress bar)
456
+ - Clear step title and description
457
+ - Form content per step
458
+ - Continue button (primary)
459
+ - Skip option (when applicable)
460
+ - Back button (from step 2+)
461
+
462
+ **Onboarding Steps (typical):**
463
+ 1. Welcome/purpose selection
464
+ 2. Workspace/team setup
465
+ 3. Invite team members (optional)
466
+ 4. Connect integrations (optional)
467
+ 5. Quick tour or first action
468
+
469
+ ---
470
+
471
+ ### Error Pages
472
+
473
+ **404 - Not Found**
474
+ ```
475
+ ┌─────────────────────────────────────────────────────────┐
476
+ │ │
477
+ │ 404 │
478
+ │ │
479
+ │ Page not found │
480
+ │ │
481
+ │ The page you're looking for doesn't │
482
+ │ exist or has been moved. │
483
+ │ │
484
+ │ [Go to Dashboard] │
485
+ │ │
486
+ └─────────────────────────────────────────────────────────┘
487
+ ```
488
+
489
+ **500 - Server Error**
490
+ ```
491
+ ┌─────────────────────────────────────────────────────────┐
492
+ │ │
493
+ │ 500 │
494
+ │ │
495
+ │ Something went wrong │
496
+ │ │
497
+ │ We're working on fixing this. │
498
+ │ Try refreshing or come back later. │
499
+ │ │
500
+ │ [Refresh] [Go to Dashboard] │
501
+ │ │
502
+ └─────────────────────────────────────────────────────────┘
503
+ ```
504
+
505
+ ---
506
+
507
+ ## Navigation Structures
508
+
509
+ ### Primary Navigation (Sidebar)
510
+
511
+ Hierarchical navigation with icons.
512
+
513
+ ```
514
+ ┌────────────────────┐
515
+ │ Logo │
516
+ ├────────────────────┤
517
+ │ ◇ Dashboard │ ← Current page
518
+ │ ○ Projects │
519
+ │ ○ Documents │
520
+ │ ○ Team │
521
+ │ ○ Analytics │
522
+ ├────────────────────┤ ← Separator
523
+ │ ○ Settings │
524
+ │ ○ Help │
525
+ ├────────────────────┤
526
+ │ ┌────────────────┐ │
527
+ │ │ 👤 User Name │ │ ← User menu
528
+ │ │ user@email.com │ │
529
+ │ └────────────────┘ │
530
+ └────────────────────┘
531
+ ```
532
+
533
+ **Specifications:**
534
+ | Element | Specification |
535
+ |---------|---------------|
536
+ | Nav item height | 40px |
537
+ | Icon size | 20px |
538
+ | Icon-text gap | 12px |
539
+ | Indent (nested) | 24px |
540
+ | Active indicator | 3px left border, purple |
541
+ | Hover state | `purple-500/10` background |
542
+
543
+ **Collapsed State (Tablet):**
544
+ - Show icons only
545
+ - Tooltip on hover
546
+ - Expand on click or hover
547
+
548
+ ---
549
+
550
+ ### Secondary Navigation (Tabs)
551
+
552
+ Horizontal tabs for sub-sections within a page.
553
+
554
+ ```
555
+ [ Overview ] [ Activity ] [ Settings ] [ Integrations ]
556
+ ◇ ○ ○ ○
557
+ ```
558
+
559
+ **Specifications:**
560
+ - Active: Bold text, underline indicator (purple)
561
+ - Hover: Text color change
562
+ - Spacing: 24px between tabs
563
+ - Mobile: Horizontal scroll if needed
564
+
565
+ ---
566
+
567
+ ### Breadcrumbs
568
+
569
+ Show location in hierarchy.
570
+
571
+ ```
572
+ Home / Projects / Project Name / Settings
573
+ ```
574
+
575
+ **Rules:**
576
+ - Max 4 levels visible
577
+ - Truncate middle items on mobile: `Home / ... / Settings`
578
+ - Current page not clickable
579
+ - Separator: `/` or `>`
580
+
581
+ ---
582
+
583
+ ### User Menu
584
+
585
+ Dropdown from avatar/name in topbar.
586
+
587
+ ```
588
+ ┌─────────────────────┐
589
+ │ 👤 User Name │
590
+ │ user@email.com │
591
+ ├─────────────────────┤
592
+ │ Profile │
593
+ │ Settings │
594
+ │ Keyboard shortcuts │
595
+ ├─────────────────────┤
596
+ │ Help & Support │
597
+ │ What's new │
598
+ ├─────────────────────┤
599
+ │ Sign out │
600
+ └─────────────────────┘
601
+ ```
602
+
603
+ ---
604
+
605
+ ### Mobile Navigation
606
+
607
+ Bottom navigation or hamburger menu.
608
+
609
+ **Bottom Nav (5 or fewer items):**
610
+ ```
611
+ ┌─────┬─────┬─────┬─────┬─────┐
612
+ │ ◇ │ ○ │ ○ │ ○ │ ○ │
613
+ │Home │Proj │Docs │Team │More │
614
+ └─────┴─────┴─────┴─────┴─────┘
615
+ ```
616
+
617
+ **Drawer (6+ items):**
618
+ - Hamburger icon in topbar
619
+ - Full-height drawer from left
620
+ - Same structure as desktop sidebar
621
+ - Overlay background (tap to close)
622
+
623
+ ---
624
+
625
+ ## Responsive Behavior
626
+
627
+ ### Breakpoints
628
+
629
+ | Name | Width | Target |
630
+ |------|-------|--------|
631
+ | `sm` | 640px | Large phones |
632
+ | `md` | 768px | Tablets |
633
+ | `lg` | 1024px | Small laptops |
634
+ | `xl` | 1280px | Desktops |
635
+ | `2xl` | 1536px | Large screens |
636
+
637
+ ### Layout Changes
638
+
639
+ | Element | Desktop (lg+) | Tablet (md) | Mobile (sm) |
640
+ |---------|---------------|-------------|-------------|
641
+ | Sidebar | Full (240px) | Collapsed (64px) | Hidden (drawer) |
642
+ | Content padding | 32px | 24px | 16px |
643
+ | Grid columns | 12 | 8 | 4 |
644
+ | Cards per row | 4 | 2 | 1 |
645
+ | Tables | Full | Scroll horizontal | Card view |
646
+
647
+ ### Mobile-First Patterns
648
+
649
+ - Stack layouts vertically
650
+ - Hide secondary actions behind menus
651
+ - Use bottom sheets instead of modals
652
+ - Prefer swipe gestures for common actions
653
+
654
+ ---
655
+
656
+ ## Page Anatomy
657
+
658
+ ### Page Header
659
+
660
+ Every page needs a header with:
661
+
662
+ ```
663
+ ┌─────────────────────────────────────────────────────────┐
664
+ │ {Page Title} [Secondary] [+] │
665
+ │ {Optional description or breadcrumb} │
666
+ └─────────────────────────────────────────────────────────┘
667
+ ```
668
+
669
+ **Elements:**
670
+ | Element | Required | Notes |
671
+ |---------|----------|-------|
672
+ | Title | Yes | H1, descriptive |
673
+ | Description | Optional | Explains page purpose |
674
+ | Primary action | If applicable | Orange button, right-aligned |
675
+ | Secondary actions | If applicable | Ghost/outline buttons |
676
+
677
+ ### Content Sections
678
+
679
+ Group related content with clear sections:
680
+
681
+ ```
682
+ ┌─────────────────────────────────────────────────────────┐
683
+ │ Section Title [View all →] │
684
+ ├─────────────────────────────────────────────────────────┤
685
+ │ │
686
+ │ Section content here │
687
+ │ │
688
+ └─────────────────────────────────────────────────────────┘
689
+ ```
690
+
691
+ **Spacing:**
692
+ - Between sections: 32px
693
+ - Section title to content: 16px
694
+ - Within section: 16px
695
+
696
+ ### Page Footer (App)
697
+
698
+ Optional for most app pages. Include when needed:
699
+
700
+ ```
701
+ ┌─────────────────────────────────────────────────────────┐
702
+ │ © 2026 Daily X • Terms • Privacy • Status │
703
+ └─────────────────────────────────────────────────────────┘
704
+ ```
705
+
706
+ ---
707
+
708
+ ## Changelog
709
+
710
+ | Version | Date | Changes |
711
+ |---------|------|---------|
712
+ | 1.0.0 | 2026-01-29 | Initial page structure guidelines |
713
+
714
+ ---
715
+
716
+ ## Questions?
717
+
718
+ Contact the design team at design@daily.com for page structure guidance.