Skip to content

Nocha internal reference

Page design system

Foundations, interface patterns and landing components for the Nocha house.

01 / Foundations

Foundations for a quiet interface

Color palette

Dark luxury tokens used across the landing.

--nc-blackPrimary ink
--nc-inkBody ink
--nc-mutedSecondary ink
--nc-lineBorders
--nc-line-lightSubtle borders
--nc-paperPaper
--nc-deepDeep background
--nc-errorError
--nc-liveLive
--nc-wakingWaking
--nc-quietQuiet
--nc-troubledTroubled

Spacing tokens

A compact 4px-based rhythm.

--nc-space-14px
--nc-space-28px
--nc-space-316px
--nc-space-424px
--nc-space-532px
--nc-space-640px
--nc-space-748px

Type scale

Jost, with restrained uppercase labels.

We make room for what’s next.

Section heading

Body copy stays clear and measured, with muted text for supporting information.

Eyebrow / 12px / uppercase

Text link with underline

02 / Header

Header anatomy with useful edges

Header anatomy

The global header above this page uses the same logo and trailing navigation.

HouseArchitectureAboutStudio

Use the global shell for house pages. The design-system route lives in the footer, not in the primary navigation.

03 / Iconography

Iconography: a small, legible set of line icons

Available icons

Each icon is drawn on a 24 × 24 viewBox and scales with its context.

search
16 / 24 / 32px
account
16 / 24 / 32px
heart
16 / 24 / 32px
bag
16 / 24 / 32px
menu
16 / 24 / 32px
close
16 / 24 / 32px
arrow
16 / 24 / 32px
minus
16 / 24 / 32px
plus
16 / 24 / 32px
back
16 / 24 / 32px
check
16 / 24 / 32px

04 / Buttons & links

Buttons & links with clear emphasis

Primary

High-emphasis action.

Secondary

Low-emphasis action.

Disabled

Unavailable action.

05 / Forms

Forms that explain their state

Empty

Ready for input.

Filled

The label remains visible.

Focus

Click to inspect the focus ring.

Placeholder

Helpful entry guidance.

Error

Inline feedback is connected to the field.

Enter a valid email address

Disabled

Unavailable but still legible.

Select

A compact native control.

Checkbox

A quiet confirmation.

06 / Selection & feedback

Selection and quiet feedback

Selectable cards

Used for choosing a world on the house pages.

Accordion

Secondary information, kept close.

A house for social and creative products. Each world keeps its own identity, simply signed by Nocha.

Drawer & toast

Secondary surfaces without leaving the page.

07 / Landing patterns

House layouts used on the landing

Hero

Full-bleed media, short eyebrow, two-line display.

Nocha

We make room
for what’s next.

Manifesto grid

One quiet column, three for the statement.

THE HOUSE OF NOCHA

Un espace pour les idées qui deviennent des mondes.The measure stays wide. Supporting copy sits to the right.

World card

Photography, then the product name and promise.

Deux silhouettes se faisant face derrière des parois de verre fumé.

How I Met

Des rencontres qui ont une histoire.

Principles

Three equal columns on a light wash.

  1. Human first

    Start from desire, gesture and story.

  2. Distinct by design

    Each product keeps its own identity.

  3. Quiet intelligence

    Powerful underneath, natural in form.

08 / Responsive preview

The same hierarchy, closer reach

Desktop / 1440px

Desktop

Quiet luxury, generous type, thin lines.

The wordmark sits on the left. Navigation sits on the trailing edge. Content uses a wide editorial measure.

Mobile / 390px

Same hierarchy, closer reach.

Content stacks, menu access moves to the edge and actions become full width.

Design-system toast is visible.