{
  "version": 1,
  "name": "Five public app interfaces to study",
  "url": "https://swipefile.design/board/five-public-app-interfaces-to-study/",
  "markdown_url": "https://swipefile.design/board/five-public-app-interfaces-to-study/notes.md",
  "json_url": "https://swipefile.design/board/five-public-app-interfaces-to-study/data.json",
  "pdf_url": "https://swipefile.design/board/five-public-app-interfaces-to-study/export.pdf",
  "reference_count": 5,
  "unavailable_count": 0,
  "guidance": "Use these references for design principles. Follow the project brief and use original branding, content, and imagery. Captures document a particular date; they do not verify current product behavior.",
  "references": [
    {
      "slug": "dub-link-analytics",
      "name": "Dub — Shared link analytics",
      "kind": "app",
      "archetype": "Analytics Dashboard",
      "summary": "A public link analytics view pairs a single headline metric and trend chart with tabbed breakdowns for referrers, geography, and devices.",
      "use_for": "Public shared analytics for d.to/try, linked from Dub’s live demo.",
      "source_url": "https://app.dub.co/share/dash_6NSA6vNm017MZwfzt8SubNSZ",
      "reference_url": "https://swipefile.design/ref/dub-link-analytics/",
      "screenshot_url": "https://swipefile.design/_astro/preview.BIyK0VE5.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.DvMZrdYw.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "demo",
      "tags": [
        "analytics",
        "dashboard",
        "chart",
        "filters",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Public shared analytics for d.to/try, linked from Dub’s live demo.",
        "nav": "Top-level site navigation remains above a compact filter and time-range toolbar.",
        "layout": "Headline clicks metric, broad trend chart, then two-column breakdown panels.",
        "density": "Moderate; a clear overview precedes denser breakdown rows.",
        "color": "White and pale gray, dark text, restrained blue chart fill.",
        "typography": "Compact sans labels and a larger metric.",
        "pattern": "Keep time range and filters adjacent to the chart they affect.",
        "states": "This is a public shared view; data changes over time. Signed-in management and empty/error states were not captured.",
        "dont": "Do not confuse a public report with the authenticated analytics workspace."
      },
      "recreation_prompt": "# Design reference: Dub — Shared link analytics\nSource: https://app.dub.co/share/dash_6NSA6vNm017MZwfzt8SubNSZ\nSwipefile reference: https://swipefile.design/ref/dub-link-analytics/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Public shared analytics for d.to/try, linked from Dub’s live demo.\n- nav: Top-level site navigation remains above a compact filter and time-range toolbar.\n- layout: Headline clicks metric, broad trend chart, then two-column breakdown panels.\n- density: Moderate; a clear overview precedes denser breakdown rows.\n- color: White and pale gray, dark text, restrained blue chart fill.\n- typography: Compact sans labels and a larger metric.\n- pattern: Keep time range and filters adjacent to the chart they affect.\n- states: This is a public shared view; data changes over time. Signed-in management and empty/error states were not captured.\n- dont: Do not confuse a public report with the authenticated analytics workspace.\n\nUseful for: Public shared analytics for d.to/try, linked from Dub’s live demo.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "tally-form-editor",
      "name": "Tally — Document-style form builder",
      "kind": "app",
      "archetype": "Forms & Onboarding",
      "summary": "A form begins as a blank document with a title and inline starting choices, keeping editor chrome lighter than the content area.",
      "use_for": "Unsigned initial form editor.",
      "source_url": "https://tally.so/create",
      "reference_url": "https://swipefile.design/ref/tally-form-editor/",
      "screenshot_url": "https://swipefile.design/_astro/preview.C8kR29hz.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.A7wnyJBO.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "form",
        "editor",
        "empty-state",
        "onboarding",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Unsigned initial form editor.",
        "nav": "A slim top bar groups Customize, Preview, Publish, and account access.",
        "layout": "Wide document canvas with inline start, template, and import choices.",
        "density": "Low; most space is reserved for the document.",
        "color": "White, muted gray, blue action accents.",
        "typography": "Document-like sans text with a larger form title.",
        "pattern": "Make the empty state the first step of editing: type directly or choose a starting route.",
        "states": "Actual blank form state. No form was published or submitted.",
        "dont": "Do not hide the starting options behind a separate onboarding wizard."
      },
      "recreation_prompt": "# Design reference: Tally — Document-style form builder\nSource: https://tally.so/create\nSwipefile reference: https://swipefile.design/ref/tally-form-editor/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Unsigned initial form editor.\n- nav: A slim top bar groups Customize, Preview, Publish, and account access.\n- layout: Wide document canvas with inline start, template, and import choices.\n- density: Low; most space is reserved for the document.\n- color: White, muted gray, blue action accents.\n- typography: Document-like sans text with a larger form title.\n- pattern: Make the empty state the first step of editing: type directly or choose a starting route.\n- states: Actual blank form state. No form was published or submitted.\n- dont: Do not hide the starting options behind a separate onboarding wizard.\n\nUseful for: Unsigned initial form editor.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "arena-explore",
      "name": "Are.na — Explore channels and blocks",
      "kind": "app",
      "archetype": "Search & Discovery",
      "summary": "A restrained discovery grid lets channels and individual blocks share a visual browsing surface, with simple type and sort controls above it.",
      "use_for": "Public Explore feed of channels and blocks.",
      "source_url": "https://www.are.na/explore",
      "reference_url": "https://swipefile.design/ref/arena-explore/",
      "screenshot_url": "https://swipefile.design/_astro/preview.DVDm9xbN.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.CyAVaYjP.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "discovery",
        "gallery",
        "grid",
        "filter",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Public Explore feed of channels and blocks.",
        "nav": "Search and account actions above View and Sort controls.",
        "layout": "Open filter area followed by a multi-column grid of image, text, and channel cards.",
        "density": "Moderate; imagery carries more weight than interface chrome.",
        "color": "White, light gray dividers, black text; color comes from saved blocks.",
        "typography": "Small neutral sans interface labels.",
        "pattern": "Keep mixed content types recognizable while allowing them to coexist in one browsing grid.",
        "states": "Public feed as captured; content and ordering change. Private channels were not accessed.",
        "dont": "Do not make every metadata field compete with the content preview."
      },
      "recreation_prompt": "# Design reference: Are.na — Explore channels and blocks\nSource: https://www.are.na/explore\nSwipefile reference: https://swipefile.design/ref/arena-explore/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Public Explore feed of channels and blocks.\n- nav: Search and account actions above View and Sort controls.\n- layout: Open filter area followed by a multi-column grid of image, text, and channel cards.\n- density: Moderate; imagery carries more weight than interface chrome.\n- color: White, light gray dividers, black text; color comes from saved blocks.\n- typography: Small neutral sans interface labels.\n- pattern: Keep mixed content types recognizable while allowing them to coexist in one browsing grid.\n- states: Public feed as captured; content and ordering change. Private channels were not accessed.\n- dont: Do not make every metadata field compete with the content preview.\n\nUseful for: Public Explore feed of channels and blocks.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "savvycal-time-zones",
      "name": "SavvyCal — Time zone comparison",
      "kind": "app",
      "archetype": "Calendar & Scheduling",
      "summary": "A large local time anchors a horizontal hour rail and comparison cards, making a time difference visible before users need to read a city list.",
      "use_for": "Public time zone converter.",
      "source_url": "https://time.savvycal.com/",
      "reference_url": "https://swipefile.design/ref/savvycal-time-zones/",
      "screenshot_url": "https://swipefile.design/_astro/preview.D8jh8taw.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.CZoheCNv.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "calendar",
        "scheduling",
        "time-zone",
        "utility",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Public time zone converter.",
        "nav": "Time and zone selectors across the top, plus a Share action.",
        "layout": "Large date and time, horizontal timeline, then city comparison cards.",
        "density": "Low around the current time, denser further down the city list.",
        "color": "Warm cream, dark navy, white cards, green primary utility action.",
        "typography": "Large tabular-looking time numerals with compact sans labels.",
        "pattern": "Establish one reference time and show the offset beside every comparison.",
        "states": "Live current-time state; this capture does not book or share a meeting.",
        "dont": "Do not rely on zone abbreviations alone when a city and relative offset can clarify them."
      },
      "recreation_prompt": "# Design reference: SavvyCal — Time zone comparison\nSource: https://time.savvycal.com/\nSwipefile reference: https://swipefile.design/ref/savvycal-time-zones/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Public time zone converter.\n- nav: Time and zone selectors across the top, plus a Share action.\n- layout: Large date and time, horizontal timeline, then city comparison cards.\n- density: Low around the current time, denser further down the city list.\n- color: Warm cream, dark navy, white cards, green primary utility action.\n- typography: Large tabular-looking time numerals with compact sans labels.\n- pattern: Establish one reference time and show the offset beside every comparison.\n- states: Live current-time state; this capture does not book or share a meeting.\n- dont: Do not rely on zone abbreviations alone when a city and relative offset can clarify them.\n\nUseful for: Public time zone converter.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    },
    {
      "slug": "polotno-design-editor",
      "name": "Polotno — Canvas and asset editor",
      "kind": "app",
      "archetype": "Creative Tools",
      "summary": "A narrow asset rail and compact toolbar surround a large empty canvas, with page and zoom controls anchored at the bottom.",
      "use_for": "Public design editor, new untitled canvas.",
      "source_url": "https://polotno.com/studio",
      "reference_url": "https://swipefile.design/ref/polotno-design-editor/",
      "screenshot_url": "https://swipefile.design/_astro/preview.C2p3chwT.webp",
      "thumbnail_url": "https://swipefile.design/_astro/card.DPUEG_YW.webp",
      "captured": "2026-09-05",
      "capture_scope": "viewport",
      "provenance": "live",
      "tags": [
        "canvas",
        "editor",
        "creative-tools",
        "empty-state",
        "september-2026"
      ],
      "patterns": [],
      "design_notes": {
        "surface": "Public design editor, new untitled canvas.",
        "nav": "Left tool rail for assets, text, drawing, layers, and import; top actions for download and account access.",
        "layout": "Dark editor shell surrounding a light workspace and centered white canvas.",
        "density": "Low on the canvas, compact around the edges.",
        "color": "Dark charcoal chrome, gray workspace, white page.",
        "typography": "Small sans tool labels.",
        "pattern": "Keep tools at the edges and the artifact in the center; anchor zoom and page navigation consistently.",
        "states": "Actual empty canvas. No design was uploaded or exported.",
        "dont": "Do not mistake the empty canvas for a loading screen or fill it with invented customer work."
      },
      "recreation_prompt": "# Design reference: Polotno — Canvas and asset editor\nSource: https://polotno.com/studio\nSwipefile reference: https://swipefile.design/ref/polotno-design-editor/\nCaptured: 2026-09-05. This is a dated reference, not a claim about the current live product.\nCapture scope: one viewport. Do not infer unseen page sections or a complete user flow.\n\n## Objective\nAdapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.\n\n## Reference notes\n- surface: Public design editor, new untitled canvas.\n- nav: Left tool rail for assets, text, drawing, layers, and import; top actions for download and account access.\n- layout: Dark editor shell surrounding a light workspace and centered white canvas.\n- density: Low on the canvas, compact around the edges.\n- color: Dark charcoal chrome, gray workspace, white page.\n- typography: Small sans tool labels.\n- pattern: Keep tools at the edges and the artifact in the center; anchor zoom and page navigation consistently.\n- states: Actual empty canvas. No design was uploaded or exported.\n- dont: Do not mistake the empty canvas for a loading screen or fill it with invented customer work.\n\nUseful for: Public design editor, new untitled canvas.\n\n## Acceptance criteria\n- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.\n- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.\n- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.\n- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.\n- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.\n- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.\n\n## Quality bar\nClear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence."
    }
  ]
}