Ruang/Bentuk / DESIGN & COMPONENTS

Ruang/Bentuk
Made of its own parts.

Space deserves a slower look. Architecture appears as a sequence of material, light and everyday rituals, rather than an interchangeable portfolio grid.

01 / Palette & type

Charcoal, concrete and light. A full-width facade, hairline editorial rules, square dialogs, oversized restrained typography and one italic serif line as the accent. Material samples are original drawings.

Charcoal#202320

Light#f1f1e9

Concrete#a6ada0

Study paper#e4e4dc

Big Shoulders Display, a tall condensed Gothic made for civic signage, gives long headings a facade-like rhythm; Instrument Serif italic answers it in one line of a title, study and sample names and the page standfirst, like a caption written by hand. Inter Tight reads the text and small technical labels create the spatial index.

02 / Composition & behavior

A cinematic facade spans the page beneath an oversized title. An approach essay gives way to a ruled project index beside the selected photograph and a detailed dialog. Each study page ends on a material board of three samples and the other studies; the spatial brief keeps a project file beside the form, an empty sheet with a blank plan until it is prepared.

A bounded facade pan, a once-only approach reveal and directed study-image changes create continuity. Native scrolling, stable focus and reduced motion remain intact.

Server-visible content, labeled keyboard controls, scoped focus/portals and readable mobile flow. Motion respects reduced-motion preferences and avoids automatic loops.

03 / Controls, including the edges

Inspect a component

Component inventory (scroll to inspect)

01
Three spatial reference studies
A cinematic facade spans the page beneath an oversized title. An approach essay gives way to a ruled project index beside the selected photograph and a detailed dialog. Each study page ends on a material board of three samples and the other studies; the spatial brief keeps a project file beside the form, an empty sheet with a blank plan until it is prepared.
02
Scoped project-detail dialog
Server-visible content, labeled keyboard controls, scoped focus/portals and readable mobile flow. Motion respects reduced-motion preferences and avoids automatic loops.
03
A material board on every study
Static bilingual pages, local project selection and a scoped accessible Radix dialog. A board link carries the study and sample to the spatial brief in the URL, checked against the boards on every read; the needs stay on the page. Brief links carry validated architecture and design context.
04
Spatial brief with a project file
Static bilingual pages, local project selection and a scoped accessible Radix dialog. A board link carries the study and sample to the spatial brief in the URL, checked against the boards on every read; the needs stay on the page. Brief links carry validated architecture and design context.
05
Architecture brief context
Static bilingual pages, local project selection and a scoped accessible Radix dialog. A board link carries the study and sample to the spatial brief in the URL, checked against the boards on every read; the needs stay on the page. Brief links carry validated architecture and design context.
06
An independent design and component book
Static bilingual pages, local project selection and a scoped accessible Radix dialog. A board link carries the study and sample to the spatial brief in the URL, checked against the boards on every read; the needs stay on the page. Brief links carry validated architecture and design context.
07
Select, tooltip & scroll area
Keyboard behavior is shared; this theme owns the popup colors, border, radius, type and focus.
08
Export & limits
A fictional practice, not a list of commissioned buildings. Every photograph is identified as a licensed reference, with original author and subject. Material samples are drawings for discussion, not a specification of the photographed buildings. No client or completed project is claimed, and the brief is never sent.

04 / Form & feedback contract

A local preparation note. Try an empty submission, correct it, then export your actual input.

Your prepared note will appear here.

05 / Actual working components