CURATED · OPEN · FREE

Knickey

A refined, photo-led e-commerce interface for inclusive underwear.

ConsumerCleanPhotographicCalmRefined

↓ Download design system (37 MB)Open in OpenDesign

Visit: https://knickey.com

📦 Browse pack contents →

Identity DNA

underwearinclusivesustainablesimplecomfortable

A quiet, curated catalog that lets the product photography breathe.

Color

#233735Accent

#241f20Ink

#f5f4eeBG

#8bba78Muted

rgba(36,31,32,1.0)Line

Earthy neutrals and soft greens create a calm, organic palette.

Typography

didone-serif · humanist-sans

display64px · 400
headline32px · 400
body17px · 400
caption14px · 400

Use didone-serif for hero numbers and large emphasis. · Use humanist-sans for all interactive elements and body text. · Maintain consistent wide letter-spacing on sans-serif elements.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent padding multiples of 4 and 8 create a breathable layout.

Surfaces

sm · 0px

md · 4px

lg · 0px

pill · 999px

No visible borders except for checkbox inputs; the modal relies on spacing and background contrast.

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Split layout with full-bleed photography flanking a centered text column.

Motion & Interaction

200msmicro

300mssmall

800msmedium

cubic-bezier(0.19, 1, 0.22, 1)easing

Fade and scale entrance for the modal overlay. · Subtle transform transitions for interactive elements.

Subtle background color transition on buttons. · Modal dismissal via a small 'X' icon in the top right.

Components

button Solid, dark rectangular button with uppercase white text and no border-radius.
card Image-heavy, borderless cards that rely on photography rather than containers.
chip None visible.
input Custom checkboxes with rounded corners and a soft gray border.
hero A full-screen or large modal overlay featuring a split composition of photography and centered text.

Voice & Don'ts

Tone Confident, calm, and welcoming.
Headlines Short, direct, and value-focused (e.g., 'You've Got 15% Off').
CTAs Clear, uppercase, action-oriented (e.g., 'CLAIM 15% OFF').

Don't use heavy drop shadows — screenshot shows flat, borderless surfaces instead.
Don't use bright, high-saturation accents — screenshot shows muted greens and dark teals instead.
Don't use playful or rounded sans-serif fonts for display — screenshot shows a sharp didone-serif instead.
Don't center-align long paragraphs — screenshot keeps the text column narrow and centered for short copy only.
Don't add unnecessary borders to content cards — screenshot shows borderless imagery instead.
Don't use dark mode or high-contrast themes — screenshot shows a light, creamy, off-white background instead.
Avoid: Aggressive or urgent language
Avoid: Overly casual or slangy phrasing
Avoid: Visual clutter or noisy backgrounds

Inside the pack — real screenshots

Knickey — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This is a refined e-commerce interface for a sustainable underwear brand, characterized by a calm, earthy palette. Key colors include a creamy off-white background (#f5f4ee), dark ink text (#241f20), muted green accents (#8bba78), and a deep teal for primary buttons (#233735). Typography pairs a sharp didone-serif for large display text with a humanist-sans for all body and UI elements. The layout is spacious, often using a split composition with full-bleed photography flanking centered text. Key donts: Do not use bright, neon colors; avoid heavy borders or drop shadows; do not use playful, rounded fonts; avoid busy backgrounds; do not center-align long blocks of text; and avoid aggressive, urgent marketing language.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko