Warm neutrals with high-contrast black typography and muted red accents
03
Typography
geometric-sans · humanist-sans
display48px · 500
heading16px · 500
body14px · 400
Clean, geometric sans-serif for display and UI elements · High contrast between black text and warm neutral backgrounds
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent 4px base grid with generous whitespace
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Thin, light solid borders
0 4px 12px rgba(0,0,0,0.05)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Fixed-width centered container with standard 12-column grid
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
Smooth fade-in for modals · Subtle hover states
Subtle color shifts or opacity changes · Immediate visual feedback
08
Components
buttonHigh-contrast black buttons with white text and square corners
cardSimple rectangular containers with minimal styling
chipSimple category tags
inputMinimal, underline-style search inputs
heroLarge typography-driven hero sections with high contrast
09
Voice & Don'ts
ToneDirect, clean, and authoritative
HeadlinesBold, uppercase, or large geometric sans-serif
CTAsHigh-contrast black buttons with clear, direct text
Don't use rounded corners — screenshot shows square, sharp edges on all buttons and containers
Don't use vibrant or saturated backgrounds — screenshot shows a warm, muted beige (#F2EFEB) background
Don't use decorative or cursive fonts — screenshot shows clean, geometric sans-serif typography
Don't use excessive drop shadows — screenshot shows very minimal, subtle elevation
Don't use low contrast for text — screenshot shows high-contrast black (#1A1A1A) text on light backgrounds
Don't use cluttered layouts — screenshot shows generous whitespace and a clear, minimal structure
Avoid: Rounded corners
Avoid: Playful colors
Avoid: Cursive typography
11
System prompt
This is a premium, minimalist fashion retail site (Arket) with a clean, Scandinavian aesthetic. The color palette is built around a warm, muted beige (#F2EFEB) background and high-contrast black (#1A1A1A) typography, with subtle red (#B8482E) accents for highlights. The typography is strictly geometric and humanist sans-serif, avoiding any decorative or cursive fonts. The layout is highly structured and spacious, with sharp, square corners on all components (buttons, cards, modals) and minimal shadows. Critical design constraints include: strictly square corners, muted neutral palettes, high-contrast typography, generous whitespace, and a complete absence of rounded or playful elements. The system prioritizes a refined, editorial, and premium retail experience.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
