---
title: "Index Space design system"
variant: extended
source: https://www.index-space.org/
captured_at: 2026-10-12
theme: light
industry: real-estate
generator: Design DNA (https://four.wiralomi.com/style/index-space-org)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Index Space · Design System

> An open, editorial canvas for creative community.

**Theme:** light · **Industry:** real-estate · **Source:** https://www.index-space.org/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Index Space presents its coworking locations, creative programming, events, and community through a restrained editorial layout. Spacious white sections, fine black outlines, and candid photographs make the page feel like a thoughtfully arranged community noticeboard.

## North star

Let generous white space, candid community photography, and precise black outlines do the branding.

## Overview

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.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary headings, body copy, navigation, links, and the fine outlines that structure cards and controls. |
| Soft Concrete | `#e6e6e6` | `--color-soft-concrete` | surface | Measured light-gray page canvas tone; use as a restrained neutral field behind otherwise white content. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page and section background, keeping the photography and outlined content modules clear. |
| Quiet Graphite | `#666666` | `--color-quiet-graphite` | neutral | Muted supporting text, secondary links, and footer details. |
| Paper Mist | `#f2f2f2` | `--color-paper-mist` | surface | Subtle alternate surface tone; keep it limited to quiet supporting areas rather than prominent bands. |
| Mint Note | `#9ee6c4` | `--color-mint-note` | accent | Sparse measured accent, appearing in a card; do not treat it as a dominant page color. |

### Semantic aliases

`--color-canvas` → `#e6e6e6` (Soft Concrete) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#f2f2f2` (Paper Mist) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#666666` (Quiet Graphite) · `--color-border` → `#000000` (Studio Ink) · `--color-accent` → `#9ee6c4` (Mint Note)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#e6e6e6` | 16.83:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f2f2f2` | 18.76:1 | AAA |
| `#666666` | `#e6e6e6` | 4.6:1 | AA |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#f2f2f2` | 5.13:1 | AA |
| `#9ee6c4` | `#e6e6e6` | 1.15:1 | fail |
| `#9ee6c4` | `#ffffff` | 1.44:1 | fail |
| `#9ee6c4` | `#f2f2f2` | 1.29:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| kmrWaldenburg | `--font-body` | webfont | 400, 500 | The page-wide sans serif for headings, body text, navigation, links, captions, and buttons. | Inter |

- **kmrWaldenburg:** Regular weight dominates, with occasional medium weight; sentence case and slight positive tracking keep the editorial text open.

### Type scale — Major Third (ratio ≈ 1.265, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 400 | 1.3 | 0.01em | — | kmrWaldenburg | Hero statement introducing Index NYC and its community space. |
| h2 | 24px | 400 | 1.3 | 0.01em | — | kmrWaldenburg | Section headings for spaces, events, and private event hosting. |
| body | 20px | 400 | 1.3 | 0.01em | — | kmrWaldenburg | Introductory copy, location descriptions, testimonials, and event details. |
| caption | 16px | 400 | 1.3 | 0.01em | — | kmrWaldenburg | Compact supporting labels, addresses, credits, and image captions. |
| button | 16px | 400 | 1.3 | 0.01em | — | kmrWaldenburg | Text labels in outlined actions and understated calls to action. |
| nav | 16px | 400 | 1.3 | 0.01em | — | kmrWaldenburg | Primary links and compact header or footer navigation. |
| link | 16px | 400 | 1.3 | 0.01em | — | kmrWaldenburg | Inline destinations, location tags, and resource links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 5, 10, 20, 40 px.
- Section rhythm 160px · element gap 10px · card padding 20px · max content width 940px.

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.

## Shape & elevation

- Radius: button `50%` · nav `50%` · link `50%`
- No box shadows measured: the page is flat.

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.

## 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.

## Components

### 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.

### Measured component styles

- **Primary button** (“Submit A Proposal”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 2px 5px · 400 16px kmrWaldenburg
- **Link** (“Internet Archive San Francisco”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px kmrWaldenburg
- **Card** (“Index Chinatown 120 Walker St, Fl 3 & 4 ”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 20px · 400 16px kmrWaldenburg
- **Navigation item** (“Index Coworking Courses About Nodes Reso”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px kmrWaldenburg

## Do

- Use white space to separate content groups.
- Keep text and borders in Studio Ink (#000000).
- Use candid photographs of people and real spaces.
- Make card edges thin, square, and clearly visible.
- Keep calls to action text-led and understated.
- Reserve Mint Note (#9ee6c4) for a small accent.

## Don't

- 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.

## Agent prompt

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.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large landscape photo above left-aligned introduction and location tags in a centered content column. | Carousel pagination, Location links | Wide rectangular photography, Plain text heading, Outlined location tags |
| 2 | testimonials | Horizontally arranged quote cards with author names and compact controls. | Previous and next controls, Scrollable quote cards | Thin card outlines, Text-first content, Muted author labels |
| 3 | gallery | Centered section heading and event photograph, followed by supporting copy and additional outlined cards. | Book an event action, Carousel pagination | Candid gathering photo, Centered heading, Square outlined panels |
| 4 | footer | A compact, centered set of navigation and social links above copyright text. | Internal navigation, Social links | Small text links, Thin top divider, Centered copyright |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/index-space-org