designmd-forge 1.2.0

package/dist/data/designs/ios-clickup.md

@@ -0,0 +1,431 @@
+# Design System Inspiration of ClickUp (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+ClickUp's iOS app is a dense, feature-maximal productivity surface whose personality is the **brand gradient** and an information-rich task list. The default canvas is white (`#FFFFFF`) in light mode and a deep blue-violet (`#1B1B2E`) in dark mode — chosen to complement the gradient, NOT neutral black. The app opens to a List view: tasks grouped under **custom status pills** ("To do", "In progress", "Review", "Complete"), where each task row packs a status checkbox, name, priority flag, tags, due date, and assignee avatar into a compact line. ClickUp's thesis is "one app to replace them all" — so the UI is deliberately dense, with 12+ view types (List, Board, Calendar, Gantt, Timeline, Workload, Table, Doc, Mind Map, Activity, Map, Embed) rendering the same task objects.
+
+The signature visual element is the **3-stop brand gradient**: purple (`#7B68EE`) → pink (`#FD71AF`) → blue (`#49CCF9`). It is the brand's hero moment — used on the floating action button, the primary CTA, the logo, and every **ClickUp AI** surface (the AI bar, AI buttons, AI-generated content highlights). The gradient is reserved and intentional: it never tiles the background; it marks "the most important action" and "AI". The other signature is the **custom status system**: every List defines its own ordered set of colored statuses, and the task list is grouped by them — each group headed by a saturated status pill with a count.
+
+The color system pairs the gradient triad with a functional palette: status green (`#2ECC71`), red (`#F44E6E`), orange (`#FF9F1A`), blue (`#49CCF9`), yellow (`#FFCC00`), teal (`#1ECBE1`), plus a neutral gray (`#5B5B79`) for "to do"/unset. Priority is encoded as a **colored flag triangle**: Urgent (red `#F44E6E`), High (orange `#FF9F1A`), Normal (blue `#49CCF9`), Low (gray). Tags are small rounded pills in any of the palette hues at ~22% opacity with saturated text. Color is functional and dense — it differentiates many simultaneous attributes at a glance.
+
+Typography is **Plus Jakarta Sans** — a geometric, slightly humanist sans (a close free match to ClickUp's product face). On iOS it falls back to SF Pro. Hierarchy is confident: 32pt extrabold screen titles, 26pt extrabold list titles, 22pt section heads, 14pt semibold task names (denser/bolder than Asana's), 13pt metadata, 10pt extrabold status pills (uppercased, tracked). Headings push to 800; task names sit at a deliberate 600 so the dense list still scans.
+
+**Key Characteristics:**
+- White canvas (`#FFFFFF`) light / deep blue-violet (`#1B1B2E`) dark — complements the gradient, NOT neutral black
+- 3-stop brand gradient — purple `#7B68EE` → pink `#FD71AF` → blue `#49CCF9` on FAB, primary CTA, logo, all AI surfaces
+- Custom status pills — every List defines its own ordered colored statuses; the task list is grouped by them
+- Dense task rows — status box + name + priority flag + tags + due + assignee packed into one compact line
+- Priority flag — a colored triangle: Urgent (red) / High (orange) / Normal (blue) / Low (gray)
+- ClickUp AI surfaces — the gradient marks every AI affordance (AI bar, AI buttons, AI content)
+- 12+ view types — List / Board / Calendar / Gantt / Timeline / Workload / Table / Doc / Mind Map / Activity / Map
+- Tags as ~22% tinted pills with saturated text in any palette hue
+- Hierarchy nesting — Spaces ▸ Folders ▸ Lists ▸ Tasks ▸ Subtasks
+- Squircle FAB — a rounded-square (18pt radius) gradient button, not a circle
+- Minimal but information-dense chrome — bottom tab bar (Home / Tasks / Inbox / Search) + per-list view tabs
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Brand Gradient** (`#7B68EE` → `#FD71AF` → `#49CCF9`, 135°): The hero — FAB, primary CTA, logo, AI surfaces. Identical light & dark.
+- **Brand Purple** (`#7B68EE`): The single solid brand color — active tab, links, solid secondary CTA, selection.
+- **Brand Pink** (`#FD71AF`): Gradient mid-stop; accent on AI / highlights.
+- **Brand Blue** (`#49CCF9`): Gradient end-stop; also "Normal" priority & "In progress" default status.
+- **Purple Pressed** (`#6A57DD`): Pressed state of solid-purple surfaces.
+- **Purple Tint** (`#7B68EE38`): ~22% purple behind selected rows / focused fields.
+
+### Canvas & Surfaces (Light Mode)
+- **Canvas White** (`#FFFFFF`): Primary light canvas, task list background.
+- **Surface Gray** (`#F7F7FB`): Grouped surfaces, sidebar, hovered rows.
+- **Surface Pressed** (`#EDEDF4`): Pressed/selected rows.
+- **Divider** (`#E7E7EF`): Hairline between task rows and groups.
+- **Card Border** (`#DEDEE9`): 1pt border on board cards.
+
+### Canvas & Surfaces (Dark Mode)
+- **Dark Canvas** (`#1B1B2E`): Primary dark canvas — deep blue-violet, NOT pure black.
+- **Dark Surface 1** (`#232338`): Cards, grouped surfaces.
+- **Dark Surface 2** (`#2C2C44`): Elevated chips, hovered rows, board columns.
+- **Dark Divider** (`#383852`): Hairline dividers.
+- **Dark Card Border** (`#42425C`): 1pt border on board cards in dark.
+
+### Text
+- **Text Primary Light** (`#1B1B2E`): Primary task names, body.
+- **Text Secondary Light** (`#5E5E7A`): Metadata, due dates, counts, placeholders.
+- **Text Tertiary Light** (`#9292A8`): Disabled, completed-task strikethrough.
+- **Text Primary Dark** (`#F1F1F6`): Primary text on dark.
+- **Text Secondary Dark** (`#A6A6BC`): Metadata on dark.
+- **Text Tertiary Dark** (`#6E6E88`): Disabled / completed on dark.
+
+### Functional Palette (Status / Priority / Tags)
+The palette every custom status, priority, and tag draws from. Statuses render as **solid pills**; tags as ~22% tints.
+
+| Role | Solid Hue | Tint (22%) | On-Solid Text |
+|------|-----------|-----------|---------------|
+| Green / Complete | `#2ECC71` | `#2ECC7138` | `#FFFFFF` |
+| Red / Urgent | `#F44E6E` | `#F44E6E38` | `#FFFFFF` |
+| Orange / High | `#FF9F1A` | `#FF9F1A38` | `#FFFFFF` |
+| Blue / Normal | `#49CCF9` | `#49CCF938` | `#0E2A33` |
+| Purple / Brand | `#7B68EE` | `#7B68EE38` | `#FFFFFF` |
+| Pink | `#FD71AF` | `#FD71AF38` | `#FFFFFF` |
+| Yellow | `#FFCC00` | `#FFCC0038` | `#3A2F00` |
+| Teal | `#1ECBE1` | `#1ECBE138` | `#06363C` |
+| Gray / To-do / Unset | `#5B5B79` | `#5B5B7938` | `#FFFFFF` |
+
+### Priority (Flag Triangle)
+| Role | Color |
+|------|-------|
+| Urgent | `#F44E6E` |
+| High | `#FF9F1A` |
+| Normal | `#49CCF9` |
+| Low | `#9292A8` (gray) |
+| No priority | outline gray, no fill |
+
+### Semantic
+- **Success Green** (`#2ECC71`): "Complete" status, success toast.
+- **Error / Urgent Red** (`#F44E6E`): Overdue date, delete, urgent priority, error toast.
+- **Warning Orange** (`#FF9F1A`): High priority, warning callout.
+- **AI Glow** (`#7B68EE` → `#FD71AF` → `#49CCF9` at ~18% on a panel): backdrop tint behind ClickUp AI content.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Plus Jakarta Sans` (by Tokotype, 2020, SIL OFL) — geometric humanist sans; the closest free match to ClickUp's product typeface.
+- **Numeric**: Plus Jakarta Sans tabular figures for due dates, counts, points, time-tracking (`font-feature-settings: "tnum"`).
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **iOS Note**: falls back to SF Pro Text/Display when Plus Jakarta Sans isn't bundled.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Screen Title | Plus Jakarta Sans | 32pt | 800 | 1.15 | -0.5pt | "Everything", "Home" — large nav title |
+| List Title | Plus Jakarta Sans | 26pt | 800 | 1.2 | -0.3pt | List/Folder name in header (+ color square) |
+| Section | Plus Jakarta Sans | 22pt | 700 | 1.25 | -0.2pt | "Today's tasks", subsection headings |
+| Subsection | Plus Jakarta Sans | 17pt | 700 | 1.3 | -0.1pt | "Assigned to me", group labels |
+| Body | Plus Jakarta Sans | 15pt | 400 | 1.5 | 0pt | Task descriptions, comments, Docs |
+| Task Name | Plus Jakarta Sans | 14pt | 600 | 1.35 | 0pt | The task name in a dense list row |
+| Status Group Label | Plus Jakarta Sans | 10pt | 800 | 1.1 | 0.6pt | Status-pill text heading a group (uppercased) |
+| Meta | Plus Jakarta Sans | 13pt | 400 | 1.35 | 0pt | Due date, subtask count, time estimate |
+| Tag | Plus Jakarta Sans | 10pt | 700 | 1.0 | 0.2pt | Tag pill text |
+| Button | Plus Jakarta Sans | 15pt | 700 | 1.0 | 0pt | Primary / secondary buttons |
+| Text Action | Plus Jakarta Sans | 14pt | 600 | 1.0 | 0pt | "Add subtask", "More options" |
+| Assignee Initials | Plus Jakarta Sans | 9pt | 700 | 1.0 | 0.2pt | Initials inside an assignee avatar |
+| Tab Label | Plus Jakarta Sans | 10pt | 600 | 1.0 | 0.1pt | Bottom tab bar labels |
+| Comment Author | Plus Jakarta Sans | 13pt | 700 | 1.3 | 0pt | Comment / activity author name |
+
+### Principles
+- **Dense but legible**: ClickUp packs many attributes per row — task names at 14pt/600 (bolder than typical) so the eye anchors fast.
+- **Status pills are tight & loud**: 10pt/800, uppercased, +0.6pt tracking, white-on-saturated — they head every group.
+- **Weight concentrated at 400 / 600 / 700 / 800**: regular body, semibold task names & actions, bold buttons/headings, extrabold titles & status pills. No thin.
+- **Tabular numerals for the data**: due dates, points, time-tracked, counts must not jitter in the dense grid.
+- **The gradient never appears in type**: text is always solid; the gradient is for surfaces (FAB/CTA/AI), never letterforms in-app.
+- **Dynamic Type first-class**: titles, sections, body, task names, comments scale; status pills, tags, tab labels, assignee initials stay fixed.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Create task / Save / Generate with AI)**
+- Shape: Rounded rectangle, 10pt corner radius
+- Background: the 3-stop brand gradient (135°, `#7B68EE` → `#FD71AF` → `#49CCF9`)
+- Text: `#FFFFFF`, Plus Jakarta Sans 15pt weight 700
+- Padding: 13pt vertical, 26pt horizontal
+- Pressed: brightness 0.94 + scale 0.98
+- Disabled: gradient at 40% opacity
+
+**Solid Secondary Button (Save / Apply)**
+- Background: `#7B68EE` (Brand Purple, solid)
+- Text: `#FFFFFF`, Plus Jakarta Sans 15pt weight 700
+- Corner radius: 10pt; padding 13/24pt
+- Pressed: `#6A57DD` + scale 0.98
+
+**Outline Button (Add subtask / Add field)**
+- Background: transparent
+- Text: `#1B1B2E` light / `#F1F1F6` dark, Plus Jakarta Sans 14pt weight 600
+- Border: 1pt `#E7E7EF` light / `#383852` dark
+- Corner radius: 10pt; padding 12/20pt
+- Pressed: background `#EDEDF4` / `#2C2C44`
+
+**Text Button (More options / Add subtask)**
+- Font: Plus Jakarta Sans 14pt weight 600
+- Color: `#7B68EE` (brand purple)
+- Pressed: 60% opacity
+
+**Floating Action Button (Create — squircle, not circle)**
+- Size: 56pt, 18pt corner radius (rounded-square / squircle)
+- Background: the 3-stop brand gradient
+- Icon: white `plus` 24pt, stroke 2.6
+- Shadow: `rgba(123,104,238,0.50) 0 8px 22px`
+- Position: 16pt from trailing edge, 16pt above the tab bar
+- Pressed: scale 0.94 + brightness 0.94
+
+### Task Row (the core atom)
+
+Every task in any list view is a dense row:
+- Height: ~52pt with one metadata line
+- Leading: 18pt status checkbox — a 5pt-radius rounded square, 2pt border in the status color; checkmark when done
+- Name: Plus Jakarta Sans 14pt w600 `#1B1B2E` / `#F1F1F6`, truncates with ellipsis
+- Metadata row (6pt gap): priority flag triangle, tag pills, due date
+- Trailing: 22pt circular assignee avatar (initials or photo)
+- Divider: 1pt `#E7E7EF` / `#383852` between rows
+- Swipe-left: Complete (green) + More; swipe-right: set priority
+- Tap row: opens the full task panel (description, subtasks, custom fields, checklists, comments, activity)
+
+**Status Checkbox**
+- Default: 18pt rounded square, 5pt radius, 2pt border in the status's color, transparent fill
+- "In progress" group: orange/blue border; "Complete": filled `#2ECC71` + white check
+- Tap: cycles to the next status (or opens the status picker on long-press) + soft haptic
+
+**Status Pill (group header)**
+- A saturated solid pill in the status color: Plus Jakarta Sans 10pt w800, uppercased, +0.6pt tracking, white (or dark on yellow/blue) text
+- 4pt vertical / 9pt horizontal padding, 5pt corner radius
+- Followed by a count `#9292A8` and a trailing "+ add task" affordance
+
+**Priority Flag**
+- A small filled triangle (≈12pt) in the priority color: Urgent `#F44E6E`, High `#FF9F1A`, Normal `#49CCF9`, Low gray; "No priority" = gray outline
+- Tap: opens the priority picker
+
+**Tag Pill**
+- ~22% tint of a palette hue with saturated text, Plus Jakarta Sans 10pt w700
+- 2pt vertical / 7pt horizontal, 999pt radius (full pill)
+
+### Status Group
+
+- A status pill (see above) + item count + "+ add task"
+- Tap the pill chevron: collapse/expand the group's tasks (200ms ease-out)
+- Lists define an ordered set of statuses; "Complete"-type statuses collapse by default
+
+### ClickUp AI Bar / Surfaces
+
+- A horizontal bar (10pt radius) with a ~18% gradient backdrop tint + 1pt purple border
+- Leading sparkle glyph in brand purple; label "ClickUp AI · {action}" in Plus Jakarta Sans 12pt w600
+- AI-generated content blocks get the same subtle gradient tint to mark provenance
+- AI action buttons use the full gradient fill
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 52pt + safe area
+- Background: `#FFFFFF` / `#1B1B2E` with 1pt top border `#E7E7EF` / `#383852`
+- Tabs (4): Home, Tasks (My Work), Inbox (Notifications), Search
+- Icon size: 22pt; active filled, inactive stroked
+- Active color: `#7B68EE` (brand purple); inactive `#9292A8` / `#6E6E88`
+- Labels: Plus Jakarta Sans 10pt w600, always shown
+
+**View Switcher Tabs (per list)**
+- Below the list title: List, Board, Calendar, Gantt, Timeline, Doc, Table, … (12+; horizontally scrollable)
+- Active tab: `#7B68EE` text with a 2.5pt purple `#7B68EE` underline
+- Inactive: `#5E5E7A` / `#A6A6BC`
+- Plus Jakarta Sans 13pt w600, 18pt gap
+
+**Top Nav (list / task detail)**
+- Height: 44pt + safe area
+- Leading: back chevron / close X + breadcrumb (Space ▸ Folder ▸ List)
+- Center / leading: compact list or task title
+- Trailing: ⋯ actions / share / AI
+
+### Input Fields
+
+**Search Bar**
+- Height: 40pt
+- Background: `#F7F7FB` / `#2C2C44`
+- Border: none
+- Corner radius: 10pt
+- Leading icon `magnifyingglass` 16pt `#9292A8`
+- Placeholder: "Search tasks, docs, people" 14pt `#9292A8`
+- Focus: 1.5pt `#7B68EE` border
+
+**Inline Field / Composer**
+- Tapping a custom-field or name cell turns it into an inline field with a 1.5pt `#7B68EE` focus ring
+- Comment composer: `#F7F7FB` / `#2C2C44` fill, 10pt radius, "Comment or type / for commands" placeholder; a `/` slash menu and `@`-mention picker are available
+- AI compose: a gradient-bordered field with the sparkle prefix
+
+### Distinctive Components
+
+**Brand-Gradient FAB & AI Surfaces**
+- The hero — see Buttons & AI Bar. The gradient is reserved for "most important action" and "AI"; never a background.
+
+**Custom-Status Grouped List**
+- The default screen: tasks grouped by the List's ordered custom statuses, each headed by a saturated pill.
+
+**Board View**
+- Columns = one status each; cards carry the status-color top accent + priority flag + tags + assignee
+- Drag a card to another column = change its status; lift shadow + 200ms settle
+
+**Task Panel**
+- A full-screen / bottom-sheet detail: title, status pill, assignees, priority, dates, custom fields, subtasks, checklists, attachments, a description (rich-text Doc), comments + activity
+
+**Custom Field Cell**
+- Inline labeled value in the field's type: dropdown (tinted pill), number, money, progress bar, rating, formula — each compact
+
+**Slash / Mention Menu**
+- `/` opens a command menu (turn into, add field, embed); `@` mentions people/tasks/docs — a floating panel with the AI gradient border on AI options
+
+**Inbox Notification Row**
+- Leading actor avatar (28pt); bold actor + action; subtitle = task + List breadcrumb; trailing timestamp; unread = purple dot
+
+**Hierarchy Breadcrumb**
+- Space ▸ Folder ▸ List path in the top nav; each segment tappable; the Space carries its color square
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 6, 8, 10, 14, 16, 18, 22, 26, 32, 40, 56
+- Task row vertical padding: 11pt (dense)
+- Status group header: 10pt top / 6pt bottom
+- Screen horizontal inset: 16pt
+
+### Grid & Container
+- iPhone: full-width dense list; metadata wraps if narrow
+- iPad: master-detail — Spaces/Lists sidebar (300pt) + list/task detail
+- Board columns: ~270pt wide, horizontal scroll, 12pt gap
+- Task panel: max-width 760pt centered on large screens
+- Gantt/Timeline: horizontally scrolling timeline canvas
+
+### Whitespace Philosophy
+- **Density is the point**: ClickUp deliberately surfaces many attributes per row — tight 11pt padding, small pills, compact flags — so power users see everything without tapping in
+- **The gradient is rare and loud**: exactly one gradient element is visible at rest (the FAB) plus AI surfaces — its scarcity is what makes it read as "primary"
+- **Status pills bucket the list**: saturated pill headers create strong visual groups in a dense scroll
+- **Squircle, not circle**: the FAB's 18pt-radius rounded square is a deliberate brand signature distinct from circular FABs
+
+### Border Radius Scale
+- Square (0pt): dividers, full-bleed media
+- Subtle (5pt): status checkbox, status pills, color squares
+- Standard (8-10pt): buttons, search bar, cards, AI bar
+- Comfortable (14pt): bottom sheets, modals, pickers
+- Squircle (18pt): the FAB, large feature cards
+- Pill (999pt): tags, filter pills
+- Circle (50%): assignee avatars
+
+## 6. Depth & Elevation
+
+ClickUp is mostly flat — density + status color provide structure; shadows are reserved for floating, dragged, and the gradient FAB.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Task rows, list, status group headers |
+| Card (Level 1) | `rgba(0,0,0,0.07) 0 1px 4px` | Board cards at rest (light); 1pt border in dark |
+| Floating (Level 2) | `rgba(0,0,0,0.14) 0 4px 14px` | Slash/mention menu, status & priority pickers, dropdowns |
+| FAB | `rgba(123,104,238,0.50) 0 8px 22px` | Gradient FAB — a purple-tinted colored shadow |
+| Dragged (Level 3) | `rgba(0,0,0,0.22) 0 8px 24px` | A board card / task being dragged |
+| Sheet (Level 4) | `rgba(0,0,0,0.20) 0 -4px 24px` | Bottom sheets (task panel, filters, pickers) |
+| Modal Scrim | `rgba(0,0,0,0.45)` | Dim behind modals/sheets |
+
+**Shadow Philosophy**: Shadows mean "liftable / floating", never decoration. The board itself is flat — status color + density encode structure. The FAB gets a soft *purple* shadow tying it to the brand gradient. On dark, gray shadows vanish, so board cards rely on a 1pt `#42425C` border + a status-color top accent while the FAB keeps its purple glow.
+
+### Motion
+- **Status change**: tapping the checkbox cycles status with a 180ms color crossfade + soft haptic; long-press opens the picker (fade + 4pt slide-up, 150ms); "Complete" plays a quick check-draw
+- **Drag task / board card**: 1:1 finger tracking at 60fps; neighbors shift over 200ms ease-out; drop snaps with 150ms ease-out + soft haptic; status recolors on cross-column drop
+- **Status group collapse/expand**: chevron rotates 90° in 150ms; tasks height 0 → auto over 200ms ease-out
+- **FAB → create**: squircle scales up and the create sheet rises from bottom over 280ms ease-out
+- **AI generation**: the AI bar's gradient shimmers (a 1.2s sweep) while generating; result fades in over 200ms with the gradient-tint backdrop
+- **View tab switch**: 2.5pt purple underline slides over 200ms; the view cross-fades 150ms
+- **Push navigation / breadcrumb drill**: iOS-native push, 300ms horizontal slide
+- **Haptic feedback**: soft impact on status change, drag start, group toggle; light tick on tab switch; success tick on task complete
+
+## 7. Do's and Don'ts
+
+### Do
+- Reserve the 3-stop gradient (`#7B68EE` → `#FD71AF` → `#49CCF9`) for the FAB, primary CTA, logo, and AI surfaces only
+- Use the deep blue-violet `#1B1B2E` for dark canvas — it complements the gradient, NOT neutral black
+- Group the task list by the List's ordered custom status pills (saturated, uppercased, 10pt/800)
+- Make the FAB a squircle (56pt, 18pt radius) — a deliberate brand signature, not a circle
+- Encode priority as a colored flag triangle (Urgent red / High orange / Normal blue / Low gray)
+- Embrace density — surface priority + tags + due + assignee per row; power users want it all visible
+- Mark every AI affordance with the gradient (AI bar tint, AI buttons, AI content backdrop)
+- Use tags as ~22% tinted pills with saturated text in any palette hue
+- Offer the full view switcher (List / Board / Calendar / Gantt / Timeline / Doc / …) over the same tasks
+- Use tabular numerals for due dates, points, time-tracked, and counts in the dense grid
+- Show the Space ▸ Folder ▸ List breadcrumb so users always know where they are
+
+### Don't
+- Don't tile the gradient as a background or use it on body text — it marks primary action + AI only
+- Don't use pure black (`#000000`) for the dark canvas — `#1B1B2E` blue-violet is correct
+- Don't render statuses as faint tint chips — group-header status pills are SOLID and saturated (tags are the tinted ones)
+- Don't make the FAB a circle — the squircle is the brand signature
+- Don't over-sparsify the list — ClickUp's value is information density; don't strip metadata to "clean it up"
+- Don't use a flat checkbox for status — it's a status-colored rounded square that cycles statuses
+- Don't use heavy shadows on rows — only floating / dragged elements and the FAB get shadow
+- Don't use gray as the FAB shadow — it's a soft purple glow tied to the gradient
+- Don't bold task names beyond 600 or lighten below it — 14pt/600 keeps the dense list scannable
+- Don't introduce a second gradient — there is exactly one brand gradient; functional colors are solids
+- Don't hide the breadcrumb — hierarchy (Space/Folder/List) is core to ClickUp's mental model
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Metadata may wrap; fewer tags shown, "+N" overflow |
+| iPhone 13/14/15 | 390pt | Standard dense layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
+| iPhone 15/16 Pro Max | 430pt | One extra metadata column without wrap |
+| iPad (portrait) | 768pt | Master-detail: Spaces/Lists sidebar (300pt) + list/task detail |
+| iPad (landscape) | 1024pt+ | Three-pane: sidebar + list + task panel; full Gantt/Table |
+
+### Dynamic Type
+- Screen/list/section titles, body, task names, comments, Docs: full scale
+- Status pills, tags, tab labels, assignee initials, status group labels: FIXED (dense-layout-sensitive)
+- Due dates / points / counts: scale but stay tabular
+
+### Orientation
+- All screens support rotation
+- iPad landscape unlocks the three-pane (sidebar / list / task panel)
+- Board / Gantt / Timeline scroll horizontally in both orientations
+
+### Touch Targets
+- Status checkbox: 18pt glyph, 44pt hit area (separate from row tap)
+- Tab bar icons: 22pt glyph, 44pt hit
+- Task row: full-row tap opens the task panel
+- Status group chevron: 16pt glyph, 44pt hit
+- FAB: 56pt squircle (exceeds minimum)
+- Priority flag / tag: 44pt hit even though the glyph is small
+
+### Safe Area Handling
+- Top: list title & top nav respect safe area + Dynamic Island
+- Bottom: tab bar + home indicator respected; FAB 16pt above the tab bar
+- Keyboard: inline field, comment composer, and AI compose rise above the keyboard
+- Sides: 16pt content inset
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (light): `#FFFFFF`
+- Canvas (dark): `#1B1B2E`
+- Surface (dark): `#232338` / `#2C2C44`
+- Divider: `#E7E7EF` light / `#383852` dark
+- Text primary: `#1B1B2E` light / `#F1F1F6` dark
+- Text secondary: `#5E5E7A` light / `#A6A6BC` dark
+- Brand gradient: `#7B68EE` → `#FD71AF` → `#49CCF9` (135°)
+- Brand purple (solid): `#7B68EE` (pressed `#6A57DD`)
+- Status green / Complete: `#2ECC71`
+- Status red / Urgent: `#F44E6E`
+- Status orange / High: `#FF9F1A`
+- Status blue / Normal: `#49CCF9`
+- Gray / To-do / unset: `#5B5B79`
+- Tag tint: hue at ~22% (`#7B68EE38`) with saturated text
+
+### Example Component Prompts
+- "Build a ClickUp task row in SwiftUI: leading 18pt status checkbox (a 5pt-radius rounded square, 2pt border in the status color, transparent fill — filled `#2ECC71` + white check when done). 10pt gap to a VStack: task name Plus Jakarta Sans 14pt w600 `#1B1B2E` (truncating); below, an HStack — a priority flag triangle (filled, Urgent `#F44E6E` / High `#FF9F1A` / Normal `#49CCF9` / Low gray), tag pills (Plus Jakarta Sans 10pt w700 saturated text on a ~22% tint, 999pt radius), and a due date (`#5E5E7A`, or `#F44E6E` if overdue). Trailing: 22pt circular avatar. 11pt vertical padding, 1pt `#E7E7EF` divider, ~52pt tall. Tap checkbox cycles status with a 180ms color crossfade + soft haptic."
+
+- "Create the ClickUp custom-status group header: a saturated solid status pill — e.g. `#49CCF9` 'IN PROGRESS' in Plus Jakarta Sans 10pt w800 uppercased +0.6pt tracking, dark `#0E2A33` text (white on most colors), 4/9pt padding, 5pt radius — followed by an item count `#9292A8` and a trailing '+ add task'. Tapping the pill chevron collapses the group (tasks height 0 → auto, 200ms ease-out)."
+
+- "Render the ClickUp FAB: a 56pt squircle (18pt corner radius — NOT a circle) filled with the 3-stop brand gradient (135°, `#7B68EE` → `#FD71AF` → `#49CCF9`), a white `plus` icon 24pt, shadow `rgba(123,104,238,0.50) 0 8px 22px`. Position 16pt from trailing edge, 16pt above the tab bar. Press: scale 0.94 + brightness 0.94."
+
+- "Build a ClickUp AI bar: a 10pt-radius horizontal bar with a ~18% 3-stop-gradient backdrop tint + 1pt `#7B68EE` border, a leading brand-purple sparkle glyph, label 'ClickUp AI · {action}' in Plus Jakarta Sans 12pt w600 `#5E5E7A` ('ClickUp AI' bold `#1B1B2E`). While generating, the gradient shimmers over 1.2s; the result fades in (200ms) on a gradient-tint backdrop."
+
+- "Create the ClickUp Board view: horizontally scrolling columns (~270pt, `#F7F7FB` / `#2C2C44`, 10pt radius), one per custom status. Cards: `#FFFFFF` / `#232338`, 1pt border, a 3pt status-color top accent, priority flag + tags + 22pt avatar, lift shadow on drag (`rgba(0,0,0,0.22) 0 8px 24px`). Dropping a card into another column changes its status; drop snaps 150ms + soft haptic; the status accent recolors."
+
+- "Create the ClickUp bottom tab bar: 52pt + safe area, `#FFFFFF` / `#1B1B2E`, 1pt top border `#E7E7EF` / `#383852`. Four tabs — Home, Tasks, Inbox, Search — 22pt icons (filled active, stroked inactive), active `#7B68EE`, inactive `#9292A8` / `#6E6E88`, labels Plus Jakarta Sans 10pt w600 always shown. A 56pt squircle gradient FAB sits bottom-right."
+
+### Iteration Guide
+1. Canvas is white in light, deep blue-violet `#1B1B2E` in dark — complements the gradient, NOT neutral black
+2. The 3-stop gradient (`#7B68EE` → `#FD71AF` → `#49CCF9`) is reserved for the FAB, primary CTA, logo, and AI — never a background or body text
+3. The FAB is a SQUIRCLE (56pt, 18pt radius), not a circle — a deliberate brand signature
+4. Group the task list by the List's ordered custom status pills — SOLID, saturated, uppercased 10pt/800
+5. Priority is a colored flag triangle (Urgent red / High orange / Normal blue / Low gray)
+6. Embrace density — surface priority + tags + due + assignee per row; don't strip metadata
+7. Tags are ~22% tinted pills with saturated text; statuses (group headers) are the solid ones
+8. Mark every AI affordance with the gradient (AI bar tint + border, AI buttons, AI content backdrop)
+9. Typography is Plus Jakarta Sans, confident — task names 14pt/600, titles 800, status pills 10pt/800, tabular numerals
+10. Dark mode keeps the gradient + status colors identical, inverts text to `#F1F1F6`, uses 1pt borders + status accents where shadows vanish