---
title: "Stykka design system"
variant: extended
source: https://www.stykka.com/
captured_at: 2026-10-12
theme: light
industry: ecommerce
generator: Design DNA (https://four.wiralomi.com/style/stykka-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Stykka · Design System

> Quiet typography, enduring materials, kitchens made to last

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.stykka.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Stykka’s homepage pairs restrained typography and generous white space with immersive photography of warm, architectural kitchen interiors. A modular, serviceable product story is carried through concise feature cards, testimonials, partner marks, and a practical footer.

## North star

Keep the interface quiet and precise so full-frame photographs of real materials and kitchens remain the primary source of colour and emotion.

## Overview

The visual strategy is deliberately quiet: a white canvas and black typography let the kitchens’ timber, plywood, and muted red cabinetry supply nearly all of the page’s visual colour. The opening is a full-bleed architectural photograph with navigation and headline layered over the image; subtle dark image gradients help white text remain legible. Inter is used throughout in compact, medium-weight headings and small, closely tracked body copy, keeping the interface crisp without competing with the interiors. The content below moves into white space, with a concise introductory heading and a four-column feature row of tightly framed kitchen photographs and short captions. Larger image cards then introduce customer, architect, and developer pathways. Testimonials and partner logos are presented with a lighter touch before a dense multi-column footer. The rhythm alternates between immersive imagery and calm, compact information blocks; restrained black-and-white UI keeps material and product photography in the foreground.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Material Ink | `#000000` | `--color-material-ink` | neutral | Primary headings, body copy, footer content, and dark section surfaces. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas, content backgrounds, and navigation or hero text over photography. |
| Near Black | `#050505` | `--color-near-black` | semantic | Measured at a gradient stop; a subtle dark image-overlay detail, not a separate brand fill. |
| Soft Graphite | `#515154` | `--color-soft-graphite` | neutral | Muted supporting text where a softer contrast than primary black is needed. |
| Pale Pewter | `#b8b8b8` | `--color-pale-pewter` | neutral | Occasional subdued heading detail; not a defining interface or brand colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Material Ink) · `--color-text` → `#000000` (Material Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#515154` (Soft Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#515154` | `#ffffff` | 7.91:1 | AAA |
| `#515154` | `#000000` | 2.65:1 | fail |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(18, 18, 18, 0.28) 74%)`
- `linear-gradient(rgba(18, 18, 18, 0.28) 0%, rgba(0, 0, 0, 0) 82%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500 | Primary interface type for navigation, headings, captions, and body copy. | Inter |
| sans-serif | `--font-sans-serif` | system | 400 | System fallback for small interface and link text. | Inter |

- **Inter:** Mostly weight 400 or 500; tight negative tracking on headings and body, with uppercase captions.
- **sans-serif:** Use only as a fallback; keep text plain, compact, and unembellished.

### Type scale — Perfect Fourth (ratio ≈ 1.346, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 46px | 500 | 1 | -0.04em | — | Inter | Hero headline over the kitchen photograph. |
| h2 | 30px | 500 | 1.05 | -0.042em | — | Inter | Section headings introducing major homepage content. |
| h3 | 24px | 500 | 1.2 | -0.042em | — | Inter | Feature or content-card headings. |
| h4 | 22px | 500 | 1.1 | -0.023em | — | Inter | Smaller supporting headings and testimonial titles. |
| body | 14px | 400 | 1.25 | -0.036em | — | Inter | Feature descriptions, testimonial copy, and supporting text. |
| caption | 11px | 500 | 1 | 0 | uppercase | Inter | Small uppercase overlines and category labels. |
| nav | 14px | 500 | 1.25 | -0.036em | — | Inter | Header and footer navigation labels. |
| link | 16px | 400 | 1.5 | 0 | — | Inter | Inline links and secondary navigation actions. |
| code | 18px | 400 | 1 | -0.01em | uppercase | Azeret Mono | Technical uppercase label style; not prominent in the screenshot. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 1, 2, 3, 5, 8, 10, 15, 20, 24, 33, 40 px.
- Section rhythm 40px · element gap 10px · card padding — · max content width 1360px.

The opening hero spans the viewport, with navigation aligned across its top and headline content anchored near the lower left. Below, the white content area uses a measured maximum page width of 1360px and a compact, image-led grid: four feature tiles sit together, followed by larger audience pathway cards. Testimonial and partner areas are more open and lightly populated. The measured spacing system is compact, with a 40px section gap and 10px element gap; preserve clear grouping while keeping the overall rhythm airy.

## Shape & elevation

- Radius: nav `9999px` · link `8px` · xs `8px` · sm `10px` · md `16px`
- No box shadows measured: the page is flat.

The interface is primarily flat: white content sections sit directly on the canvas, with no measured shadows. Image boundaries and spacing provide separation rather than elevated cards or decorative borders. In the hero, text overlays the photograph with subtle dark gradient layers for contrast; keep these overlays confined to media rather than turning them into general surface treatments.

## Imagery

Photography defines the page: full-width views of real kitchens and buildings establish place, while closer interior images show cabinetry, finishes, and hardware. Images are naturally lit and warm, framed as edge-to-edge hero media or consistent rectangular cards. Customer and professional pathway cards include people in context. No illustration or 3D style dominates; the measured earthy screenshot colours belong to the photography rather than interface accents.

## Components

### Overlay navigation

Compact white links sit across the hero image, with the Stykka wordmark centered and the build action aligned to the right.

### Full-bleed hero

A wide architectural kitchen photograph carries a small uppercase overline, large white heading, rounded Inspiration link, and downward cue.

### Feature tiles

Four image-led cards pair close kitchen photography with short uppercase category labels and compact explanatory copy.

### Audience image cards

Larger photographs direct visitors toward Stykka Home, Architects, and Developers, with concise text over the image.

### Testimonial

A customer quote uses a direct heading, short supporting sentence, attribution, and simple previous/next controls.

### Partner marks

A lightly weighted trust area presents partner logos with ample white space rather than decorative containers.

### Multi-column footer

A white footer groups company, resources, product pathways, and legal links beneath the Danish manufacturing statement.

### Measured component styles

- **Link** (“↓ ↓”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Navigation item** (“About Journal Inspiration Design Select ”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Let real kitchen photography provide the dominant colour.
- Use black text on clean white content sections.
- Place concise white hero copy directly over imagery.
- Keep feature copy short and easy to scan.
- Use compact Inter typography with measured tracking habits.
- Separate content groups with whitespace, not decoration.

## Don't

- Do not invent a bright interface accent palette.
- Do not treat photographic browns as brand colours.
- Do not add heavy shadows or raised-card effects.
- Do not crowd the hero with dense copy.
- Do not compete with product imagery using ornamental graphics.
- Do not use oversized, loose, decorative typography.

## Agent prompt

Build a new Stykka-style page with a restrained, architectural feel. Use Gallery White (#ffffff) for the main canvas and Material Ink (#000000) for key text; reserve Soft Graphite (#515154) for subdued supporting copy. Let warm interior photography—not UI fills—supply colour. Start with a full-width image and a light, compact navigation overlay, then use clear white content sections with image-led grids and concise labels. Set typography in Inter, using medium-weight, tightly tracked headings and small readable body text. Keep cards flat, avoid decorative shadows, and use spacing to distinguish groups. If text overlays an image, apply a subtle dark gradient only to that image. Prioritize real materials, clean alignment, quiet hierarchy, and practical paths into product information.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | White footer arranged in five compact columns, ending with a small copyright line. | Grouped navigation links, Clear legal links, Brand and social links | White background, Black text, Compact multi-column layout |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/stykka-com