design: native UI vision #73

tomitheninja · 2025-12-10T03:13:51Z

No description provided.

…les, and activity sheets documentation.

vercel · 2025-12-10T03:13:54Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
pek-infinity	Ready	Preview	Comment	Dec 10, 2025 1:34pm

tomitheninja · 2025-12-10T03:15:10Z

@copilot Create a detailed review for the native like UI plan. Assume style.css is part of this pull request. Do the opposite of a LGTM review, be perfectionist.

Copilot · 2025-12-10T03:15:18Z

@tomitheninja I've opened a new pull request, #74, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot

Pull request overview

This PR introduces comprehensive design documentation for a fundamental UI shift from Bootstrap Admin aesthetics to a Native/Linear mobile-first design philosophy. The changes include detailed design vision documents in the memory-bank and CSS design token implementations reflecting the new "Tactile Professionalism" aesthetic.

Key Changes:

Establishes "Native/Linear" design philosophy with 9 core principles (invisible structures, thumb-zone navigation, sheets over modals, optimistic UI)
Defines Elite Purple + Amber color palette with "invisible UI" concept where cards blend into background
Documents specific UI patterns for user profiles, group profiles, navigation shell, and member interactions

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
`memory-bank/ui-native-design/vision.md`	Main design philosophy document defining the shift from Bootstrap to Native/Linear with 9 core principles and conversion rules
`memory-bank/ui-native-design/design-vision.md`	Duplicate/alternate version of vision.md with different file structure references - should be consolidated
`memory-bank/ui-native-design/shell-navigation.md`	Documents bottom bar navigation architecture and sheet vs. full-navigation routing rules
`memory-bank/ui-native-design/user-profile.md`	Specifies user profile layout with contact icons, activity heatmap, and interaction patterns
`memory-bank/ui-native-design/group-profile.md`	Details group profile layout with member filtering, role hierarchy, and virtualization strategy
`memory-bank/ui-native-design/members-and-actions.md`	Defines member list filtering, sorting defaults, and optimistic update patterns for quick actions
`memory-bank/ui-native-design/activity-sheets.md`	Specifies sticky heatmap design and scroll-based interaction model for user activity views
`full-stack/src/styles.css`	Implements new design tokens with Elite Purple primary, Amber accent, invisible card patterns, and subtle shadow system in both light/dark modes

Copilot · 2025-12-10T03:21:40Z

memory-bank/ui-native-design/shell-navigation.md

+size: "800 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"


Frontmatter violates the required format. According to memory-bank/rules/frontmatter.md, all documentation files must start with exactly 15 lines of frontmatter. This file only has 10 lines. Add 5 empty lines after line 9 and before the closing ---.

Suggested change

updated: "2025-12-10"

updated: "2025-12-10"

Copilot · 2025-12-10T03:21:41Z

memory-bank/ui-native-design/members-and-actions.md

+size: "800 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"


Frontmatter violates the required format. According to memory-bank/rules/frontmatter.md, all documentation files must start with exactly 15 lines of frontmatter. This file only has 10 lines. Add 5 empty lines after line 9 and before the closing ---.

Suggested change

updated: "2025-12-10"

updated: "2025-12-10"

Copilot · 2025-12-10T03:21:41Z

memory-bank/ui-native-design/group-profile.md

+size: "1000 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"


Frontmatter violates the required format. According to memory-bank/rules/frontmatter.md, all documentation files must start with exactly 15 lines of frontmatter. This file only has 10 lines. Add 5 empty lines after line 9 and before the closing ---.

Suggested change

updated: "2025-12-10"

updated: "2025-12-10"

Copilot · 2025-12-10T03:21:41Z

memory-bank/ui-native-design/activity-sheets.md

+size: "600 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"


Frontmatter violates the required format. According to memory-bank/rules/frontmatter.md, all documentation files must start with exactly 15 lines of frontmatter. This file only has 10 lines. Add 5 empty lines after line 9 and before the closing ---.

Suggested change

updated: "2025-12-10"

updated: "2025-12-10"

Copilot · 2025-12-10T03:21:42Z

memory-bank/ui-native-design/design-vision.md

