# Stykka · Design system migration spec

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

> A great example of how a minimal UI can let high-quality architectural photography take center stage, creating a premium and aspirational brand.

## 1. Identity DNA

The design system for Stykka operates like a high-end architecture magazine, where the built environment—here, the kitchen—is the subject, not the publication itself. The system provides a refined, minimalist frame that defers entirely to the craftsmanship of the photography.

**One-liner:** A premium platform for designing custom kitchens and interiors, characterized by large photographic hero sections and clean, serif-led typography.
**Keywords:** architecture · kitchens · curation · craft · minimal
**Analogy:** A high-end architecture magazine

## 2. Color

A strict monochrome palette of black and white establishes the foundational structure, ensuring the interface never competes with the photographic content. All color is sourced directly from the imagery, making each project visually unique within a consistent framework.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#B8B8B8` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Minimalist palette relying on high-quality photography for color, with strict black-and-white UI elements.

The principle is absolute restraint: the UI is a silent curator, not a participant in the color story.

## 3. Typography

Typography follows a clear hierarchy, pairing a geometric sans-serif for commanding headlines with a humanist sans-serif for body copy, creating a voice that is both direct and approachable. The scale is generous, with tight tracking that reinforces a sense of deliberate, architectural precision.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 46px | 1.0 | 500 | -1.85px | Headlines |
| body | 16px | 1.2 | 400 | -0.5px | Body text |

## 4. Spacing

Rhythm is established through consistent padding and gap values applied around all imagery.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent application of padding and gap around imagery.

## 5. Surfaces

Surfaces are defined by clarity and minimal intervention, with flat, solid-color backgrounds and minimal 1px borders on interactive elements. Depth is implied through composition, not through applied shadows or gradients.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Borders:** minimal 1px solid borders on certain interactive elements.

## 6. Layout

The layout skeleton is built on generous whitespace margins and a commitment to edge-to-edge photography. This structure creates expansive, calm sections that guide the eye and let the product visuals dominate the visual field.

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

**Skeleton:** Edge-to-edge photography with generous whitespace margins.

## 7. Motion & Interaction

Motion is treated as a functional whisper, with smooth fade-ins on scroll and subtle opacity changes on interactive states. The philosophy is to guide attention and confirm interaction without disrupting the composed, serene atmosphere.

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

- **Hover:** Subtle opacity change on links and buttons.
- **Click:** Immediate state change or navigation.
- **Transition:** All properties transition smoothly as specified in the ground truth.
- **Keyboard:** Standard focusable elements

## 8. Voice & Don'ts

The editorial voice is professional, aspirational, and calm, matching the visual tone of refined craftsmanship. Copy is direct and descriptive, using large typography and simple, action-oriented calls to action.

- **Tone:** Professional, aspirational, and calm.
- **Headline style:** Direct and descriptive, using large geometric sans-serif.
- **CTA style:** Simple, action-oriented text like 'Start building'.
- **Avoid:** Flashy animations / Cluttered layouts / Saturated UI colors

### Don'ts
- ❌ Don't use saturated accent colors — screenshot shows a monochrome UI that defers to photography.
- ❌ Don't use drop shadows on UI elements — screenshot shows completely flat design.
- ❌ Don't use center-aligned body text — screenshot shows strict left alignment.
- ❌ Don't use decorative scripts for headlines — screenshot shows clean geometric sans-serifs.
- ❌ Don't use small, dense text blocks — screenshot shows generous whitespace and large type.
- ❌ Don't use complex iconography — screenshot shows simple, text-based navigation.

The system deliberately avoids flashy animations, saturated UI colors, and complex layouts, favoring a monochrome foundation that lets the architecture speak.

## System Prompt (paste into AI tool)

```
Stykka is a premium platform for designing custom kitchens, characterized by a clean, editorial aesthetic that prioritizes high-quality photography. The design relies on a minimalist black-and-white color palette (#000000 for ink, #FFFFFF for background) to let the product imagery stand out. Typography is a mix of geometric sans-serifs for headlines and humanist sans-serifs for body text, featuring tight tracking. Critical donts include: avoid using saturated UI colors, avoid complex shadows or gradients, and avoid center-aligned body copy. The layout is spacious, using generous whitespace and large, edge-to-edge imagery to create a sense of calm and refinement.
```