Index Space 以克制的编辑式布局介绍共享办公空间、创意项目、活动和社群。宽松的白色区块、细黑边框与真实随性的照片，让页面像一面精心编排的社区公告板。
North star · Let generous white space, candid community photography, and precise black outlines do the branding.
The visual identity is led by white space, black type, and crisp outlines rather than decorative branding. A white page canvas carries the content, while measured light-gray surfaces provide a quiet tonal counterpoint; black is reserved for copy, links, and the many thin card and control borders. The pale mint accent is measured but visually secondary, so use it sparingly rather than turning it into a dominant brand band. The single sans-serif family appears consistently across headings, navigation, captions, and controls, with regular weights and modest tracking. A large landscape photograph anchors the homepage, followed by modular location cards, resource thumbnails, and a ruled event list. Content sits in a centered, constrained column with generous vertical intervals; card edges and simple text labels provide structure instead of shadows or gradients. Photography supplies most of the page's warmth and color.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
页面底色 · Soft Concrete表层 · Gallery White表层 2 · Paper Mist主文字 · Studio Ink次要文字 · Quiet Graphite描边 · Studio Ink强调 · Mint Note
The page-wide sans serif for headings, body text, navigation, links, captions, and buttons.
角色
示例
字号
字重
行高
字距
一级标题
Hero statement introducing Index NYC and its community space.
Index Space
32px
400
1.3
0.01em
二级标题
Section headings for spaces, events, and private event hosting.
The quick brown fox 敏捷的狐狸
24px
400
1.3
0.01em
正文
Introductory copy, location descriptions, testimonials, and event details.
The quick brown fox 敏捷的狐狸
20px
400
1.3
0.01em
辅助文字
Compact supporting labels, addresses, credits, and image captions.
The quick brown fox 敏捷的狐狸
16px
400
1.3
0.01em
按钮
Text labels in outlined actions and understated calls to action.
The quick brown fox 敏捷的狐狸
16px
400
1.3
0.01em
导航
Primary links and compact header or footer navigation.
The quick brown fox 敏捷的狐狸
16px
400
1.3
0.01em
链接
Inline destinations, location tags, and resource links.
The quick brown fox 敏捷的狐狸
16px
400
1.3
0.01em
间距与布局
基准单位 2px · 密度：宽松
160px版块间距
10px元素间距
20px卡片内边距
940px内容最大宽度
2px
5px
10px
20px
40px
Use a centered content area capped at the measured 940px maximum width, with a spacious density and pronounced vertical separation between major sections. The page uses a 12-column structure for much of its content, with narrower content blocks and multi-column cards nested within it. Align most text to the start; center selected event and promotional headings. Let the hero image and copy lead, then organize locations, resources, and events into clear modular groups. Keep the footer compact and visually quiet.
圆角与层次
按钮 · 50%
导航 · 50%
链接 · 50%
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is flat: measured shadows and gradients are absent. Separate content through white space, fine black borders, and occasional light surface tones. Cards read as outlined paper panels, not raised tiles; photography provides depth within the layout rather than layered UI effects.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header navigation
A sparse top row with the Index wordmark and compact outlined actions; links remain black, lightly bordered, and visually unembellished.
Hero image and introduction
A large landscape community-space photograph sits above a left-aligned introductory statement and small outlined location tags.
Location cards
Black 1px outlines frame practical space descriptions, addresses, and small text actions; use measured 20px card padding where appropriate.
Resource tiles
A compact grid pairs small image thumbnails with brief names and credits, with a circular see-all link among the tiles.
Event list
A text-led event feed uses thin horizontal rules, concise metadata, small right-aligned thumbnails, and simple GRID/LIST controls.
Proposal callout
A broad, pale illustrated card centers a short invitation and outlined Submit A Proposal action; keep this accent area exceptional.
Testimonial cards
Community quotes sit in horizontally arranged, thinly outlined panels with author names and compact previous/next controls.
Footer
A small, centered cluster of text links and copyright details finishes the page with minimal visual weight.
Imagery · Use documentary-style photography of real people using shared work and event spaces. The hero is a broad, rectangular interior photograph; later images appear as small event and resource thumbnails, with a larger gathering photo in the private-event section. Keep images rectangular and naturally colored, with no decorative frames beyond the page's existing fine borders. Avoid illustration or 3D as the main visual language.
Make card edges thin, square, and clearly visible.
Keep calls to action text-led and understated.
Reserve Mint Note (#9ee6c4) for a small accent.
✕ 不该做
Do not add shadows or gradients.
Do not use rounded, filled-button styling.
Do not replace the editorial layout with dense dashboards.
Do not let accent color dominate the page.
Do not use oversized display type or heavy weights.
Do not add decorative imagery unrelated to community spaces.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in the Index Space visual style: a spacious, editorial community noticeboard rather than a glossy real-estate landing page. Use Gallery White (#ffffff) as the primary field, Studio Ink (#000000) for text and precise thin outlines, and Quiet Graphite (#666666) for secondary copy. Keep Soft Concrete (#e6e6e6) and Paper Mist (#f2f2f2) subtle, with Mint Note (#9ee6c4) used only sparingly. Use a clean sans serif close to kmrWaldenburg, regular weights, sentence case, and modest tracking. Center the content in a constrained column, separate sections with generous vertical breathing room, and build square-cornered outlined cards and ruled lists. Anchor the page with candid, naturally colored community-space photography; avoid shadows, gradients, and decorative effects.
