# Visual System

Style name: API Docs Reference

## Core DNA

- A dark charcoal-navy left sidebar running the full height with a rounded cobalt `</>` app tile at the top.
- Sidebar nav rows pairing small line icons with gray placeholder bars and trailing dots, one row in a solid cobalt active state.
- A darker rounded code-tree block low in the sidebar with miniature blue, green, orange and gray lines.
- One large white page panel with rounded corners, a thin border, a soft drop shadow and a slim browser bar with three window dots.
- Huge clean geometric Japanese gothic headline with cobalt-blue leading characters, near-black charcoal body and mint-green final characters.
- One full-width 1px cobalt rule capped by small round endpoint dots directly under the headline.
- A subline row anchored by a rounded cobalt `{ }` chip at the left and a pale mint check chip at the right.
- Light-gray endpoint cards with rounded corners, each opened by a small numbered chip reading 01, 02 or 03 in cobalt, green and orange.
- Exactly three solid rounded footer buttons in matching hues with white Japanese lettering and a square outlined icon badge at the left.
- Dotted connector lines interrupted by white circular arrow buttons, a ghosted column of tiny gray dots at the right margin, and a white rounded call-out box with a cobalt border, a rocket chip and a mint external-link chip at the bottom.

## Intended Use

API設計、連携手順、開発者向け説明のスライドに使う。ドキュメントページ、サイドバー、エンドポイント風カードで仕様書をそのまま投影したような清潔さと整列感を出す。

## 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 docs page with the sidebar and browser chrome, the three numbered endpoint cards previewing the three labels and the cobalt-bordered call-out box anchoring the bottom.
- Problem: request path failing at three orange-boxed error points.
- Before-after: legacy integration panel resolving into an SDK group and a manual review group.
- Three-step: three endpoint cards as authenticate, call and handle response joined by dotted arrow buttons.
- Loop: closed request-response-log-refine cycle around a token-refresh glyph.
- Checklist: spec-compliance docs panel with three oversized schema check rows and validation tags.
- Roadmap: versioned release line from a v1 node to a mint-sealed stable release past three version milestones.
- Matrix: 2x2 integration priority board with one pale cobalt quadrant and a star chip.
- Case: request-timeline band with auth handshake, batch call and usage read-out markers.
- Recap: central quickstart card with three stacked documented steps and a rocket chip.
