# Visual System

Style name: Product UI Showcase

## Core DNA

- Bright white ground with very pale blue-gray blob shapes, light-blue dot-matrix patches and four-point sparkle glints.
- Huge heavy Japanese gothic headlines in near-black navy with several words in vivid cobalt blue.
- White rounded-pill subline banner with a thin cobalt border, linked outward by blue dotted leader lines with round end dots.
- One large deep-navy rounded device frame as the dominant object, containing a light UI canvas.
- Inside the frame: a slim left icon rail with one filled cobalt active tile, a top status row of cobalt check chips, and a cobalt-to-mint progress bar.
- Light UI content tiles: checkbox task rows on gray placeholder lines, a flat vector person at a laptop with speech and lightbulb bubbles, donut and bar charts with a rising mint arrow.
- White rounded feature cards with very soft shadows, each opened by a circled outline numeral in cobalt or mint.
- Exactly three solid rounded label pills per slide, filled cobalt or mint with white type.
- Solid cobalt and mint block arrows pointing into and out of the product frame.
- One wide dark-navy rounded bottom band with a large flat target-and-arrow icon and mint-highlighted words.

## Intended Use

SaaS紹介、機能説明、プロダクトローンチに使う。大きなアプリ画面と注釈線と機能カードで、実際に動いている製品の手触りを見せる。

## Page Architecture

- One oversized headline.
- One subline banner.
- One dominant diagram occupying most of the body.
- Exactly three labels.
- One takeaway band.
- Three to six supporting icons that explain the diagram.

## Composition Grammar

- Cover: title slide with the deep-navy product frame centred, numbered feature cards flanking it and a dark-navy bottom band with a target icon.
- Problem: stalled product screen with unchecked steps, an error badge and three warning feature cards.
- Before-after: legacy gray screen beside the cobalt-to-mint product frame bridged by one block arrow.
- Three-step: three-stage status row inside the frame with three numbered feature cards on leader lines.
- Loop: three feature cards orbiting the frame on a closed cobalt-to-mint arrow ring.
- Checklist: enlarged frame showing a settings-style checklist screen with toggles and check rows.
- Roadmap: release-timeline rail of three milestone cards ending at a target-and-arrow icon.
- Matrix: 2x2 comparison board with a cobalt winning tile and a mint star badge.
- Case: three-pane usage-day strip inside one wide navy frame under a progress bar.
- Recap: central launch card over the dimmed product frame with three stacked action rows.
