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

# Nomen Nescio · Design System

> Quiet essentials, presented with editorial restraint

**Theme:** light · **Industry:** fashion · **Source:** https://nomennescio.fi/ · **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._

A Helsinki fashion label homepage pairs a full-bleed campaign image with restrained product and category browsing. Warm off-white, near-black typography, and generous open space keep attention on the clothing and people.

## North star

Keep the interface quiet and flat so that oversized fashion photography and the garments themselves provide nearly all visual drama.

## Overview

The page uses a warm, almost-white canvas (#fdfdfa) as a continuous ground from the hero through product listings, reviews, and footer. Near-black (#2b2b2e) provides the main reading contrast and the narrow dark announcement strip; imagery supplies most of the page’s other colour, rather than a designed accent palette. The custom NomenNesciopro sans-serif is used at regular weight throughout, with compact tracking and no forced uppercase. A large, quiet hero photograph fills the opening section, with small white text overlaid at its sides. Below, the layout shifts to an inset editorial category row and a four-column product grid, with concise captions and pricing. Left-aligned section labels, broad gaps between content groups, and very light dividers preserve a calm rhythm. Testimonial typography grows in scale, while the footer returns to small, organized link columns and a simple newsletter field. Keep surfaces flat and let garment photography carry texture and contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Ivory | `#fdfdfa` | `--color-gallery-ivory` | brand | Continuous page canvas behind the hero, category panels, product grid, review, and footer. |
| Soft Charcoal | `#2b2b2e` | `--color-soft-charcoal` | neutral | Primary text, dark announcement strip, footer text, and high-contrast navigation. |
| Quiet Divider | `#dddddb` | `--color-quiet-divider` | semantic | Subtle hairlines, most notably around the newsletter input and other form details. |
| Muted Stone | `#bebcb4` | `--color-muted-stone` | neutral | Secondary copy and low-emphasis text, including the short brand descriptor. |
| Pale Khaki | `#d9d7c9` | `--color-pale-khaki` | neutral | A measured button-related border tone; not a defining page colour, so use sparingly. |

### Semantic aliases

`--color-canvas` → `#fdfdfa` (Gallery Ivory) · `--color-surface` → `#2b2b2e` (Soft Charcoal) · `--color-text` → `#2b2b2e` (Soft Charcoal) · `--color-text-muted` → `#fdfdfa` (Gallery Ivory) · `--color-text-subtle` → `#bebcb4` (Muted Stone) · `--color-border` → `#dddddb` (Quiet Divider)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2b2b2e` | `#fdfdfa` | 13.85:1 | AAA |
| `#fdfdfa` | `#2b2b2e` | 13.85:1 | AAA |
| `#bebcb4` | `#fdfdfa` | 1.87:1 | fail |
| `#bebcb4` | `#2b2b2e` | 7.42:1 | AAA |

### Gradients

- `linear-gradient(to right, rgb(253, 253, 250), rgb(253, 253, 250))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NomenNesciopro | `--font-body` | webfont | 400 | Brand typeface for navigation, headings, product captions, body copy, links, and controls. | Inter |

- **NomenNesciopro:** Regular weight throughout; compact negative tracking on body-scale text, sentence case, and no default uppercase styling.

### Type scale — Custom (ratio ≈ 2.842, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 400 | 1.1 | -0.007em | — | NomenNesciopro | Large campaign or primary page headline, used with restrained weight. |
| body | 19px | 400 | 1 | -0.02em | — | NomenNesciopro | General content, product details, navigation-scale copy, and review text. |
| caption | 15px | 400 | normal | -0.02em | — | NomenNesciopro | Small product labels, supporting details, and footer information. |
| button | 19px | 400 | 1 | -0.02em | — | NomenNesciopro | Text for collection links and other understated actions. |
| nav | 19px | 400 | 0.93 | -0.02em | — | NomenNesciopro | Header navigation and locale or shopping controls. |
| link | 19px | 400 | 1 | -0.02em | — | NomenNesciopro | Product names and editorial or collection navigation links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 3, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 36, 48 px.
- Section rhythm 68px · element gap 8px · card padding — · max content width 1400px.

A full-width campaign hero leads into a centered content area capped at the measured 1400px page maximum. The category section uses a left-side label beside two wide image panels; the latest-arrivals area changes to a four-column product grid. Reviews and footer content stay aligned to the same broad page structure. Sections are separated by generous vertical breathing room, while product cards remain compact and information-dense. Keep headings and labels left-aligned rather than centering every block.

## Shape & elevation

- Radius: button `50%`
- Shadow `inset` (nav): `rgba(0, 0, 0, 0) 0px -1px 0px 0px inset`
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The design is predominantly flat, with no meaningful card shadows or raised surfaces. The dark announcement band and full-bleed hero create contrast through colour and image layering rather than elevation. Use restrained hairlines for form details, and avoid framing each product as a separate boxed card.

## Imagery

Fashion photography is the defining visual material: a full-bleed campaign shot opens the page, followed by lifestyle category images and isolated garment product photographs. Images are large, direct, and naturally coloured, with little visible decoration or framing. The photo’s dark clothing and pale studio surroundings create contrast against the warm ivory interface. No illustration or 3D treatment is evident.

## Components

### Announcement and overlay navigation

Place a compact charcoal shipping message above a transparent hero header; overlay the brand, shop links, language, search, and cart in light text.

### Campaign hero

Use a full-bleed fashion photograph with a short promotion at the left and an Explore collection link at the right.

### Category feature panels

Show two large editorial category images beside a left-aligned Explore label, with concise collection names and muted supporting lines.

### Product grid

Arrange product photography in four columns with simple name and price captions; show sale prices and savings without heavy card treatment.

### Testimonial

Pair a small section label with an oversized customer quote, attribution, and understated slide indicators.

### Newsletter and footer

Group store, policy, and social links into columns; finish with an email field using a subtle underline and a simple arrow action.

### Measured component styles

- **Primary button** (“EUR €”): transparent background · text #fdfdfa · radius 0px · padding 0px · 400 19px NomenNesciopro
- **Link** (“Nomen Nescio Collection Timeless essenti”): transparent background · text #2b2b2e · radius 0px · padding 0px · 400 19px NomenNesciopro
- **Input**: transparent background · text #2b2b2e · radius 0px · padding 0px 0px 5px 0px · 400 19px NomenNesciopro
- **Navigation item** (“Nomen Nescio”): transparent background · text #fdfdfa · radius 0px · padding 0px · 400 19px NomenNesciopro

## Do

- Use Gallery Ivory (#fdfdfa) as the dominant page canvas.
- Let campaign and product photography lead the visual hierarchy.
- Use Soft Charcoal (#2b2b2e) for crisp text and the announcement band.
- Keep typography regular-weight, compact, and sentence case.
- Align section labels and product information to the left.
- Use open spacing between sections and restrained hairlines in forms.

## Don't

- Do not add a saturated accent palette absent from the measured interface.
- Do not place every product in a shadowed or boxed card.
- Do not add gradients, decorative icons, or ornamental backgrounds.
- Do not turn navigation or headings into heavy uppercase display text.
- Do not let borders or buttons compete with the fashion imagery.
- Do not use screenshot-only image colours as interface palette values.

## Agent prompt

Build a new fashion-commerce page in Nomen Nescio’s restrained editorial style. Use Gallery Ivory (#fdfdfa) for the continuous canvas and Soft Charcoal (#2b2b2e) for navigation, copy, and a compact announcement band. Reserve Muted Stone (#bebcb4) for secondary text and Quiet Divider (#dddddb) for subtle form hairlines; Pale Khaki (#d9d7c9) is measured but should remain rare. Use a regular-weight sans-serif close to NomenNesciopro, with compact tracking and natural sentence case. Establish hierarchy through large, unboxed fashion photographs: a broad campaign image first, then category imagery and a four-column product grid. Keep section labels and product captions left-aligned, with generous section breathing room and concise copy. Favor flat surfaces, restrained controls, and a small-column footer; never let interface decoration rival the photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign photograph beneath an overlaid header, with small copy positioned toward both sides. | campaign promotion, collection link | edge-to-edge photography, transparent overlay navigation, light text over image |
| 2 | category-nav | A left-aligned section label sits beside two wide image-led category panels. | browse by collection, category links | paired editorial images, short category captions, muted descriptors |
| 3 | product-grid | Left-aligned heading above a four-column product grid with image-led cards. | browse products, compare prices, sale labels | garment photography, compact captions, regular and sale pricing |
| 4 | testimonials | Small section heading beside a large testimonial quote and compact slide controls. | customer proof, carousel pagination | oversized quote, small attribution, minimal indicators |
| 5 | footer | Four-column footer with grouped links, a newsletter form, locale controls, and copyright. | newsletter signup, policy navigation, social links | compact link columns, underlined email field, minimal form arrow |

## Source CSS custom properties (selected)

```css
--section-vertical-spacing: 3rem;
--section-vertical-spacing-tight: 3rem;
--section-stack-gap: 2.25rem;
--section-stack-gap-tight: 2.25rem;
--form-gap: 1.25rem;
--fieldset-gap: 1rem;
--form-control-gap: 0.625rem;
--checkbox-control-gap: 0.75rem;
--heading-font-family: "NomenNesciopro", sans-serif;
--heading-font-weight: 400;
--heading-font-style: normal;
--heading-text-transform: normal;
--heading-letter-spacing: -0.02em;
--text-font-family: "NomenNesciopro", sans-serif;
--text-font-weight: 400;
--text-font-style: normal;
--text-letter-spacing: -0.02em;
--button-font: normal 400 1.125rem / 1.65 "NomenNesciopro", sans-serif;
--button-text-transform: normal;
--button-letter-spacing: 0.0em;
--text-heading-size-factor: 1.2;
--text-h1: max(0.75rem, clamp(1.375rem, 1.146341463414634rem + 0.975609756097561vw, 2rem) * 1.2);
--text-h2: max(0.75rem, clamp(1.25rem, 1.0670731707317074rem + 0.7804878048780488vw, 1.75rem) * 1.2);
--text-h3: max(0.75rem, clamp(1.125rem, 1.0335365853658536rem + 0.3902439024390244vw, 1.375rem) * 1.2);
--text-h4: max(0.75rem, clamp(1rem, 0.9542682926829268rem + 0.1951219512195122vw, 1.125rem) * 1.2);
--text-h5: max(0.70rem, calc(0.875rem * 1.2));
--text-h6: max(0.70rem, calc(0.75rem * 1.2));
--text-xs: 14px;
--text-sm: 1.125rem;
--text-base: 1.1875rem;
--text-lg: 1.3125rem;
--text-xl: 1.375rem;
--rounded-full: 9999px;
--button-border-radius: 0.0rem;
--input-border-radius: 0.0rem;
--shadow-sm: 0 2px 8px rgb(0 0 0 / 0.05);
--shadow: 0 5px 15px rgb(0 0 0 / 0.05);
--shadow-md: 0 5px 30px rgb(0 0 0 / 0.05);
--shadow-block: px px px rgb(var(--text-primary) / 0.0);
--product-card-text-transform: inherit;
```

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