# Blu Dot · Design system migration spec

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

> The site is a great example of balancing bold, high-chroma product photography with a highly restrained, clean UI framework.

## 1. Identity DNA

The Blu Dot design system operates like a curated gallery, where each component is a modern living object presented with architectural precision. This spec translates that physical showroom ethos into a digital framework of stark contrasts, generous whitespace, and deliberate, unadorned forms.

**One-liner:** Modern furniture and home goods with a bold, clean aesthetic.
**Keywords:** modern furniture · scandinavian · minimalist · architectural
**Analogy:** A curated gallery of modern living objects presented with architectural precision.

## 2. Color

The color system is built on a foundation of absolute clarity: a pristine white field, solid black, and a single, high-energy red accent for strategic emphasis. This restricted palette ensures content and product photography command visual attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#EFEFEF` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#757575` | secondary text |
| `--muted` | `#979797` | placeholder |
| `--muted-soft` | `#D8D8D8` | weak hint |
| `--accent` | `#E20008` | single accent |
| `--line` | `rgba(160, 160, 160, 1)` | divider |

**Color principle:** Clean black and white foundation punctuated by a single high-energy red accent.

The governing principle is stark, high-contrast legibility, using color as a direct tool for hierarchy rather than decoration.

## 3. Typography

Typography carries a dual voice: headlines are bold, uppercase, and geometric, creating immediate impact, while body copy employs a highly legible humanist sans-serif for sustained reading. This pairing maintains the brand's crisp, architectural character at every scale.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 70px | 1.0 | 700 | -1.4px | Hero headlines and promotional banners |
| body | 14px | 1.4 | 400 | 0 | Default body copy and small interface text |

**Type rules:**
- Headlines are uppercase and tight-tracked.
- Body copy is regular weight and highly legible.
- Text color alternates between solid black and accent red for emphasis.

## 4. Spacing

All vertical and horizontal rhythm adheres to a consistent 4px grid, creating an underlying structure of calm, measured order.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid with generous whitespace for editorial clarity.

## 5. Surfaces

Surfaces are defined by restraint and sharp edges, with depth suggested only by a single, subtle shadow instance. Borders are clean and functional, using a thin line for inputs and solid black for standard elements to maintain graphic clarity.

- **Radius:** sm 2px · md 0px · lg 0px · pill 100px
- **Shadows:**
  - rgba(0, 0, 0, 0.2) 0px 0px 18px 0px
- **Borders:** 1px solid rgba(160, 160, 160, 1) for inputs, solid black for standard elements.

## 6. Layout

The layout skeleton prioritizes generous whitespace and a bold, split-screen approach for major promotional areas on desktop. This structure collapses into a single, stacked column on mobile, maintaining the editorial flow and focus on high-quality imagery.

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

**Skeleton:** Full-width split-screen layout on desktop, stacked vertically on mobile.

## 7. Motion & Interaction

Motion is minimalist and strictly functional, providing immediate feedback through fast, subtle transitions on color and border states. The philosophy is one of instantaneous UI response, never allowing animation to compete with product presentation.

- **Durations:** micro 100ms · small 250ms · medium 400ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Smooth opacity transitions for UI state changes.
  - Subtle color transitions on interactive elements.

- **Hover:** Immediate background or text color transitions.
- **Click:** Standard pointer cursor with no heavy scaling effects.
- **Transition:** Fast 0.1s ease-in transitions for borders and colors.
- **Keyboard:** Standard focus outlines.

## 8. Voice & Don'ts

The editorial voice is direct, confident, and inviting, matching the clarity of the visual system. Headlines are short, punchy, and often use uppercase wordplay, while calls to action are clear and transactional.

- **Tone:** Direct, confident, and inviting.
- **Headline style:** Short, punchy, uppercase phrases that often use wordplay.
- **CTA style:** Clear and transactional, such as 'CONTINUE' or 'SHOP'.
- **Avoid:** Cluttered layouts / Muted or complex color palettes / Serif typefaces

### Don'ts
- ❌ Don't use decorative serifs — screenshot shows clean geometric and humanist sans-serif fonts.
- ❌ Don't use gradients — screenshot shows solid, flat blocks of color for accents.
- ❌ Don't use rounded corners on main buttons — screenshot shows sharp, rectangular button shapes.
- ❌ Don't use dark mode — screenshot shows a bright, white background for primary content areas.
- ❌ Don't use muted, low-contrast colors — screenshot shows high-contrast black and red accents.
- ❌ Don't use complex shadows — screenshot shows flat design with only one subtle shadow instance.

The system deliberately avoids decorative serifs, complex gradients, dark mode, and soft, rounded corners to preserve its sharp, architectural integrity.

## System Prompt (paste into AI tool)

```
A modern furniture and home goods brand characterized by a clean, editorial aesthetic and bold use of color. The primary palette is stark black and white, punctuated by a high-energy red accent (#E20008). Typography relies on a geometric sans-serif for display and a humanist sans-serif for body, always maintaining a crisp, legible feel. Layouts are spacious and grid-based, prioritizing high-quality lifestyle photography. Critical constraints include: never use decorative serifs, avoid gradients or dark mode, and keep UI elements like buttons sharp and rectangular. The brand voice is direct and confident, using short, punchy headlines and clear calls to action. Maintain a premium, architectural feel throughout all components.
```