---
name: Ino Jewelry
description: "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."
version: alpha

colors:
  background: "#000000"
  primary: "#212123"
  neutral: "#A6A6A7"
  bg-soft: "#FFFFFF"
  line: "rgba(21,21,23,1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "1px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 11px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#212123`)** — uses `ink` token
- **Muted (`#A6A6A7`)** — uses `muted` token
- **Borders (`rgba(21,21,23,1)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

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

## Elevation & Depth

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

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## 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

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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