Branding: Gokaizen website¶
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.
| Applications | Website and these docs | |
|---|---|---|
| Default appearance | Follows the viewer's system setting | Light, with dark offered as a choice |
| Typeface | System font stack | Geist and Geist Mono, self-hosted |
| Corners | Square, with the profile deck's clipped tile | Rounded (6–28 px) |
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.
Three voices¶
The website uses one typeface in three registers, and which register a thing is set in says what kind of thing it is.
| Voice | Face | Used for |
|---|---|---|
| Display | Geist, 600, tight tracking | Headlines, section titles |
| Text | Geist, 350–400 | Section descriptions, body, buttons |
| Technical | Geist Mono, uppercase, tracked | Eyebrows, indices, figure captions, badges, table headers |
Two of those are decisions rather than defaults.
A section description is a deck, not quieter body text. It used to be the title turned down —
same face, smaller, greyer, lighter — three dials all pointing the same way, so the pair read as
one thing fading out. It is now larger (to 28.8px), darker (#3D434A at 9.51:1, where the body
sits at 6.23:1) and lighter in weight (350 against the title's 600). The weight is what does the
work: it lets the description be dark enough to hold its own while still reading as another voice.
A button is an action, not a label. Buttons were set in the technical voice — mono, uppercase, tracked — which is the same setting as the eyebrows and the figure captions, so the one element a reader is meant to act on looked exactly like a caption. They are now sentence-case Geist, which is both larger on screen (13.1px caps against 11.0px) and about 7% narrower on the longer labels, because uppercase removes the ascenders and descenders that let a word be recognised by shape.
Motion¶
Motion on this site is used to show sequence and to confirm a reader's own action. It is never decoration for its own sake, and nothing moves that a reader did not scroll to or point at.
| What | When | Why |
|---|---|---|
| Headings arrive in sequence | On reveal | Eyebrow, title, description, 90ms apart — the order they are read in |
| The section rule draws | On reveal | The section is ruled off as you arrive at it |
| A line sweeps each numbered item | On reveal, staggered | Carries the eye along the list rather than presenting it whole |
| The pipeline rail draws | Scroll-linked where supported | The sequence advances as you move through it |
| Stage markers light in turn | With the rail | The numbers arrive in order |
| Lines redraw under the pointer | On hover and focus | Confirms what is being pointed at |
Two rules govern all of it.
Nothing is hidden by the stylesheet alone. Every element that animates in is revealed at runtime by the one script; with JavaScript off, blocked or broken, the page renders complete and static. A failed script must never produce a blank page.
prefers-reduced-motion is honoured in both directions. Scroll-linked animation is wrapped in
no-preference — opt-in by absence of objection rather than opt-out — while transitions and the
logo band have explicit reduce branches. The band is replaced by a static grid rather than
merely slowed.
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.