Nemukai

# Nemukai — Obsidian theme + CSS snippets

Warm, layered, alive. A coral reef-inspired design system for [Obsidian](https://obsidian.md/).

**v0.2** — monolith split into per-feature snippets, plus an optional custom theme. See [CHANGELOG.md](CHANGELOG.md).

![Movies List Dashboard](screenshots/movies-list-dark.png)
![Theme Overview](screenshots/theme-overview.png)

## What's included

| Piece | Description |
|---|---|
| [**Nemukai theme**](theme/) *(optional)* | Full custom theme — tokens, typography, tables, callouts, links, sidebar. Replaces Minimal / any other theme. |
| [**Tokens snippet**](snippets/nemukai-tokens.css) | Standalone design tokens + Style Settings controls. Use this if you want to keep your existing theme. |
| [**Custom callouts**](callouts/) | 10 domain callouts (`project`, `ship`, `wip`, `blocker`, `decision`, `idea`, `koe`, `nemukai`, `metric`, `log`) with hairline borders and uppercase labels. |
| [**Media gallery**](movies-list/) | 6-per-row poster grid used by Movies, Shows, Games. Cards, filters, sorts, search, spotlight, tabs. |
| [**Media editor**](snippets/nemukai-media-editor.css) | Rating editor modal + Insights panel blocks used on media pages. |
| [**Media connections**](snippets/nemukai-media-connections.css) | Taste DNA / tag correlation dashboard (Movies "Connections" tab). |
| [**Wishlist gallery**](wishlist/) | 4-per-row product grid with category filters, price stats, acquisition tracking. |

Each feature snippet is independent — install only what you need.

## Quick start

### Prerequisites

1. [Obsidian](https://obsidian.md/) (v1.4+)
2. [Dataview](https://github.com/blacksmithgu/obsidian-dataview) — required for media and wishlist galleries (enable **DataviewJS** in its settings)
3. [Style Settings](https://github.com/mgmeyers/obsidian-style-settings) — required for in-app customization (accent color, font set, grid size)

### Fonts

Install these free fonts from [Google Fonts](https://fonts.google.com/):

- **Default (Archive):** [Young Serif](https://fonts.google.com/specimen/Young+Serif) · [Figtree](https://fonts.google.com/specimen/Figtree) · [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)
- *Optional (Coastal):* [Instrument Serif](https://fonts.google.com/specimen/Instrument+Serif) · [Plus Jakarta Sans](https://fonts.google.com/specimen/Plus+Jakarta+Sans)
- *Optional (Studio):* [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond) · [Outfit](https://fonts.google.com/specimen/Outfit)

### Install — pick one path

#### Path A — Use the Nemukai theme (recommended, full look)

Copy the theme folder:

```
<your-vault>/.obsidian/themes/Nemukai/
├── manifest.json
└── theme.css
```

Then: **Settings → Appearance → Themes → Manage → Nemukai**.

The theme already defines all `--nk-*` tokens and the Style Settings block, so you do **not** need `nemukai-tokens.css`.

#### Path B — Keep your own theme, add Nemukai features

Copy `snippets/nemukai-tokens.css` into your vault's snippets folder and enable it:

```
<your-vault>/.obsidian/snippets/nemukai-tokens.css
```

**Settings → Appearance → CSS Snippets → reload → toggle on.**

This loads only the design tokens — your current theme's colors, fonts, and layout stay untouched. Feature snippets below will pick up the tokens.

### Install the feature snippets

Copy the snippets you want into `<your-vault>/.obsidian/snippets/` and enable each:

| File | What it styles |
|---|---|
| `nemukai-callouts-custom.css` | Domain callouts (project, ship, wip, ...) |
| `nemukai-media-gallery.css` | Movies / Shows / Games poster gallery |
| `nemukai-media-editor.css` | Rating editor modal + Insights blocks |
| `nemukai-media-connections.css` | Movies "Connections" tab dashboard |
| `nemukai-wishlist.css` | Wishlist product grid |

All feature snippets depend on `--nk-*` tokens — install the Nemukai theme **or** `nemukai-tokens.css` first.

### Customize via Style Settings

Open **Settings → Style Settings → Nemukai**. Four knobs:

- **Primary accent** — any hex color. Default Kai teal `#1F869A`.
- **Font set** — Archive / Coastal / Studio.
- **Media gallery columns** — 4, 5, or 6 posters per row.
- **Texture grain opacity** *(theme only)* — 0 to 0.2.

### Set up features

- [Movies & Shows Dashboard](movies-list/README.md) — poster grid, 5-metric ratings, TMDB alignment
- [Wishlist Gallery](wishlist/README.md) — product cards with category filters
- [Custom Callouts](callouts/README.md) — hairline-styled callout types

## Repo structure

```
obsidian-nemukai/
├── README.md                             <-- you are here
├── CHANGELOG.md                          <-- version history
├── LICENSE                               <-- MIT
├── theme/
│   └── Nemukai/
│       ├── manifest.json
│       └── theme.css                     <-- full custom theme (Path A)
├── snippets/
│   ├── nemukai-tokens.css                <-- tokens-only (Path B)
│   ├── nemukai-callouts-custom.css       <-- domain callouts
│   ├── nemukai-media-gallery.css         <-- movies/shows/games grid
│   ├── nemukai-media-editor.css          <-- rating modal + insights
│   ├── nemukai-media-connections.css     <-- connections dashboard
│   └── nemukai-wishlist.css              <-- wishlist grid
├── movies-list/
│   ├── README.md
│   ├── Shows.md
│   └── examples/
├── wishlist/
│   ├── README.md
│   ├── Wishlist.md
│   └── examples/
├── callouts/
│   └── README.md
├── docs/
│   ├── design-tokens.md                  <-- full color/typography reference
│   └── philosophy.md                     <-- design principles
└── screenshots/
```

## Design

The visual language is **Reef** — warm neutrals with ocean-cool accents.

- **Hairlines over fills** — 0.5px borders, transparent surfaces
- **Serif for display, sans for body** — three curated font pairs
- **Warm base, cool accents** — paper-like backgrounds, teal / green / coral highlights
- **Restraint over decoration** — every visual element earns its place

All design tokens (`--nk-*`) are defined in one place: `theme/Nemukai/theme.css` (or `snippets/nemukai-tokens.css` on Path B). Feature snippets only consume tokens — they never define their own colors.

Read more in [docs/philosophy.md](docs/philosophy.md). Full color reference in [docs/design-tokens.md](docs/design-tokens.md).

## Customization

### Accent color, font set, gallery size

Use **Style Settings → Nemukai**. No file editing needed.

### Deeper changes

Edit the `:root` block in `theme/Nemukai/theme.css` (or `snippets/nemukai-tokens.css`). All feature snippets reference `var(--nk-*)` — change a token once, it propagates everywhere.

### Adding a custom callout type

See `snippets/nemukai-callouts-custom.css` — add your type to each selector group, define `--cal-accent`, and add the `::before` content label.

### Wishlist currency

Defaults to INR. See [wishlist/README.md](wishlist/README.md#5-customize-the-currency).

## Credits & influences

- Japanese minimalism — restraint, natural materials, quiet confidence
- Coral reef ecosystems — the color language and naming convention
- [Minimal](https://github.com/kepano/obsidian-minimal) by [@kepano](https://github.com/kepano) — the foundation of v0.1

## License

[MIT](LICENSE) — use it, modify it, share it.