# Artindumbo · Design system migration spec

> Source: https://artindumbo.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of how to use a limited, high-contrast palette and bold typography to create a striking and memorable editorial experience without over-designing.

## 1. Identity DNA

Artindumbo functions as a curated neighborhood art guide, a portal where discovery is as straightforward as turning a street corner. Its identity DNA is built on a minimalist editorial framework where high-contrast geometry and photographic curation replace ornamentation.

**One-liner:** A minimalist editorial portal for discovering local art spaces.
**Keywords:** art · gallery · neighborhood · directory · culture
**Analogy:** A curated neighborhood art guide.

## 2. Color

The color system operates on a single, decisive axis: a soft pastel blue background set against stark black typography. This high-contrast pairing, with accents of teal for secondary information, creates an immediate, gallery-like focus on content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#B0E0E9` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#226D7A` | placeholder |
| `--line` | `rgba(0, 0, 0, 1)` | divider |

**Color principle:** High-contrast editorial palette with a soft pastel background and stark black typography.

The palette's restriction to a bright, light-themed interface is deliberate, rejecting dark mode or vibrant neon in favor of clarity and visual calm.

## 3. Typography

Typographic voice is split between two distinct roles: a bold geometric sans-serif for impactful display headlines and a transitional serif for the readable body text. This combination grounds the editorial tone in both modernity and classic print conventions.

- **Display:** geometric-sans
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 700 | -2px | Hero headlines and main titles |
| heading | 36px | 1.2 | 700 | 0px | Subheadings and error states |
| body | 16px | 1.5 | 400 | 0px | Main text and descriptions |

**Type rules:**
- Use geometric sans for bold display headlines with tight tracking.
- Use transitional serif for body text to maintain readability and a classic editorial feel.
- Keep line heights generous for body text (1.5+).

## 4. Spacing

The layout breathes through a deliberate and generous vertical rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 40 / 48 / 60 px
- **Rhythm:** Generous vertical spacing (40px-60px) to separate distinct content blocks.

## 5. Surfaces

Depth is conveyed sparingly through a subtle shadow elevation, while definition comes from a stark 2px solid black border used to frame and emphasize elements. This creates a graphic, almost architectural, sense of boundary.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - 0px 4px 12px rgba(0,0,0,0.1)
- **Borders:** 2px solid #000000 for defining boxes and emphasis.

## 6. Layout

The structural skeleton centers content within the viewport, creating deliberate islands of focus. Full-bleed photography sections alternate with stacked typography blocks, establishing a clear, linear editorial hierarchy.

- **Container max:** 1200px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content with large full-width photography sections and stacked typography blocks.

## 7. Motion & Interaction

Motion philosophy prioritizes understatement and refinement. All transitions are smooth and global, with movement like fade-in effects serving to introduce content without dramatic emphasis.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Fade-in transitions on load

- **Hover:** Subtle scale or opacity changes on interactive elements.
- **Click:** Immediate response with minimal visual feedback.
- **Transition:** Smooth transitions applied globally (all elements).
- **Keyboard:** Standard focus states for accessibility.

## 8. Voice & Don'ts

The editorial voice is direct, informative, and minimalist, mirroring the visual system's clarity. Headlines are bold, boxed, and capitalized for maximum impact, while calls-to-action remain friendly and clear.

- **Tone:** Direct, informative, and minimalist.
- **Headline style:** Bold, boxed, and capitalized for maximum impact.
- **CTA style:** Friendly and clear, often with a secondary visual indicator like a dot.
- **Avoid:** Elaborate or flowery language / Complex multi-level navigation / Cluttered layouts / Excessive use of gradients or shadows / Vibrant or neon accent colors / Dense blocks of text without breathing room

### Don'ts
- ❌ Don't use delicate or thin typography — screenshot shows heavy, bold sans-serif headlines.
- ❌ Don't use complex rounded corners — screenshot shows a strictly rectangular design language with sharp edges.
- ❌ Don't use subtle background tints — screenshot shows a strong, distinct pastel blue background.
- ❌ Don't use colorful, multi-colored buttons — screenshot shows a clean white pill button with a single colored dot.
- ❌ Don't rely solely on text for emphasis — screenshot uses thick black borders to frame key words.
- ❌ Don't use dark mode aesthetics — screenshot shows a bright, high-key, light-themed interface.

The system deliberately avoids complex navigation, cluttered layouts, and elaborate language, focusing instead on spacious curation.

## System Prompt (paste into AI tool)

```
This design DNA represents an Art in Dumbo editorial site. The aesthetic is defined by a bright pastel blue (#B0E0E9) background contrasted with stark black (#000000) typography. Typography features a bold geometric-sans for display and a transitional-serif for body text, with a scale reaching up to 80px. Key components include full-bleed photography, pill-shaped buttons with white backgrounds, and bold black-bordered text boxes. Critical constraints: Never use thin or delicate fonts; maintain the high-contrast black-on-pastel palette; avoid complex rounded corners or shadows; and keep the layout spacious with generous vertical rhythm. Use this DNA to create clear, impactful editorial layouts that feel curated and modern.
```