Chrome · Startup
Preview the screen shown while Tasty starts. It combines the logo, a spinner, and the current startup phase until the app is ready.
This page uses a saved copy of the design system, last changed on . It may differ from the current design source.
Default — 1280 × 720 (logical)
Boot screen — full client area, centered stack
Shown from the very first presented GPU frame until Ready (GpuInit → WaitingPlugins → RestoringLayout). App-background fill, no chrome (sidebar/tabs/status don't exist yet), non-interactive, short + variable, frame-drop tolerant. Frame shown at 60%; token dimensions are real values.
Non-interactive · frame-drop tolerant: single constant-velocity arc, angle = f(time), so a 50–300ms atomic boot task (GPU init) that stalls the frame loop won't strobe or jump.
Minimal window — 640 × 480 (true size)
Same stack, no responsive shrink
Minimum window size. Stack elements, gaps, and spinner size are identical to the default — centered placement still has ample margin, so implementation needs one centered layout regardless of window size.
Phase variants (3) + no-text
Fixed-height phase slot — swap/omit never shifts the stack
Phase strings map 1:1 to the boot state machine and are confirmed in English → i18n keys verbatim (en/ko/ja). The slot always occupies --tasty-size-16 whether filled or empty, so the lockup + spinner never move; phases not all appearing (e.g. fresh install with no layout restore) is fine.
Spinner spec
Spinner.jsx reused — size 16 → 32 for boot hero
Same visual vocabulary as components/feedback/Spinner.jsx (thin arc on a faint track). Only the size is bumped one step to a boot-hero 32px; no new spinner invented. reduced-motion freezes the arc (Spinner's built-in static fallback).
Latte variant (theme-following)
Follows the saved theme — no dark flash for light users
Settings are loaded by boot time, so the loading screen adopts the user's theme. Mocha is the default (above); this Latte frame is the same tokens resolved in the light theme — a light user never sees a dark flash.
Same token names, light values. The --tasty-bg-app fill doubles as the GPU clear color, so it must be read from the resolved theme (not hard-coded dark) on the implementing side.
First-run shell setup — 2026-09-29
Shell path form — Quit / Use this shell
Shown on the boot surface when no usable shell is configured (render_shell_setup). Same fill and lockup as the loading screen, then a 360-wide form: title, a sub that may wrap to two lines (body, line-height-ui; never truncated), mono path Input, a validation line (glyph + word), and a right-aligned button row. The confirm moves to the shared Button primary (md) — the hand-painted accent-success fill goes, there is no success variant — and is labelled by what it does, Use this shell (the untranslated "OK" goes; i18n key). Quit (was Cancel — it exits the app) is Button secondary. The validation line has one message per host verdict, and on Windows a warning caption names the missing Git Bash (2026-10-06). While the path is not an executable, the primary is disabled with the shared ink rule; the validation line says why.
Shutdown screen — 2026-10-07
Same surface as boot, shutdown phases
When quitting has work to wait for, the window shows the boot surface again — same fill, lockup, spinner and fixed phase slot, no chrome, non-interactive — with the shutdown phase in the slot. Values are identical to the boot screen; only the copy differs. If there is nothing to wait for, no frame is drawn and the window just closes.
No new tokens. Phase copy is new i18n (shutdown.saving_layout · shutdown.reclaiming_boot_worker · shutdown.closing_surfaces · shutdown.stopping_plugins); keep the trailing ellipsis character.
Boot error screen — 2026-10-10 (b12)
Could not start — engine · data folder in use · webhook port
Shown instead of the app when Tasty cannot start. It is the same boot stage as the loading and first-run shell screens, so it takes the same structure: app-bg fill, the lockup, then a 360 form (--tasty-boot-form-width). The diagnostic card goes (its 460 width, 120 × 34 Quit and 6px corner had no token). The title row leads with alertCircle in --tasty-boot-error-glyph (danger); the title itself is text-primary 14 / 600 like every other title — the glyph carries the tone, so danger is not repeated on the title and the button. Body (13, text-secondary) holds the sentence and the OS detail; guidance (caption, muted) says what to do, with CLI pieces as code runs. Quit is the shared Button secondary md, right-aligned, as on shell setup — there is no danger-fill variant and quitting is the only choice, not a destructive one. Esc, Enter and the window close all quit with code 1.
Copy is unchanged from the app (boot_error.*); the OS error and path in the samples are illustrative. The webhook guidance shown here is a sample of the longest case (three runs) — use the app's string.