---
name: Bunsa Studio
description: "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."
version: alpha

colors:
  background: "#F5F2ED"
  primary: "#000000"
  tertiary: "#0B0Bca"
  bg-quiet: "#FCFAF7"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 60px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 20px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A photography-driven portfolio for a design studio.

*A curated gallery showcasing warm, eclectic interior design projects.*

## Colors

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

- **Background (`#F5F2ED`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#0B0Bca`)** — uses `accent` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

## Layout

Fullscreen image galleries with overlaid typography.

*Rhythm:* Generous vertical spacing between sections, emphasizing the imagery.

## Elevation & Depth

- Borders: 1px solid black

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Text links or minimal icons, relying on cursor pointer for interaction.
- **card:** Full-bleed images serving as the primary portfolio cards.
- **chip:** Small blue circular indicators.
- **hero:** Full-width photographic hero with large text overlay.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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