+---
+purpose: "Define the design philosophy shift from Bootstrap Admin to Native/Linear"
+triggers: ["UI refactor", "design review", "component updates"]
+keywords: ["design", "native", "linear", "phonebook", "search-first"]
+importance: "critical"
+size: "1200 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+---
+
+# Design Vision: Bootstrap Admin → Native/Linear
+
+## The Shift
+
+We are moving from a "Bootstrap Admin Page" aesthetic (card-based, boxed containers) to a "Native/Linear" design (content-first, whitespace-driven, gesture-based).
+
+This is a **fundamental architecture change**, not cosmetic.
+
+## Core Principles
+
+### 1. Invisible Structures
+- **Kill the card metaphor**: No rounded boxes with shadows on generic backgrounds
+- **Use whitespace & negative space** to organize data
+- **1px dividers** between logical sections (not containers)
+- Content defines the interface, not chrome
+
+### 2. Thumb-Zone Supremacy
+- Navigation and primary actions live in **bottom 30%** (OneUI principle)
+- Reachability is mandatory — users shouldn't hunt
+- Bottom bar is persistent, always accessible
+- Content scrolls; controls don't
+
+### 3. Death to Hamburger Menu
+- No off-canvas navigation
+- Use **persistent bottom bars** + **stackable sheets**
+- Context is always visible
+- Navigation is friction-free
+
+### 4. Content is the Interface
+- Reduce button clutter
+- If data can be tapped/swiped directly, do it
+- Don't add a "View" button when the row itself should be interactive
+- Rows are actionable by default
+
+### 5. Optimistic Physics
+- UI reacts **instantly** to touch
+- Data syncs in the background
+- Never show a spinner for simple toggles (Revolut pattern)
+- Feedback is tactile and present
+
+### 6. Tactile Precision
+- High-density information without visual chaos
+- Rigorous alignment creates order
+- Gesture states (swipe, drag) are distinct
+- Micro-interactions soften professional rigidity
+
+### 7. Sheets Over Modals
+- Avoid center-screen popups (jarring, takes focus)
+- Complex interactions happen in **slide-up panels**
+- Sheets preserve context — you see the background
+- Sheets are dismissible by gesture
+
+### 8. Humanized Micro-interactions
+- Hover/active states feel responsive
+- Don't just change color — add weight, scale, or movement
+- Feedback should feel intentional, not mechanical
+
+### 9. Native Fluidity
+- Eliminate "white flash" routing artifacts
+- App behaves like a **single living organism**
+- Transitions are smooth, content feels connected
+- No page reloads — state flows between screens
+
+## Core Use Case: Search-First Phonebook
+
+**Users**: 10,000+ people across 100+ groups
+**User's context**: 3-10 groups on average
+**Primary actions**:
+1. Search for a user by name
+2. Search for a group by name
+3. View user profile with their groups
+4. View group profile with hierarchy, leader, metadata
+
+**Design consequence**: 
+- Search is a **core navigation element**, not a buried feature
+- User & Group profiles are equally important
+- Membership is an **entity** (not just a join table)
+
+## Memory Bank Structure
+
+This folder contains:
+- `design-vision.md` (this file) — Philosophy & principles
+- `shell-architecture.md` — App shell, bottom nav, sheet stack
+- `patterns.md` — Reusable interaction patterns
+
+## Conversion Rules: From Bootstrap → Native
+
+| Bootstrap | Native | Rationale |
+|-----------|--------|-----------|
+| Card containers | Whitespace + dividers | Content breathes |
+| Modal popups | Bottom sheets | Context preserved |
+| Hamburger menu | Bottom nav | Reachability |
+| Button-heavy UI | Row-based actions | Simplicity |
+| Page reloads | Sheet overlays | Continuity |
+| Shadows & borders | Subtle dividers | Minimal chrome |
+| "View" buttons | Tap row directly | Content-first |
+| Spinners on interactions | Optimistic updates | Responsive feel |


Duplicate file detected: Both vision.md and design-vision.md exist with nearly identical content (same title, same core principles, same conversion table). The only differences are:

File size metadata (1500 vs 1200 words)

Memory Bank Structure section lists different files

This creates confusion and maintenance burden. Choose one canonical filename and remove the other. Based on the structure lists, design-vision.md appears to be a simplified version, while vision.md has more detailed file references. Recommend keeping vision.md and removing design-vision.md, but ensure all cross-references in other files point to the correct filename.

Copilot · 2025-12-10T03:21:43Z

memory-bank/ui-native-design/ui-vision.md

+size: "1200 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"


Frontmatter violates the required format. According to memory-bank/rules/frontmatter.md, all documentation files must start with exactly 15 lines of frontmatter. This file only has 10 lines. Add 5 empty lines after line 9 and before the closing ---.

Suggested change

updated: "2025-12-10"

updated: "2025-12-10"

Copilot · 2025-12-10T03:21:43Z

memory-bank/ui-native-design/user-profile.md

+size: "900 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"


Frontmatter violates the required format. According to memory-bank/rules/frontmatter.md, all documentation files must start with exactly 15 lines of frontmatter. This file only has 10 lines. Add 5 empty lines after line 9 and before the closing ---.

Suggested change

updated: "2025-12-10"

updated: "2025-12-10"

Copilot · 2025-12-10T03:21:44Z

