Skip to content

company / brand

The mark, and everything under it.

The word, the logo, the colors, the type, the line, and the rules for using them. Underneath, the design system this site ships with, open on purpose.

01

The word

気配

Kehai, noun. A presence you sense without seeing. The kanji is the mark, the philosophy, and the only Japanese type on any page: Noto Sans JP 500, never body text, never another weight. It's the one element allowed to take the accent at display size, and it earns the one ceremonial color we own, the hanko red, when stamped.

気 ki, air, spirit · 配 hai, to arrange, to distribute

03

Color

The five colors to name in a document. The tokens the site is built from follow them.

Shikon, light theme
#5c3b7e
Shikon, dark theme
#b9a3e0
Ink
oklch(0.141 0.005 285.823)
Paper
#ffffff
Hanko
#c83e2d

One accent, Shikon violet, one shade per theme. Chart series separate by weight, dash, and opacity, never by a second hue. Cards lift with a border, not a shadow. Text contrast never drops below 4.5:1.

dark theme, primary

background
oklch(0.141 0.005 285.8)
card
oklch(0.21 0.006 285.9)
primary
#b9a3e0
muted text
oklch(0.705 0.015 286.1)
success
#4ade80

light theme

background
#ffffff
muted surface
oklch(0.967 0.001 286.4)
primary
#5c3b7e
foreground
oklch(0.141 0.005 285.8)
success
#147038

Hanko #c83e2d is ceremonial, not semantic. It appears only as the stamp beside the kanji and on "never" markings. It is not an error color and never colors text longer than a stamp.

04

Typography

Three faces, three jobs. Geist for everything, Geist Mono for numbers, identifiers, data, and code (tabular figures when numbers compare), Noto Sans JP 500 for the kanji only.

Sentence case, always.h1/h2 · Geist 600 · -0.03em
Section titles carry the argument.h3 · Geist 600 · -0.02em
Body copy is zinc, never pure white, line height 1.65, and wraps pretty. Links get a dotted violet underline.body · Geist 400 · 15.5px
18,240 visits · a4f09c2e · GET /api/v1/exportdata · Geist Mono · tabular
the eyebroweyebrow · Mono · 0.14em caps

05

The message

Web analytics without the noise.

the tagline · under the logo, in a bio, wherever one line is needed · as written, with the period

Sentence case headings, ending in a period. A step title inside a form is the exception: it is an instruction, not a sentence. No em or en dashes; a period, comma, colon, or parentheses does the job. Contractions, active voice, American spelling, straight quotes. Almost no exclamation marks, no emoji. Never claim nothing leaves the server: the technical claims are no analytics cookies or visitor identifiers in browser storage, visitor and visit codes that start fresh each UTC day, and measured never mixed with modeled.

bannedleverageseamlessrobustpowerfulunlockelevatestreamlinecutting-edgenot just X but Y

06

Please don't

  • Recolor or restyle the logo, or set the kanji in any color but Shikon.
  • Use the brand in any way that suggests endorsement of a third-party product or service.
  • Republish page content in full without permission. Quoting up to roughly 150 words with attribution and a link is fine.
  • Train AI models on Kehai content without prior written agreement. See our llms.txt.

07

Spacing and grid

Twelve columns, 1240px container, 24px gutters, 40px page margin. Vertical rhythm runs on a 4px base scale; sections breathe at s11, blocks at s8, elements at s5 and below.

--s28px
--s416px
--s524px
--s632px
--s856px
--s1096px
--s11120px · section

radius: sm 0.375rem · md 0.5rem · lg 0.625rem · xl 0.875rem

08

Components

Get startedSGhost
buttons · 46/44px · r-md
primary carries its kbd badge

Visitors are salted hashes, and the link is a dotted underline.

inline link · dotted, offset 4px
The checkmark bullet: filled violet circle, ink check, 16px.
bullet · check in circle
  • The neutral bullet: a middot in a 6px column with a 10px gap, so the marker sits 16px from the text edge. For lists where a checkmark would be wrong, which on the legal pages is most of them: a check beside "Non-payment" reads as approval.
bullet · neutral
NDJSONlivenever
chip · live dot · hanko stamp
card, border-lifted
In dark theme the border is the entire edge. No shadows, no gradients on surfaces.
card · 1px border, r-lg

09

Motion

  • aControls answer with short transitions. Live indicators and loading rings move while they have something to say.
  • bThe hero mark fades in and the navigation settles into place over 420ms. The headline and actions are present from the start.
  • cFour product illustrations build in sequence, the example hash resolves, and the installation snippet types once. Selected homepage content and the final call to action enter once. Forms, tables, and FAQ answers stay still.
  • dThe Japanese mark follows the scroll on desktop, and the film gently moves into place. Headline and actions are ready from the start.
  • eA page heading does not move. Reduced motion shows complete content immediately and disables parallax, typing, illustrative animation, entrances, and control transitions, while every action remains available.