A visual language of deliberate order
Clear structure.
Strong character.
A shared grid, confident typography, and one useful accent. Explore how the same visual system supports a studio story and an agent's next decision.
01 / Studio adaptation
Comfortable reading · Modular composition
A fictional independent design studio
Interfaces with a clear point of view, built around the people who use them.
Shared edges give the story its rhythm. Large type introduces an idea; smaller details give it context. The accent points to what matters next.
See the sample briefsOriginal fictional briefs; no shipped outcomes are claimed.
Publication / Sample brief
Make essays, maps, and image captions easy to scan without flattening the reading experience.
Use a shared alignment edge for the article title, summary, and author context. Keep the body near 65 characters per line. Let image captions and related reading form a quieter second layer. The grid adapts to a single reading column on small screens.
Studio portfolio / Sample brief
Lead with the studio's approach, then show the problem and decisions behind each project.
Start with a concise statement of the studio's work. Use numbered project rows and explicit links to briefs. Keep all reading and navigation available without motion. The change-review demonstration below is a separate operational adaptation; it is not an approval step in this portfolio.
02 / Agent change-review adaptation
Stable context · Explicit decisions
Use the same grid to distinguish a proposal, a requested decision, and a confirmed outcome.
Local simulation
No backend connected
Sample review workspace
Navigation / Fictional proposal
The sample agent proposes grouping “Work” and “About” at the leading edge and keeping “Contact” at the trailing edge.
Decisions affect only this page and reset on reload.
CHG-024 / Scope & evidence
Arrange three existing links along a shared baseline. Preserve their labels, destinations, keyboard order, and visible focus.
Work, About, and Contact have equal spacing and visual weight.
Work and About form a group. Contact stays separate as the next action.
A requested decision remains pending until its acknowledgement is simulated.
Read the proposal's scope before requesting a decision. Select “View the proposal” to open it.
03 / Component specimen
Comfortable density
One neutral specimen for comparing density and appearance. The project adaptations above keep their own reading profiles.
Typography / Sans + mono
Aa Bb
0123.
Start with the content and let the grid support it. Keep the type bold where it introduces an idea and quiet where it helps someone read.
Cấu trúc rõ ràng, giao diện có cá tính.
Local font fallbacks render English and Vietnamese here.
CHG-024 / GRID-12 / 160ms
Controls / Clear affordances
An editable local specimen; nothing is submitted.
Use a stable surface for important context. Color supports the message; the words carry it.
States / Always named
These are independent sample states. A connection issue does not establish a failure.
Fictional sample data. On narrow screens, scroll the table region.
| Project | Type | State | Pages |
|---|---|---|---|
| City notes | Publication | In review | 12 |
| Studio system | Portfolio | Ready | 4 |
| Review workspace | Agent experience | Needs input | 3 |