# Current · Archetype Spec Sheet · v1.0 **Status:** authored from v1 Ch11 (Current section) + Finding 12 mock + mobile platform conventions (iOS HIG / Material 3). Source of truth for the mobile-first consumer archetype. **Use:** two-paste workflow per prompt. 1. Paste [governance.spec.md](governance.spec.md) first (universal gates — non-negotiable). 2. Paste the fenced block below second (Current-specific rules). Consumed by Prompt 1 (token generation), Prompt 03 (foundation components), Prompt 04 (composite components), Prompt 05 (UI patterns), Prompt 08 (spec page), Prompt 09 (screen assembly). **Origin:** [reference/book-v1.html](../../reference/book-v1.html) Ch11 lines 2919–3050. Mock pattern: [finalbookplan.md](../../finalbookplan.md) Finding 12. --- ``` ═══════════════════════════════════════════════════════════════ CURRENT · ARCHETYPE SPEC · v1.0 Mobile-First Consumer apps ═══════════════════════════════════════════════════════════════ TAGLINE: a design system for consumer mobile apps. Touch-first, gesture-aware, bold. Built for thumbs, not cursors. PREREQUISITE: governance.spec.md MUST be loaded before this spec. Current inherits all universal gates and adds the overrides at the end of this block. ─────────────────────────────────────────────────────────────── THEME ─────────────────────────────────────────────────────────────── Mode: BOTH light + dark are first-class (system-default preferred — respect prefers-color-scheme) Palette character: bold, saturated accents on neutral surfaces. Multi-accent palette is allowed (unlike Harbor's single hue). Pure #000 backgrounds acceptable in dark mode (OLED-friendly). Reason: mobile sessions cross between bright sun and dark room. Both themes must be production-grade — dark mode is not a "v2 feature" on Current. Bold saturation works on small screens where atmosphere is felt in glances, not stared at. ─────────────────────────────────────────────────────────────── PLATFORM AWARENESS ─────────────────────────────────────────────────────────────── Targets: iOS Safari, Android Chrome, native shells (React Native, SwiftUI, Jetpack Compose) Platform conventions: - iOS: respects HIG (rounded squircles, SF Pro, haptic taxonomy, swipe-back gesture) - Android: respects Material 3 (Material You dynamic colors, FAB convention, bottom-sheet behavior) - Web (PWA): respects safe-area-insets, viewport-fit=cover Use System fonts for native feel — don't ship custom fonts on mobile unless brand requires it (cost: extra weight per screen). ─────────────────────────────────────────────────────────────── TOKEN NAMING ─────────────────────────────────────────────────────────────── Strategy: SEMANTIC + small numeric ramp for brand palette (lighter than Sentinel's full 50-900) Examples: --accent-primary, --accent-secondary, --accent-tertiary --surface-page, --surface-card, --surface-sheet --text-primary, --text-muted, --text-on-accent --color-brand-100, --color-brand-500, --color-brand-900 (3-step brand ramp; full ramps reserved for products that need them) Reason: mobile palettes are brand-led and accent-heavy. Three brand steps (light/base/dark) covers most needs without the overhead of 9-step ramps. If a product needs more granularity, extend per-need — don't pre-build. ─────────────────────────────────────────────────────────────── TOUCH TARGETS — the Current keystone ─────────────────────────────────────────────────────────────── --touch-target-min 44px absolute minimum (HIG + WCAG 2.5.5) --touch-target-md 48px default for any interactive element --touch-target-lg 56px primary CTAs, FAB diameter THE RULE: every interactive element has at least 44×44px hit target, even if visual size is smaller (use padding to extend the tap area). NEVER ship anything below 44px. This is non-negotiable. Sub-44px = accessibility failure = governance lint failure. ─────────────────────────────────────────────────────────────── SAFE AREAS (env-aware) ─────────────────────────────────────────────────────────────── --safe-top env(safe-area-inset-top) status bar / notch --safe-bottom env(safe-area-inset-bottom) home indicator --safe-left env(safe-area-inset-left) landscape notch --safe-right env(safe-area-inset-right) landscape notch Required: meta viewport with `viewport-fit=cover` to opt into safe-area APIs. Required: every fixed-position element accounts for safe-area on the relevant edge. --bottom-nav-height calc(64px + var(--safe-bottom)) --header-height calc(56px + var(--safe-top)) --fab-offset-bottom calc(16px + var(--safe-bottom)) ─────────────────────────────────────────────────────────────── COLOR TOKENS (canonical defaults — substitute brand colors) ─────────────────────────────────────────────────────────────── ▼ BRAND ACCENTS (multi-accent — bold saturation embraced) --accent-primary #FF3366 vibrant pink --accent-secondary #6C5CE7 electric violet --accent-tertiary #00D9A3 cyan-green Each accent has paired light/dark steps: --accent-primary-100 bg-tint use --accent-primary-500 default --accent-primary-900 text-on-light surfaces ▼ SURFACES (light mode) --surface-page #FFFFFF --surface-card #F8F8F8 --surface-sheet #FFFFFF bottom-sheet bg --surface-overlay rgba(0,0,0,0.4) modal backdrop ▼ SURFACES (dark mode) --surface-page #000000 true black (OLED-friendly) --surface-card #1C1C1E --surface-sheet #2C2C2E --surface-overlay rgba(0,0,0,0.6) ▼ TEXT (light mode) --text-primary #000000 --text-secondary #6B7280 --text-muted #9CA3AF --text-on-accent #FFFFFF ▼ TEXT (dark mode) --text-primary #FFFFFF --text-secondary #C7C7CC --text-muted #8E8E93 --text-on-accent #FFFFFF ▼ SEMANTIC (status / feedback) --color-success #34C759 iOS green --color-warning #FF9500 iOS orange --color-error #FF3B30 iOS red --color-info #007AFF iOS blue ▼ FOCUS RING --color-focus-ring rgba(0,122,255,0.5) ─────────────────────────────────────────────────────────────── TYPOGRAPHY ─────────────────────────────────────────────────────────────── Approach: native system fonts for native feel Family: --font-sans -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif --font-mono ui-monospace, "SF Mono", Menlo, monospace Body NEVER smaller than 16px (iOS Safari triggers zoom on sub-16px input — hard rule). Scale (8 steps, fixed px — mobile rarely needs fluid): --text-caption 11px metadata, timestamps (use sparingly) --text-footnote 13px secondary text on cards --text-body-sm 15px secondary body --text-body 17px DEFAULT — iOS body size --text-callout 16px button labels, alert body --text-headline 17px list-row titles (semibold) --text-title-3 20px modal headers --text-title-2 22px section headers --text-title-1 28px screen title --text-large 34px onboarding, hero --text-display 40px marketing hero (sparingly) Font weights: --weight-regular 400 body --weight-medium 500 button labels, headlines --weight-semibold 600 titles, emphasis --weight-bold 700 primary CTAs, displays Line heights: --leading-tight 1.20 titles, displays --leading-snug 1.30 headlines --leading-normal 1.45 body (slightly tighter than Harbor — mobile reads in glances) --leading-relaxed 1.55 long-form body Reason: native system fonts mean zero font-loading weight, every device renders in its OS font (SF Pro on iOS, Roboto on Android, Segoe on Windows). Reads as native — not as a website pretending to be an app. ─────────────────────────────────────────────────────────────── DENSITY ─────────────────────────────────────────────────────────────── Character: GENEROUS — thumb zones, not pixel zones Spacing scale (4px base, 10-step): --space-1 4px inline gap --space-2 8px tight pair --space-3 12px DEFAULT internal padding --space-4 16px card padding, between fields --space-5 20px section breaks within screen --space-6 24px between major blocks --space-8 32px screen padding bottom --space-10 40px onboarding generous --space-12 48px screen-to-screen separator --space-16 64px rare — top of empty state Screen padding: --space-4 (16px) horizontal default --space-5 (20px) on roomier brands Content widths: --content-mobile 100vw full-bleed default --content-readable 600px cap on tablet for long text --content-narrow 400px forms in modal context Reason: mobile screens are small but not cramped. Generous spacing makes touch-targets unambiguous and gives content breathing room. Cramming = misclicks. ─────────────────────────────────────────────────────────────── ACCENT STRATEGY ─────────────────────────────────────────────────────────────── Strategy: MULTI-ACCENT — bold saturation embraced Default: 3 accents (primary / secondary / tertiary), each with light-tint + base + dark-text steps. Brand-led: app's brand color sets primary; secondary/tertiary pulled from brand secondary palette. Allowed in Current (banned in Harbor): ✓ Bright pink, electric violet, neon green ✓ Gradients on hero buttons (subtle, max 15° hue shift) ✓ Color shifts in icons (selected state) Banned regardless: ✗ Indigo/purple as default brand (cliched "AI startup") ✗ Rainbow gradient backgrounds on UI chrome ✗ Color-only encoding (still requires icon + text per governance — colorblind a11y) Reason: mobile UIs need to be glanceable. Bold accents create fast wayfinding (red = destructive, brand-pink = primary action, green = success). Restraint reads as "boring app" on mobile. ─────────────────────────────────────────────────────────────── ELEVATION ─────────────────────────────────────────────────────────────── Default: SOFT shadows + rounded corners (mobile native feel) Shadow color: cold neutral rgba (NOT warm oklch — Current is not editorial) --shadow-sm 0 1px 2px rgba(0,0,0,0.06) cards (rest) --shadow-md 0 2px 8px rgba(0,0,0,0.10) cards (raised) --shadow-lg 0 4px 16px rgba(0,0,0,0.14) bottom sheet --shadow-xl 0 8px 32px rgba(0,0,0,0.20) modal, FAB --shadow-fab 0 4px 12px rgba(0,0,0,0.18) FAB (always raised) Banned: warm oklch shadows (Harbor pattern) Banned: flat-with-borders chrome (looks like a desktop product) Reason: shadows establish depth on small screens where overlapping affordances (FAB over content, sheet over screen) need visual hierarchy without being heavy. ─────────────────────────────────────────────────────────────── RADII ─────────────────────────────────────────────────────────────── Scale (7 steps — generous default, per iOS squircle convention): --radius-sm 8px chips, badges --radius-md 12px buttons (default) --radius-lg 16px cards, alerts --radius-xl 20px bottom-sheet top corners --radius-2xl 24px prominent feature cards --radius-3xl 32px onboarding splash cards --radius-full 9999px pill buttons, FAB Banned: sharp corners (radius-none) on touchable elements — feels desktop-y on mobile Banned: super-rounded everywhere (>32px on cards) — visual chaos at small sizes Reason: rounded corners are mobile-native. iOS uses squircles (continuous curves — radius-md feels like a true squircle on iOS); Android Material 3 leans even more rounded. ─────────────────────────────────────────────────────────────── MOTION ─────────────────────────────────────────────────────────────── --duration-fast 150ms ripple, hover (touch devices skip) --duration-base 250ms DEFAULT — sheet open, page push --duration-slow 350ms modal entry, drawer slide --easing-emphasized cubic-bezier(0.2, 0, 0, 1) sheet slide --easing-standard cubic-bezier(0.4, 0, 0.2, 1) default --easing-decelerate cubic-bezier(0, 0, 0.2, 1) entries --easing-accelerate cubic-bezier(0.4, 0, 1, 1) exits Reduced-motion fallback: opacity-only crossfades, no transforms, duration-fast. Use motion to communicate spatial relationships (sheet rises from bottom, modal scales up from origin, page pushes from right on iOS / fades on Android). Motion ON mobile is part of the language — not optional. Banned: parallax on hero, scroll-jacking, animated GIF backgrounds, marquee, rotating headlines ─────────────────────────────────────────────────────────────── HAPTICS — first-class on Current ─────────────────────────────────────────────────────────────── Tokens map to platform APIs (iOS UIImpactFeedback, Android HapticFeedbackConstants): --haptic-light UI taps, toggle changes --haptic-medium selection changes, segmented control --haptic-heavy long-press confirmations --haptic-success task completion (form submit success) --haptic-warning validation error (gentle) --haptic-error destructive confirmation, blocked action THE RULE: haptic is ALWAYS paired with visible state change — never the only feedback. Required for: button press, toggle flip, swipe-action commit, pull-to-refresh trigger, sheet snap, drag end. Banned: continuous haptic (vibration during scroll) Banned: haptic without paired visual feedback (a11y fail) ─────────────────────────────────────────────────────────────── ICONOGRAPHY ─────────────────────────────────────────────────────────────── Family default (PRODUCTION): iOS: SF Symbols (native, free, multi-weight) Android: Material Symbols (native, free, fill axis) Family default (WEB / spec page / cross-platform): PHOSPHOR — both line + fill variants in one family, matches the line-vs-filled tab-bar convention without mixing icon sources. Weight: regular line / fill. Reason: Phosphor's unified line+fill set lets tab-bar selected states swap variants cleanly within ONE family; Lucide is line-only, forcing a second family for fills. NEVER use Lucide for Current's web spec (creates a tone mismatch with the platform-native production icons). Grid: 24px standard tab bar / nav; 28px for FAB; 20px inline; 16px caption-adjacent Stroke: 2px lines for line variants; FILLED variants preferred for tab bar selected states Color: inherit via currentColor Style mix: - Tab bar: line for default, FILLED for selected (same family) - List rows: line, currentColor (inherits text-secondary) - Severity: filled for clarity - FAB: filled, white on accent Banned: ✗ Emoji as icon (governance — applies even on mobile) ✗ Mixing line + filled within the same row ✗ Mixing icon families (e.g., Lucide line + Phosphor fill) ✗ Multi-color illustrations as UI icons (illustrations only in empty states / onboarding) ✗ Animated icons except spinner / pull-to-refresh / FAB morph ─────────────────────────────────────────────────────────────── SCREEN LAYOUTS — page composition vocabulary ─────────────────────────────────────────────────────────────── S1 TAB BAR SHELL (the dominant pattern) Structure: status bar / nav header (top) + scrollable content (middle) + bottom tab bar (bottom, 4–5 tabs) Use for: every primary navigation surface Required: bottom-tab persists across destinations within tab; tab change resets scroll, swipe-back returns Banned: hamburger nav (hides primary navigation) S2 STACK NAVIGATION (push/pop) Structure: nav header (back chevron + title + optional action) + scrollable content Use for: drilling into a list item, settings sub-screens Required: swipe-back gesture (iOS), system back (Android) Banned: dead-end screens (every push must be poppable) S3 BOTTOM SHEET (modal replacement) Structure: drag handle + optional title + content + action row Snap points: collapsed (peek 88px) / half (40-50% screen) / full (above safe-bottom) Required: swipe-down to dismiss, backdrop tap dismisses, ScrollView inside locks to swipe direction Use for: contextual options, share sheet, filter selection, quick form Banned: traditional center-screen modals (use sheets) S4 FULL-SCREEN TAKEOVER Structure: full-screen content + dismiss × button (top-right) + optional bottom action row Use for: media viewers, multi-step flows, immersive content Required: status bar matches content, dismiss is always reachable S5 ONBOARDING / WIZARD Structure: hero image / animation + title + body + page indicator + primary CTA + skip link Required: max 4 screens, skip from any step, progress dots, keyboard-accessible if input fields involved S6 EMPTY STATE Structure: illustration (NOT just icon — Current uses friendly illustration here) + title + body + primary CTA Tone: action-oriented — "Scan your first receipt", never "You have no receipts yet" Composition rule: every screen is one of these six. Never build custom chrome — users already know how these work. ─────────────────────────────────────────────────────────────── COMPONENT LIBRARY — generate in this priority order ─────────────────────────────────────────────────────────────── ▼ FOUNDATION (Layer 1 — Prompt 03) 1. Button Variants: primary (filled accent, --text-on-accent) / secondary (outline) / tertiary (text-only) / destructive (filled --color-error) Sizes: sm (h:36px) / md (h:44px) / lg (h:56px) Shape: --radius-md (12px) default; --radius-full (pill) for prominent CTAs States: default / pressed (scale 0.96 + haptic-light) / disabled / loading Current rule: pressed state replaces hover (no hover on touch) Current rule: ALL interactive buttons trigger --haptic-light Current rule: never below 44px height — touch-target gate 2. Icon button Sizes: sm (40px hit) / md (44px hit) / lg (48px hit) Required: aria-label (no tooltip alternative on mobile) Current rule: hit-area extends to 44×44 even if visual is 24px 3. Field (text input / textarea / search) Variants: default / with-icon / with-clear button / textarea / search States: empty / filled / focus / error / disabled Required: label above (governance) OR floating label IF accessibility-tested (Current is the one archetype where Material's floating label is acceptable — Material has solved the a11y for it) Required: --text-body (17px) minimum to prevent iOS zoom-on-focus Current rule: clear-X button on the right when filled (mobile fingers can't easily backspace) Current rule: keyboard type matches input (numeric for numbers, email for email, etc.) 4. Selection controls Switch — iOS-style toggle (track 48×28, thumb 24, slide + haptic-light on flip) Checkbox — square 24px, --radius-sm, check icon on fill Radio — circle 24px, dot on fill Segmented control — 3–4 options, pill-grouped, slide indicator, haptic-medium on change Current rule: switches dominate — Current uses switches where Sentinel uses checkboxes for binary settings 5. Tag / Badge Shape: --radius-full (pill) for chips; --radius-sm for rectangular badges Variants: neutral / status (success/warning/error) / accent / count (numeric, max "99+") Sizes: sm (h:20px) / md (h:24px) 6. Chip (filter, tag, removable) Shape: --radius-full Variants: static / removable (with × button) / selectable Current rule: chips are touch-sized internally (40px hit) 7. Avatar Sizes: sm (24) / md (32) / lg (40) / xl (56) / xxl (96) Variants: photo / initials / icon-fallback Avatar stack: overlapping circles ("+3 more" overflow) Current rule: photo allowed (real users); never stock imagery ▼ COMPOSITE (Layer 2 — Prompt 04) 8. Card variants 8a. List-row card (the workhorse) Structure: leading icon/avatar + title + subtitle + trailing chevron / action / value Tap target: full row 56–72px tall 8b. Feature card Image (16:9 or 1:1) + title + body + secondary action 8c. Action card Icon + heading + body + filled CTA (small) Current rule: entire card is the tap target (NEVER nest multiple primary tap targets in one card) 9. Bottom sheet (Current's modal replacement) Snap points: collapsed (peek) / half / full Header: drag handle (4×40px, --color-muted) centered top Required: swipe-down dismiss, backdrop tap dismiss, edge swipe to half on full Variants: list (selectable items) / form (inputs) / action (filter row + content) 10. Action sheet (native-style menu) Structure: title (optional) + actions list + Cancel button (sticky bottom, separated by gap) Destructive item: --color-error text, separated by divider Required: tap outside dismisses, Cancel always present 11. Snackbar / Toast (bottom-anchored) Position: bottom (above safe-area, above bottom-tab if applicable) Structure: icon + message + optional action (single word — "Undo", "Retry") + auto-dismiss Auto-dismiss: 4s default Animation: slide-up + fade Required: max 1 snackbar at a time (queue, don't stack) 12. Alert / Native dialog Structure: title + body + 1–2 actions (vertical on iOS, horizontal on Android) Use sparingly: only for confirmations of irreversible actions or system-level interruptions Banned: dialog for non-critical info (use snackbar or sheet) 13. Floating Action Button (FAB) Size: 56px diameter (md), 64px extended (with label) Position: fixed bottom-right, --fab-offset-bottom + --space-4 right Behavior: morphs on scroll (shrink to icon-only), hide on keyboard open Required: aria-label, --shadow-fab, accent color Current rule: max ONE FAB per screen — it represents THE primary action for that screen 14. Pull-to-refresh Trigger: drag down at top of scrollable content past threshold (80px) Indicator: spinner appears as drag progresses, locks at threshold Required: --haptic-light on threshold cross, --haptic-success on data refresh complete 15. Swipe list row actions Trigger: horizontal swipe on a list-row card Direction: left-swipe reveals destructive (red) actions; right-swipe reveals non-destructive (archive, flag, mark read) Required: swipe past threshold = action commits; swipe halfway = action reveals (tap to confirm) Required: --haptic-medium on threshold cross 16. Loading states 16a. Spinner — circle, 24px default, accent stroke 16b. Skeleton — opacity-pulse, matches shape of content 16c. Progress (for known-duration ops only) Current rule: full-screen loading is rare — prefer skeleton on cards/lists 17. Tooltip BANNED on touch devices (no hover trigger). REPLACE with: inline help text, info icon → bottom sheet, empty-state hints. 18. Tab bar (bottom navigation) Structure: 4–5 destinations, each: icon (line default, filled selected) + label Height: --bottom-nav-height (64px + safe-bottom) Required: persistent across tab change; selected state has haptic-light + color shift Current rule: NEVER more than 5 tabs (overflow → "More" tab with bottom-sheet menu) Current rule: NEVER hide labels (icon-only fails recognition) ▼ PATTERNS (Layer 3 — Prompt 05) 19. Form layout Layout: single-column, full-width Spacing: --space-4 (16px) between fields, --space-6 (24px) between groups Submit: full-width primary CTA at bottom (above keyboard, sticky) Required: keyboard avoiding behavior (scroll on focus), correct keyboard type per input Current rule: NEVER multi-column forms (zigzag scanning fails at 390px) 20. Empty state Structure: illustration (300px max, friendly — not apologetic) + h2 title + 1-line body + primary CTA Tone: action-forward — "Scan your first receipt", never "You have no receipts yet" Current rule: empty state always offers next action (mobile users abandon dead-ends) 21. Onboarding pager Structure: 3–4 screens, each: hero (illustration or video loop) + h1 title + 1–2 line body + page indicator + primary CTA + Skip link (top-right) Animation: horizontal page swipe; page-indicator dots animate Required: skippable from any step 22. Search experience Pattern: search field at top + results list (skeleton while loading) + empty-state illustration if no results Required: clear-X in field when filled, recent searches shown when field empty + focused Optional: voice search button (iOS) or scan button (camera) 23. Detail screen (article / item / profile) Structure: header image (full-bleed, optional) + title + metadata row + body + action row (sticky bottom) Header behavior: collapses on scroll (hero shrinks, title migrates to nav header) 24. Settings screen Structure: grouped sections, each: section header (caption, uppercase) + cards with list-rows + section footer (helper text) Row variants: navigation (chevron) / toggle (switch) / value (right-aligned text) / destructive (red text) Current rule: destructive actions ALWAYS require alert confirmation 25. Media viewer (image / video) Structure: full-screen content + dismiss × (top-right) + optional caption + share/save actions Required: pinch-to-zoom on images, swipe-down to dismiss, double-tap to zoom, tap-to-toggle chrome ▼ DOMAIN LAYER (Layer 4 — product-specific composites) Domain components compose Layers 1–3 with Current rules: 44px touch targets, haptic feedback paired with visible state change, native gesture support, safe-area awareness. Below are 5 named examples for consumer mobile products. Extend per product. 26. Feed item (social / activity feeds) Composes: List-row card (8a) + Avatar (7) + Snackbar trigger + Bottom sheet (9 — for actions) Structure: avatar (md 32px) + name + timestamp + content (text or media) + reaction-bar (icon-buttons with counts) + overflow kebab → bottom sheet Current rule: long-press opens action bottom sheet (--haptic-medium on threshold) Current rule: media tap opens full-screen takeover (S4) 27. Story bubble (Instagram-style ephemeral) Composes: Avatar (7) + ring indicator (CSS gradient border) Structure: 64px avatar + accent gradient ring (unwatched) / muted ring (watched), name label below Current rule: tap opens full-screen takeover with auto-advance pages; swipe right/left navigates; tap-and-hold pauses; haptic-light on each transition 28. Video reel card (TikTok / Reels-style) Composes: Full-screen takeover (S4) + Bottom sheet (9 for actions) + Snackbar (11 for confirmations) Structure: full-bleed video + overlay text (creator + caption) + right-rail icon-buttons (like / comment / share / more) + bottom progress bar Current rule: vertical swipe = next reel; double-tap = like with haptic-success; mute/unmute persists per-session 29. Payment method tile Composes: List-row card (8a) + Tag/Badge (5) + Bottom sheet (9 — to swap method) Structure: card-brand icon (Visa/MC/etc.) + last-4 digits + expiry + default-badge + chevron-trailing Current rule: destructive remove action requires alert dialog confirmation (governance + Current rule) Current rule: default-method swap opens bottom sheet, NOT a modal 30. Ride / order tracking strip Composes: List-row card (8a — sticky variant) + Progress indicator + Avatar Structure: sticky bottom card showing current status (e.g., "Sarah arriving in 3 min") + driver/courier avatar + progress timeline + tap-to-expand bottom sheet with map + actions Current rule: sticky position — sits above bottom-tab when active; haptic-success on each milestone (arrived / picked up / delivered) ─────────────────────────────────────────────────────────────── VOICE RULES — apply to ALL generated copy ─────────────────────────────────────────────────────────────── (Inherits governance Voice rules. Current adds:) • Labels under 12 characters — tab bars and buttons truncate fast at 390px width • Action verbs only on buttons — never "OK" or "Done"; use "Send", "Save", "Share", "Post" • Sentence case, not Title Case — "Sign up" not "Sign Up"; reads like speech • No em-dashes or semicolons — short punchy phrases; split into two sentences instead • Numbers as digits ALWAYS — "3 photos" not "three photos"; scanning beats reading on mobile • Empty states show next action — "Scan your first receipt", not "You have no receipts yet" • Body copy under 2 lines on most cards — mobile users scroll, don't read • Microcopy is allowed to be friendly (Current is consumer): "Got it" / "Let's go" / "All set" — earned through context VOICE — Do / Don't pairs: Do → "Sign up" Don't → "Sign Up" or "Click to sign up" Why: sentence case; verb-only; short. Do → "Scan now" Don't → "Click here to scan a receipt" Why: 2 words; action-first; no instruction prefix. Do → "3 new messages" Don't → "You have three new messages waiting" Why: digit; no fluff; scannable in glances. Do → "Scan your first receipt" Don't → "You don't have any receipts yet" Why: empty state offers action, not apology. Do → "Posted ✓" (with checkmark icon) Don't → "Your post has been successfully published!" Why: confirmation is glanceable, not narrative. ─────────────────────────────────────────────────────────────── BANNED PATTERNS — the Current anti-pattern catalog ─────────────────────────────────────────────────────────────── ▼ Touch / mobile antipatterns ✗ Sub-44px touch targets Why: accessibility failure; fingers miss Use: 44px minimum (touch-target gate) ✗ Hover-only states Why: no hover on touch — hidden affordances fail Use: always-visible affordances; pressed-state for feedback ✗ Mouseover tooltips Why: no hover trigger on mobile Use: inline help text or tap-to-bottomsheet info ✗ Right-click menus Why: no equivalent gesture Use: long-press → action sheet ✗ Drag-and-drop without long-press initiation Why: conflicts with scroll Use: long-press to pick up, drag to move ▼ Layout / chrome antipatterns ✗ Hamburger menu as primary nav Why: hides navigation; engagement drops measurably Use: bottom tab bar (4–5 destinations) ✗ Side-drawer navigation (web-style) Why: same as hamburger — hidden + unidiomatic on mobile Use: tab bar for primary; in-screen sub-nav for secondary ✗ Multi-column layouts (>1 column on body content) Why: horizontal scanning fails at 390px width Use: single-column, vertical stack ✗ Modal dialogs (center-screen) Why: heavyweight on mobile, hard to dismiss one-handed Use: bottom sheets with swipe-to-dismiss ✗ Sticky elements that consume more than 25% of viewport Why: starves content area Use: collapsible header, hideable bottom nav on scroll ✗ Floating chrome over content (transparent header) Why: scrollable content collides with nav Use: solid header that anchors ▼ Type / size antipatterns ✗ Body text under 16px Why: triggers iOS Safari zoom-on-focus; eye strain Use: 17px iOS-default body minimum ✗ Custom fonts ≥ 100KB without preload Why: blocks first paint on mobile networks Use: native system fonts (--font-sans default) ✗ Sub-12px caption text Why: unreadable in arms-length glance contexts Use: 13px minimum even for metadata ▼ Interaction antipatterns ✗ Auto-playing video with sound Why: aggressive; iOS blocks anyway Use: muted autoplay on hero only; sound requires tap ✗ Auto-advancing carousels Why: race condition with thumb scroll Use: manual swipe carousel; static stack ✗ Sticky promotional banners (download-our-app, signup) Why: hated; engagement drop Use: contextual prompts at relevant moments ✗ Modal popups on screen entry Why: intercept user before they've earned trust Use: in-context prompts after value delivered ✗ Notifications without visible state change Why: a11y fail; haptic-only feedback Use: visible toast + haptic together ▼ Copy antipatterns ✗ Generic "Submit" / "Done" / "OK" / "Click here" Why: reads as system dialog; breaks native feel Use: action-specific verbs (Send, Save, Share, Post) ✗ Title Case On Buttons Why: dated; competes with sentence-case rule Use: sentence case ("Sign up" not "Sign Up") ✗ Em-dashes and semicolons in UI copy Why: typography-heavy; reads as web copy Use: short sentences; period or line break ✗ Long body copy (>3 lines on cards) Why: nobody reads long blocks on mobile Use: tap-for-detail, 1–2 sentence preview ✗ Apologetic empty states Why: dead-end framing Use: action-forward — name the next step ─────────────────────────────────────────────────────────────── BYOC — REQUIRED COLOR ROLES (Bring Your Own Colors) ─────────────────────────────────────────────────────────────── If you're using Prompt 1b (BYOC variant) instead of Current's canonical pink/violet/cyan-green palette, your supplied palette MUST cover these roles. Current is a both-modes-first-class archetype, so EVERY surface and text token requires light + dark declarations. Required (~25 colors minimum): Brand accents (multi-accent embraced — Current allows 1–3): 1 Brand primary 3-step ramp (light tint / base / dark text-on-accent) 2 Brand secondary same 3-step ramp (optional but recommended for variety) 3 Brand tertiary same 3-step ramp (optional) Surfaces — light mode (4): 4 Page background pure #FFFFFF acceptable on mobile (unlike Harbor's warm-only rule) 5 Card surface 6 Sheet surface bottom-sheet bg 7 Overlay modal/sheet backdrop (rgba) Surfaces — dark mode (4): 8 Page background pure #000000 acceptable (OLED-friendly) 9 Card surface 10 Sheet surface 11 Overlay Text — light mode (4): 12 Text primary 13 Text secondary 14 Text muted 15 Text on-accent Text — dark mode (4): 16 Text primary 17 Text secondary 18 Text muted 19 Text on-accent Semantic (4 — Current uses platform-native conventions): 20 Success iOS green / Material green 21 Warning iOS orange / Material amber 22 Error iOS red / Material red 23 Info iOS blue / Material blue Focus rings (2): 24 Focus ring — light mode 25 Focus ring — dark mode VALIDATION RULES (Prompt 1b enforces): ✓ Both light AND dark mode tokens present (no "dark mode v2" excuses on Current) ✓ Touch targets visualized — every interactive component has 44px hit-area ✓ Body font-size ≥ 16px on inputs (iOS zoom prevention) REJECTED palettes (Prompt 1b will fail): ✗ Light mode only (Current requires both modes shipping) ✗ Indigo / purple as DEFAULT brand (allowed as secondary or tertiary, but not as primary — cliched signal) ✗ Brand colors that fail 4.5:1 on either light or dark surface ─────────────────────────────────────────────────────────────── WHEN TO PICK CURRENT ─────────────────────────────────────────────────────────────── Pick Current IF: • Primary user is on mobile (phone, not tablet) • Session length is 1–5 minutes (multiple short sessions/day) • Navigation fits in 4–5 top-level destinations • Product is consumer-facing (not internal tools) • You're OK with bold saturation and multiple accent hues • Touch + gesture are first-class (haptics, swipe, pinch) • Native shells (iOS, Android) are likely targets Sample adjectives that route to Current (archetype-selection aid — Finding 5 demoted-adjective routing, NOT a generation input): bold · immediate · native · glanceable · friendly · kinetic · saturated · gestural · thumb-first · consumer · vibrant · expressive · mobile · social · transactional If three or more of your brand adjectives are in this list, Current is likely your archetype. Real-world examples (calibrate against these — public apps that exemplify Current's principles): • Spotify mobile — bottom tab bar, FAB-equivalent (play), bold accent green, native fonts • Instagram — bottom tab bar, bottom sheets, swipe gestures, full-bleed media • Uber / Lyft — single primary action focus per screen, haptic feedback on key actions, safe-area aware • Airbnb mobile — bottom sheets for filters, native controls • TikTok — full-screen takeover layout (S4), bold saturation • Robinhood mobile — gestural, glanceable data • Cash App / Venmo — single-accent variant of Current • Linear mobile, Notion mobile — Sentinel-translated-to-Current (when an enterprise product needs a mobile companion) DO NOT pick Current if: • Desktop-first product → [Sentinel](sentinel.spec.md) or Harbor • Long-form reading is the activity → [Meridian](meridian.spec.md) • Hours-long task focus → [Sentinel](sentinel.spec.md) • Data tables, dashboards, charts → [Sentinel](sentinel.spec.md) or Lattice • Marketing site / brand-forward → [Harbor](harbor.spec.md) • Tablet-first (iPad pro app) → consider Sentinel-with-touch ─────────────────────────────────────────────────────────────── FAILURE MODES — what breaks first when Current is misapplied ─────────────────────────────────────────────────────────────── When teams force Current onto the wrong use case, predictable failures appear in this order. 1. Desktop chrome incompetence (Current on a desktop product) Symptom: Bottom tab bar feels off on desktop; FAB looks lost on a 1920×1080 viewport; touch-targets are oversized for mouse precision; users feel the product is "made for phones." Root cause: Current's vocabulary (bottom-anchored nav, FAB, sheets, swipe gestures) is platform-native to mobile; it reads as awkward on desktop where keyboard/mouse is primary. → Switch to [Sentinel](sentinel.spec.md) for desktop workflow; reserve Current for mobile companion. 2. Density famine (Current on data-heavy mobile) Symptom: A trader / analyst on mobile sees only 3 rows of data because Current's generous spacing and 17px body crowd the viewport. They zoom out, breaking touch targets. Root cause: Current optimizes for tap-precision, not information density. → Switch to [Lattice](lattice.spec.md) (with mobile-aware adaptations — virtualization + horizontal scroll). → OR rethink: maybe the user shouldn't be on mobile for this task. 3. Reading exhaustion (Current on long-form mobile reading) Symptom: User opens a docs page on mobile, finds 17px body at 1.45 leading inside generous chrome. Reading column is the full viewport (390px = ~50ch — too narrow), no sidebar TOC, no font controls. Root cause: Current is glance-and-tap; Meridian is read-and- reference. → Switch to [Meridian](meridian.spec.md) for the docs/article surface; keep Current for the rest of the mobile app. 4. Editorial tonal mismatch (Current for marketing site) Symptom: Bold-saturation accents + native fonts read as "consumer app", not "brand-forward marketing." Site feels like a feature page, not a brand statement. Root cause: Current's bold visual language is for product surfaces, not brand surfaces. → Switch to [Harbor](harbor.spec.md) for marketing. 5. Hamburger/desktop-style nav drift (Current implemented by desktop-first teams) Symptom: Desktop teams reach for hamburger menu on mobile thinking "we'll keep it consistent across breakpoints." Engagement drops measurably; primary nav becomes invisible. Root cause: Hamburger is a Current banned pattern but teams unfamiliar with mobile conventions default to it. → Tighten governance: enforce the spec's hamburger ban at lint time. (Not an archetype switch — a discipline fix within Current.) ─────────────────────────────────────────────────────────────── GOVERNANCE OVERRIDES (Current adds to universal gates) ─────────────────────────────────────────────────────────────── Inherits governance.spec.md in full. Current additionally enforces: ☐ 44px minimum touch target enforced (any interactive element with hit area < 44×44 fails lint) ☐ Body font-size ≥ 16px on inputs (iOS zoom prevention) ☐ Native font stack required (custom fonts must be opt-in via brand override, not default) ☐ safe-area insets honored on every fixed-position element (any fixed element ignoring env(safe-area-inset-*) fails lint) ☐ Hover-only interactions banned (any :hover-only state fails lint without :focus or pressed equivalent) ☐ Hamburger nav banned as primary navigation ☐ Tab bar capped at 5 items ☐ Haptic feedback paired with visible state change (haptic alone fails a11y review) ☐ Modal dialogs require bottom-sheet alternative consideration (modal-only patterns flagged in review) ☐ keyboardType matches input semantic (number input must use inputMode="numeric"; email must use inputMode="email") ☐ Both light + dark mode required (governance baseline; Current enforces strictly — no "dark mode v2" excuses) ─────────────────────────────────────────────────────────────── PHILOSOPHY (paste into prompt context as guiding principle) ─────────────────────────────────────────────────────────────── "On mobile, the thumb is the cursor, the screen is the window, and attention is measured in seconds. Current's constraints — 44px minimum, bottom-anchored nav, native haptics, sentence-case copy — aren't preferences. They are how AI output stops feeling like a shrunk-down desktop page." ═══════════════════════════════════════════════════════════════ END CURRENT SPEC · v1.0 ═══════════════════════════════════════════════════════════════ ``` --- ## Maintenance notes (do not paste into prompts) - **When you extend Current** (new gesture, new screen layout, new component): edit the spec block above, bump the version, and re-paste into prompts. - **Conflict with v1 Ch11 Current section:** the spec wins. v1 covered Current lightly; this spec elevates it to first-class status (per Finding 12 Decision 3). - **Platform-specific overrides:** when an app targets only iOS or only Android, additionally load a platform sub-spec (not yet authored — would document iOS-specific HIG details or Material 3 specifics). Until then, the spec covers the cross-platform floor. - **Publishing footer (post-render step, not part of the spec contract):** the rendered HTML at [build/preview/specs/current.html](../../build/preview/specs/current.html) appends an inline credit row as the LAST element inside the existing ``) before committing the new HTML. - **Cross-references:** - Universal predecessor: [governance.spec.md](governance.spec.md) - Companion specs: [harbor.spec.md](harbor.spec.md), [sentinel.spec.md](sentinel.spec.md), [lattice.spec.md](lattice.spec.md), [meridian.spec.md](meridian.spec.md) - Consumed by Prompts 1, 03, 04, 05, 08, 09 (per Finding 12 locked scope)