A design company that begins with software.

JNDS — JoNi Narrative Design System

Design is how it behaves.

Grammar is shared.
Expression is individual.

JNDS is NCJK’s design system. It is not a shared visual skin but a shared behavioural grammar: how our products keep your context, hold your attention, tell the truth about state, help you recover and stay accessible. Each product keeps its own colours, type and character.

v2.4
Current official baseline, effective 11 November 2026
5
Core principles
6
Signatures
19
Shared areas of grammar
39
Components

Core principles

Five ideas every NCJK product shares.

  1. Narrative

    Every interaction continues a context.

    You can tell what you were doing, where you are now, and what you can do next.

  2. Calm

    Reduce noise. Create focus.

    Fewer badges, alerts, colours and motion competing for you, so what matters can be seen. Success is quiet; errors are calm and clear.

  3. Comfort

    Familiar patterns come before novelty.

    New expression is welcome, but never at the cost of the platform behaviour and accessibility people already rely on.

  4. Restraint

    Remove before adding.

    Decoration and features that are not needed go first, so what remains means more.

  5. Continuity

    Different expressions, one familiar language.

    Across products, screens and devices, what you were doing and how things work carry over.

Signatures

Six ways the grammar becomes visible.

Each signature is shown as a plain comparison. Most need no motion to be understood, so they have none.

Interaction in practice

Design is how it behaves. Try it.

Four small demonstrations of the grammar. Each one changes real state on this page, can be reset, and explains why it behaves the way it does. They work with a keyboard, a screen reader and reduced motion, and nothing you do here is collected or sent.

01 · One Signal

What matters most right now?

TryPick a task. The one strongest emphasis moves to whatever that task needs next, and sometimes to nothing at all.

Essay draft

You stopped mid-paragraph. Continuing is the obvious next step.

Strongest emphasis Continue writing

With JavaScript on, you can pick one of four tasks: a draft, a review, a reading and a failed sync. Each time, only one thing on the panel carries the strongest emphasis: the next action for the draft and the review, nothing for the reading, and the error first for the failed sync.

Why it behaves this way

JNDS keeps one strongest signal for the task in hand (CSG One Signal, Context Priority). It does not mean one button per screen: secondary actions stay, and a reading screen can have no emphasised action at all.

Errors, danger and the truth about state come before a decorative primary action, which is why the failed sync leads with its message.

Selection and focus are different things. The selected task is marked by a bar, a label and a heavier name; keyboard focus is the outline. Remove all colour and both are still readable.

Experience demonstration. It runs only on this page and changes nothing elsewhere.

02 · Context Continuity

When the screen changes, does the task carry on?

TryOpen an item, change its note or pin it, close it and open it again. Then make the window narrow or wide while it is open.

Layout: side by side

With JavaScript on, you can open an item from a list, edit its note, close it and reopen it. Your edits and selection stay, focus returns to the item you came from, and narrowing or widening the window changes only the layout.

Why it behaves this way

JNDS protects the task, not every pixel (Task-centered Continuity). Drafts, selection and where you were come back with you; a hover or a finished animation does not need to.

Back and Dismiss mean different things. On a narrow screen the item is a step forward, so the way out is Back to list. Side by side it is a panel beside the list, so the way out is Close. Escape works for both.

Focus returns to the item that opened the panel (Context-aware Focus Return), so keyboard and screen-reader users continue from where they were instead of the top of the page.

Experience demonstration. It runs only on this page and changes nothing elsewhere.

03 · Meaningful Response

How should an interface answer what you do?

TryComplete a task, then undo it. Press quickly, or many times: each press is acknowledged once and the list stays true.

3 of 3 open

  • Order prints
  • Reply to the printer
  • Book the venue

With JavaScript on, you can mark tasks done. Each press is acknowledged at once, the count updates, and an Undo next to the list puts the task back exactly as it was, with focus on its button again.

Why it behaves this way

A press is acknowledged immediately: the button gives way under the pointer within the Press duration, and the task changes state on the same click (CSG Immediate Feedback). The real state is never held back until an animation ends.

Completing is recoverable, so it happens at once and offers Undo in context, instead of asking “Are you sure?” first (CSG Contextual Undo). Undo restores the task exactly and returns focus to it. Irreversible actions would ask first.

No confetti, no toast that disappears before you can read it. The changed row and the count already say what happened; the message beside the list is for Undo and for screen readers.

Ritubon’s own press and settle motion is a product reference with its own design notes; it is not presented here as a validated rule for every NCJK product.

Experience demonstration. It runs only on this page and changes nothing elsewhere.

04 · Honest States & Recovery

When something fails, is your work still safe?

TryWrite something and save it while the simulated connection is Offline. Read what happened, switch to Online, then try again.

Simulation. Nothing leaves this page.

Not saved yet.

Saved version (this demo)

Nothing saved yet.

