# Nijimi design system

Shippori Mincho with Zen Kaku Gothic New on a warm paper ground (#f3f2ee), Deep Indigo as the one accent, square corners, flat surfaces. Built for: AI knowledge assistant.

> **For AI coding agents.** Build UI from this file alone. Paste the tokens (section 11) into the global stylesheet and load the fonts (section 2). Use only the colours, fonts, sizes, radii, shadows and easings defined here: no new hex values, no other fonts, no Tailwind default palette. When something is not covered, derive it from the nearest rule here and keep it quieter, not louder.

## 1. At a glance

| | |
|---|---|
| Theme | Light first; dark included via `data-theme="dark"` |
| Palette | Sanzo Wada combination 28: Madder Brown `#762c19` · Deep Indigo `#051230` |
| Type | Shippori Mincho (display) · Zen Kaku Gothic New (body) |
| Shape | cards 3px, buttons 2px; no drop shadows, 1px hairline rings |
| Motion | 400ms / 900ms / 1600ms; `cubic-bezier(.65, 0, .35, 1)`, `cubic-bezier(.22, .61, .36, 1)` |
| Layout | 1600px max width, clamp(20px, 5.2vw, 96px) gutter, clamp(96px, 11vw, 184px) section padding, left-aligned headings |

**The designer's notes** (from the template's token file):

- Wada combination 28: Madder Brown #762c19 · Deep Indigo #051230.
- Indigo is the ink: text, rules and the film. Madder brown is the seal: one stamp, one dot, the primary action.
- Neutrals (washi paper, greys, white) are free; every chromatic colour is one of the two, or an alpha of one.
- Type: Shippori Mincho (display, vertical lines, numerals) + Zen Kaku Gothic New (UI and reading).
- Shape: hairlines and near-square corners; space does the work. Nothing casts a shadow.
- Motion: slow and soft. Things bleed in (blur to sharp), lines are written top to bottom, the film breathes.

## 2. Setup

Fonts (put in `<head>`):

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500&family=Zen+Kaku+Gothic+New:wght@400;500&display=swap">
```

Base styles, after the tokens:

```css
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--text-body, 16px);
  line-height: var(--text-body--line-height, 1.5);
  letter-spacing: var(--text-body--letter-spacing, 0);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--color-foreground); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
```

## 3. Colour

### Palette

| Name | Hex | Token |
|---|---|---|
| Madder Brown (Wada) | `#762c19` | `--palette-madder-brown` |
| Deep Indigo (Wada) | `#051230` | `--palette-deep-indigo` |

### Roles

| Role | Light | Dark | Use for |
|---|---|---|---|
| `--color-background` | `#f3f2ee` | `#051230` | Page background |
| `--color-foreground` | `#051230` | `#f3f2ee` | Headings and primary text |
| `--color-body` | `#66676a` | `#a6a7aa` | Body copy |
| `--color-surface` | `#fbfbf9` | `#111d39` | Cards and raised panels |
| `--color-surface-foreground` | `#051230` | `#f3f2ee` | Text on surfaces |
| `--color-muted` | `#eeede9` | `#0e1b37` | Quiet bands, wells, hover rows |
| `--color-muted-foreground` | `#66676a` | `#a6a7aa` | Secondary text, captions, labels |
| `--color-border` | `#0810311f` | `#f0f0f021` | Hairlines, dividers, card edges |
| `--color-border-strong` | `#05123238` | `#f2f2ee3d` | Emphasised rules, input edges on hover |
| `--color-input` | `#0810311f` | `#f0f0f021` | Input borders |
| `--color-input-background` | `#fbfbf9` | `#111d39` | Input fill |
| `--color-ring` | `#762c19` | `#762c19` | Focus ring |
| `--color-primary` | `#051230` | `#f3f2ee` | Primary action fill |
| `--color-primary-foreground` | `#f3f2ee` | `#051230` | Text on primary |
| `--color-secondary` | `#762c19` | `#762c19` | Secondary action fill |
| `--color-secondary-foreground` | `#ffffff` | `#ffffff` | Text on secondary |
| `--color-accent` | `#051230` | `#762c19` | Brand accent: highlights, links, active states |
| `--color-accent-foreground` | `#f3f2ee` | `#ffffff` | Text on accent |
| `--color-inverse` | `#66676a` | `#f3f2ee` | Inverted band (dark on light pages, light on dark) |
| `--color-inverse-foreground` | `#f3f2ee` | `#051230` | Text on inverse |
| `--color-inverse-muted` | `#bdbdbc` | `#5f6778` | Secondary text on inverse |
| `--color-inverse-border` | `#f3f2ee29` | `#05123029` | Hairlines on inverse |
| `--color-destructive` | `#762c19` | `#864535` | Errors and destructive actions |
| `--color-destructive-foreground` | `#ffffff` | `#ffffff` | Text on destructive |

