# Ino Jewelry · Design system migration spec

> Source: https://ino.jewelry  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of how to use high-end photography and minimal UI to elevate a physical product into the realm of contemporary art.

## 1. Identity DNA

Ino Jewelry's design system operates like an art gallery that has removed every pedestal except the one holding the work. The visual language treats each piece of jewelry as a sculptural object, with the interface receding to let the photographic evidence of craftsmanship command full attention.

**One-liner:** A premium jewelry brand using sculptural, maximalist photography and a stark, high-contrast layout to position products as art objects.
**Keywords:** avant-garde · sculptural · luxury · maximalist · editorial
**Analogy:** Like an art gallery showcasing wearable sculptures, where the jewelry is treated as a piece of contemporary art rather than a traditional accessory.

## 2. Color

Color is used as a structural device, not a decorative one. The palette is a strict monochrome—black, white, and near-black—deployed to create high-contrast backdrops that isolate the product with gallery-like clarity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#212123` | body text |
| `--muted` | `#A6A6A7` | placeholder |
| `--line` | `rgba(21,21,23,1)` | divider |

**Color principle:** 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.

The principle is absolute: color serves only to frame the object, never to compete with it.

## 3. Typography

Typography is set in a single wide geometric sans-serif, reinforcing the brand's sculptural, avant-garde character. Headlines and navigation are rendered in uppercase, functioning as bold, graphic statements within the layout rather than conventional text.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 24px | 1.2 | 400 | 1px | Headline |
| body | 16px | 1.2 | 400 | 0px | Base |
| caption | 11px | 1.2 | 400 | 0px | Navigation |

**Type rules:**
- 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

## 4. Spacing

Spacing follows a tight, grid-based rhythm that creates deliberate tension between elements, emphasizing the curated nature of the presentation.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Grid-based with tight, deliberate spacing around text and images

## 5. Surfaces

Surfaces are defined by absence and sharp edges. Shadows and decorative borders are eliminated; depth is communicated solely through the photographic contrast of the images themselves and the precise use of thin, 1px black separators.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Thin 1px solid black lines for navigation separators, otherwise no borders, relying on image contrast.

## 6. Layout

The layout skeleton begins with a full-bleed hero image, a commanding photographic field. Below, an asymmetric two-column product grid arranges items in a clean, deliberate pattern that prioritizes visual impact over symmetrical order.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is purposefully restrained, consisting of gentle fade-ins and smooth opacity transitions. The philosophy is to guide focus without drawing attention to the interface itself.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.12, 0.67, 0.53, 1)`
- **Patterns:**
  - fade-in
  - opacity transitions

- **Hover:** Simple opacity transition on clickable elements
- **Click:** Standard cursor change to pointer
- **Transition:** Smooth 0.5s opacity fade for interactive states
- **Keyboard:** Standard focus states not visible in screenshot

## 8. Voice & Don'ts

The editorial voice is minimal, confident, and direct—using short, uppercase statements that function as graphic elements. The copy avoids descriptive flourish, letting the imagery carry the narrative weight.

- **Tone:** Minimal, confident, avant-garde
- **Headline style:** Short, punchy, uppercase statements like 'MORE IS MORE'
- **CTA style:** Direct, uppercase, underlined on hover
- **Avoid:** Avoid overly descriptive or flowery copy / Avoid warm colors or playful elements / Avoid complex sentence structures

### Don'ts
- ❌ 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

The system deliberately forgoes warmth, decoration, and complexity to maintain a stark, uncompromising focus on the product as art object.

## System Prompt (paste into AI tool)

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