# Soussfurniture · Design system migration spec

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

> Exemplary minimalism that demonstrates how extreme restraint in color and typography can create a distinctive, memorable product experience.

## 1. Identity DNA

Souss Furniture operates as a curated showroom where each piece of furniture is allowed to speak for itself, without visual competition. The system achieves its identity through radical subtraction—removing every element that does not directly describe or present a product.

**One-liner:** Minimalist product catalog showcasing furniture pieces through interactive text-driven navigation.
**Keywords:** minimal · product catalog · functional · clean
**Analogy:** A curated showroom where furniture speaks for itself

## 2. Color

The color system is a strict monochrome discipline: #D6D5CF warm gray as a neutral canvas, and #000000 black for all text. This binary palette removes chromatic decision-making entirely, focusing attention on form and language alone.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#D6D5CF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#666666` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Absolute monochrome—black text on a muted warm gray canvas with zero chromatic variation.

The principle is absolute neutrality—the background recedes so completely that products become the only visual subject.

## 3. Typography

Typography serves as the primary structural and navigational tool, set entirely in acumin-pro at weight 400. The scale is functional: 48px for product listings commands the hierarchy, while 16px handles navigation and secondary text with equal restraint.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 400 | -0.5px | Product listing text |
| body | 16px | 1.5 | 400 | 0 | Navigation links |
| caption | 30px | 1.0 | 400 | 0 | Secondary product text |

**Type rules:**
- All text weight is consistently 400
- Underlines indicate active/selected product states
- Navigation uses sentence case with no decorative styling

## 4. Spacing

The spatial rhythm is defined by generous vertical padding and deliberate emptiness, creating a loose, breathing cadence between interactive elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 48 / 64 px
- **Rhythm:** Loose vertical rhythm with generous padding around interactive elements

## 5. Surfaces

Surfaces are deliberately flat, with no shadows or borders to create artificial depth. The entire interface exists on a single plane, where separation is achieved solely through typographic presence and negative space.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** No visible borders—layout relies on typography and negative space alone

## 6. Layout

The layout skeleton is asymmetric, built around a fixed header and a centered text block that serves as the primary navigation. Product silhouettes float freely against the background, positioned without rigid grid constraints to create a sense of curated placement.

- **Container max:** 1440px
- **Paragraph max:** 800px
- **Grid:** 1 columns, gutter 48px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric layout with fixed header, centered text block, and floating product silhouettes

## 7. Motion & Interaction

Motion is functional and understated, limited to CSS transitions that smooth state changes. Product silhouettes transition between states, and text underlines appear on hover—each animation serves a clear interactive purpose rather than decorative effect.

- **Durations:** micro 150ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0.0, 0.2, 1.0)`
- **Patterns:**
  - Product silhouettes transition between states
  - Text underline appears on hover/selection
  - Smooth transitions for all interactive elements

- **Hover:** Underline appears beneath product name
- **Click:** Product silhouette changes and text state updates
- **Transition:** All elements have CSS transitions applied
- **Keyboard:** Standard tab navigation through product links

## 8. Voice & Don'ts

The editorial voice is direct and functional, using simple product names in sentence case with periods. Navigation links like 'Info' and 'Insta>' are presented as subtle, unadorned text rather than styled components.

- **Tone:** Direct, functional, minimalist
- **Headline style:** Simple product names in sentence case with periods
- **CTA style:** Subtle 'Info' and 'Insta>' navigation links
- **Avoid:** Decorative language / Marketing superlatives / Complex navigation structures

### Don'ts
- ❌ don't add vibrant colors — screenshot shows exclusively monochrome palette
- ❌ don't use heavy font weights — screenshot shows consistent weight 400 throughout
- ❌ don't create card-based layouts — screenshot shows floating silhouettes on flat background
- ❌ don't add decorative borders or dividers — screenshot shows clean typography-only separation
- ❌ don't use multiple font families — screenshot shows single geometric sans throughout
- ❌ don't add shadow effects to elements — screenshot shows completely flat design

The system deliberately avoids vibrant colors, heavy font weights, card-based layouts, decorative borders, multiple font families, and shadow effects—each exclusion reinforces its core principle of functional minimalism.

## System Prompt (paste into AI tool)

```
Souss Furniture is a minimalist product catalog for furniture pieces. The design uses a monochrome palette: #D6D5CF background with #000000 text. Typography is a geometric sans-serif (acumin-pro) at weight 400 throughout, with 48px for product listings and 16px for navigation. Layout is asymmetric with a fixed top header, centered text block listing products, and floating product silhouettes. Interaction relies on text underlines to indicate selection states. Critical donts: Never add vibrant colors—the design is strictly monochrome. Never use heavy font weights—all text is weight 400. Never create card-based layouts—products float as silhouettes. Never add decorative borders—separation is purely typographic. Never use multiple font families—consistency is key. Never add shadow effects—design is completely flat.
```