full-stack/src/styles.css

-  --sidebar-ring: oklch(0.442 0.017 285.786);
+  /* 
+    DARK MODE: "The Void"
+    Concept: Premium OLED. Deep violet tint, no grey wash.


Spelling error: "Concept" is misspelled as "Concept" on line 137. Should be "Concept: Premium OLED. Deep violet tint, no grey wash."

Wait, reviewing again - "Concept" is actually correct. However, there's an inconsistency in terminology: Line 67 uses "Concept: A sheet of high-quality paper" (American English) while the comment on the same line could use "grey" (British English) at line 137. For consistency, either use American English throughout ("gray") or British English throughout ("grey"). The codebase appears to use American English based on other terms.

Suggested change

Concept: Premium OLED. Deep violet tint, no grey wash.

Concept: Premium OLED. Deep violet tint, no gray wash.

Copilot · 2025-12-10T03:21:44Z

memory-bank/ui-native-design/design-vision.md

+- `shell-architecture.md` — App shell, bottom nav, sheet stack
+- `patterns.md` — Reusable interaction patterns


Documentation references non-existent files: The "Memory Bank Structure" section lists shell-architecture.md and patterns.md, but these files do not exist in the PR. The actual files in the PR are shell-navigation.md, user-profile.md, group-profile.md, members-and-actions.md, and activity-sheets.md. Update the list to reflect the actual files present, or add the missing files.

Suggested change

- `shell-architecture.md` — App shell, bottom nav, sheet stack

- `patterns.md` — Reusable interaction patterns

- `shell-navigation.md` — App shell, bottom navigation, and sheet stack

- `user-profile.md` — User profile design and flows

- `group-profile.md` — Group profile, hierarchy, and metadata

- `members-and-actions.md` — Membership entity and actions

- `activity-sheets.md` — Activity and sheet overlay patterns

Copilot · 2025-12-10T03:21:44Z

full-stack/src/styles.css

+  /* Shadows: "Invisible" - minimal spread, purely for lifting on z-index */
+  --shadow-2xs: 0 1px 2px -1px rgb(0 0 0 / 0.05);
+  --shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.15);


Undefined CSS custom properties: Shadow variables --shadow-* are defined (lines 115-121, 191-197) but never referenced in the @theme inline block where other CSS variables are mapped to Tailwind tokens (lines 200-246). These shadow variables won't be accessible via Tailwind utilities. Either:

Add shadow mappings in the @theme inline block (e.g., --shadow-sm: var(--shadow-sm);), or

Use these as direct CSS custom properties with var(--shadow-sm) in stylesheets

Without proper mapping, these carefully defined shadow values will be unused.

tomitheninja added 2 commits December 10, 2025 00:02

Refreshed design system

69fa053

feat: Add native UI design vision, shell navigation, user/group profi…

4f87e43

…les, and activity sheets documentation.

vercel bot deployed to Preview December 10, 2025 03:13 View deployment

Copilot AI mentioned this pull request Dec 10, 2025

Comprehensive perfectionist review of native UI design vision #74

Closed

tomitheninja requested a review from Copilot December 10, 2025 03:15

Copilot started reviewing on behalf of tomitheninja December 10, 2025 03:16 View session

Copilot AI reviewed Dec 10, 2025

View reviewed changes

feat: Introduce design tokens for spacing and sizing

7def02e

vercel bot deployed to Preview December 10, 2025 13:31 View deployment

format file

f4dafba

vercel bot deployed to Preview December 10, 2025 13:34 View deployment

tomitheninja merged commit 9f25825 into master Dec 10, 2025
5 checks passed

tomitheninja deleted the native-ui-vision branch December 10, 2025 13:44

	Concept: Premium OLED. Deep violet tint, no grey wash.
	Concept: Premium OLED. Deep violet tint, no gray wash.

		- `shell-architecture.md` — App shell, bottom nav, sheet stack
		- `patterns.md` — Reusable interaction patterns

-- `shell-architecture.md` — App shell, bottom nav, sheet stack
-- `patterns.md` — Reusable interaction patterns
+- `shell-navigation.md` — App shell, bottom navigation, and sheet stack
+- `user-profile.md` — User profile design and flows
+- `group-profile.md` — Group profile, hierarchy, and metadata
+- `members-and-actions.md` — Membership entity and actions
+- `activity-sheets.md` — Activity and sheet overlay patterns

design: native UI vision #73

design: native UI vision #73

Uh oh!

Conversation

tomitheninja commented Dec 10, 2025

Uh oh!

vercel bot commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tomitheninja commented Dec 10, 2025

Uh oh!

Copilot AI commented Dec 10, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Dec 10, 2025 •

edited

Loading