---
title: Ninjutsu Book 木隠
format: 50-start
sort: 100
showcase: true
categories: ["Web Design", "Web Development", "Writing"]
intro: My Ninjutsu Book 木隠 was first launched in 1999 and is my oldest and most visited website. The current design is the 9th iteration. In 2022 I translated it to English to make it accessible to a larger readership.
description: I redesigned my Ninjutsu Book 木隠 in 2022.
image:
  src: /assets/images/projects/thumbnails/kogakure-v9.jpg
  aspectRatio: 1.25
more:
  text: See Showcase of Version 9
  link: /projects/kogakure-v9/
---

<ProjectIntro>
At the beginning of 2022, I decided to unify my brand and redesign my [Ninjutsu Book 木隠](https://www.kogakure.de/en/). I used the existing brand design and created the website based on that design.

For the first time in its 22-year-long history, I created a complete translation of the content into the English language.

<MoreLink href="https://github.com/kogakure/website-11ty-kogakure.de" text="Source Code" />
</ProjectIntro>

---

## Color Palette

### Light Design

<ColorStack>
	<ColorSwatch color="#E7E6E4" title="Light Background" />
	<ColorSwatch color="#0E0D0C" title="Light Foreground" />
	<ColorSwatch color="#7B9E4C" title="Accent" />
</ColorStack>

### Dark Design

<ColorStack>
	<ColorSwatch color="#1B1A18" title="Light Background" />
	<ColorSwatch color="#E7E6E4" title="Light Foreground" />
	<ColorSwatch color="#7B9E4C" title="Accent" />
</ColorStack>

## Font

<DisplayBox>
	![Secuela Variable Italic](/assets/images/projects/kogakure-v9/secuela-variable-regular.svg)
</DisplayBox>

<DisplayBox>
	![Secuela Variable Italic](/assets/images/projects/kogakure-v9/secuela-variable-italic.svg)
</DisplayBox>

## Illustration

![Bamboo Illustration](/assets/images/projects/kogakure-v9/kogakure-v8-illustration.jpg)

## Homepage

![Homepage Light](/assets/images/projects/kogakure-v9/kogakure-v9-homepage.jpg)

![Homepage Dark](/assets/images/projects/kogakure-v9/kogakure-v9-homepage-dark.jpg)

## Subpages

<div class="projects-detail-medium">

![](/assets/images/projects/kogakure-v9/kogakure-v9-essay.jpg)

![](/assets/images/projects/kogakure-v9/kogakure-v9-recommendations.jpg)

</div>

<div class="projects-detail-medium">

![](/assets/images/projects/kogakure-v9/kogakure-v9-colophon.jpg)

![](/assets/images/projects/kogakure-v9/kogakure-v9-glossary.jpg)

</div>
