Brand guidelines¶

The Gokaizen identity in one place: use these files and values in every application, email and document, so everything looks like it comes from the same company.

Name¶

Write the company name as Gokaizen: capital G, the rest lowercase. Not "GoKaizen", "GOKAIZEN" or "gokaizen". The all-caps form appears only in the logo itself, and lowercase only in domains and email addresses (gokaizen.ai, internal.gokaizen.cloud).

Logo¶

The logo is the GOKAIZEN wordmark in Gokaizen Orange. Always use the files below. Don't retype it in a font or recreate it.

File	Use for	Download
`logo.svg`	Websites and apps (sharp at any size)	logo.svg
`logo.png` (1000 px wide, transparent)	Emails and anything that can't show SVG	logo.png

Do

Keep clear space around the logo of at least the height of the letter O.
Use it at a minimum width of 120 px on screen.
Use it on white, light grey (#F7F7F8) or charcoal (#16181B) backgrounds. The same file works on both.

Don't

Stretch, rotate, outline, add shadows, or change its color.
Place it on busy photos or on Gokaizen Orange backgrounds.

App icon¶

A white G from the wordmark on a rounded Gokaizen Orange (deep) tile. Use it where a square mark is needed: browser tab icon (favicon), app icons, avatars of service accounts.

File	Download
`icon.svg`	icon.svg
`icon.png` (512 × 512)	icon.png

Colors¶

Gokaizen Orange (#FF3806) is the logo color. It's bright, so in interfaces use it for the logo only. Buttons, links and accents use the deep variants below. They have the same hue, are calmer on the eye, and meet the WCAG AA contrast standard for text (4.5:1).

Light mode¶

Gokaizen Orange#FF3806
Logo only

Primary#C8380F
Buttons, links

Background#F7F7F8
Page background

Text#1F2328
Body text

Muted text#5B636E
Hints, labels

Error#B4234A
Errors, warnings

Dark mode¶

Primary#F2683A
Buttons (dark text), links

Background#16181B
Page background

Surface#1E2125
Cards, panels

Text#E6E8EB
Body text

Muted text#9AA1AB
Hints, labels

Error#F7708F
Errors, warnings

Contrast checks¶

Combination	Ratio	WCAG AA (4.5:1)
White text on Primary `#C8380F`	5.2:1	✅
Primary `#C8380F` as link on `#F7F7F8`	4.9:1	✅
Dark text `#16181B` on dark Primary `#F2683A`	5.8:1	✅
Dark Primary `#F2683A` as link on `#16181B`	5.8:1	✅
Text `#1F2328` on `#F7F7F8`	14.8:1	✅
Error `#B4234A` on `#F7F7F8`	6.0:1	✅
White text on Gokaizen Orange `#FF3806`	3.6:1	❌ (why buttons use the deep variant)

Errors use a crimson instead of a classic red, so they don't look like the orange primary buttons.

Copy-paste¶

:root {
  --gk-brand: #FF3806;      /* logo only */
  --gk-primary: #C8380F;
  --gk-background: #F7F7F8;
  --gk-text: #1F2328;
  --gk-muted: #5B636E;
  --gk-error: #B4234A;
}
@media (prefers-color-scheme: dark) {
  :root {
    --gk-primary: #F2683A;  /* use dark text (#16181B) on primary buttons */
    --gk-background: #16181B;
    --gk-surface: #1E2125;
    --gk-text: #E6E8EB;
    --gk-muted: #9AA1AB;
    --gk-error: #F7708F;
  }
}

Typography¶

No brand typeface is defined. Use the system font stack. It looks native on every device and loads instantly:

font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Tone in system messages¶

Emails and SMS sent by Gokaizen applications should:

Name Gokaizen in the subject or first line, so recipients know who it's from.
Say what happened and what to do in plain words, with one clear button.
Tell the recipient what to do if it wasn't them.
End with the standard footer: Gokaizen · This is an automated message, please don't reply.

Product brands¶

Brand	Mark	Color	Used by
Gokaizen (company)	Orange GOKAIZEN wordmark + G icon (this page)	Orange: `#FF3806` logo, `#C8380F` interface	Sign-in (Auth), emails, these docs, company documents
Gokaizen Suite (product)	Green rising-blocks mark	Suite green `#12805C`	Inside the Gokaizen Suite. See Gokaizen Suite branding

Per-application branding¶

Auth: how this palette is applied to the sign-in pages and emails.
Gokaizen Suite: the Gokaizen Suite product brand.