Branding

How the Gokaizen brand is applied on the public website, and where the website deliberately goes further than the application palette.

The short version

The website extends the Gokaizen identity rather than mirroring the applications. The logo and the orange are unchanged and still come from the Gokaizen brand guidelines, which remain the single source. Three things are specific to the website, and each is a deliberate decision rather than drift. This documentation site borrows the website’s structure, typeface and rounded corners, but keeps the company palette from the brand guidelines, so the brand colours are shown as they are.

Why light by default

A front door is read once, quickly, often on a phone in daylight, and frequently forwarded to somebody who has never heard of us. Light is the register that reads as open and current in this industry, and it keeps the photography — bright videowalls, lit server rooms — as the darkest thing on the page, which is where the eye should land.

Dark is available from the control in the header and is remembered on that device. It is not driven by the viewer’s system setting: the site is light at every setting unless somebody chooses otherwise. That is a deliberate departure from the usual advice, and it is a one-line change in the site’s stylesheet if the decision is ever revisited.

Why Geist

The brand guidelines define no typeface and ask for the system stack, which is the right call for an application: it loads instantly and looks native on every device. A marketing site is judged on how it looks, and the system stack means it looks like a different site on every operating system.

Geist is used for prose and headings, and Geist Mono carries every label, figure, section number and navigation item. That monospace voice is the command-center register the whole site is written in, and the two faces are a designed pair rather than a sans and an unrelated mono.

Both are self-hosted, latin subset only, about 52 KB for the pair. Nothing is requested from a third party, so the site keeps a strict default-src 'self' Content-Security-Policy.

Colour

Gokaizen Orange #FF3806 is reserved for the logo. Every interface use of orange is one of the deeper variants, because the logo colour does not meet WCAG AA for text.

Light (default)

The surfaces are warm neutrals rather than the applications’ cool greys. On a page dominated by cool photographs of server rooms, a warm ground is what keeps the site from reading as clinical.

Dark (opt-in)

The dark theme is warm as well: the same hue family as the light surfaces, inverted, rather than a cool charcoal. A cool dark theme made the two themes look like two different sites.

The closing band

The call to action at the foot of every page and the footer beneath it form one dark base, in both themes. The band is a warm espresso lifted slightly off the dark theme’s own page, so it still reads as a distinct block when the page around it is dark.

Text, muted text, labels and the primary orange are the dark theme’s values above.

Contrast

Measured, not estimated. Small uppercase labels are held to the same 4.5:1 as body text rather than the 3:1 allowed for large text, because at 0.73–0.92 rem they are the opposite of large. Each card shows the real pairing: the text colour on the background it is used on.

Light

Dark

The last card is why Gokaizen Orange #FF3806 is the logo colour only: as text on white it fails AA, so every interface use of orange is one of the deeper variants above.

The elements carried over from the company profile

• The orange accent rule on photographs, as the deck frames its own images.
• Monospace labels and section numbering, which give the pages the voice of a specification.
• The grade on the photographs. Every image passes through one filter and one scrim. The sources are a mix of architectural renders and site photographs taken over several years on different cameras; without the grade they read as a folder of assets rather than one set.

The deck’s clipped corner was tried and dropped. At the size the website uses photography, it read as dated next to the images; the site uses radii instead and keeps its identity in the orange, the labels and the grade.

Customer logos

The nine customer logos on the website are cut from page 2 of the company profile deck, where six of them are vector artwork in the PDF rather than embedded images. They are stored as white silhouettes with an alpha channel and recoloured by the site — inverted to near-black on the light theme, left white on the dark one — so there is one set of files rather than two to keep in step.

They are optically normalised: each is scaled so that the amount of ink it carries is the same, rather than so that its bounding box matches. Matching boxes is what makes a logo wall look wrong — DHL is a short, very bold wordmark and VISHAY is a tall thin triangle, and at equal box size DHL appears twice as large.

On the page they sit in a continuously scrolling band that pauses on hover. For anyone whose system asks for reduced motion the band is replaced by a static centred grid, not merely slowed: unprompted continuous movement is what that setting exists to prevent.

Logos are shown at a single muted opacity and lift to full strength on hover, so the wall reads as one set rather than as nine competing brands.

Trademarks

Third-party marks remain the property of their owners and are used to identify those organizations, not to imply endorsement.

Changing any of this

The palette is defined once, in the website’s stylesheet, mirroring the values above. Change this page and the stylesheet together — and if a change affects the logo or the orange, change the Gokaizen brand guidelines first, because those govern every Gokaizen application.