With JavaScript on, you can write a short note and save it through a simulated connection. While it is Offline the save fails: the note stays as you wrote it, the message says why and what to do, and Try again saves it once the connection is Online. Nothing is ever sent anywhere.

Why it behaves this way

The screen says what is really true (CSG Contextual State Visibility). “Saving…” appears only while an attempt is running, and “Saved” only after it succeeded. A finished animation is never reported as a finished save.

Saving has no measurable progress here, so there is no 0–100% bar: an honest activity line and a word instead (CSG Truthful Progress). The Save button cannot be pressed twice while an attempt runs.

The failure is explained where it happened, with what is safe and what to do next (CSG In-place Recovery). The text is never cleared, and nothing retries behind your back: you decide when to try again.

Experience demonstration. It runs only on this page and changes nothing elsewhere.

Foundations

The quiet parts underneath.

Typography & Spacing

Seven roles carry the hierarchy, made by size, spacing and contrast rather than competing weights. JNDS does not prescribe a typeface; this site uses Pretendard. Below, each role is set at this site’s real size.

Display
Design is how it behaves.
Headline
Grammar is shared.
Title
Expression is individual.
Body
Reading comes first: comfortable line length and line height, and contrast that holds in both themes.
Label
Continue writing
Caption
Edited 4 minutes ago
Data
09:41 · 1,240 · 12.5%

Data typography

Numbers that change, like times, counts and progress, use tabular figures, so columns line up and nothing jumps while they update.

Spacing scale

Eight steps from 4 to 64 px. Small distances bind things together; large ones separate ideas. Density follows the task: glance, everyday comfort, or focus.

  1. 14
  2. 28
  3. 312
  4. 416
  5. 524
  6. 632
  7. 748
  8. 864

Shared UI Iconography

Icons are part of the shared grammar, not of a product’s theme: the same action keeps the same meaning everywhere. The agreed direction is outline-first, rounded geometry on a 24 px grid, one colour by default and one family per product.

Required by JNDS v2.4 for every NCJK product. The final shared vector set has not been made yet, and no product has adopted it, so no icons are shown here.

  • Same action, same meaning

    Close is always close; Back is always back; Complete is always a check.

  • Selected is more than colour

    Selection uses a container, contrast or a fill, not a colour change alone.

  • Motion only when meaning changes

    A plus turns into a close only when it really becomes Close.

  • Product icons are separate

    An app’s own icon is its identity. Shared UI icons are the grammar inside it.

What you see is not what you touch

A 24 px icon sits inside a 44–48 px target, so it stays easy to hit.

Visible 24 px Target 44 px

Light & Dark Experience

JNDS v2.4 asks every NCJK product to let people choose Light or Dark themselves, and to change the whole screen calmly, together, instead of in pieces. Each product keeps its own palette in both.

On this site

  • Dark is the default; Light is your choice, remembered on this device only.
  • Background, surfaces, text, lines, the wordmark and an open dialog change as one scene.
  • What you are doing stays: typing (including an unfinished Korean syllable), the caret, focus, scroll position and open panels.
  • Many quick clicks end on the last choice. With reduced motion, the change is instant.

The cross-fade lasts 600 ms on cubic-bezier(.4, 0, .2, 1). That timing is this site’s experiment, borrowed from Gloword’s prototype, not a JNDS token: JNDS has approved the behaviour and left theme timing open until it is validated.

Try it here

Type something, then switch. The text, the caret and the focus stay where they are.

JNDS in practice

Real products, at their real stage.

The grammar is shared; the expression stays each product’s own. What follows is where each one stands with JNDS today, nothing more.

  • Ritubon

    Released

    With JNDS

    Chosen as the first product to adopt JNDS v2.4. That work has not started yet, so the released app is not presented as a v2.4 implementation.

    Clear, neutral workspace with its own blue-to-violet mark.

    Read the product story

  • In development

    With JNDS

    Next after Ritubon. Its development version writes to Markdown files in a folder you choose, so the writing stays yours. The light/dark timing on this site comes from its prototype.

    Magazine-like editorial: large serif type, white space and thin rules, with an archive green.

    Read the product story

  • CollectionEve

    In development

    With JNDS

    The first JNDS reference, used to test the grammar against real screens in v2.2. Its own warm, light theme is its expression, not a visual standard for the others. It is being rebuilt.

    White canvas, charcoal type and one orange signal.

    Read the product story

Design is how it behaves.

NCJK — A design company that begins with software.

Grammar is shared. Expression is individual.

Send feedback

A short note about the NCJK website or one of our products.

Kind of feedback

0 / 500 characters

Only if you would like an answer. You can send without it, and we may not be able to reply to every message.

We receive the kind of feedback, what it is about, your message, the address of the page you are on and, if you enter it, your email address. We use them only to read your feedback and, if you ask, to reply, and delete them 6 months after we receive them.Privacy Policy