This section covers the company, its values, its voice, the name, and the mark.
General Translation
This deck covers the brand, the design system, the current state of the site, and the plans for the next quarter. It was prepared in September 2026.
Reputation
Machine translation has a reputation for low quality. GT needs to be seen as high quality. The product delivers native-level translation quality at high speed, and the brand has to communicate that on every surface, at every size, and in every script.
Why the redesign
Three reasons drove the redesign of the site. Each row states one reason and the requirement that followed from it.
NASA's composite of the whole planet. The company sells to every part of it, so the brand section starts at that scale.
Open source and platform
GT builds both the open-source libraries and the closed platform. The positioning is the Vercel model applied to localization. Because GT owns the whole stack, it can deliver consistent translation quality across a company's apps, docs, and websites, with integration time measured in hours.
Audience
Engineers use GT and executives buy it. Most users see GT in code before they see the website.
Values
The rest of this deck applies these five values to type, color, lines, and surfaces.
One decree carved in three scripts so every reader could read it. General Translation does the same for software: one source text, every language.
Brand personality
The brand is both creative and technically rigorous. It delivers on time, exceeds the specification, and stays aware of what customers value.
These readings come from the shipped system and will be confirmed or adjusted in the identity project.
Writing style
Copy has the register of a technical specification. The same five rules apply to the site, the docs, the blog, and every social post.
Visual references
The primary influence is International Style typography and grids, with Art Deco as a secondary influence. The visual vocabulary is Swiss grids, blueprints, and rectangular forms with no rounded corners. Water and the ocean are a recurring theme. The only texture is an ordered dither.
The companies referenced for craft are Vercel, Resend, Stripe Press, Linear, and Cursor. The photographs come from Wikimedia Commons and are shown in grayscale.
The name
The name General Translation was chosen for three reasons, in priority order.
The first is ambition. As with General Motors or General Electric, the name signals the intent to be the leading company in the category.
The second is generality. General AI models understand context and follow instructions better than specialized translation models.
The third is distinction. Most other localization companies have names beginning with L.
The mark
The monogram uses the same doubled-line construction as the rest of the system. It renders in a single color: black on white or white on black. It uses no additional colors, gradients, or shadows. On dark surfaces the mark inverts. The mark ships only as vector geometry.
Locadex has its own mark under the same rules. It uses one color and appears only where it has a function.
This section covers color, type, scripts, lines, diagrams, dither, illustration, and motion.
Small sizes
Developers see the brand in a terminal as often as on the website. The mark has to work as a favicon, in a CLI banner, in a README header, on an npm page, and on the website.
Color
The palette is four base colors and one accent color. Text is set in ink, paper, or titanium. Every hairline is the text color at a lower opacity. The accent appears on small elements such as active states and diagram highlights. It is never a fill for large areas. Depth comes from lines and texture. Shadows are not used.
#86a8ff on dark
The opacity steps are the same in both themes and are drawn here in the current theme's ink. The site currently uses three blues: #2f5ce0 in the landing engine, #3b82f6 in the docs, #2563eb on the blog. One should be chosen before the handoff.
Typography
Inter is the one typeface for display, interface and text, loaded as one variable file with an optical size axis. Headings use weight 500 at most. Long-form text and documentation are set at weight 400. Monospace is used only for code, tokens, and technical labels.
This is the working typeface going into the identity project. It is not a final decision. Alternatives remain open if they cover the required scripts.
Scripts
Headlines, interface text, and marks have to hold up in CJK, RTL, and Indic scripts as well as Latin.
Type scale
Each page uses one type scale. Headings use weight 500 with negative letter-spacing. On desktop the hero headline scales with the viewport up to 3.7rem. The accent color is never applied to a heading; emphasis is a doubled underline in the text color. Below 720px the hero is fixed at 2.5rem and every other size comes from the token ladder shown here.
Line rules
Every line is drawn exactly once. Layout structure comes from 1px hairlines. The row draws every structural line, and a cell never draws a border parallel to a row seam, so no line is doubled. Where two hairlines cross, a small registration cross marks the intersection. It is the only decorative element allowed at a junction.
A lint script reconstructs every rule from computed CSS and reports doubled lines, missing seams, self-stacked borders, and low-contrast seams before a page ships.
The doubled line
The standard connector in diagrams is one SVG path stroked twice: a wider stroke in the text color, then a narrower stroke in the background color on top. The result is two parallel 1.5px lines with a 3px gap that follow any curve. An animated pulse is a third copy of the same path in the accent color. Where paths join, the second stroke merges the junction into one clean pair.
The gauge is 1.5px, the gap is 3px, and the strokes do not scale with the drawing. Draw order is all outer strokes, then pulses, then all inner strokes.
A sixteenth-century practice sheet where the letterforms are the whole design. The design system makes the same choice: type carries the identity.
Diagrams
Every diagram is an inline SVG drawn in one grammar. The rows state the grammar, and the four examples below follow it.
Dither
Tonal ramps use ordered dither instead of opacity. The two screens are the 4 by 4 Bayer matrix and its 8 by 8 recursion, which gives 65 linear tone levels. Coverage tiers are nested, so adjacent regions at different tiers form exact ramps. Cells are square device pixels and stay 1-bit at any zoom level. This is the brand's only texture.
The ramp is drawn with the 8 by 8 screen and runs from solid ink on the left to paper on the right.
The 8 by 8 screen is built from four offset copies of this 4 by 4 threshold matrix.
Isometric illustration
All illustrations use one isometric projection. The projection is axonometric at 30 degrees, and the light comes from the upper left. Three faces are visible, shaded at 4, 9, and 15 percent. The whole family uses square corners. Marks are rendered as alpha masks so they take the surface color, and the only animated effect is a Bayer-dithered highlight sweep.
project(x, y, z) = [(x - y) cos 30, (x + y) sin 30 - z]
Animated text
Text is the primary animated element. The signature animations are built from characters. A headline breaks into individual glyphs and reassembles as the same sentence in the next language, using the same number of particles. A particle field of characters from eight writing systems resolves into the word for language in each script in turn.
Motion rules
Anti-patterns
None of these appears on any
This section covers the production site page by page, its measurements, and its shaders.
Public surfaces
The brand is live on these surfaces today. The surface index in the viewer, under Surfaces in the toolbar or the R key, lists each one with a preview and a link. prototemplate.com holds the brand directives and every exploration. glyphfield.com holds the design and motion tooling.
The production site
The site shown is the production build in September 2026. generaltranslation.com was rebuilt page by page on one layout system: a single ruled column, hairline seams between sections, registration crosses at junctions, and one display face at one weight. The Dossier direction on prototemplate.com was the reference, and the production codebase set the constraints.
Dark mode
Dark mode is a token remap. Background tokens map to black, text tokens map to white, and hairline opacity increases so a 1px seam stays visible between two black surfaces. Both captures below are fixed files and do not follow the deck theme.
Pricing and enterprise
Contact and report card
A working light in a storm, built to be read at a distance in any weather. The site is held to the same standard, in light and in dark.
Details
Each crop is cut from the same pixel region of the light and the dark capture and follows the deck theme. No text is smaller than it is on the site.
Three close-ups
These three crops are shown at 1.4 times their size on a 1440px screen. The hairline under the header, the rail and the arms of the cross are 1px on the site, and at this size each line is visible on its own.
The install panel is from the docs. Its plate is light in light mode and near-black in dark mode, and the deck's own code panel rule does not apply to it.
Layout measurements
Every page uses these measurements, so a new page can be checked against them.
The horizon field
The careers page hero is the horizon field, a WebGL gravitational-lensing shader. Thirty locale names orbit it once every 130 seconds, and it fades in from blur over 0.9 seconds. A static fallback disc renders if WebGL is unavailable or the shader has not loaded after 2.5 seconds, and reduced motion renders one frame. The ring keeps its colors in both themes. The prototemplate version exposes lens, dither, and redshift as toggles.
This section covers the docs: 393 pages in eight sections served in eight locales, the routing that sends a mistyped URL to the nearest page, and the markdown twins published for agents.
The docs
The docs have 393 pages in eight sections and are served in eight locales from one English source. The palette is neutral gray with hairlines instead of shadows and one accent color for the active sidebar row and the table-of-contents indicator. Sidebar indentation is drawn as vertical rails, and the controls sit in one floating toolbar.
The palette follows Vercel's Geist grays. The sidebar rails use Fumadocs' own table-of-contents indicator technique, related pages follow the Next.js docs convention, and the markdown versions follow llmstxt.org.
Nearest-page routing
A mistyped docs URL resolves to the nearest page. The resolver, merged on September 8, tries four rungs in order and then shows suggestions. A difference in version numbers is never treated as a typo.
Resolved /docs/react/reference/hooks/use-locale
The full dictionary is printed small enough to need a magnifier, and it is still complete. The docs are built in the same order: the set is complete before it is made compact.
Markdown twins
Developers and coding agents read the same docs. Every page is also published as markdown, and the Copy page menu can open it in Claude or ChatGPT.
Currently only the English versions are prebuilt. The seven translated locales are covered by a fix now in review.
This section covers the blog, its covers, the content rules, and the brand assets outside the site.
Blog index
The index uses a split-flap display: two tickers cycle the word for news through fifteen languages above and below the headline. The changelog is a horizontal strip of release cards. Below the changelog, posts are listed in a card grid and filtered by four categories: Engineering, Craft, Community, and News.
Generated covers
Posts without a cover image get a generated one: a keyword from the title (SEO, Next.js, i18n, React) or the package name of a release, rendered through a ten-tier Bayer dither ramp on a 400 by 225 canvas and rotated by an angle derived from the slug. Two posts have designed covers, both dithered compositions with a lockup. The rest use generated type covers.
A page of the Prashna Upanishad, copied by hand so the text could travel. The company's writing exists to travel the same way, between scripts and readers.
Designed covers
Designed covers and the reel use one GPU material from Glyphfield, gem smoke, driven by two color uniforms: a dark base and a brand color. Partner covers change only the brand color and the lockup, so the partner color is each page's single accent.
Blog content
The blog relaunched in August 2026 with an open-source grant program: $15,000 across fifteen developers, each with platform credits, and a profile of each grantee to follow. The first profile is Fuma Nama, the author of Fumadocs, which the docs run on.
The copy test
Every line of copy states a number or a mechanism. The rule from the product video review: if a line could appear unchanged in a competitor's video, cut it. The same test applies to site copy, docs introductions, blog posts, README and CLI text, and posts on X, LinkedIn, GitHub, and Discord.
Site copy and founder posts
The two differ in case, length, and person. Both follow the same rule on evidence and pass the same three checks before publishing.
Brand assets outside the site
The X banner uses the sign-in page's dithered globe and glyph field next to the customer logo grid. The open-source announcement reel cuts between twelve shader materials at 0.2 seconds each and ends on the grant amount. Both were produced with Prototemplate and Glyphfield. The social share card still uses pure black (#000000) and weight 800, outside the current rules, and has not been updated yet.
This section covers the developer experience: source code as the source of truth and translation as a build step.
Translation as a build step
Source code is the source of truth. Text is written in the components that render it, and translation runs as a build step. There are no translation keys, no string files to maintain, and no separate translation management system. Every locale ships with the deploy. The quality of this workflow is what builds the reputation.
<T>
<h1>Hello, <Var>{user.name}</Var></h1>
</T>
The first global network, drawn as the routes that carried messages between continents. Developer experience is the route a string takes from source code to every locale.
The CLI
The CLI is the gt package, the same name as the library family. Four commands and one component take a project from a fresh install to a production build in every configured locale. The same CLI also translates JSON, YAML, Markdown, and MDX files in projects that do not use the libraries.
npm i -D gt
npx gt init
npx gt translate
This section covers prototemplate.com, the design lab and knowledge base, and glyphfield.com, the tooling behind it.
Prototemplate
Prototemplate is the General Translation knowledge base at prototemplate.com. It serves the brand book, the brand directives, the repository documents, the agent skills, the mark explorations, the design lab and the archive as live pages in one viewer; every direction is a built page, and there are no mockups.
The knowledge base
Every page on the site is registered once, in nine groups and 95 entries, and the sidebar, the search, the index panel, the preview layer and the sitemap read that one list. The sidebar shows seven of the nine groups; Libraries and Brand sections appear only in the index panel and are drawn here with the darker edge.
Skills and marks
Both pages run in the same viewer and read pure data files. The skills page is built from the frontmatter of every published SKILL.md; the marks page reads nine SVG files and their construction overlays. Both crops follow the deck theme.
The viewer shell
Every route renders inside one frame: a sidebar, a toolbar, the stage and a progress line. The shell owns the state and the route supplies the content. The deck is the one exception and carries its own viewer, on the same grammar, in an iframe at /deck.
The shell in use
Three states of the gallery route at 1440 pixels, each cut from a capture at two times device scale to the region that carries it. Every crop follows the deck theme.
The line law in chrome
Every rule the shell draws is 1px, drawn once, in one of three roles, and the weights carry meaning. Where two components touch, one of them owns the seam and draws it.
Compare and the presenter
Two review tools sit beside the knowledge base. Compare puts two directions side by side; the presenter walks through the redesign with every prototype live.
The Dossier
The Dossier is the completed direction and the reference for the identity in application. Its home page lists the supported frameworks inside the hero terminal. Its enterprise page numbers each compliance control and sets the plan terms and sign-on controls as ruled tables.
Directions
Seventeen directions are registered in one file, src/lib/directions.ts: thirteen explorations, three site concepts and the shipped site. The gallery, the presenter, compare and the sitemap all read that list.
Toolchain is the single source of truth for the shared vocabulary. The forks import its sections and diagrams and re-skin them by rescoping one root class. The three marked thumbnails are the site concepts; Dossier is the reference, and every thumbnail follows the deck theme. The shipped site, the seventeenth direction, has no thumbnail here. It is rebuilt page for page at /d/production, and the Website section shows it.
Hokusai's print came from carved blocks, so the same image could be pulled again without change. Prototemplate and Glyphfield hold the brand's reusable parts.
The archive
Eleven versions were retired from review on July 30, 2026. When their code left the tree, each was kept as a capture at its own address with the route as it was, its source and date, and the commit that last held the code, so any of them can be restored.
Shared engines
Twelve engines run live on the docs page under the readme, each on a plate with the call that mounts it. Every engine mounts on first view, runs on screen, pauses off screen, and renders one frame under reduced motion. The plates below are cut from the page at two times device scale. Four are cropped to the engine itself.
The build log
The readme on /docs ends with the build log, six sections in reading order. Each engine runs on a plate under its heading, above its source path and the snippet that mounts it.
Glyphfield
Glyphfield is an open-source, local-first brand studio at glyphfield.com, released under the MIT license. One identity supplies the marks, colors, type, voice and defaults to fifteen tools in five categories and to a shared library of 134 live materials. General Translation is one of nine built-in identities, and the two sites share the Bayer dither engines. Projects stay in the browser, and the generation API keeps nothing.
Fifteen tools
Books and templates
Two of the fifteen tools produce finished documents from the identity alone. Both are shown here on the starter identity, and both follow the studio's own light and dark themes.
134 live materials
The shader library is one quality-sorted catalog shared by the Design Lab and the animation tool. Brand colors seed every material; a new composition opens on gem smoke, the material behind the blog covers and the reel. The six tiles are live renders from the library.
The agent API
Agents and the studio share the identities, the catalog and the generation language. An agent reads llms.txt, generates SVG over HTTP, or drives the live studio in the browser.
This section covers what has shipped, what is open, the identity project, the fixed points, and the success criteria.
Current status
Each surface is listed with its state on September 9, 2026. Where fixes are open, the redesign is live on that surface and the open items are named.
An engraved compass rose from a 1748 chart, the instrument for setting a course. This section lists what has shipped, what is open, and the two points that do not change.
The identity project
The project runs from September 1 to November 27 in five stages: research, definition, identity design, visual language, and delivery. Constraints and a test list are stated once at the start. The marker is September 9, 2026, the date of this deck.
Fixed points
The identity project works from first principles with two fixed points, and everything else is open. No decision is protected by the effort already spent on it; a proposal is judged on the success criteria alone.
Fixed
The company's legal name does not change.
The names customers install and import do not change.
import { T } from 'gt-next';
npx gt translate
Open
Success criteria
Visitors perceive quality before reading any copy, and all five tests pass. Two tests run against the current system today and are shown below.
generaltranslation.com, prototemplate.com, glyphfield.com