# Bbastudio Eu · Design system migration spec

> Source: https://www.bbastudio.eu  ·  Curated by OpenDesign  ·  en

> A prime example of a high-end design studio portfolio that uses extreme restraint and large-scale imagery to convey premium quality.

## 1. Identity DNA

BBA Studio's design system operates on a principle of radical restraint, analogous to a quiet luxury storefront or a high-end architecture journal. Every component is designed to recede, allowing the studio's photographic work to occupy the entire visual field as the sole protagonist.

**One-liner:** A minimalist, photography-led design studio portfolio that lets the work speak for itself.
**Keywords:** Architectural · Studio · Premium · Minimal · Portfolio
**Analogy:** A quiet luxury retail storefront or high-end architecture journal

## 2. Color

The palette is a strict monochrome foundation of black, white, and a single light gray for structural borders. This chromatic discipline ensures that the project photography provides all color and visual interest within the interface.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#E5E7EB` | placeholder |
| `--line` | `rgba(229, 231, 235, 1.0)` | divider |

**Color principle:** Strict monochrome for UI, allowing project photography to provide all color.

Color is deliberately withheld from the UI to transfer all expressive responsibility to the imagery.

## 3. Typography

Typography adopts a consistently quiet voice, set exclusively in a 400 weight humanist sans-serif. The scale is compact, built for information density rather than declaration, maintaining a tight line-height for an understated presence.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| body | 14px | 1.4 | 400 | 0px | Primary UI text for navigation and descriptions |
| logo | 48px | 1.0 | 400 | -1px | Studio logo (BBA) in the top right |

**Type rules:**
- All text is consistently set to 400 weight.
- Tight line-height for compact information display.

## 4. Spacing

Spacing follows an irregular, optical rhythm rather than a rigid grid, tuned for alignment within the photographic context.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 48 / 64 / 96 / 112 px
- **Rhythm:** Irregular spacing, prioritizing optical alignment within the photographic context.

## 5. Surfaces

Depth is conveyed through minimal, 1-pixel borders, not elevation. Surfaces are flat, with no drop shadows, creating a pure, screen-level plane where images can sit with complete clarity.

- **Radius:** sm 0px · md 0px · lg 0px · pill 9999px
- **Borders:** 1px solid rgb(229, 231, 235) on standard elements, 1px solid rgb(255, 255, 255) on specific overlays.

## 6. Layout

The layout skeleton is defined by a full-viewport photographic hero section that consumes the screen. Navigation and descriptive text are absolutely positioned as minimal overlays, treated as secondary to the visual field.

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

**Skeleton:** Full-viewport photographic hero section with absolute positioned text elements.

## 7. Motion & Interaction

Motion philosophy is one of glacial subtlety. The primary kinetic expression is an extremely slow, 30-second continuous transform on background images, creating a barely perceptible drift rather than a discrete animation.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.23, 1, 0.32, 1)`
- **Patterns:**
  - Extremely slow, continuous background transforms (30s duration) for subtle parallax or drift.

- **Hover:** Custom cursor (arrow-d2.svg) for primary interactions.
- **Click:** Standard pointer for text links.
- **Transition:** Smooth 0.3s transitions for color, background, and opacity states.
- **Keyboard:** Standard browser focus states (not visually overridden).

## 8. Voice & Don'ts

The editorial voice is architectural: quiet, confident, and structurally precise. Headlines are minimal, CTAs are subtle text prompts, and the system avoids anything that might compete with the photographic portfolio.

- **Tone:** Quiet, confident, and architectural
- **Headline style:** Minimal text, relying on imagery for impact
- **CTA style:** Subtle text-based prompts like 'Explore'
- **Avoid:** Overcrowded UI / Vibrant color palettes / Decorative typography

### Don'ts
- ❌ Don't use vibrant gradients — the screenshot shows a strictly monochrome UI palette.
- ❌ Don't use heavy drop shadows — the screenshot shows completely flat UI elements.
- ❌ Don't use thick borders — the screenshot shows 1px subtle borders or none at all.
- ❌ Don't use playful or rounded shapes — the screenshot shows sharp edges or pill-shaped navigation dots.
- ❌ Don't use busy backgrounds behind text — the screenshot relies on clear photographic subjects or empty space.
- ❌ Don't use bold font weights — the screenshot shows exclusively 400 weight text.

The system deliberately does not include traditional UI components like buttons, cards, or inputs, rejecting standard interface conventions in favor of a pure, gallery-like presentation.

## System Prompt (paste into AI tool)

```
This is a minimalist design studio portfolio website. It features a clean, monochrome UI (black #000000 and white #FFFFFF) with a primary focus on high-quality, full-bleed architectural photography. The typography is a humanist-sans at 14px and 400 weight, maintaining a quiet and understated presence. The layout is dominated by a full-viewport hero section with absolute positioned navigation. A key characteristic is the custom cursor and extremely slow, 30-second background motion transforms. Critical donts include avoiding vibrant colors, heavy shadows, or bold typography, as the screenshot shows a highly restrained, gallery-like approach where the work itself provides all visual interest.
```