{ "meta": { "title": "Settle visual styling kit with system navigator", "version": "3.0.0", "supersedes": [ "Settle Visual Design Language v1", "Settle visual styling kit v2" ], "generated_at": "2026-04-05T02:46:47.785997+00:00", "machine_readable_priority": true, "standalone_packet": true, "source_files": [ { "name": "Pasted markdown.md", "path": "/mnt/data/Pasted markdown.md", "sha256": "b2f1eb48856f76926e8484af4fb39cd07ac05f191b50844fad35db3a788c5b2e", "size_bytes": 65894 }, { "name": "Pasted text (2).txt", "path": "/mnt/data/Pasted text (2).txt", "sha256": "5baf763da80f7e08ab442d79b90e5b8ede028dc4a5641cf2cbc07ae39fede422", "size_bytes": 20023 }, { "name": "Pasted markdown (3).md", "path": "/mnt/data/Pasted markdown (3).md", "sha256": "66b2a20f8cad45662dad5b9f28a013174647d58d70c7006a709f3d8589fba961", "size_bytes": 13870 }, { "name": "Pasted text (4).txt", "path": "/mnt/data/Pasted text (4).txt", "sha256": "77b4cfe7b263c848bd0338f4c55dc27ca40a1be60c319cbc6ef760114ebe50bf", "size_bytes": 33833 }, { "name": "Settle_Visual_Design_Language_v1.docx", "path": "/mnt/data/Settle_Visual_Design_Language_v1.docx", "sha256": "de10cc30b1ce8c96f3270adfad4bfb32707359a8895e90da1f0a65436cebc1a6", "size_bytes": 285974 } ], "research_sources": [ "material_navigation_bar", "material_navigation_rail", "material_window_size_classes", "material_search_destination", "apple_tab_bars", "apple_sidebars", "apple_tab_sidebar_adaptive", "apple_wwdc_sidebar", "wcag22_target_size", "wcag22", "nng_vertical_nav", "nng_universal_navigation" ] }, "design_position": { "recommended_direction": "Recommended direction: make Settle feel like a very well-made household tool\u2014quiet, warm, exact, and already working. It should never read as a startup dashboard, a self-care app, a charity interface, or a travel product.", "must_not_resemble": [ "Not a fintech dashboard: no KPI-card collage, neon success/error colors, or candy charts.", "Not a charity portal: no institutional blue, soft-focus empathy art, or explanatory pity copy.", "Not a travel brand: no nomad cues, route maps, passport aesthetics, or aspirational movement imagery.", "Not a wellness app: no encouragement, no streaks, no celebratory confetti, no behavior-scoring patterns." ], "qualities": [ "Warm, muted, specific. Never bright, slick, or corporate.", "Time-first hierarchy. The next 12\u201318 hours wins the top of the page before category browse.", "Single-plane UI. Prefer bands, rows, and disciplined sections over deep card stacks.", "Low-light ready. Dark mode is a first-class design system, not an inverted afterthought.", "Operational copy only. Name the state, the dependency, or the next action; never interpret the user emotionally.", "No lifestyle theater. Public pages use typography, surface still lifes, and the Porch Light\u2014not people, cars, maps, or motivational scenes." ], "product_posture": "Quiet. Warm. Exact. Already working.", "thesis": "The interface stands in for the quiet work a house used to do, so the visual language must be domestic in tone, operational in hierarchy, and calm under constraint." }, "foundations": { "typography": { "primary_family": "Instrument Sans", "fallback_stack": [ "Noto Sans", "system-ui" ], "rules": [ "Use one family across product and public surfaces. Do not introduce a second display font.", "Weights: 400, 500, and 600 are the working range. 700 is reserved for rare hero statements or one primary CTA per screen.", "Enable tabular numerals for money, dates, times, counts, and other scanning-heavy data.", "Do not set running paragraphs below 16 px on mobile screens. Metadata may go to 12\u201314 px; body copy should not.", "Avoid all-caps except short labels, section tags, or device packaging." ], "scale": [ { "style": "Hero", "mobile": "40 / 44", "desktop": "48 / 52", "use": "Homepage hero or short opener" }, { "style": "H1", "mobile": "32 / 36", "desktop": "36 / 40", "use": "Primary page title" }, { "style": "H2", "mobile": "24 / 30", "desktop": "28 / 34", "use": "Section title" }, { "style": "H3", "mobile": "18 / 24", "desktop": "20 / 26", "use": "Subsection or module title" }, { "style": "Body", "mobile": "16 / 24", "desktop": "16 / 24", "use": "Running product copy" }, { "style": "Body small", "mobile": "14 / 20", "desktop": "14 / 20", "use": "Helper or secondary text" }, { "style": "Meta", "mobile": "12 / 16", "desktop": "12 / 16", "use": "Meta labels" } ] }, "color_system": { "tokens": [ { "token": "Paper", "hex": "#F6F1E8", "use": "Main light background" }, { "token": "Oat", "hex": "#EFE7DB", "use": "Muted band / grouped section surface" }, { "token": "Ink", "hex": "#221C18", "use": "Primary text / strong fill" }, { "token": "Ink 2", "hex": "#4A4039", "use": "Secondary text" }, { "token": "Cortado", "hex": "#7B6250", "use": "Tertiary text / quiet emphasis" }, { "token": "Fog fill", "hex": "#E8EDF1", "use": "Neutral chip fill / quiet status background" }, { "token": "Fog text", "hex": "#5E6872", "use": "Neutral status text" }, { "token": "Eucalyptus fill", "hex": "#E5EEE9", "use": "Confirmed / available background" }, { "token": "Eucalyptus text", "hex": "#4F625B", "use": "Confirmed / available text" }, { "token": "Clove fill", "hex": "#F3E1D5", "use": "Due / attention background" }, { "token": "Clove text", "hex": "#7B492F", "use": "Due / attention text" }, { "token": "Border", "hex": "#8E8073", "use": "Lines, field outlines, separators" } ], "semantic_roles": [ { "role": "Background", "light": "#F6F1E8", "dark": "#171311", "use": "Main page canvas" }, { "role": "Surface", "light": "#FBF8F3", "dark": "#201B18", "use": "Cards, sheets, panels" }, { "role": "Surface muted", "light": "#EFE7DB", "dark": "#2A2320", "use": "Grouped sections, navigation wells, filled fields" }, { "role": "Text primary", "light": "#221C18", "dark": "#F6F1E8", "use": "Headlines, primary labels, primary CTA text" }, { "role": "Text secondary", "light": "#4A4039", "dark": "#E7DDD0", "use": "Descriptions, secondary values" }, { "role": "Text tertiary", "light": "#7B6250", "dark": "#D4C5B5", "use": "Section tags, metadata, low emphasis labels" }, { "role": "Border / divider", "light": "#8E8073", "dark": "#6E645B", "use": "Field outlines, rules, frame edges" }, { "role": "Focus ring", "light": "#5F6F69", "dark": "#90A69C", "use": "Keyboard focus and selected field ring" }, { "role": "Positive", "light": "#E5EEE9 / #4F625B", "dark": "#2A2320 / #90A69C", "use": "Confirmed, available, ready" }, { "role": "Attention", "light": "#F3E1D5 / #7B492F", "dark": "#2A2320 / #D6A98A", "use": "Due, missing, needs action" }, { "role": "Neutral state", "light": "#E8EDF1 / #5E6872", "dark": "#2A2320 / #A8B2B8", "use": "Informational state, waiting, pickup" } ], "rules": [ "Use status colors sparingly and always pair them with a text label or icon.", "There is no bright red. Destructive actions rely on wording, iconography, and confirmation patterns\u2014not saturation.", "Public pages should feel mostly Paper + Ink + Cortado, with Eucalyptus and Clove used only as short accents." ] }, "spacing_shape_density": { "base_grid": "4-point", "rhythm": "8-point visual rhythm", "tokens": [ { "token": "4", "use": "Tight micro-gap between icon and label" }, { "token": "8", "use": "Icon padding, chip inset, row subdivisions" }, { "token": "12", "use": "Compact stack gap, card inset adjustment" }, { "token": "16", "use": "Default compact margin and field padding" }, { "token": "24", "use": "Primary section gap, medium-screen side margin" }, { "token": "32", "use": "Desktop section gap, hero padding" }, { "token": "48", "use": "Large section break / figure top spacing" }, { "token": "64", "use": "Public page band spacing / hero depth" } ], "shape": [ { "element": "Field / small card radius", "value": "10 px", "use": "Text fields, list rows, compact cards" }, { "element": "Standard surface radius", "value": "12 px", "use": "Panels, bottom sheets, dialogs" }, { "element": "Hero / image radius", "value": "16 px", "use": "Still-image containers, key marketing blocks" }, { "element": "Pill", "value": "999 px", "use": "Status chips" }, { "element": "Border thickness", "value": "1 px default / 2 px focus", "use": "Normal state vs active state" } ], "rules": [ "Maximum nesting depth: one layer. A section may contain cards; a card may not contain more cards inside more cards.", "Use dividers and tonal bands before introducing extra containers.", "On phone layouts, never place more than two inline controls beside each other; prefer stacked actions.", "Keep one obvious primary action per screen. Other actions become secondary or tertiary." ] }, "motion": { "principle": "Motion should feel like a page settling into place\u2014never like the app is performing.", "patterns": [ { "pattern": "State change", "default": "100\u2013120 ms fade", "rule": "Chip update, save confirmation, inline validation" }, { "pattern": "Screen transition", "default": "160\u2013180 ms short slide + fade", "rule": "Forward navigation or pane change" }, { "pattern": "Bottom sheet", "default": "180 ms rise", "rule": "Sheet or modal presentation" }, { "pattern": "Reduce Motion mode", "default": "Fade only", "rule": "No scale, bounce, parallax, or spring depth cues" } ] }, "responsive_layout_classes": [ { "class": "Compact", "range": "< 600 px / compact width", "pane_model": "1 pane", "layout_behavior": "16 px side margin, bottom navigation, full-width controls, stacked lists" }, { "class": "Medium", "range": "600\u2013839 px", "pane_model": "1\u20132 panes", "layout_behavior": "24 px side margin, navigation rail, split views where helpful" }, { "class": "Expanded", "range": "840\u20131279 px", "pane_model": "2 panes", "layout_behavior": "24 px side margin, sidebar + list/detail, wider tables and dashboards" }, { "class": "Large", "range": "1280 px and above", "pane_model": "2\u20133 panes max", "layout_behavior": "Cap readable content width; do not stretch body copy or finance tables edge to edge" } ] }, "app_registry": [ { "id": "papers", "label": "Papers", "group": "records", "one_line": "Proof packets, IDs, insurance, credentials", "icon": "folded-document", "primary_objects": [ "document", "packet", "shareEvent" ] }, { "id": "mail", "label": "Mail", "group": "records", "one_line": "Addresses, routing, pickup, institutional assignments", "icon": "envelope", "primary_objects": [ "address", "mailItem", "packageItem" ] }, { "id": "wallet", "label": "Wallet", "group": "money", "one_line": "What is safe to spend", "icon": "billfold", "primary_objects": [ "account", "obligation", "incomeItem" ] }, { "id": "ledger", "label": "Ledger", "group": "money", "one_line": "Work-to-cash flow", "icon": "ruled-page", "primary_objects": [ "client", "project", "invoice", "expense" ] }, { "id": "desk", "label": "Desk", "group": "work", "one_line": "Today's work and readiness", "icon": "workspace", "primary_objects": [ "project", "deliverable", "meeting", "professionalProfile" ] }, { "id": "base", "label": "Base", "group": "shelter", "one_line": "Shelter system and fallback", "icon": "shelter", "primary_objects": [ "shelterAsset", "stay", "place" ] }, { "id": "spot", "label": "Spot", "group": "shelter", "one_line": "Tonight and tomorrow morning", "icon": "night-indicator", "primary_objects": [ "tonightPlan", "morningPlan", "stay" ] }, { "id": "wash", "label": "Wash", "group": "upkeep", "one_line": "Showers, laundry, outfit state", "icon": "water-drop", "primary_objects": [ "hygieneLocation", "outfit", "toiletry" ] }, { "id": "outlet", "label": "Outlet", "group": "upkeep", "one_line": "Power, devices, signal", "icon": "plug-battery", "primary_objects": [ "device", "charger", "networkAccessPoint" ] }, { "id": "locker", "label": "Locker", "group": "upkeep", "one_line": "Bags, bins, item location", "icon": "container", "primary_objects": [ "possession", "container", "packList" ] }, { "id": "kit", "label": "Kit", "group": "upkeep", "one_line": "Meds, refills, care continuity", "icon": "care-kit", "primary_objects": [ "medication", "insuranceItem", "appointment" ] }, { "id": "address_book", "label": "Address Book", "group": "people", "one_line": "People, roles, boundaries, reciprocity", "icon": "book-person", "primary_objects": [ "person", "organization", "promise" ] } ], "app_groups": [ { "id": "records", "label": "Records", "description": "Proof, addresses, packet readiness", "apps": [ "papers", "mail" ] }, { "id": "money", "label": "Money", "description": "Truth, receivables, and obligations", "apps": [ "wallet", "ledger" ] }, { "id": "work", "label": "Work", "description": "Professional continuity", "apps": [ "desk" ] }, { "id": "shelter", "label": "Shelter", "description": "Coverage, fallback, and tonight", "apps": [ "spot", "base" ] }, { "id": "upkeep", "label": "Upkeep", "description": "Body, devices, possessions, care", "apps": [ "wash", "outlet", "locker", "kit" ] }, { "id": "people", "label": "People", "description": "Human infrastructure", "apps": [ "address_book" ] } ], "navigation_system": { "name": "Settle system navigator", "version": "3.0.0", "thesis": "Cross-app navigation is not back-button-driven. It is a persistent shell built around horizons, app nouns, and shared objects.", "why_this_exists": [ "The bundle has twelve apps but must still behave like one system.", "The first destination should be a real operational horizon, not a dashboard collage.", "The user often needs to pivot from the same person, place, address, stay, or document into a different app lens without losing context.", "On mobile, there is not enough room for twelve always-visible destinations, so the shell must separate horizons from the full app library." ], "navigation_layers": [ { "id": "universal_shell", "label": "Universal shell", "job": "Move between global horizons, search, the app library, and quick capture.", "primary_controls": [ "Tonight", "This week", "Search", "Apps", "Capture" ], "do_not_substitute_with": [ "browser back button", "hamburger-only navigation", "card grids as sole top-level navigation" ], "default_entry": "Tonight" }, { "id": "app_library", "label": "App library", "job": "Browse and switch among the twelve app nouns in grouped, literal categories.", "mobile_pattern": "Full-height apps sheet opened from the bottom bar.", "desktop_pattern": "Inline grouped list in the left sidebar; sheet only used on medium widths.", "group_order": [ "records", "money", "work", "shelter", "upkeep", "people" ] }, { "id": "object_pivots", "label": "Object pivots", "job": "Open the same underlying object in another relevant app without returning to the app index.", "examples": [ "Address -> Mail rules, Papers proof packet, Desk professional card", "Stay -> Spot tonight plan, Wash shower plan, Outlet power plan", "Person -> Address Book relationship, Base host rules, Mail package role" ], "desktop_pattern": "Right-side context panel called Related in Settle.", "mobile_pattern": "Inline Linked section near the top of detail views." }, { "id": "local_navigation", "label": "Local navigation", "job": "Move within a single horizon or app: list -> detail -> action sheet -> confirmation.", "rules": [ "Back is local by default.", "A cross-app pivot may create a temporary return chip such as Return to Spot, but not reset the whole shell.", "Deep lists preserve scroll and filters when leaving and re-entering the destination." ] } ], "destinations": [ { "id": "now", "label": "Tonight", "kind": "horizon", "description": "Cross-app surface for the next 12\u201318 hours.", "includes_apps": [ "spot", "wash", "outlet", "desk", "wallet" ], "mobile_bottom_bar": true, "desktop_sidebar": true, "default": true }, { "id": "week", "label": "This week", "kind": "horizon", "description": "Cross-app surface for the next 7 days, money truth, and work continuity.", "includes_apps": [ "wallet", "ledger", "desk", "base", "mail" ], "mobile_bottom_bar": true, "desktop_sidebar": true, "default": false }, { "id": "search", "label": "Search", "kind": "utility_destination", "description": "Global object, packet, place, person, and promise search.", "mobile_bottom_bar": true, "desktop_sidebar": true, "default": false }, { "id": "apps", "label": "Apps", "kind": "library", "description": "Grouped index of all twelve apps plus recent destinations.", "mobile_bottom_bar": true, "desktop_sidebar": false, "default": false }, { "id": "capture", "label": "Capture", "kind": "persistent_action", "description": "Quick capture entry for note, scan, expense, promise, item, and photo.", "mobile_floating_pill": true, "desktop_sidebar_button": true, "default": false } ], "breakpoints": { "compact": { "range": "< 600 px", "shell": "Top bar + 4-item bottom bar + floating Capture pill + full-screen apps sheet", "panes": 1, "margins": 16, "rules": [ "Keep labels visible in the bottom bar.", "Never force the twelve apps directly into bottom navigation.", "Primary action sits in the lower third when the screen is action-led." ] }, "medium": { "range": "600\u2013839 px", "shell": "Slim left rail + optional slide-over app sheet + one or two panes", "panes": "1\u20132", "margins": 24, "rules": [ "Use a navigation rail for horizons and search.", "Apps open from the rail into a slide-over library instead of a permanent full sidebar.", "Allow split views only where object density helps." ] }, "expanded": { "range": "840\u20131279 px", "shell": "Permanent left sidebar with grouped apps + main content + optional right context panel", "panes": 2, "margins": 24, "rules": [ "Show app groups inline in the left sidebar.", "Use list/detail for object-heavy apps.", "Keep the right context panel quiet and contextual, not a second dashboard." ] }, "large": { "range": "1280 px and above", "shell": "Permanent sidebar + capped content width + optional context panel", "panes": "2\u20133 max", "margins": 32, "rules": [ "Do not stretch long tables or body copy edge to edge.", "Treat extra width as breathing room, not permission for more chrome." ] } }, "desktop_shell_dimensions": { "header_height": 64, "left_sidebar_width": 272, "context_panel_width": 280, "section_gap": 24, "nav_row_min_height": 48 }, "mobile_shell_dimensions": { "header_height": 56, "bottom_bar_height": 72, "capture_pill_height": 48, "apps_sheet_top_radius": 16, "side_margin": 16, "nav_target_min_size": 48 }, "state_behavior": { "preserve_per_destination_state": true, "preserve_fields_and_scroll": true, "recent_destinations_count": 6, "rules": [ "Each horizon and app keeps its own local stack and scroll position.", "Switching from Wallet to Mail and back returns the user to the same scoped state when possible.", "Search results remember the last query until dismissed.", "Draft capture content remains unsent until explicit save or discard." ] }, "search_behavior": { "scope": "global across shared objects and app-local extensions", "open_on_mobile": "full-screen search destination", "open_on_desktop": "overlay or in-place pane", "supports": [ "object jump", "app jump", "recent items", "quick actions", "masked result previews" ], "result_order": [ "Pinned and recent results", "Exact object matches", "Related objects", "Suggested quick actions" ] }, "privacy_behavior": { "locked_records": "Require step-up authentication before revealing detail.", "masked_mode": "Search and recent items show redacted labels and no sensitive previews.", "borrowed_device_mode": [ "Hide balances, exact stay locations, medication names, and detailed packet previews by default.", "Collapse sensitive apps into a Locked section until step-up authentication succeeds.", "Do not persist recent destinations locally." ], "notification_rule": "Navigator surfaces never expose exact stay locations or full balances in ambient chrome." }, "back_behavior": { "primary_rule": "Back is local. Shell switching is explicit.", "allowed_patterns": [ "Back returns within the current app or horizon stack.", "Cross-app pivots may create a temporary return chip to the launching surface.", "Browser back may replay shell history in web contexts, but the product must not rely on it as the only route." ], "disallowed_patterns": [ "Requiring repeated back presses to change apps", "Using breadcrumb trails as the main way to jump across apps", "Dropping users at a generic home whenever they pivot between related objects" ] }, "do_not_do": [ "Do not use a top row of twelve app tabs.", "Do not hide the full app library behind a single unlabeled hamburger on desktop.", "Do not make cards the only way to move across apps.", "Do not use icon-only global navigation.", "Do not treat the back button as the primary cross-app navigation pattern." ] }, "object_pivots": { "person": [ "address_book", "base", "mail", "desk", "ledger", "kit" ], "organization": [ "address_book", "mail", "desk", "ledger", "kit" ], "place": [ "base", "spot", "wash", "outlet", "desk" ], "address": [ "mail", "papers", "desk", "wallet", "base" ], "document": [ "papers", "mail", "ledger", "kit" ], "stay": [ "spot", "base", "wash", "outlet", "desk", "wallet" ], "shelterAsset": [ "base", "spot", "wallet", "mail" ], "account": [ "wallet", "ledger", "base", "spot" ], "project": [ "desk", "ledger", "papers" ], "deliverable": [ "desk", "ledger", "papers" ], "device": [ "outlet", "locker", "desk", "spot" ], "container": [ "locker", "wash", "outlet", "papers" ], "careItem": [ "kit", "papers", "address_book" ], "promise": [ "address_book", "desk", "wallet", "mail", "spot" ] }, "critical_flows": [ { "id": "tonight_fallback", "label": "Tonight fallback flow", "trigger": "A host stay falls through late, or a primary stay becomes unavailable unexpectedly.", "system_path": [ "base", "spot", "wallet", "wash", "outlet", "desk" ], "required_outcomes": [ "Switch tonight from host stay to the car or a motel in under 2 minutes.", "Surface whether the motel option is actually affordable tonight.", "Surface shower plan, charging plan, clean-clothes status, first work location, and unresolved risks before sleep.", "Keep the language operational and forward-looking rather than dwelling on why the plan failed." ], "navigator_implication": "The Now horizon must expose cross-app pivots to Wallet, Wash, Outlet, and Desk directly from Spot." }, { "id": "professional_continuity", "label": "Professional continuity flow", "trigger": "A 9 AM client call after a car night.", "system_path": [ "spot", "wash", "outlet", "desk" ], "required_outcomes": [ "Confirm shower access, clean meeting outfit, charged laptop and phone, and a call-safe location.", "Assemble files, links, notes, and handoff details for the first work block.", "Reveal nothing about shelter mode in work-facing output." ], "navigator_implication": "Related apps rail must connect Spot to Wash, Outlet, and Desk in one tap." }, { "id": "address_proof", "label": "Address and proof flow", "trigger": "A bank, insurer, accountant, client, doctor, or landlord needs documentation on short notice.", "system_path": [ "mail", "papers" ], "required_outcomes": [ "Identify the right address for the recipient and whether the supporting proof exists.", "Assemble a clean proof packet in under 2 minutes when records already exist.", "Show what is present, missing, expired, or only available as a physical original." ], "navigator_implication": "Address records need pivots into Papers packets and Mail rules without going back to a generic home." }, { "id": "money_truth", "label": "Money truth flow", "trigger": "Car costs are rising, motel spend is high, and a client payment is late.", "system_path": [ "ledger", "wallet", "base" ], "required_outcomes": [ "See what is owed, what is coming in, what shelter costs are real, and what the next expense does to lease readiness.", "Support irregular income without pretending a monthly salary exists.", "Produce a decision-grade view, not just a historical ledger." ], "navigator_implication": "The This week horizon must connect Wallet to Ledger and Base, and preserve state while switching." }, { "id": "weekly_reset", "label": "Weekly reset flow", "trigger": "A weekend at family fallback or a rare reset window with laundry access, kitchen, and admin breathing room.", "system_path": [ "spot", "wash", "locker", "mail", "ledger", "kit" ], "required_outcomes": [ "Generate a pack list, laundry/reset checklist, meds and refill check, mail pickup list, and pending admin list.", "Surface what is best done now because this location or time window will disappear again soon.", "Carry continuity into the following work week." ], "navigator_implication": "The related-links pattern must work from a reset place and connect operational tasks across domains." }, { "id": "crisis_interruption", "label": "Crisis interruption flow", "trigger": "The car will not start, the phone dies before a client call, or a prescription refill is blocked while away from a stable base.", "system_path": [ "base", "spot", "outlet", "kit", "address_book", "papers" ], "required_outcomes": [ "Identify immediate dependencies, fallback contacts, nearby stored information, and the minimum next actions needed to preserve safety and continuity.", "Keep emergency packets and critical contacts reachable offline.", "Never require calm reconstruction from memory under stress." ], "navigator_implication": "Search and related links must expose emergency contacts, packets, and power dependencies without deep browsing." }, { "id": "lease_readiness", "label": "Lease-readiness flow", "trigger": "Trying to reach the point where a lease can be signed within the next 60 days.", "system_path": [ "wallet", "ledger", "papers", "mail", "base" ], "required_outcomes": [ "Show cash target, income proof, document gaps, address strategy, and ongoing shelter costs.", "Express progress without implying current instability is a moral failure." ], "navigator_implication": "The This month / scenario entry points can live under Wallet, but object pivots must reach Papers, Mail, and Base." } ], "page_templates": { "homepage": { "summary": "The homepage should feel typographic first and visual second. It earns trust through taste, restraint, and clarity.", "rules": [ "Desktop hero: two columns. Left column carries the statement and CTA. Right column holds one still image or the Porch Light.", "Mobile hero: single column, same order, no alternate campaign copy.", "Use one sentence under the wordmark. Do not stack a paragraph of market explanation above the fold.", "The line 'Everything, in place.' appears with the wordmark at the hero and footer only.", "Use one primary CTA and at most one quiet secondary CTA.", "Show the twelve apps in a quiet grid or list with one-line descriptors; avoid feature-tour cards or animated carousel patterns.", "Use copy blocks for Tonight / tomorrow morning, Money / work this week, Address / proof, and Lease readiness instead of product screenshot walls.", "No testimonials, no founder note, no team photo, no user quotes, no social-proof ticker." ] }, "about": { "summary": "The about page is a trust page, not a startup-origin-story page.", "rules": [ "Open with one strong statement. Keep it under two lines on desktop and under three lines on mobile.", "Use three or four short sections: what Settle holds, privacy and sharing posture, Porch Light / local-first architecture, and the system of twelve apps.", "Keep paragraphs narrow. Recommended reading measure: roughly 64\u201368 characters.", "No founder mythology, no painful backstory, no emotional appeal. The page should explain the product as something already useful and already made with care.", "A single Porch Light image is acceptable. No lifestyle photography, no workspace envy, no staged interiors." ] }, "applications": { "summary": "The primary visual mode is structured calm: rows, section bands, chips, and direct labels.", "rules": [ "Default screen pattern: page title, immediate horizon module, grouped list rows, then optional deeper browse.", "Use list-detail on larger widths for Papers, Mail, Locker, Address Book, and other object-heavy apps.", "Use summary + stacked modules for Spot, Wash, Outlet, Wallet, and Desk on compact screens.", "Use ruled layouts and tabular numerals for Wallet and Ledger. Dense finance tables belong on laptop widths, not phone widths.", "Use full-height bottom sheets for creation flows on phone. Use contained dialogs only for short confirmations or destructive actions.", "On sensitive surfaces, reveal details progressively. A masked record should still look intentional, not broken." ] } }, "components": { "buttons": { "rules": [ "Minimum interactive target: 48 \u00d7 48 px across product surfaces.", "Button copy should be short and concrete: 'Create address card,' 'Set backup stay,' 'Share packet.'", "Do not use motivational confirmations such as 'Great job' or 'You're all set.' Use factual confirmations such as 'Saved' or 'Share created.'" ], "types": [ { "type": "Primary", "style": "Ink fill / Paper text", "use": "One per screen, or one per modal footer" }, { "type": "Secondary", "style": "Transparent with 1 px border", "use": "Supporting actions near the primary action" }, { "type": "Tertiary", "style": "Text-only", "use": "Low-importance inline actions" }, { "type": "Destructive", "style": "Tertiary + explicit wording", "use": "Requires confirmation; do not rely on red" } ] }, "fields_and_forms": { "summary": "Fields should feel dependable and readable.", "rules": [ "Field fill: Oat on light surfaces, Dark Surface 2 on dark surfaces.", "Outline: 1 px border token, shifting to 2 px Eucalyptus focus ring when active.", "Label: always visible. Prefer above or inset-top labels rather than placeholder-only fields.", "Helper text: small, direct, and below the field.", "Error state: clove fill or clove text icon + explicit instruction; no vague 'invalid input' without direction.", "Do not place long multi-step capture forms into narrow two-column layouts on phone. Keep forms single-column on compact widths." ] }, "rows_chips_cards": { "summary": "The product should rely more on rows and chips than on floating cards.", "rules": [ "Row height: 56\u201372 px on compact surfaces, depending on one-line vs two-line content.", "Row structure: title, supporting metadata, optional trailing state chip, optional chevron.", "Chips: use pill shape, tonal fill, and explicit label such as 'covered,' 'update,' 'pickup,' or 'ready.'", "Cards: reserve for grouped commitments such as tonight plan, packet share preview, or one high-importance summary module.", "Avoid card grids in the product unless the user truly needs side-by-side comparison." ] }, "tables_and_data": { "rules": [ "Phone: transform tables into stacked rows or accordion records.", "Laptop: use light ruled tables, right-aligned numerals, and one row height that can wrap without clipping.", "Charts: prefer bars, lines, and directly labeled comparisons. Avoid donut charts, bright color legends, and decorative gradients.", "Money visuals should use Ink for committed / actual, Eucalyptus for safe / confirmed, Clove for at-risk / due, and Fog for neutral or waiting." ] }, "alerts_empty_states_privacy": { "examples": { "good_alert": "Friday has no confirmed stay.", "good_helper": "Backup stay recommended.", "good_empty_state": "No backup stay set." }, "anti_patterns": [ "encouragement", "guilt", "therapy language", "praise for basic maintenance" ], "rules": [ "Masked records should use generic but calm labels such as 'Hidden address' or 'Locked record,' never a broken-field appearance.", "Notifications and lock-screen surfaces should suppress exact balances, stay locations, medication names, and other sensitive details by default." ] }, "iconography_and_imagery": { "rules": [ "Icons should be literal, line-based, and domestic.", "Icon stroke: consistent, medium-weight line with warm geometry. Do not use glossy or 3D icon treatments.", "Allowed imagery: folded shirt, labeled folder, charger on a tabletop, morning light, shelf, ceramic, Porch Light.", "Not allowed: faces, vehicles, motel exteriors, luggage tableaux, maps, pins, screenshots as marketing imagery, or stock-photo hero shots." ] } }, "domain_modes": [ { "mode": "Proof surfaces", "apps": "Papers, Mail, Ledger", "visual_emphasis": "Slightly more ruled, tighter numerals, clearer borders, sharper hierarchy" }, { "mode": "Operational horizon surfaces", "apps": "Spot, Base, Desk, Wallet", "visual_emphasis": "Bigger summary modules, stronger status chips, lower-third primary action" }, { "mode": "Domestic continuity surfaces", "apps": "Wash, Outlet, Locker", "visual_emphasis": "Gentle grouped bands, row-first scanning, checklist-like rhythm" }, { "mode": "Sensitive surfaces", "apps": "Kit, hidden records across apps", "visual_emphasis": "More masking, stronger step-up states, quieter previews, reduced on-screen detail" } ], "accessibility": { "gates": [ { "gate": "Text contrast", "requirement": "At least 4.5:1 for normal text; 3:1 for large text" }, { "gate": "Non-text contrast", "requirement": "At least 3:1 for field outlines, icons, and key controls" }, { "gate": "Color use", "requirement": "No state relies on color alone; pair color with text and/or iconography" }, { "gate": "Touch target", "requirement": "48 \u00d7 48 px target size across product controls" }, { "gate": "Text resizing", "requirement": "Support 200% text size without clipping or loss of function" }, { "gate": "Motion", "requirement": "Respect system Reduce Motion settings; fade-only fallback" }, { "gate": "Labels", "requirement": "Visible, descriptive labels for controls and form inputs" }, { "gate": "Privacy", "requirement": "Mask sensitive notifications and shared-state previews by default" } ], "qa_test": [ "Can the screen be read at arm's length in dim light?", "Can the main action be hit comfortably with one thumb?", "At 200% text size, does the screen reflow instead of clipping?", "If color is removed, do the states still make sense?", "Does the copy describe logistics rather than perform empathy?" ] }, "handoff_rules": [ "Do not introduce new hues without approval. The visual system is intentionally small.", "Do not introduce gradients, glassmorphism, or soft drop-shadow aesthetics.", "Do not design public pages around screenshots. Public trust comes from typography, composition, and the Porch Light.", "Do not collapse critical operational screens into generic dashboards.", "Do not rely on placeholder-only fields, icon-only navigation, or color-only status.", "Do not turn dark mode into a neon inversion of light mode.", "Do not write motivational empty states, success banners, or onboarding cheer.", "Do not add more visual complexity than the information absolutely requires." ], "archive_refs": { "docx_dump": "archive/settle_v1_docx_dump.json", "docx_media": [ "archive/docx_media/image1.png", "archive/docx_media/image2.png", "archive/docx_media/image3.png" ], "source_assets": [ "source_assets/palette.png", "source_assets/homepage_wireframe.png", "source_assets/about_wireframe.png", "source_assets/app_wireframe.png", "source_assets/contact_sheet_settle_vdl.png" ] }, "icon_system": { "name": "Settle icon system", "version": "1.0.0", "total_icons": 58, "categories": [ "apps", "system", "status" ], "raw_svg_directories": [ "icons/apps/", "icons/system/", "icons/status/" ], "production_icons": [ { "category": "app", "family": "app", "name": "Papers", "stable_id": "papers", "export_name": "papers", "raw_svg_path": "icons/apps/papers.svg", "compact_priority": "critical", "allowed_surface_families": [ "app.header", "app.linked_app_rows", "shell.desktop", "shell.medium", "shell.mobile", "shell.related_in_settle", "shell.search", "site.about", "site.homepage" ], "allowed_surfaces": [ "site.homepage.app_grid", "site.about.app_inventory", "shell.desktop.sidebar.apps", "shell.medium.app_sheet", "shell.mobile.apps_sheet", "shell.search.app_jump_results", "shell.search.recent_destinations", "app.header.identity", "shell.related_in_settle.app_rows", "app.linked_app_rows" ], "notes": "Always pair the icon with the app label in navigation, search, and public app inventories." }, { "category": "app", "family": "app", "name": "Mail", "stable_id": "mail", "export_name": "mail", "raw_svg_path": "icons/apps/mail.svg", "compact_priority": "critical", "allowed_surface_families": [ "app.header", "app.linked_app_rows", "shell.desktop", "shell.medium", "shell.mobile", "shell.related_in_settle", "shell.search", "site.about", "site.homepage" ], "allowed_surfaces": [ "site.homepage.app_grid", "site.about.app_inventory", "shell.desktop.sidebar.apps", "shell.medium.app_sheet", "shell.mobile.apps_sheet", "shell.search.app_jump_results", "shell.search.recent_destinations", "app.header.identity", "shell.related_in_settle.app_rows", "app.linked_app_rows" ], "notes": "Always pair the icon with the app label in navigation, search, and public app inventories." }, { "category": "app", "family": "app", "name": "Wallet", "stable_id": "wallet", "export_name": "wallet", "raw_svg_path": "icons/apps/wallet.svg", "compact_priority": "critical", "allowed_surface_families": [ "app.header", "app.linked_app_rows", "shell.desktop", "shell.medium", "shell.mobile", "shell.related_in_settle", "shell.search", "site.about", "site.homepage" ], "allowed_surfaces": [ "site.homepage.app_grid", "site.about.app_inventory", "shell.desktop.sidebar.apps", "shell.medium.app_sheet", "shell.mobile.apps_sheet", "shell.search.app_jump_results", "shell.search.recent_destinations", "app.header.identity", "shell.related_in_settle.app_rows", "app.linked_app_rows" ], "notes": "Always pair the icon with the app label in navigation, search, and public app inventories." }, { "category": "app", "family": "app", "name": "Ledger", "stable_id": "ledger", "export_name": "ledger", "raw_svg_path": "icons/apps/ledger.svg", "compact_priority": "critical", "allowed_surface_families": [ "app.header", "app.linked_app_rows", "shell.desktop", "shell.medium", "shell.mobile", "shell.related_in_settle", "shell.search", "site.about", "site.homepage" ], "allowed_surfaces": [ "site.homepage.app_grid", "site.about.app_inventory", "shell.desktop.sidebar.apps", "shell.medium.app_sheet", "shell.mobile.apps_sheet", "shell.search.app_jump_results", "shell.search.recent_destinations", "app.header.identity", "shell.related_in_settle.app_rows", "app.linked_app_rows" ], "notes": "Always pair the icon with the app label in navigation, search, and public app inventories." }, { "category": "app", "family": "app", "name": "Desk", "stable_id": "desk", "export_name": "desk", "raw_svg_path": "icons/apps/desk.svg", "compact_priority": "critical", "allowed_surface_families": [ "app.header", "app.linked_app_rows", "shell.desktop", "shell.medium", "shell.mobile", "shell.related_in_settle", "shell.search", "site.about", "site.homepage" ], "allowed_surfaces": [ "site.homepage.app_grid", "site.about.app_inventory", "shell.desktop.sidebar.apps", "shell.medium.app_sheet", "shell.mobile.apps_sheet", "shell.search.app_jump_results", "shell.search.recent_destinations", "app.header.identity", "shell.related_in_settle.app_rows", "app.linked_app_rows" ], "notes": "Always pair the icon with the app label in navigation, search, and public app inventories." }, { "category": "app", "family": "app", "name": "Base", "stable_id": "base", "export_name": "base", "raw_svg_path": "icons/apps/base.svg", "compact_priority": "critical", "allowed_surface_families": [ "app.header", "app.linked_app_rows", "shell.desktop", "shell.medium", "shell.mobile", "shell.related_in_settle", "shell.search", "site.about", "site.homepage" ], "allowed_surfaces": [ "site.homepage.app_grid", "site.about.app_inventory", "shell.desktop.sidebar.apps", "shell.medium.app_sheet", "shell.mobile.apps_sheet", "shell.search.app_jump_results", "shell.search.recent_destinations", "app.header.identity", "shell.related_in_settle.app_rows", "app.linked_app_rows" ], "notes": "Always pair the icon with the app label in navigation, search, and public app inventories." }, { "category": "app", "family": "app", "name": "Spot", "stable_id": "spot", "export_name": "spot", "raw_svg_path": "icons/apps/spot.svg", "compact_priority": "critical", "allowed_surface_families": [ "app.header", "app.linked_app_rows", "shell.desktop", "shell.medium", "shell.mobile", "shell.related_in_settle", "shell.search", "site.about", "site.homepage" ], "allowed_surfaces": [ "site.homepage.app_grid", "site.about.app_inventory", "shell.desktop.sidebar.apps", "shell.medium.app_sheet", "shell.mobile.apps_sheet", "shell.search.app_jump_results", "shell.search.recent_destinations", "app.header.identity", "shell.related_in_settle.app_rows", "app.linked_app_rows" ], "notes": "Always pair the icon with the app label in navigation, search, and public app inventories." }, { "category": "app", "family": "app", "name": "Wash", "stable_id": "wash", "export_name": "wash", "raw_svg_path": "icons/apps/wash.svg", "compact_priority": "critical", "allowed_surface_families": [ "app.header", "app.linked_app_rows", "shell.desktop", "shell.medium", "shell.mobile", "shell.related_in_settle", "shell.search", "site.about", "site.homepage" ], "allowed_surfaces": [ "site.homepage.app_grid", "site.about.app_inventory", "shell.desktop.sidebar.apps", "shell.medium.app_sheet", "shell.mobile.apps_sheet", "shell.search.app_jump_results", "shell.search.recent_destinations", "app.header.identity", "shell.related_in_settle.app_rows", "app.linked_app_rows" ], "notes": "Always pair the icon with the app label in navigation, search, and public app inventories." }, { "category": "app", "family": "app", "name": "Outlet", "stable_id": "outlet", "export_name": "outlet", "raw_svg_path": "icons/apps/outlet.svg", "compact_priority": "critical", "allowed_surface_families": [ "app.header", "app.linked_app_rows", "shell.desktop", "shell.medium", "shell.mobile", "shell.related_in_settle", "shell.search", "site.about", "site.homepage" ], "allowed_surfaces": [ "site.homepage.app_grid", "site.about.app_inventory", "shell.desktop.sidebar.apps", "shell.medium.app_sheet", "shell.mobile.apps_sheet", "shell.search.app_jump_results", "shell.search.recent_destinations", "app.header.identity", "shell.related_in_settle.app_rows", "app.linked_app_rows" ], "notes": "Always pair the icon with the app label in navigation, search, and public app inventories." }, { "category": "app", "family": "app", "name": "Locker", "stable_id": "locker", "export_name": "locker", "raw_svg_path": "icons/apps/locker.svg", "compact_priority": "critical", "allowed_surface_families": [ "app.header", "app.linked_app_rows", "shell.desktop", "shell.medium", "shell.mobile", "shell.related_in_settle", "shell.search", "site.about", "site.homepage" ], "allowed_surfaces": [ "site.homepage.app_grid", "site.about.app_inventory", "shell.desktop.sidebar.apps", "shell.medium.app_sheet", "shell.mobile.apps_sheet", "shell.search.app_jump_results", "shell.search.recent_destinations", "app.header.identity", "shell.related_in_settle.app_rows", "app.linked_app_rows" ], "notes": "Always pair the icon with the app label in navigation, search, and public app inventories." }, { "category": "app", "family": "app", "name": "Kit", "stable_id": "kit", "export_name": "kit", "raw_svg_path": "icons/apps/kit.svg", "compact_priority": "critical", "allowed_surface_families": [ "app.header", "app.linked_app_rows", "shell.desktop", "shell.medium", "shell.mobile", "shell.related_in_settle", "shell.search", "site.about", "site.homepage" ], "allowed_surfaces": [ "site.homepage.app_grid", "site.about.app_inventory", "shell.desktop.sidebar.apps", "shell.medium.app_sheet", "shell.mobile.apps_sheet", "shell.search.app_jump_results", "shell.search.recent_destinations", "app.header.identity", "shell.related_in_settle.app_rows", "app.linked_app_rows" ], "notes": "Always pair the icon with the app label in navigation, search, and public app inventories." }, { "category": "app", "family": "app", "name": "Address Book", "stable_id": "address_book", "export_name": "addressBook", "raw_svg_path": "icons/apps/address-book.svg", "compact_priority": "critical", "allowed_surface_families": [ "app.header", "app.linked_app_rows", "shell.desktop", "shell.medium", "shell.mobile", "shell.related_in_settle", "shell.search", "site.about", "site.homepage" ], "allowed_surfaces": [ "site.homepage.app_grid", "site.about.app_inventory", "shell.desktop.sidebar.apps", "shell.medium.app_sheet", "shell.mobile.apps_sheet", "shell.search.app_jump_results", "shell.search.recent_destinations", "app.header.identity", "shell.related_in_settle.app_rows", "app.linked_app_rows" ], "notes": "Always pair the icon with the app label in navigation, search, and public app inventories." }, { "category": "system", "family": "navigation", "name": "Tonight", "stable_id": "tonight", "export_name": "tonight", "raw_svg_path": "icons/system/tonight.svg", "compact_priority": "critical", "allowed_surface_families": [ "horizon.now", "shell.desktop", "shell.medium", "shell.mobile" ], "allowed_surfaces": [ "shell.mobile.bottom_bar.now", "shell.medium.rail.now", "shell.desktop.sidebar.now", "horizon.now.header" ], "notes": "Always render with label 'Tonight' in persistent navigation." }, { "category": "system", "family": "navigation", "name": "This Week", "stable_id": "this-week", "export_name": "thisWeek", "raw_svg_path": "icons/system/this-week.svg", "compact_priority": "critical", "allowed_surface_families": [ "horizon.week", "shell.desktop", "shell.medium", "shell.mobile" ], "allowed_surfaces": [ "shell.mobile.bottom_bar.week", "shell.medium.rail.week", "shell.desktop.sidebar.week", "horizon.week.header" ], "notes": "Always render with label 'This week' in persistent navigation." }, { "category": "system", "family": "navigation", "name": "Search", "stable_id": "search", "export_name": "search", "raw_svg_path": "icons/system/search.svg", "compact_priority": "critical", "allowed_surface_families": [ "global.search", "shell.desktop", "shell.medium", "shell.mobile" ], "allowed_surfaces": [ "shell.mobile.bottom_bar.search", "shell.medium.rail.search", "shell.desktop.sidebar.search", "global.search.entry" ], "notes": "Use as the leading icon in the global search field and as the search destination icon." }, { "category": "system", "family": "navigation", "name": "Apps", "stable_id": "apps", "export_name": "apps", "raw_svg_path": "icons/system/apps.svg", "compact_priority": "critical", "allowed_surface_families": [ "shell.medium", "shell.mobile" ], "allowed_surfaces": [ "shell.mobile.bottom_bar.apps", "shell.medium.rail.apps_trigger", "shell.mobile.apps_sheet.header" ], "notes": "Do not use on desktop sidebar as a grouped-app placeholder; desktop shows the app list directly." }, { "category": "system", "family": "navigation", "name": "Capture", "stable_id": "capture", "export_name": "capture", "raw_svg_path": "icons/system/capture.svg", "compact_priority": "critical", "allowed_surface_families": [ "app.toolbar", "quick_capture.entry", "shell.desktop", "shell.mobile" ], "allowed_surfaces": [ "shell.mobile.capture_pill", "shell.desktop.sidebar.capture_button", "app.toolbar.capture_action", "quick_capture.entry" ], "notes": "The persistent Capture action always shows both icon and label." }, { "category": "system", "family": "navigation", "name": "Back", "stable_id": "back", "export_name": "back", "raw_svg_path": "icons/system/back.svg", "compact_priority": "critical", "allowed_surface_families": [ "local_navigation.back_button", "modal.back_control", "nested_detail.back_control" ], "allowed_surfaces": [ "local_navigation.back_button", "modal.back_control", "nested_detail.back_control" ], "notes": "Back is local only. Never use this icon to imply cross-app switching." }, { "category": "system", "family": "navigation", "name": "Forward", "stable_id": "forward", "export_name": "forward", "raw_svg_path": "icons/system/forward.svg", "compact_priority": "secondary", "allowed_surface_families": [ "packet.review", "scoped_sequence.next_control", "week.horizon" ], "allowed_surfaces": [ "scoped_sequence.next_control", "week.horizon.next_period_control", "packet.review.next_control" ], "notes": "Use only for scoped next/forward movement inside a flow. Never use as a browser-history metaphor." }, { "category": "system", "family": "navigation", "name": "Return", "stable_id": "return", "export_name": "returnIcon", "raw_svg_path": "icons/system/return.svg", "compact_priority": "critical", "allowed_surface_families": [ "cross_app.return_banner", "cross_app.return_chip" ], "allowed_surfaces": [ "cross_app.return_chip", "cross_app.return_banner" ], "notes": "Use for temporary 'Return to \u2026' affordances created by a cross-app pivot." }, { "category": "system", "family": "navigation", "name": "Porch Light", "stable_id": "porch-light", "export_name": "porchLight", "raw_svg_path": "icons/system/porch-light.svg", "compact_priority": "secondary", "allowed_surface_families": [ "device.porch_light_card", "settings.local_first_status", "site.about", "site.homepage" ], "allowed_surfaces": [ "site.homepage.porch_light_block", "site.about.local_first_block", "settings.local_first_status", "device.porch_light_card" ], "notes": "Public-site usage is limited to the Porch Light block and local-first explanations." }, { "category": "system", "family": "action", "name": "Plus", "stable_id": "plus", "export_name": "plus", "raw_svg_path": "icons/system/plus.svg", "compact_priority": "critical", "allowed_surface_families": [ "action.add_address", "action.add_person", "action.add_record", "action.add_stay" ], "allowed_surfaces": [ "action.add_record", "action.add_person", "action.add_address", "action.add_stay" ], "notes": "Use on labeled add/create buttons. Do not use as a substitute for Capture." }, { "category": "system", "family": "action", "name": "Edit", "stable_id": "edit", "export_name": "edit", "raw_svg_path": "icons/system/edit.svg", "compact_priority": "critical", "allowed_surface_families": [ "action.edit_plan", "action.edit_profile", "action.edit_record" ], "allowed_surfaces": [ "action.edit_record", "action.edit_profile", "action.edit_plan" ], "notes": "Use on explicit edit affordances only." }, { "category": "system", "family": "action", "name": "Share", "stable_id": "share", "export_name": "share", "raw_svg_path": "icons/system/share.svg", "compact_priority": "critical", "allowed_surface_families": [ "action.share_card", "action.share_packet", "action.share_record" ], "allowed_surfaces": [ "action.share_packet", "action.share_card", "action.share_record" ], "notes": "Use on user-initiated sharing only." }, { "category": "system", "family": "action", "name": "Export", "stable_id": "export", "export_name": "exportIcon", "raw_svg_path": "icons/system/export.svg", "compact_priority": "secondary", "allowed_surface_families": [ "action.export_data", "action.export_file", "action.export_packet" ], "allowed_surfaces": [ "action.export_packet", "action.export_data", "action.export_file" ], "notes": "Use only for export/download, not for share." }, { "category": "system", "family": "action", "name": "Upload", "stable_id": "upload", "export_name": "upload", "raw_svg_path": "icons/system/upload.svg", "compact_priority": "secondary", "allowed_surface_families": [ "action.attach_media", "action.upload_document", "action.upload_file" ], "allowed_surfaces": [ "action.upload_file", "action.upload_document", "action.attach_media" ], "notes": "Use for inbound file attachment and import entrypoints." }, { "category": "system", "family": "action", "name": "Scan", "stable_id": "scan", "export_name": "scan", "raw_svg_path": "icons/system/scan.svg", "compact_priority": "critical", "allowed_surface_families": [ "action.scan_document", "action.scan_mail", "action.scan_receipt" ], "allowed_surfaces": [ "action.scan_document", "action.scan_receipt", "action.scan_mail" ], "notes": "Use anywhere camera-backed document capture is offered." }, { "category": "system", "family": "action", "name": "Trash", "stable_id": "trash", "export_name": "trash", "raw_svg_path": "icons/system/trash.svg", "compact_priority": "secondary", "allowed_surface_families": [ "action.delete_attachment", "action.delete_record", "action.remove_item" ], "allowed_surfaces": [ "action.delete_record", "action.delete_attachment", "action.remove_item" ], "notes": "Use only for destructive delete. Do not use for archive." }, { "category": "system", "family": "action", "name": "Filter", "stable_id": "filter", "export_name": "filter", "raw_svg_path": "icons/system/filter.svg", "compact_priority": "secondary", "allowed_surface_families": [ "list.filter_button", "search.filter_sheet_trigger", "table.filter_control" ], "allowed_surfaces": [ "list.filter_button", "search.filter_sheet_trigger", "table.filter_control" ], "notes": "Use wherever scoped filtering exists." }, { "category": "system", "family": "action", "name": "Sort", "stable_id": "sort", "export_name": "sort", "raw_svg_path": "icons/system/sort.svg", "compact_priority": "secondary", "allowed_surface_families": [ "list.sort_button", "search.sort_control", "table.sort_control" ], "allowed_surfaces": [ "list.sort_button", "table.sort_control", "search.sort_control" ], "notes": "Use wherever order changes are available." }, { "category": "system", "family": "action", "name": "Close", "stable_id": "close", "export_name": "close", "raw_svg_path": "icons/system/close.svg", "compact_priority": "critical", "allowed_surface_families": [ "banner.dismiss_button", "modal.close_button", "sheet.close_button" ], "allowed_surfaces": [ "modal.close_button", "sheet.close_button", "banner.dismiss_button" ], "notes": "Use for close and dismiss only." }, { "category": "system", "family": "action", "name": "More", "stable_id": "more", "export_name": "more", "raw_svg_path": "icons/system/more.svg", "compact_priority": "critical", "allowed_surface_families": [ "header.more_menu_trigger", "row.more_menu_trigger", "toolbar.overflow_button" ], "allowed_surfaces": [ "toolbar.overflow_button", "row.more_menu_trigger", "header.more_menu_trigger" ], "notes": "The overflow trigger is the only unlabeled icon button allowed in compact toolbars." }, { "category": "system", "family": "action", "name": "Check", "stable_id": "check", "export_name": "check", "raw_svg_path": "icons/system/check.svg", "compact_priority": "secondary", "allowed_surface_families": [ "action.confirm_button", "completion.inline_confirm", "selection.selected_state" ], "allowed_surfaces": [ "action.confirm_button", "selection.selected_state", "completion.inline_confirm" ], "notes": "Use for confirm/selected/completed actions, not for status chips (status uses Confirmed)." }, { "category": "system", "family": "object", "name": "Person", "stable_id": "person", "export_name": "person", "raw_svg_path": "icons/system/person.svg", "compact_priority": "critical", "allowed_surface_families": [ "address_book.primary_rows", "metadata.person", "row.person", "search.result" ], "allowed_surfaces": [ "row.person", "metadata.person", "search.result.person", "address_book.primary_rows" ], "notes": "Use as the leading icon for person records and person metadata." }, { "category": "system", "family": "object", "name": "Place", "stable_id": "place", "export_name": "place", "raw_svg_path": "icons/system/place.svg", "compact_priority": "critical", "allowed_surface_families": [ "metadata.place", "row.place", "search.result", "spot.location_rows" ], "allowed_surfaces": [ "row.place", "metadata.place", "search.result.place", "spot.location_rows" ], "notes": "Use for operational places such as stay, work, shower, pickup, and charging locations." }, { "category": "system", "family": "object", "name": "Clock", "stable_id": "clock", "export_name": "clock", "raw_svg_path": "icons/system/clock.svg", "compact_priority": "critical", "allowed_surface_families": [ "metadata.time", "row.time_window", "timeline.time" ], "allowed_surfaces": [ "metadata.time", "row.time_window", "timeline.time" ], "notes": "Use for time-of-day metadata only." }, { "category": "system", "family": "object", "name": "Calendar Day", "stable_id": "calendar-day", "export_name": "calendarDay", "raw_svg_path": "icons/system/calendar-day.svg", "compact_priority": "secondary", "allowed_surface_families": [ "appointment.date", "bill.due_date", "metadata.date", "row.date" ], "allowed_surfaces": [ "metadata.date", "row.date", "appointment.date", "bill.due_date" ], "notes": "Use for date-specific metadata." }, { "category": "system", "family": "object", "name": "Link/Pivot", "stable_id": "link", "export_name": "link", "raw_svg_path": "icons/system/link.svg", "compact_priority": "critical", "allowed_surface_families": [ "linked.section_header", "pivot.button", "related_in_settle.section_header" ], "allowed_surfaces": [ "linked.section_header", "pivot.button", "related_in_settle.section_header" ], "notes": "Use as the section icon for Linked / Related in Settle and for explicit pivot controls." }, { "category": "system", "family": "object", "name": "Packet", "stable_id": "packet", "export_name": "packet", "raw_svg_path": "icons/system/packet.svg", "compact_priority": "critical", "allowed_surface_families": [ "packet.builder_header", "papers.packet_rows", "search.result", "share.packet_rows" ], "allowed_surfaces": [ "papers.packet_rows", "share.packet_rows", "search.result.packet", "packet.builder_header" ], "notes": "Use for packet objects and packet actions." }, { "category": "system", "family": "object", "name": "Dollar", "stable_id": "dollar", "export_name": "dollar", "raw_svg_path": "icons/system/dollar.svg", "compact_priority": "critical", "allowed_surface_families": [ "base.cost_rows", "ledger.money_rows", "metadata.amount", "wallet.money_rows" ], "allowed_surfaces": [ "wallet.money_rows", "ledger.money_rows", "base.cost_rows", "metadata.amount" ], "notes": "Use for money rows and amount metadata." }, { "category": "system", "family": "object", "name": "Star", "stable_id": "star", "export_name": "star", "raw_svg_path": "icons/system/star.svg", "compact_priority": "secondary", "allowed_surface_families": [ "favorite.toggle", "preferred_person_badge", "preferred_place_badge" ], "allowed_surfaces": [ "favorite.toggle", "preferred_place_badge", "preferred_person_badge" ], "notes": "Use for pinned/preferred/favorite state only." }, { "category": "system", "family": "object", "name": "Repeat", "stable_id": "repeat", "export_name": "repeat", "raw_svg_path": "icons/system/repeat.svg", "compact_priority": "secondary", "allowed_surface_families": [ "bill.recurring_metadata", "laundry_cycle_rows", "recurring_rule_rows" ], "allowed_surfaces": [ "recurring_rule_rows", "laundry_cycle_rows", "bill.recurring_metadata" ], "notes": "Use for recurring items and cadence." }, { "category": "system", "family": "object", "name": "Phone", "stable_id": "phone", "export_name": "phone", "raw_svg_path": "icons/system/phone.svg", "compact_priority": "secondary", "allowed_surface_families": [ "call_action_rows", "contact.phone_rows", "emergency_contact_rows" ], "allowed_surfaces": [ "contact.phone_rows", "call_action_rows", "emergency_contact_rows" ], "notes": "Use when the value is a phone number or a call action." }, { "category": "system", "family": "object", "name": "Bell", "stable_id": "bell", "export_name": "bell", "raw_svg_path": "icons/system/bell.svg", "compact_priority": "secondary", "allowed_surface_families": [ "alert.subscription_rows", "notification.preference_rows", "promise.reminder_rows" ], "allowed_surfaces": [ "promise.reminder_rows", "notification.preference_rows", "alert.subscription_rows" ], "notes": "Use for reminders and alert settings." }, { "category": "system", "family": "object", "name": "Archive", "stable_id": "archive", "export_name": "archive", "raw_svg_path": "icons/system/archive.svg", "compact_priority": "secondary", "allowed_surface_families": [ "archive.rows", "mail.archive_section", "papers.archive_section" ], "allowed_surfaces": [ "archive.rows", "mail.archive_section", "papers.archive_section" ], "notes": "Use for archived collections and archive destinations. Do not use for delete." }, { "category": "system", "family": "object", "name": "Pin", "stable_id": "pin", "export_name": "pin", "raw_svg_path": "icons/system/pin.svg", "compact_priority": "secondary", "allowed_surface_families": [ "mail.pickup_point_rows", "parking_spot_rows", "pickup_point_rows", "saved_place_rows" ], "allowed_surfaces": [ "saved_place_rows", "parking_spot_rows", "pickup_point_rows", "mail.pickup_point_rows" ], "notes": "Use only inside product UI for operationally pinned places and pickup points. Do not use on public marketing pages." }, { "category": "system", "family": "privacy", "name": "Lock", "stable_id": "lock", "export_name": "lock", "raw_svg_path": "icons/system/lock.svg", "compact_priority": "critical", "allowed_surface_families": [ "locked_section_header", "privacy.lock_action", "record.lock_toggle" ], "allowed_surfaces": [ "privacy.lock_action", "record.lock_toggle", "locked_section_header" ], "notes": "Use when the user is locking content or when a domain is currently locked." }, { "category": "system", "family": "privacy", "name": "Unlock", "stable_id": "unlock", "export_name": "unlock", "raw_svg_path": "icons/system/unlock.svg", "compact_priority": "secondary", "allowed_surface_families": [ "privacy.unlock_action", "step_up_reveal_action" ], "allowed_surfaces": [ "privacy.unlock_action", "step_up_reveal_action" ], "notes": "Use only for explicit unlock/reveal after a lock state." }, { "category": "system", "family": "privacy", "name": "Eye", "stable_id": "eye", "export_name": "eye", "raw_svg_path": "icons/system/eye.svg", "compact_priority": "secondary", "allowed_surface_families": [ "detail.reveal_preview_toggle", "privacy.show_value_toggle" ], "allowed_surfaces": [ "privacy.show_value_toggle", "detail.reveal_preview_toggle" ], "notes": "Use to reveal a masked preview. Do not use as a generic open/view icon." }, { "category": "system", "family": "privacy", "name": "Eye Off", "stable_id": "eye-off", "export_name": "eyeOff", "raw_svg_path": "icons/system/eye-off.svg", "compact_priority": "secondary", "allowed_surface_families": [ "detail.remask_toggle", "privacy.hide_value_toggle" ], "allowed_surfaces": [ "privacy.hide_value_toggle", "detail.remask_toggle" ], "notes": "Use to hide or remask a visible value." }, { "category": "system", "family": "privacy", "name": "Masked Shield", "stable_id": "masked", "export_name": "masked", "raw_svg_path": "icons/system/masked.svg", "compact_priority": "critical", "allowed_surface_families": [ "borrowed_device_banner", "navigator.masked_indicator", "privacy.masked_mode_chip" ], "allowed_surfaces": [ "privacy.masked_mode_chip", "borrowed_device_banner", "navigator.masked_indicator" ], "notes": "Use for masked mode and borrowed-device privacy posture." }, { "category": "system", "family": "privacy", "name": "Settings", "stable_id": "settings", "export_name": "settings", "raw_svg_path": "icons/system/settings.svg", "compact_priority": "secondary", "allowed_surface_families": [ "app.settings", "more_menu.settings_link", "preferences.entry" ], "allowed_surfaces": [ "preferences.entry", "app.settings.entry", "more_menu.settings_link" ], "notes": "Use on Settings / Preferences entry points only." }, { "category": "system", "family": "privacy", "name": "Sync", "stable_id": "sync", "export_name": "sync", "raw_svg_path": "icons/system/sync.svg", "compact_priority": "secondary", "allowed_surface_families": [ "device.sync_status", "settings.sync_status", "sync.status_row" ], "allowed_surfaces": [ "sync.status_row", "device.sync_status", "settings.sync_status" ], "notes": "Use for quiet sync state, manual sync, and sync diagnostics." }, { "category": "status", "family": "status", "name": "Confirmed", "stable_id": "confirmed", "export_name": "confirmed", "raw_svg_path": "icons/status/confirmed.svg", "compact_priority": "critical", "allowed_surface_families": [ "status_badge.ready", "status_chip.confirmed", "summary.confirmed" ], "allowed_surfaces": [ "status_chip.confirmed", "status_badge.ready", "summary.confirmed" ], "notes": "Use as the leading icon for confirmed/ready/available statuses." }, { "category": "status", "family": "status", "name": "Attention", "stable_id": "attention", "export_name": "attention", "raw_svg_path": "icons/status/attention.svg", "compact_priority": "critical", "allowed_surface_families": [ "status_badge.resolve", "status_chip.attention", "summary.needs_action" ], "allowed_surfaces": [ "status_chip.attention", "status_badge.resolve", "summary.needs_action" ], "notes": "Use as the leading icon for due/watch/resolve statuses." }, { "category": "status", "family": "status", "name": "Neutral", "stable_id": "neutral", "export_name": "neutral", "raw_svg_path": "icons/status/neutral.svg", "compact_priority": "critical", "allowed_surface_families": [ "status_badge.review", "status_chip.neutral", "summary.pending" ], "allowed_surfaces": [ "status_chip.neutral", "status_badge.review", "summary.pending" ], "notes": "Use as the leading icon for review/waiting/set states." }, { "category": "status", "family": "status", "name": "Missing", "stable_id": "missing", "export_name": "missing", "raw_svg_path": "icons/status/missing.svg", "compact_priority": "critical", "allowed_surface_families": [ "empty_state.missing", "status_badge.gap", "status_chip.missing" ], "allowed_surfaces": [ "status_chip.missing", "status_badge.gap", "empty_state.missing" ], "notes": "Use as the leading icon for missing/not-set/gap states." }, { "category": "status", "family": "status", "name": "Locked Record", "stable_id": "locked-record", "export_name": "lockedRecord", "raw_svg_path": "icons/status/locked-record.svg", "compact_priority": "critical", "allowed_surface_families": [ "row.locked_record", "status_chip.locked_record", "summary.locked_record" ], "allowed_surfaces": [ "status_chip.locked_record", "row.locked_record", "summary.locked_record" ], "notes": "Use only when the record itself is intentionally locked, not for generic security controls." } ], "compact_priority_rules": [ "Compact width keeps exactly four persistent bottom-bar destinations: Tonight, This week, Search, Apps.", "Compact width keeps Capture as a separate floating pill with icon and label.", "Compact width shows a leading app icon in the current app header.", "Compact width shows a leading icon on every search result row.", "Compact width shows a leading icon on every object row that identifies a person, place, packet, dollar amount, date, or time.", "Compact width shows a leading status icon inside every status chip.", "Compact width shows the Link/Pivot icon on the Linked section header and app icons on related-app rows.", "Compact width does not show redundant decorative section-header icons beyond the ones explicitly listed in this packet.", "Compact width does not repeat the same icon in both the leading slot and the trailing chip slot for the same row.", "Compact width does not use unlabeled standalone icon buttons except Back, Close, and More." ], "usage_contract": { "global_mandates": [ "Use the Settle icon set everywhere the product needs an icon. Do not substitute a library icon, an emoji, or a one-off SVG.", "Render every production icon through one canonical icon registry. Do not paste ad hoc duplicate SVGs into feature components.", "Keep the public site icon-light. Use app icons and Porch Light there; do not bring action, privacy, or status icon clutter onto marketing surfaces.", "Keep the product icon-explicit. Navigation, app identity, object type, status state, privacy posture, and direct actions all use icons.", "On compact screens, icons exist to compress meaning, not to decorate. Preserve the required icon placements and remove decorative duplicates.", "Keep labels visible for all persistent navigation controls on compact screens.", "Do not place all twelve apps in bottom navigation. The bottom bar remains Tonight, This week, Search, Apps, with Capture as a separate persistent action.", "Back is local. Use the Back icon only for within-destination movement. Use Return only for cross-app return chips created by a pivot.", "Every status chip must include the correct status icon. Do not render bare colored pills without icon support.", "Every search result row must lead with a type icon or app icon so the user can distinguish person, place, packet, stay, app jump, and document at a glance.", "Every rendered icon host must include `data-icon=\"\"` so verification can assert the correct icon usage.", "Every icon button without adjacent label must supply an accessible label. Every icon with adjacent visible text is `aria-hidden`." ], "surface_contracts": [ { "surface_id": "shell.mobile.bottom_bar", "description": "Persistent compact-width destination bar.", "required_items": [ { "slot": 1, "label": "Tonight", "icon": "tonight", "destination": "now" }, { "slot": 2, "label": "This week", "icon": "this-week", "destination": "week" }, { "slot": 3, "label": "Search", "icon": "search", "destination": "search" }, { "slot": 4, "label": "Apps", "icon": "apps", "destination": "apps" } ], "rules": [ "Each item renders icon above label.", "Labels remain visible at all times.", "No fifth destination is added.", "No app icon is placed directly in the bottom bar." ] }, { "surface_id": "shell.mobile.capture_pill", "description": "Persistent compact-width capture action.", "required_items": [ { "label": "Capture", "icon": "capture", "action": "quick_capture.open" } ], "rules": [ "Render as a floating pill in the lower third.", "Show icon and label together." ] }, { "surface_id": "shell.mobile.apps_sheet", "description": "Full-height grouped app library on compact widths.", "required_items": [ { "label": "Papers", "icon": "papers", "app_id": "papers" }, { "label": "Mail", "icon": "mail", "app_id": "mail" }, { "label": "Wallet", "icon": "wallet", "app_id": "wallet" }, { "label": "Ledger", "icon": "ledger", "app_id": "ledger" }, { "label": "Desk", "icon": "desk", "app_id": "desk" }, { "label": "Base", "icon": "base", "app_id": "base" }, { "label": "Spot", "icon": "spot", "app_id": "spot" }, { "label": "Wash", "icon": "wash", "app_id": "wash" }, { "label": "Outlet", "icon": "outlet", "app_id": "outlet" }, { "label": "Locker", "icon": "locker", "app_id": "locker" }, { "label": "Kit", "icon": "kit", "app_id": "kit" }, { "label": "Address Book", "icon": "address-book", "app_id": "address_book" } ], "rules": [ "Every app row begins with the app icon.", "Recent section rows also begin with the app icon.", "Rows stay text + icon, never icon-only tiles." ] }, { "surface_id": "shell.desktop.sidebar.horizons", "description": "Persistent horizon navigation on expanded and large widths.", "required_items": [ { "label": "Tonight", "icon": "tonight", "destination": "now" }, { "label": "This week", "icon": "this-week", "destination": "week" }, { "label": "Search", "icon": "search", "destination": "search" } ], "rules": [ "Each row shows icon, title, and one-line meta.", "Do not replace with icon-only rail on expanded or large widths." ] }, { "surface_id": "shell.desktop.sidebar.apps", "description": "Persistent grouped app library on expanded and large widths.", "required_items": [ { "label": "Papers", "icon": "papers", "app_id": "papers" }, { "label": "Mail", "icon": "mail", "app_id": "mail" }, { "label": "Wallet", "icon": "wallet", "app_id": "wallet" }, { "label": "Ledger", "icon": "ledger", "app_id": "ledger" }, { "label": "Desk", "icon": "desk", "app_id": "desk" }, { "label": "Base", "icon": "base", "app_id": "base" }, { "label": "Spot", "icon": "spot", "app_id": "spot" }, { "label": "Wash", "icon": "wash", "app_id": "wash" }, { "label": "Outlet", "icon": "outlet", "app_id": "outlet" }, { "label": "Locker", "icon": "locker", "app_id": "locker" }, { "label": "Kit", "icon": "kit", "app_id": "kit" }, { "label": "Address Book", "icon": "address-book", "app_id": "address_book" } ], "rules": [ "Each app row shows app icon, label, and one-line descriptor.", "App groups remain text headers, not icons." ] }, { "surface_id": "shell.related_in_settle", "description": "Right context panel on desktop and inline linked section on mobile detail views.", "required_items": [ { "label": "Related in Settle", "icon": "link" }, { "label": "Related app rows", "icon_source": "target_app_icon" } ], "rules": [ "The section heading uses Link/Pivot.", "Each related app row uses the target app icon, not a generic link icon.", "Cross-app temporary return affordances use Return." ] }, { "surface_id": "app.header.identity", "description": "Current app identity in any in-product app header.", "required_items": [ { "label": "Papers", "icon": "papers", "app_id": "papers" }, { "label": "Mail", "icon": "mail", "app_id": "mail" }, { "label": "Wallet", "icon": "wallet", "app_id": "wallet" }, { "label": "Ledger", "icon": "ledger", "app_id": "ledger" }, { "label": "Desk", "icon": "desk", "app_id": "desk" }, { "label": "Base", "icon": "base", "app_id": "base" }, { "label": "Spot", "icon": "spot", "app_id": "spot" }, { "label": "Wash", "icon": "wash", "app_id": "wash" }, { "label": "Outlet", "icon": "outlet", "app_id": "outlet" }, { "label": "Locker", "icon": "locker", "app_id": "locker" }, { "label": "Kit", "icon": "kit", "app_id": "kit" }, { "label": "Address Book", "icon": "address-book", "app_id": "address_book" } ], "rules": [ "The current app icon appears immediately before the app label/title.", "Do not omit the app icon in compact headers." ] }, { "surface_id": "app.toolbar.actions", "description": "Visible toolbar buttons and menu actions.", "required_items": [ { "label": "Add / Create", "icon": "plus" }, { "label": "Edit", "icon": "edit" }, { "label": "Share", "icon": "share" }, { "label": "Export", "icon": "export" }, { "label": "Upload", "icon": "upload" }, { "label": "Scan", "icon": "scan" }, { "label": "Delete", "icon": "trash" }, { "label": "Filter", "icon": "filter" }, { "label": "Sort", "icon": "sort" }, { "label": "Close", "icon": "close" }, { "label": "More", "icon": "more" }, { "label": "Confirm", "icon": "check" } ], "rules": [ "Visible primary and secondary buttons render icon before label.", "Overflow menu rows render the same icon before label.", "Only More may appear as an unlabeled icon button in compact toolbars." ] }, { "surface_id": "rows.object_identity", "description": "List rows and search results that represent an object type.", "required_items": [ { "object_type": "person", "icon": "person" }, { "object_type": "place", "icon": "place" }, { "object_type": "packet", "icon": "packet" }, { "object_type": "money_row", "icon": "dollar" }, { "object_type": "time_row", "icon": "clock" }, { "object_type": "date_row", "icon": "calendar-day" }, { "object_type": "recurring_row", "icon": "repeat" }, { "object_type": "phone_row", "icon": "phone" }, { "object_type": "archive_row", "icon": "archive" }, { "object_type": "pinned_place_row", "icon": "pin" }, { "object_type": "favorite_row", "icon": "star" }, { "object_type": "reminder_row", "icon": "bell" } ], "rules": [ "Each primary row gets one leading object icon.", "Do not stack multiple leading icons on the same row.", "Use secondary metadata icons only when the metadata is a true date/time/value field." ] }, { "surface_id": "status_chips", "description": "Semantic status chips and badges.", "required_items": [ { "state_family": "confirmed", "icon": "confirmed" }, { "state_family": "needs_attention", "icon": "attention" }, { "state_family": "neutral_review", "icon": "neutral" }, { "state_family": "missing_gap", "icon": "missing" }, { "state_family": "locked_record", "icon": "locked-record" } ], "rules": [ "Every status chip begins with the correct status icon.", "Do not use bare color-only pills." ] }, { "surface_id": "privacy_controls", "description": "Masking, reveal, locking, and sync/privacy system controls.", "required_items": [ { "control": "lock_record", "icon": "lock" }, { "control": "unlock_record", "icon": "unlock" }, { "control": "show_value", "icon": "eye" }, { "control": "hide_value", "icon": "eye-off" }, { "control": "masked_mode", "icon": "masked" }, { "control": "settings", "icon": "settings" }, { "control": "sync_status", "icon": "sync" } ], "rules": [ "Use Lock/Unlock for record security state changes.", "Use Eye/Eye Off for preview reveal/remask.", "Use Masked to indicate masked mode and borrowed-device mode." ] }, { "surface_id": "site.homepage.app_grid", "description": "Public homepage twelve-app inventory.", "required_items": [ { "label": "Papers", "icon": "papers", "app_id": "papers" }, { "label": "Mail", "icon": "mail", "app_id": "mail" }, { "label": "Wallet", "icon": "wallet", "app_id": "wallet" }, { "label": "Ledger", "icon": "ledger", "app_id": "ledger" }, { "label": "Desk", "icon": "desk", "app_id": "desk" }, { "label": "Base", "icon": "base", "app_id": "base" }, { "label": "Spot", "icon": "spot", "app_id": "spot" }, { "label": "Wash", "icon": "wash", "app_id": "wash" }, { "label": "Outlet", "icon": "outlet", "app_id": "outlet" }, { "label": "Locker", "icon": "locker", "app_id": "locker" }, { "label": "Kit", "icon": "kit", "app_id": "kit" }, { "label": "Address Book", "icon": "address-book", "app_id": "address_book" } ], "rules": [ "Every app cell shows the app icon before or above the app name.", "No other icon categories appear in the app grid." ] }, { "surface_id": "site.homepage.porch_light_block", "description": "Public homepage Porch Light block.", "required_items": [ { "label": "Porch Light", "icon": "porch-light" } ], "rules": [ "Use Porch Light only in the Porch Light block.", "Do not decorate the homepage hero with shell or action icons." ] }, { "surface_id": "site.about.app_inventory", "description": "Public about-page calm inventory of the twelve apps.", "required_items": [ { "label": "Papers", "icon": "papers", "app_id": "papers" }, { "label": "Mail", "icon": "mail", "app_id": "mail" }, { "label": "Wallet", "icon": "wallet", "app_id": "wallet" }, { "label": "Ledger", "icon": "ledger", "app_id": "ledger" }, { "label": "Desk", "icon": "desk", "app_id": "desk" }, { "label": "Base", "icon": "base", "app_id": "base" }, { "label": "Spot", "icon": "spot", "app_id": "spot" }, { "label": "Wash", "icon": "wash", "app_id": "wash" }, { "label": "Outlet", "icon": "outlet", "app_id": "outlet" }, { "label": "Locker", "icon": "locker", "app_id": "locker" }, { "label": "Kit", "icon": "kit", "app_id": "kit" }, { "label": "Address Book", "icon": "address-book", "app_id": "address_book" } ], "rules": [ "Every app cell shows the app icon before or above the app name.", "No status or action icons appear in this grid." ] }, { "surface_id": "site.about.local_first_block", "description": "Public about-page Porch Light / local-first section.", "required_items": [ { "label": "Porch Light", "icon": "porch-light" } ], "rules": [ "Use Porch Light as the only system icon in the section." ] } ] }, "pin_requirement_note": "pin is required in the system icon registry and may not be omitted from raw assets, registry maps, schema validation, or reference surfaces." } }