CURATED · OPEN · FREE

Ino Jewelry

A premium jewelry brand using sculptural, maximalist photography and a stark, high-contrast layout to position products as art objects.

PremiumProductGalleryPhotographicStudio

↓ Download design system (21 MB)Open in OpenDesign

Visit: https://ino.jewelry

📦 Browse pack contents →

Identity DNA

avant-gardesculpturalluxurymaximalisteditorial

Like an art gallery showcasing wearable sculptures, where the jewelry is treated as a piece of contemporary art rather than a traditional accessory.

Color

#212123Ink

#000000BG

#FFFFFFBG soft

#A6A6A7Muted

rgba(21,21,23,1)Line

Strict monochrome with high contrast, relying entirely on white typography against black backgrounds or black text against white product grids to create a stark, editorial feel.

Typography

geometric-sans

display24px · 400
body16px · 400
caption11px · 400

All text is set in a wide geometric sans-serif · Frequent use of uppercase for headlines and labels · Standardize on a very tight leading for compact text blocks

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Grid-based with tight, deliberate spacing around text and images

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

Thin 1px solid black lines for navigation separators, otherwise no borders, relying on image contrast.

Layout

1440container

12columns

24pxgutter

768 / 1024breakpoints

Full-bleed hero imagery followed by a stark two-column asymmetric product grid

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.12, 0.67, 0.53, 1)easing

fade-in · opacity transitions

Simple opacity transition on clickable elements · Standard cursor change to pointer

Components

button Simple uppercase text links with a single underline on hover
card Image-only cards with text labels placed outside the image container
hero Full-screen, full-bleed photographic background with centered white typography and a graphic logo element

Voice & Don'ts

Tone Minimal, confident, avant-garde
Headlines Short, punchy, uppercase statements like 'MORE IS MORE'
CTAs Direct, uppercase, underlined on hover

Don't use warm colors — screenshot shows strictly monochrome (black, white, grey) backgrounds and text
Don't use lowercase text for navigation or headlines — screenshot shows all uppercase for 'SHOP', 'ABOUT', 'MORE IS MORE'
Don't add drop shadows or complex UI styling — screenshot shows flat typography and simple 1px borders
Don't use rounded corners on cards or buttons — screenshot shows sharp edges and standard pill shapes only for specific icons
Don't use decorative or script fonts — screenshot uses only a wide geometric sans-serif
Don't clutter the layout with multiple elements — screenshot shows massive white space and focus on a single large image
Avoid: Avoid overly descriptive or flowery copy
Avoid: Avoid warm colors or playful elements
Avoid: Avoid complex sentence structures

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a premium, avant-garde jewelry e-commerce site. The design DNA is defined by stark, high-contrast photography, strict monochrome color palettes, and a wide geometric sans-serif typeface used in uppercase for a bold, editorial feel. The layout features full-bleed hero images and a clean, asymmetric grid. Key colors are deep black (#000000), pure white (#FFFFFF), and a near-black ink (#212123). Avoid warm colors, decorative fonts, lowercase text for UI elements, complex shadows, rounded corners on cards, and cluttered layouts. The typography should always be wide, geometric, and uppercase for headlines to maintain the brand's strong, sculptural identity.

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