---
title: "INO design system"
variant: extended
source: https://ino.jewelry/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/ino-jewelry)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# INO · Design System

> Sculptural jewelry in a stark editorial frame

**Theme:** light · **Industry:** fashion · **Source:** https://ino.jewelry/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

INO pairs a dramatic, near-black campaign hero with a bright, expansive jewelry catalog. Restrained typography and generous whitespace keep the product imagery central and the shopping experience understated.

## North star

Keep the interface monochrome and spacious, using editorial photography and irregular product placement—not decorative UI—to create drama.

## Overview

The page sets up a strong tonal contrast: a near-black, full-viewport campaign scene opens the experience, followed by a white catalog where the jewelry is presented against pale image backdrops. The measured interface palette is strictly monochrome: white for the main canvas, near-black for the dominant text, and gray for restrained borders and secondary details. The darker hero is a photographic and campaign-led exception, not a reason to recolor the shopping interface. Sequel100Wide supplies the distinctive, wide geometric voice across navigation, headings, labels, and product information; uppercase microcopy makes even small controls feel deliberate. The product grid avoids conventional uniform rows, using varied image sizes and broad gaps to create a loose editorial rhythm. Fine outlines define filter controls and navigation markers without adding shadows or colored cards. The large INO footer mark provides a bold final typographic anchor.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main catalog and footer canvas; also appears in the hero as high-contrast logo and campaign text. |
| Soft Ink | `#212123` | `--color-soft-ink` | neutral | Primary headings, navigation, product names, prices, and most interface text. |
| Quiet Graphite | `#999999` | `--color-quiet-graphite` | semantic | Subdued button text and fine control borders; keep secondary to the main ink. |
| Outline Black | `#000000` | `--color-outline-black` | neutral | Thin outlines on catalog controls and cards; use as a structural stroke rather than a fill. |
| Footer Haze | `#a6a6a7` | `--color-footer-haze` | neutral | Low-emphasis footer text only; not a defining canvas or product-interface color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#212123` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#999999` (Quiet Graphite) · `--color-border` → `#999999` (Quiet Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#212123` | `#ffffff` | 16.07:1 | AAA |
| `#999999` | `#ffffff` | 2.85:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Sequel100Wide | `--font-body` | webfont | 400 | Primary display and interface face for headings, navigation, product details, and uppercase labels. | Space Grotesk |
| Arial | `--font-arial` | system | 400 | Button labels, including the outlined catalog category controls. | Arial |

- **Sequel100Wide:** Use regular weight; wide geometric forms and uppercase treatments define the page. Keep tracking restrained except for the measured eyebrow spacing.
- **Arial:** Regular weight, uppercase, compact label styling; reserve it for button text against the more distinctive site face.

### Type scale — Custom (ratio ≈ 2.37, base 13.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 400 | 1.1 | 0 | — | Sequel100Wide | Campaign or primary page heading, in regular Sequel100Wide. |
| body | 13.5px | 400 | 1.2 | 0 | uppercase | Sequel100Wide | Uppercase product and supporting copy. |
| caption | 11px | 400 | 1 | 0 | uppercase | Sequel100Wide | Compact uppercase product labels and secondary details. |
| button | 11px | 400 | 1 | 0 | uppercase | Arial | Uppercase category and filter button labels in Arial. |
| nav | 11px | 400 | 1 | 0 | uppercase | Sequel100Wide | Uppercase primary shop navigation. |
| link | 13.5px | 400 | 1.2 | 0 | uppercase | Sequel100Wide | Uppercase editorial and shopping links. |
| eyebrow | 11px | 400 | 1 | 0.04em | uppercase | Sequel100Wide | Small uppercase campaign or section lead-in. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 2, 4, 11, 14, 18, 23, 28, 34, 36, 38, 43, 144, 146 px.
- Section rhythm 144px · element gap 28px · card padding 38px · max content width 1395px.

The page begins with a full-width campaign hero, then shifts to a broad white product catalog and a compact two-column footer. The measured maximum content width is 1395px, with spacious section rhythm and large gaps between product groupings. Product tiles form an intentionally irregular editorial grid: small pieces sit beside oversized images, with generous empty space between them. Align labels closely to their images and keep navigation visually distinct from the catalog.

## Shape & elevation

- Radius: card `9999px` · nav `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s ease` on interactive elements.

