---
name: Stykka
description: "A great example of how a minimal UI can let high-quality architectural photography take center stage, creating a premium and aspirational brand."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#B8B8B8"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 46px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.85px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.5px"

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

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

---

## Overview

A premium platform for designing custom kitchens and interiors, characterized by large photographic hero sections and clean, serif-led typography.

*A high-end architecture magazine*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#B8B8B8`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

## Layout

Edge-to-edge photography with generous whitespace margins.

*Rhythm:* Consistent application of padding and gap around imagery.

## Elevation & Depth

- Borders: minimal 1px solid borders on certain interactive elements.

## Shapes

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

## Components

- **button:** Transparent background with a subtle border and text-only label.
- **card:** Large photographic cards with a solid color background containing text.
- **chip:** Text labels with a small plus or bullet icon.
- **input:** Text input fields with a bottom border only.
- **hero:** Full-screen photographic background with large, left-aligned typography.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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