tasty.gallery
Overlays · Tutorial
← Design
Specs
Theme

Overlays · Tutorial

Explore the tutorial markers, explanations, and topic list opened from Tools → Tutorial. Use them to guide someone through the parts of the app.

This page uses a saved copy of the design system, last changed on . It may differ from the current design source.

When to use it
Read the usage notes to choose a component for your task.
Design tokens
See which tokens each example uses and what they control.
Check dimensions
Turn on Specs at the top right to show the 4px grid and measurements.

Marker overlay — floating geometric marker

Marker — an independent shape drawn over a target

After Modal / Popup / Toast / Banner / Modifier-hint, Marker is the 6th overlay concept — and the only one carrying no message. It is a pure geometric ring/leader drawn at a rect on the top z-layer, never touching the target widget's own border, pointer-events:none so clicks pass through. Fired only by the Tools → Tutorial flow.

Layout spec
family
Modal · Popup · Toast · Banner · Modifier-hint · Marker
z-layer
top — above all content
pointer
none (clicks pass through)
ring width
2px (--tasty-focus-ring-width)
radius
4px (--tasty-radius)
highlight
static glow default · pulse opt (reduced-motion → static)
fires on
Tools → Tutorial only
Tokens used
accent-primary— ring + halofocus-ring-width— 2px strokescrim-bg— spotlight dimradius— corner

Decision 3 (강조): default = 2px solid ring + static glow; pulse is opt-in only and falls back to a static ring under prefers-reduced-motion. Decision 1 (딤): spotlight scrim ON by default, user-disableable.

Callout bubble

Callout — title · body · progress · Back/Next/Skip · 4-way tail

The guidance bubble pinned to a marker. Fixed 244px wide (i18n growth absorbed vertically), a tail points at the marker in one of 4 directions, and edge-avoidance flips the tail + clamps the body into the 8px safe area while the tail keeps aiming at the marker corner.

Layout spec
width
244px fixed
tail
up · down · left · right (12px diamond)
progress
2/5 label + dot rail
buttons
Skip (link) · Back (secondary) · Next (primary)
first step
Back hidden
last step
Next → 'Done', reopens topic popup
placement
below → above → right → left; flip on overflow; clamp to 8px safe area
Tokens used
surface-raised— bubble fillborder-strong— 1px edge + tailshadow-modal— floating liftaccent-primary— step · active dot · Next

Do reuse the DS Button (primary Next / secondary Back) and keep Skip as a low-emphasis link — the callout is guidance, not a decision surface.

Topic-list popup

Topic list — centered popup, scrollable, '진행' to start

The entry surface (CenteredFocused popup, standard scrim). Title + a scrollable list of topics (name + description, hover / selected / done states) + a primary 진행 button. v1 ships one topic; the list scrolls as topics grow.

Layout spec
type
CenteredFocused popup + scrim
width
360px
list
max-height 200px → internal scroll
row states
hover = overlay-hover · selected = surface-active + accent index cap · done = accent-success ✓
footer
Esc hint + 진행 (primary)
Tokens used
bg-panel— popup fillscrim-bg— dim behindsurface-active— selected rowaccent-success— done ✓

Composite — a tutorial step in place

Step 1 / 4 — 워크스페이스

Popup closed: marker (glow ring) + spotlight dim + callout only. Per Decision 2, step 1 wraps the whole content area (tabs + surface + status, sidebar excluded); later steps shrink the marker to tab → pane → surface, revealing containment.

동작: Next → step 2 (탭 헤더로 마커 축소) · Back → 이전 · Skip/Esc → 주제 목록 팝업 복귀 · 마지막 step Next → 목록 팝업 재open. 마커·딤은 pointer-events:none.