Files
endorphin-tessera-gui/docs/start-page-design.md

2.7 KiB
Raw Permalink Blame History

Default-page design

Endor is a working object and UI environment. This page should help someone begin working, with three existing actions, rather than explain the VM or advertise future model connections. Layout, painting and callbacks live in Endor source.

Reference decisions

User reference Adopt Adapt for Endor
Codex Clear selected tab and restrained grouped actions Keep the existing rounded tabs and continuous top/left chrome; omit its tool directory
Chrome A recognizable visual center and immediately usable actions Use a compact centered start surface; no search field without working search
Obsidian A short vertical list of equal-sized quick actions Three 360 × 40 logical-pixel action rows with consistent text alignment and spacing
VS Code Quiet branding and aligned action/shortcut information 28 px wordmark, 14 px supporting text, separate shortcut rows; no oversized slogan

Tokens and composition

  • Chrome: #E6E9ED; canvas: existing #F7F7F5; action rows have no fill or border.
  • Text: #30343B; supporting text: #80858D; action labels use existing native interface text.
  • Typeface: existing native interface family with CJK fallback. A desktop tool should follow the OS text conventions; a decorative web font is inappropriate.
  • Type scale: 28 px wordmark, 14 px labels and supporting information.
  • Action height: 40 px; no visible container; vertical rhythm: 8 px.
  • Group width: 360 px; page centered in content constraints. The app's current minimum window is 720 × 480, leaving room for the full group and chrome.
  • Keep the normal native button focus outline and existing event handling.
                  Endor
        创建页面,或从一个示例开始。

          +  创建页面
          ↗  共享对象示例
          ◇  界面组合示例

       新建标签页       ⌘T / Ctrl+T
       关闭标签页       ⌘W / Ctrl+W

Review before implementation

The rejected surface had two competing large titles, prose wider than its actions, blue buttons of different widths and one long shortcut sentence. Replace those with one small wordmark, one functional hint, quiet text actions and paired shortcut rows. The first screenshot review still showed three white bordered blocks that the user found too prominent; those surfaces were removed, bringing the action treatment closer to VS Code while retaining Obsidian's short list.

Guidance reviewed: Anthropic's frontend-design SKILL.md (upstream main, retrieved 2026-10-24), using its plan/review/build/critique process. Only a temporary copy was fetched; no global skill, hooks, browser runtime or frontend dependency was installed. Native screenshot review and button activation checks follow the build.