← Visual BoardsWebsite ContainerDefault content width for common sections. Wide ContainerHero, showcase, and visual-heavy sections. Content ContainerReadable copy and focused explanation. Marketing GridCards collapse from desktop columns to a single mobile flow.
NEXDATAFORGE / VISUAL FOUNDATION
Layout Board
Design Language: reference document →
Principle
Layout creates a path from viewport to section to container to content. Product layout previews remain intact; website foundation adds reusable page rhythm and content width rules.
Customer Home9:41
Hello
What are you looking for? Go
Recent requestsHomeRequestChatMy
AI Request9:41
1 / 4 - Request input
Which service do you need?
Profile photos
Moving estimate
Next step
Mobile - Single ColumnTablet - Two ColumnDesktop - DashboardMaster / DetailBottom Sheet
PRODUCTION FOUNDATION
Website Layout Containers
Section backgrounds span the viewport. Content sits inside shared containers so pages do not invent max-width values per section.
Website Container / 1180px
Section Content
Heading width, description width, readable text width, and marketing grids are constrained inside the container.
Visual Samples
--ndf-website-container--ndf-website-container-wide--ndf-website-content-width--ndf-website-section-spaceUsage
Website Container / Wide Container / Content WidthGood / Avoid
Good
의미와 상태를 분명히 하고, 실제 행동과 연결합니다.
Avoid
장식만을 위해 강조하거나 색·크기만으로 상태를 전달하지 않습니다.
Accessibility
Keyboard focus, 충분한 대비, semantic HTML, 명확한 label, 44px 터치 영역과 320px 화면을 확인합니다.