Brand Colors

We use the traditional Japanese colours: 紺 (kon), 桃 (momo), 桜 (sakura), 紅 (kurenai), 鳥の子 (torinoko)

The two icons are the palette in miniature. icon.svg is a kon ground with a momo [SECTION] header, torinoko keys and sakura values; icon-light.svg is the same drawing on a sakura ground, with kon ink and kurenai values. Every colour below comes from one of those two, or is the nearest traditional colour that keeps its role readable.

Light Mode Colors:

:root {
  /* Surfaces */
  --bg-light: #FBFAF5;              /* 生成り kinari — the page */
  --surface-light: #FEDFE1;         /* 桜 sakura — code blocks and panels */
  --raised-light: rgb(15 37 64 / 3%);   /* 紺 kon, a wash — cards */
  --line-light: rgb(15 37 64 / 12%);    /* 紺 kon, a wash — hairlines */

  /* Ink */
  --text-light: #0F2540;            /* 紺 kon */
  --muted-light: #4A5F7A;           /* 紺 kon, lightened */
  --faint-light: #617288;           /* 藍鼠 ainezu, darkened */

  /* Accent */
  --accent-light: #CB1B45;          /* 紅 kurenai */
  --accent-strong-light: #A81438;   /* 紅 kurenai, darkened — hover */
  --on-accent-light: #FBFAF5;       /* 生成り kinari — text on the accent */

  /* Syntax, on the sakura surface */
  --section-light: #0F2540;         /* 紺 kon — [SECTION] */
  --key-light: #716246;             /* 媚茶 kobicha — keys */
  --string-light: #C3183F;          /* 紅 kurenai, darkened — strings */
  --number-light: #165E83;          /* 藍 ai — numbers */
  --keyword-light: #6F3381;         /* 菖蒲 ayame — true, false, null */
  --comment-light: #595857;         /* 墨 sumi — comments */
  --punct-light: #4A5A6E;           /* 紺 kon, lightened — braces, colons */
  --dim-light: #5F646E;             /* 藍鼠 ainezu, darkened — prompts, line refs */
  --error-light: #C9171E;           /* 深緋 kokiake — carets and errors */
}

Dark Mode Colors:

:root {
  /* Surfaces */
  --bg-dark: #192236;               /* 紺 kon — the page */
  --surface-dark: #0F2540;          /* 紺 kon — code blocks, the icon ground */
  --raised-dark: rgb(255 255 255 / 4%);     /* a wash — cards */
  --line-dark: rgb(154 182 214 / 16%);      /* 藍鼠 ainezu, a wash — hairlines */

  /* Ink */
  --text-dark: #E7EEF7;             /* 胡粉 gofun, cooled */
  --muted-dark: #9DB0C6;            /* 藍鼠 ainezu, lightened */
  --faint-dark: #8092AA;            /* 藍鼠 ainezu, lightened */

  /* Accent */
  --accent-dark: #F596AA;           /* 桃 momo */
  --accent-strong-dark: #F7AABB;    /* 桃 momo, lightened — hover */
  --on-accent-dark: #0F2540;        /* 紺 kon — text on the accent */

  /* Syntax, on the kon surface */
  --section-dark: #F596AA;          /* 桃 momo — [SECTION] */
  --key-dark: #DAC9A6;              /* 鳥の子 torinoko — keys */
  --string-dark: #FEDFE1;           /* 桜 sakura — strings */
  --number-dark: #83CCD2;           /* 白群 byakugun — numbers */
  --keyword-dark: #A99CD6;          /* 藤 fuji, lightened — true, false, null */
  --comment-dark: #8496AD;          /* 藍鼠 ainezu, lightened — comments */
  --punct-dark: #8FA3BC;            /* 藍鼠 ainezu, lightened — braces, colons */
  --dim-dark: #8496AD;              /* 藍鼠 ainezu, lightened — prompts, line refs */
  --error-dark: #FF8F9E;            /* 紅 kurenai, lightened — carets and errors */
}

The five, at a glance

	Romaji	Hex	Where it shows up
紺	kon	#0F2540	The icon ground. Dark surfaces, and all the ink in light mode.
桃	momo	#F596AA	The [SECTION] header. The accent in dark mode.
桜	sakura	#FEDFE1	Nested values. Strings in dark mode, the code surface in light.
紅	kurenai	#CB1B45	Values in the light icon. The accent in light mode.
鳥の子	torinoko	#DAC9A6	Keys in dark mode.

Three more carry the roles the five do not cover. 白群 (byakugun) #83CCD2 and 藤 (fuji) #8B81C3 colour numbers and keywords in dark mode; 藍鼠 (ainezu) #6E7B8B is the blue-grey that the muted text and hairlines are drawn from.

Notes

• Every pairing above clears WCAG AA (4.5:1) against the surface it is named for. The tightest are 紅 strings and 媚茶 keys on the sakura surface, both around 4.8:1, so neither is the place to go paler.
• The pairs are not interchangeable. The dark syntax colours are tuned for the kon surface and the light ones for the sakura surface. Moving a single value across modes is what usually breaks that contrast — 紅 #CB1B45 reads at 5.3:1 on the light page but only 4.5:1 on the sakura surface, which is why strings there use a slightly darker #C3183F.
• Where a colour is lightened or darkened, the comment says so rather than inventing a name for the tint. The traditional colour is the one in the table.

Files

svg/icon.svg, png/icon.png	The mark on its kon ground. Use on dark.
svg/icon-light.svg, png/icon-light.png	The same mark on sakura. Use on light.