### How the colours are used

- Share of page area by surface colour, measured on the home page: Deep Indigo 53.8%, #fbfbf9 30.1%, #eeede9 9.2%, #f3f2ee 6.4%. Keep roughly that balance; the accent's share is about where it is used, not how much.
- `--color-accent` (#051230) is the brand's accent: it fills whole bands and cards here, so it can carry a section. Never use it for body text.
- `--color-primary` (#051230) fills the main action; its text is `--color-primary-foreground` (#f3f2ee), contrast 16.51:1.
- Text: headings `--color-foreground` (16.51:1 on the page), secondary text `--color-muted-foreground` (5.05:1). Don't go lighter than muted for anything people must read.
- Surfaces step: `background` → `muted` for quiet bands → `surface` for cards → `inverse` (#66676a) for one contrasting band or card per page.
- Borders are hairlines: `--color-border` (#0810311f), often drawn as `box-shadow: 0 0 0 1px` (inset on cards) rather than `border`.
- Every chromatic colour is one of the Wada combination's colours or a tint, shade or alpha of one. Neutrals (white, greys, near-black) are free. No other hues, no rainbow gradients.
- No decorative gradients: flat fills.

## 4. Typography

| Family | Role | Weights | Licence | Source |
|---|---|---|---|---|
| Shippori Mincho | display | 500 | SIL Open Font License 1.1 | Google Fonts |
| Zen Kaku Gothic New | body | 400, 500 | SIL Open Font License 1.1 | Google Fonts |

| Token | Desktop (1440) | Phone (390) | CSS size | Weight | Line height | Tracking | Case | Font |
|---|---|---|---|---|---|---|---|---|
| `--text-display` | 80.64px | 42px | `clamp(42px, 5.6vw, 92px)` | 500 | 1.08 | -0.025em | as written | `--font-display` |
| `--text-h2` | 46.08px | 30px | `clamp(30px, 3.2vw, 50px)` | 500 | 1.16 | -0.01em | as written | `--font-display` |
| `--text-h3` | 27.36px | 22px | `clamp(22px, 1.9vw, 30px)` | 500 | 1.3 | -0.01em | as written | `--font-display` |
| `--text-lead` | 18.72px | 17px | `clamp(17px, 1.3vw, 20px)` | 400 | 1.75 | 0.009em | as written | `--font-body` |
| `--text-body` | 16px | 16px | `16px` | 400 | 1.75 | 0.01em | as written | `--font-body` |
| `--text-small` | 14px | 14px | `14px` | 400 | 1.75 | 0.011em | as written | `--font-body` |
| `--text-eyebrow` | 12.5px | 12.5px | `12.5px` | 500 | 1.75 | 0.14em | uppercase | `--font-body` |

Rules:
- Headlines: weight 500, tracking -0.01em, line height 1.16. Use only the weights listed above.
- Accent words in headlines: coloured var(--color-muted-foreground), weight 500. One to three words per headline at most, the rest of the line in the heading style (e.g. “what your”).
- Eyebrow above section titles: 12.5px, weight 500, uppercase, tracking 0.14em, var(--color-muted-foreground), in Zen Kaku Gothic New.
- Body copy: 16px in `--color-body`, lines no longer than 65 characters (`max-width: 60ch`).
- Uppercase is used for small labels only; never for headlines or paragraphs.
- No italics anywhere.

## 5. Layout and spacing

- Container: max 1600px, centred, side padding `--gutter` (clamp(20px, 5.2vw, 96px); 74.88px at 1440, 20.27px on phones).
- Sections: `--section-y` top and bottom (clamp(96px, 11vw, 184px); 158.39px at 1440, 96px on phones). Adjacent sections on the same ground share the rhythm; don't add extra margins.
- Spacing scale (base 4px): `--space-1` 4px, `--space-2` 6px, `--space-3` 10px, `--space-4` 14px, `--space-5` 22px, `--space-6` 30px, `--space-7` 48px, `--space-8` 64px. Most common gaps on the pages: 8px, 12px, 30px, 28px, 20px, 10px.
- Section headings are left-aligned, on the container edge; never centre long text.
- Breakpoints (desktop-first): 560px, 900px, 960px, 1100px. Phone layout (the phone gutter and section padding above) applies below 560px.
- Grids of three or four equal items: all in one row above 1100px, two columns down to 560px, one column below. Items in a row share the same height and their actions align at the bottom.

## 6. Shape and depth

- Radii: `--radius-sm` 2px, `--radius-md` 3px, `--radius-lg` 3px.
- Rules and borders: 1px var(--color-border), 1px #f1f1f124.
- Buttons: 2px. Cards: 3px. Inputs: 0px.
- No drop shadows. Depth comes from surface colour steps and hairlines.

## 7. Motion

- Durations: `--duration-fast` 400ms, `--duration-base` 900ms, `--duration-slow` 1600ms.
- Easings: `--ease-in-out` `cubic-bezier(.65, 0, .35, 1)`, `--ease-out` `cubic-bezier(.22, .61, .36, 1)`. Use `--ease-out` for things that enter, lift or underline; `--ease-in-out` for things that move across or open and close.
- What animates: color, background, box-shadow, opacity and stroke. Hover changes colour or fill, never layout.
- The template uses 12 keyframe animations: content rises or fades in once as it enters the viewport.
- Respect `prefers-reduced-motion`: drop to opacity changes or none.

## 8. Components

Exact recipes, measured from the template. Use these classes or translate them 1:1 into your framework.

### Buttons

Primary: (“Start free”) var(--color-foreground) fill, 40px tall. Secondary: var(--color-secondary) fill. Text link button: 14px, var(--color-muted-foreground).

```css
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px;
  padding-inline: 18px 18px;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 500ms var(--ease-out), box-shadow 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border: none;
}
.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-secondary-foreground);
  border: none;
}
.btn-ghost {
  background: transparent;
  color: var(--color-muted-foreground);
  border: none;
  border-radius: 0px;
  font-weight: 400;
}
.btn-outline { background: transparent; color: var(--color-foreground); border: 1px solid var(--color-border-strong); }
.btn-outline:hover { border-color: var(--color-foreground); }
.card-inverse .btn-outline { color: var(--color-inverse-foreground); border-color: var(--color-inverse-border); }
```

Use one `.btn-primary` per view. Actions beside it, and the actions of the other items in a set, use `.btn-outline`; `.btn-secondary` is for the one featured item (see Cards). All buttons share the `.btn` base height and padding.

```html
<a class="btn btn-primary" href="#">Start free</a>
<a class="btn btn-secondary" href="#">Start free</a>
```

### Inputs

```css
.field { display: grid; gap: 8px; }
.label { font-size: 14px; font-weight: 500; color: var(--color-foreground); }
.input {
  height: 52px;
  padding: 0 2px;
  background: transparent;
  color: var(--color-foreground);
  border: none;
  box-shadow: rgba(5, 18, 48, 0.22) 0px -1px 0px 0px inset;
  border-radius: 0px;
  font: inherit; font-size: 16px;
}
.input::placeholder { color: #8f9093; }
.input:focus { outline: none; box-shadow: 0 0 0 2px var(--color-ring); }
textarea.input { height: auto; min-height: 140px; padding-block: 14px; }
```

### Cards

Cards sit on the page in grids with 12px gaps. 

```css
.card {
  background: var(--color-surface);
  color: var(--color-surface-foreground);
  border-radius: 3px;
  padding: 32px 32px;
  border: 1px solid var(--color-border);
}
.card h3 { font-size: var(--text-h3, 24px); font-weight: var(--text-h3--font-weight, 500); letter-spacing: var(--text-h3--letter-spacing, 0); line-height: var(--text-h3--line-height, 1.2); }
.card p { color: var(--color-muted-foreground); }
.card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.card li { display: flex; gap: 10px; align-items: baseline; }
.card li::before { content: ""; flex: none; width: 8px; height: 1px; background: currentColor; opacity: .5; transform: translateY(-4px); }
```

To feature one item in a set (a recommended plan, the main offer), make it the card with a 1px `--color-foreground` border with the `.btn-secondary` action; the others stay `.card` with `.btn-outline`. Mark it with a small text label in the eyebrow style, not a badge.

Big figures (prices, stats): `--font-display` at `--text-h2` size, weight and tracking, `font-variant-numeric: tabular-nums`; the unit or period beside it in `--text-small` and the muted colour.

### Navigation bar

76px tall, sticky to the top, transparent over the page. Logo left, 5 links (14px, weight 400), then one primary button (“Start free”) on the right.

```css
.nav { position: sticky; top: 0; z-index: 50; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: var(--gutter); }
.nav a.link { font-size: 14px; font-weight: 400; color: var(--color-foreground); text-decoration: none; opacity: .8; }
.nav a.link:hover { opacity: 1; }
```

### Footer

On the page ground, link columns, links 15px in `--color-muted-foreground`, the wordmark and a one-line note, legal links last.

### Section header

```html
<section class="section">
  <div class="container">
    <header class="section-head">
      <p class="eyebrow">Section label</p>
      <h2>Short statement headline</h2>
      <p class="lead">One sentence that says what the section gives the reader.</p>
    </header>
    <!-- grid of .card -->
  </div>
</section>
```

```css
.section-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: 48px; }
.section-head h2 { font-size: var(--text-h2); line-height: var(--text-h2--line-height); letter-spacing: var(--text-h2--letter-spacing); font-weight: var(--text-h2--font-weight); }
.lead { font-size: var(--text-lead, 18px); color: var(--color-muted-foreground); max-width: 56ch; }
.eyebrow { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted-foreground); }
```

## 9. Voice and copy

Written for: AI knowledge assistant. Nijimi is the AI knowledge assistant for teams. Ask in plain words and get an answer with the source beside it.

- Headlines: 2 words typical (1–8), sentence case, no closing full stop. Plain statements, no hype words.
- Buttons: two words or fewer, a verb first (“Start free”, “Primary”, “Ink”, “Small”).
- Minimal text: every word earns its place. One idea per section, one sentence of support under a headline.
- No decorative micro-text, fake data readouts, “LIVE” chips or invented metrics.

Headlines from the template, for tone:

- Ask the way you would ask a colleague.
- Forty sources. One place to ask.
- Three things Nijimi will always do.
- Your knowledge stays yours.
- Ask your first question this afternoon.
- Colour

## 10. Do and don’t

**Do**

- Use `--color-background` for the page and step to `--color-muted` / `--color-surface` for bands and cards.
- Give the main action `--color-primary`; one primary button per view. Other actions beside it use `.btn-outline`.
- Keep headings in `--font-display` at the scale above, with its tracking.
- Use hairline borders (`--color-border`) to separate, and generous `--section-y` spacing between sections.
- Animate with `--ease-*` and `--duration-*` only.

**Don’t**

- Introduce colours outside the palette and roles (no Tailwind blue/indigo/gray defaults).
- Use a font other than Shippori Mincho and Zen Kaku Gothic New.
- Add drop shadows.
- Add gradients, glows or glass effects.
- Use italics.
- Set headlines in uppercase.
- Mix radii: buttons 2px, cards 3px, inputs 0px.
- Centre long paragraphs, or let text run wider than 65 characters.
- Add emoji, icons in every heading, or decorative badges.

## 11. Tokens

The complete set. Paste into your global stylesheet before anything else.

```css
:root {
  color-scheme: light;
  /* palette */
  --palette-madder-brown:        #762c19;
  --palette-deep-indigo:         #051230;

  /* colour roles (light) */
  --color-background:            #f3f2ee;
  --color-foreground:            #051230;
  --color-body:                  #66676a;
  --color-surface:               #fbfbf9;
  --color-surface-foreground:    #051230;
  --color-muted:                 #eeede9;
  --color-muted-foreground:      #66676a;
  --color-border:                #0810311f;
  --color-border-strong:         #05123238;
  --color-input:                 #0810311f;
  --color-input-background:      #fbfbf9;
  --color-ring:                  #762c19;
  --color-primary:               #051230;
  --color-primary-foreground:    #f3f2ee;
  --color-secondary:             #762c19;
  --color-secondary-foreground:  #ffffff;
  --color-accent:                #051230;
  --color-accent-foreground:     #f3f2ee;
  --color-inverse:               #66676a;
  --color-inverse-foreground:    #f3f2ee;
  --color-inverse-muted:         #bdbdbc;
  --color-inverse-border:        #f3f2ee29;
  --color-destructive:           #762c19;
  --color-destructive-foreground: #ffffff;

  /* type */
  --font-display:                "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", ui-serif, Georgia, serif;
  --font-body:                   "Zen Kaku Gothic New", "Hiragino Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-display:                clamp(42px, 5.6vw, 92px);
  --text-display--line-height:   1.08;
  --text-display--letter-spacing: -0.025em;
  --text-display--font-weight:   500;
  --text-h2:                     clamp(30px, 3.2vw, 50px);
  --text-h2--line-height:        1.16;
  --text-h2--letter-spacing:     -0.01em;
  --text-h2--font-weight:        500;
  --text-h3:                     clamp(22px, 1.9vw, 30px);
  --text-h3--line-height:        1.3;
  --text-h3--letter-spacing:     -0.01em;
  --text-h3--font-weight:        500;
  --text-lead:                   clamp(17px, 1.3vw, 20px);
  --text-lead--line-height:      1.75;
  --text-lead--letter-spacing:   0.009em;
  --text-lead--font-weight:      400;
  --text-body:                   16px;
  --text-body--line-height:      1.75;
  --text-body--letter-spacing:   0.01em;
  --text-body--font-weight:      400;
  --text-small:                  14px;
  --text-small--line-height:     1.75;
  --text-small--letter-spacing:  0.011em;
  --text-small--font-weight:     400;
  --text-eyebrow:                12.5px;
  --text-eyebrow--line-height:   1.75;
  --text-eyebrow--letter-spacing: 0.14em;
  --text-eyebrow--font-weight:   500;

  /* space and layout */
  --space-1:                     4px;
  --space-2:                     6px;
  --space-3:                     10px;
  --space-4:                     14px;
  --space-5:                     22px;
  --space-6:                     30px;
  --space-7:                     48px;
  --space-8:                     64px;
  --container:                   1600px;
  --gutter:                      clamp(20px, 5.2vw, 96px);
  --section-y:                   clamp(96px, 11vw, 184px);

  /* shape */
  --radius-sm:                   2px;
  --radius-md:                   3px;
  --radius-lg:                   3px;
  --shadow-ring:                 rgba(5, 18, 48, 0.22) 0px 0px 0px 1px inset;

  /* motion */
  --ease-in-out:                 cubic-bezier(.65, 0, .35, 1);
  --ease-out:                    cubic-bezier(.22, .61, .36, 1);
  --duration-fast:               400ms;
  --duration-base:               900ms;
  --duration-slow:               1600ms;
}

/* dark theme: <html data-theme="dark"> or class="dark" */
[data-theme="dark"], .dark {
  color-scheme: dark;
  --color-background:            #051230;
  --color-foreground:            #f3f2ee;
  --color-body:                  #a6a7aa;
  --color-surface:               #111d39;
  --color-surface-foreground:    #f3f2ee;
  --color-muted:                 #0e1b37;
  --color-muted-foreground:      #a6a7aa;
  --color-border:                #f0f0f021;
  --color-border-strong:         #f2f2ee3d;
  --color-input:                 #f0f0f021;
  --color-input-background:      #111d39;
  --color-ring:                  #762c19;
  --color-primary:               #f3f2ee;
  --color-primary-foreground:    #051230;
  --color-secondary:             #762c19;
  --color-secondary-foreground:  #ffffff;
  --color-accent:                #762c19;
  --color-accent-foreground:     #ffffff;
  --color-inverse:               #f3f2ee;
  --color-inverse-foreground:    #051230;
  --color-inverse-muted:         #5f6778;
  --color-inverse-border:        #05123029;
  --color-destructive:           #864535;
  --color-destructive-foreground: #ffffff;
}

/* breakpoints (desktop-first): 560px, 900px, 960px, 1100px */
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; }
}
```

---
Source: the Nijimi template, measured from its rendered pages (2026-10-08).