# Bunsa Studio · Design system migration spec

> Source: https://bunsa.studio  ·  Curated by OpenDesign  ·  en

> The site is a strong example of a 'less is more' design approach, where the quality of the photography is the main communicative tool, supported by a restrained but distinct brand identity.

## 1. Identity DNA

The Bunsa Studio system operates like a curated gallery space: the architecture is deliberately restrained to let the exhibited work command full attention. Every decision, from warm neutral backdrops to typographic scale, serves the singular goal of presenting interior design photography with uncompromised clarity.

**One-liner:** A photography-driven portfolio for a design studio.
**Keywords:** Interior Design · Curation · Photography · Studio
**Analogy:** A curated gallery showcasing warm, eclectic interior design projects.

## 2. Color

The palette is built on a foundation of warm off-white, providing a luminous, gallery-like canvas that allows photographic content to sit without competition. A single, bold blue accent acts as a quiet brand signature, reserved for small indicators and links.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F5F2ED` | main background |
| `--bg-quiet` | `#FCFAF7` | quiet area |
| `--ink` | `#000000` | body text |
| `--accent` | `#0B0Bca` | single accent |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Warm, neutral backgrounds to let photography dominate, with a single bold blue accent for branding.

The principle is one of photographic supremacy—the background must always recede.

## 3. Typography

Typography adopts the confident neutrality of a grotesque sans-serif, specifically HelveticaNowDisplay. Its clean geometry and strong weight provide a modern, editorial voice that can overlay complex imagery without visual conflict.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.1 | 700 | -0.5px | Large hero titles and project names |
| body | 20px | 1.3 | 400 | normal | General text and smaller interface elements |

## 4. Spacing

Vertical rhythm is generous and deliberate, creating ample breathing room between sections to let each image settle and be considered individually.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing between sections, emphasizing the imagery.

## 5. Surfaces

Surfaces are flat and unadorned, rejecting shadows and decorative borders in favor of pure content. Depth is achieved not through effects, but through the inherent scale and placement of full-bleed photography.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** 1px solid black

## 6. Layout

The layout skeleton is a single-column, full-bleed flow where images dominate the viewport. Typography is overlaid directly onto this photographic canvas, creating a direct and immersive relationship between text and image.

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

**Skeleton:** Fullscreen image galleries with overlaid typography.

## 7. Motion & Interaction

Motion is minimal and purposeful, reduced to simple opacity transitions that allow elements to appear without dramatic flourish. The philosophy is to support navigation quietly, preserving the calm and professional tone of the static presentation.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - fade-in
  - opacity transitions

- **Hover:** Opacity changes on interactive elements.
- **Click:** Immediate visual feedback.
- **Transition:** Opacity 0.25s ease-out
- **Keyboard:** Standard focus outlines, though not heavily customized.

## 8. Voice & Don'ts

The voice is visually focused, professional, and concise, allowing the work to speak through impactful titles and minimal prose. It avoids clutter and excessive text, trusting the curation of imagery to communicate the studio's expertise.

- **Tone:** Confident, professional, and visually focused.
- **Headline style:** Short, impactful project titles.
- **CTA style:** Minimal, often just a cursor change to pointer.
- **Avoid:** Clutter / Excessive text / Complex gradients

### Don'ts
- ❌ Don't use dark mode — the site uses warm, light backgrounds like #F5F2ED.
- ❌ Don't use serif fonts — the typography is strictly a clean grotesque sans-serif.
- ❌ Don't add heavy drop shadows — surfaces are flat and rely on imagery for depth.
- ❌ Don't use bright, multi-colored backgrounds — keep the canvas neutral to let photos shine.
- ❌ Don't use rounded UI cards — imagery is presented edge-to-edge or with simple alignment.
- ❌ Don't overcrowd the layout — generous spacing and minimal text are key to the aesthetic.

The system deliberately rejects dark modes, serifs, shadows, and rounded UI containers, understanding that these elements would introduce visual noise incompatible with its gallery-like purity.

## System Prompt (paste into AI tool)

```
This is a portfolio website for an interior design studio. It uses a warm, neutral background (#F5F2ED) with a single, bold blue accent (#0B0Bca) for branding elements. The typography is a clean, bold grotesque sans-serif (HelveticaNowDisplay), prioritizing readability and modern aesthetics. The layout is heavily photographic, with full-bleed images and minimal text. Key design constraints: no dark mode, no serif fonts, no heavy shadows, and avoid cluttering the interface. The design should feel curated, premium, and focused on the visual work.
```