The interface is flat, with no measured shadows or gradients. Use whitespace and image scale for depth rather than layered cards. Thin gray or black outlines define controls; catalog photos sit directly on the white page with pale backdrops contained within the image treatment.

## Imagery

The hero uses a dramatic campaign photograph: a model in a pale dress is isolated against a nearly black field, paired with a simple concentric graphic. The catalog switches to clean jewelry product photography on pale gray image grounds, with both small and oversized crops. Treat imagery as the main visual content; avoid adding decorative illustration beyond campaign-specific artwork.

## Components

### Campaign hero

Full-width near-black opening scene with a white INO mark, model photography, concise campaign copy, and a centered concentric motif.

### Primary navigation

A separate white navigation band below the hero; uppercase Sequel100Wide labels pair with small outlined or filled oval markers.

### Product tile

Jewelry image on a pale gray ground with compact uppercase product name and price placed close beneath.

### Filter control

Outlined, pill-shaped filter panel with category options; measured card styling uses a thin black border.

### Category buttons

Uppercase Arial labels with restrained gray outlines, minimal fill treatment, and no visible shadow.

### Footer

Large INO wordmark balances compact newsletter, policy, and metal-price information in a sparse two-column composition.

### Measured component styles

- **Primary button** (“NECKLACES”): transparent background · text #000000 · border 1px solid #999999 · radius 0px · padding 13.5px 0px · 400 11.2464px Arial · uppercase
- **Link** (“NEW SHELL EAR CUFF $240”): transparent background · text #212123 · radius 0px · padding 0px · 400 16px Sequel100Wide
- **Input**: transparent background · text #212123 · radius 0px · padding 0px · 400 11.2464px Sequel100Wide · uppercase
- **Card** (“FILTER NECKLACES RINGS BRACELETS EARS SO”): transparent background · text #212123 · border 1px solid #000000 · radius 50.4px · padding 42.8px 33.8px · 400 16px Sequel100Wide
- **Navigation item** (“SHOP”): transparent background · text #212123 · radius 0px · padding 0px · 400 11.2464px Sequel100Wide · uppercase

## Do

- Preserve the near-black campaign hero against the white catalog.
- Use the measured monochrome palette for interface elements.
- Set interface labels in regular-weight uppercase Sequel100Wide.
- Keep product imagery dominant and its captions compact.
- Use irregular tile sizes and generous whitespace for editorial rhythm.
- Define controls with fine outlines instead of filled cards.

## Don't

- Do not turn the catalog into a dense, uniform retail grid.
- Do not introduce unmeasured accent colors into the interface.
- Do not add shadows, gradients, or layered card effects.
- Do not treat hero-image colors as brand UI colors.
- Do not enlarge product captions into prominent promotional copy.
- Do not crowd the navigation or product groupings.

## Agent prompt

Build a new INO-style jewelry page with a restrained monochrome interface and editorial pacing. Use Gallery White (#ffffff) as the catalog canvas, Soft Ink (#212123) for primary text, Quiet Graphite (#999999) for subtle control borders and secondary text, and Outline Black (#000000) for fine structural strokes. Reserve Footer Haze (#a6a6a7) for low-emphasis footer details. Use a wide geometric sans such as Space Grotesk to approximate Sequel100Wide, mostly regular weight and uppercase for navigation, labels, and product details. Pair a bold campaign image area with a clean, asymmetrical product grid, pale image grounds, and broad whitespace. Keep controls flat and outlined, avoid shadows, and let varied product-image scale provide the visual rhythm.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width dark campaign viewport followed by a separate white horizontal navigation strip. | campaign link, showroom booking link, primary navigation | near-black hero, white wordmark, model photography, concentric motif, outlined navigation markers |
| 2 | product-grid | Spacious white catalog with a filter area and asymmetrical product-image placements. | filter products, sort products, open product detail | pale image grounds, varied tile sizes, compact uppercase labels, product prices, outlined filter control |
| 3 | footer | Sparse two-column footer with an oversized wordmark balanced by compact links and newsletter details. | newsletter signup, policy links, metal-price information | large INO wordmark, compact uppercase labels, email input, quiet gray details |

## Source CSS custom properties (selected)

```css
--ease: ease-in-out;
--primaryFont: "Sequel100Wide";
--secondaryFont: "GT-America";
--kl-reviews-color-light-gray: #e9e9eb;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/ino-jewelry